@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply font-inter bg-gray-50 text-gray-900;
}

/* Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-up {
    opacity: 0;
    animation: fade-in-up 0.6s ease-out forwards;
}

.animate-fade-in-left {
    opacity: 0;
    animation: fade-in-left 0.6s ease-out forwards;
}

.animate-fade-in-right {
    opacity: 0;
    animation: fade-in-right 0.6s ease-out forwards;
}

.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-600 { animation-delay: 600ms; }
.animation-delay-800 { animation-delay: 800ms; }
.animation-delay-1000 { animation-delay: 1000ms; }
.animation-delay-1200 { animation-delay: 1200ms; }

.animate {
    opacity: 1 !important;
}

/* Navigation */
nav ul li a {
    @apply transition-colors duration-200;
}

#nav-toggle {
    @apply bg-cyan-500 text-white p-2 rounded-md hover:bg-cyan-600 transition-colors;
}

/* Hero Section */
section#home {
    @apply min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 to-cyan-900 text-white text-center pt-16 relative overflow-hidden;
}

section#home::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-br from-cyan-900 to-transparent opacity-20;
}


.project-button {
    @apply inline-block bg-cyan-500 text-white px-4 py-2 rounded-md hover:bg-cyan-600 transition-colors transform hover:scale-105;
}


section#contact {
    @apply py-20 bg-gradient-to-br from-gray-900 to-cyan-900 text-white;
}

section#contact input,
section#contact textarea {
    @apply transition-all duration-200;
}

section#contact button {
    @apply bg-cyan-500 text-white p-3 rounded-lg hover:bg-cyan-600 transition-colors transform hover:scale-105;
}


#contact-form button[type="submit"] {
    background-color: #06b6d4; 
}

#contact-form button[type="submit"]:hover {
    background-color: #0891b2; 
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    nav ul {
        @apply flex-col space-y-4 p-4;
    }

    section#contact .grid {
        @apply grid-cols-1 gap-8;
    }
}

@media (max-width: 576px) {
    section#home h1 {
        @apply text-3xl;
    }

    section#home p {
        @apply text-base;
    }
}

#whatsapp-float {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    background-color: #25D366;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
#whatsapp-float:hover {
    transform: translateY(-50%) scale(1.1);
}