/* Custom styles that extend Tailwind */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Smooth transition for FAQ toggles */
.faq-content {
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

.faq-content.active {
    max-height: 500px;
    display: block;
}

.faq-toggle .fa-chevron-down {
    transition: transform 0.3s ease;
}

.faq-toggle.active .fa-chevron-down {
    transform: rotate(180deg);
}

/* Animation for back to top button */
#back-to-top {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

#back-to-top:hover {
    transform: translateY(-3px);
}

/* WhatsApp button animation */
.fa-whatsapp {
    transition: transform 0.2s ease;
}

a:hover .fa-whatsapp {
    transform: scale(1.1);
}

/* Hero section image animation */
@media (min-width: 768px) {
    #home img {
        animation: float 3s ease-in-out infinite;
    }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Program card hover effect */
.program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Input focus styles */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* Mobile menu animation */
#mobile-menu {
    transition: max-height 0.3s ease-out;
    max-height: 0;
    overflow: hidden;
}

#mobile-menu.active {
    max-height: 500px;
}