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

        
        body {
            font-family: 'Inter', sans-serif;
            --lime-600: #172e6c;
            --cyan-300: rgb(11, 51, 96);
        }
        /* all pages need this css  */
#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 100;
    transition: opacity 0.3s, visibility 0.3s;
    background: #154c84;

}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 #56d667;
    }

    /* lime-600 with opacity */
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(132, 204, 22, 0);
    }
}

@keyframes pulseShadow {

    0%,
    100% {
        box-shadow: #56d681;
    }

    /* cyan-300 with alpha */
    50% {
        box-shadow: 0 0 0 10px rgba(0, 188, 212, 0);
    }
}

.animate-fadeInUp-child {
    /* Renamed to avoid confusion */
    animation: fadeInUp 0.7s ease-out forwards;
    opacity: 0;
    /* Start hidden if animated independently */
}

.animate-fadeIn-child {
    /* Renamed to avoid confusion */
    animation: fadeIn 0.7s ease-out forwards;
    opacity: 0;
    /* Start hidden if animated independently */
}

.animate-pulse-whatsapp {
    animation: pulse 2.5s infinite ease-out;
}

.section-reveal {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateY(40px);
}

.section-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
  
        body {
            font-family: 'Inter', sans-serif;
            --lime-600: #16336d;
            --cyan-300: #16336d;
        }

        .gradient-text {
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }

        .hero-gradient {
            background-image: linear-gradient(120deg, #f0fdf4 0%, #ecfdf5 50%, #ccfbf1 100%);
        }

        .cta-gradient {
            background-image: linear-gradient(to right, var(--lime-600) 0%, #3498db 100%);
        }

        .scroll-animate {
            opacity: 0;
            transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        }

        .scroll-animate.fade-in-up {
            transform: translateY(30px);
        }

        .scroll-animate.fade-in-up.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .scroll-animate.fade-in.is-visible {
            opacity: 1;
        }

        .scroll-animate.slide-in-left {
            transform: translateX(-50px);
        }

        .scroll-animate.slide-in-left.is-visible {
            opacity: 1;
            transform: translateX(0);
        }

        .scroll-animate.slide-in-right {
            transform: translateX(50px);
        }

        .scroll-animate.slide-in-right.is-visible {
            opacity: 1;
            transform: translateX(0);
        }

        .scroll-animate.zoom-in {
            transform: scale(0.9);
        }

        .scroll-animate.zoom-in.is-visible {
            opacity: 1;
            transform: scale(1);
        }

        .stagger-1.is-visible {
            transition-delay: 0.1s !important;
        }

        .stagger-2.is-visible {
            transition-delay: 0.2s !important;
        }

        .stagger-3.is-visible {
            transition-delay: 0.3s !important;
        }

        .stagger-4.is-visible {
            transition-delay: 0.4s !important;
        }

        .menu-item::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--lime-600);
            transition: width 0.3s ease-in-out;
        }

        .menu-item:hover::after,
        .menu-item.active::after {
            width: 100%;
        }

        .mobile-menu-item {
            transition: background-color 0.2s ease-in-out;
        }

        .mobile-menu-item:hover {
            background-color: #ecfdf5;
            /* lime-50 */
        }

        .floating-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .floating-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }