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

        :root {
            --color-sky-blue: #c2eeff;
            /* A standard sky blue */
            --color-navy-blue: #000080;
            /* A standard navy blue */
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
            /* Smooth scrolling for anchor links */
            overflow-x: hidden;
            /* Prevent horizontal scroll due to animations */
        }

        /* Custom Tailwind Configuration */
        .tailwind-config {
            display: none;
            /* Hide this element, it's just for custom config */
        }



        /* ================== Keyframe Animations ================== */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }

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

        @keyframes scaleUp {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes cardBounce {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }

            100% {
                transform: translateY(0);
            }
        }

        @keyframes cardZoom {
            from {
                transform: scale(0.95);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes stepBounce {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

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

        @keyframes cardFloat {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-3px);
            }

            100% {
                transform: translateY(0);
            }
        }

        @keyframes cardPop {
            0% {
                transform: scale(0.9);
                opacity: 0;
            }

            80% {
                transform: scale(1.05);
                opacity: 1;
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes itemReveal {
            from {
                transform: scale(0.8);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        @keyframes faqFade {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }

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

        @keyframes stepFlow {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        @keyframes formSlide {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }

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

        @keyframes contactFade {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

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

        @keyframes partnerFade {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        @keyframes galleryZoom {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* ================== Base Animation Classes (No Hiding) ================== */
        .animate-fade-in,
        .animate-slide-up,
        .animate-scale-up,
        .animate-zoom-in,
        .animate-card-bounce,
        .animate-card-zoom,
        .animate-step-bounce,
        .animate-card-float,
        .animate-card-pop,
        .animate-item-reveal,
        .animate-faq-fade,
        .animate-step-flow,
        .animate-form-slide,
        .animate-contact-fade,
        .animate-partner-fade,
        .animate-gallery-zoom {
            /* Empty on purpose to prevent hiding */
        }

        /* ================== Active Animation Styles ================== */
        .animate-fade-in.animated {
            animation: fadeIn 1s ease-out forwards;
        }

        .animate-slide-up.animated {
            animation: slideUp 1s ease-out forwards;
        }

        .animate-scale-up.animated {
            animation: scaleUp 1s ease-out forwards;
        }

        .animate-zoom-in.animated {
            animation: zoomIn 1s ease-out forwards;
        }

        .animate-card-bounce.animated {
            animation: cardBounce 0.8s ease-out forwards;
        }

        .animate-card-zoom.animated {
            animation: cardZoom 0.6s ease-out forwards;
        }

        .animate-step-bounce.animated {
            animation: stepBounce 0.7s ease-out forwards;
        }

        .animate-card-float.animated {
            animation: cardFloat 0.8s ease-in-out infinite alternate;
        }

        .animate-card-pop.animated {
            animation: cardPop 0.6s ease-out forwards;
        }

        .animate-item-reveal.animated {
            animation: itemReveal 0.5s ease-out forwards;
        }

        .animate-faq-fade.animated {
            animation: faqFade 0.7s ease-out forwards;
        }

        .animate-step-flow.animated {
            animation: stepFlow 0.7s ease-out forwards;
        }

        .animate-form-slide.animated {
            animation: formSlide 1s ease-out forwards;
        }

        .animate-contact-fade.animated {
            animation: contactFade 1s ease-out forwards;
        }

        .animate-partner-fade.animated {
            animation: partnerFade 0.7s ease-out forwards;
        }

        .animate-gallery-zoom.animated {
            animation: galleryZoom 0.6s ease-out forwards;
        }

        /* ================== Optional Delays ================== */
        .delay-50.animated {
            animation-delay: 0.05s;
        }

        .delay-100.animated {
            animation-delay: 0.1s;
        }

        .delay-150.animated {
            animation-delay: 0.15s;
        }

        .delay-200.animated {
            animation-delay: 0.2s;
        }

        .delay-250.animated {
            animation-delay: 0.25s;
        }

        .delay-300.animated {
            animation-delay: 0.3s;
        }

        .delay-350.animated {
            animation-delay: 0.35s;
        }

        .delay-400.animated {
            animation-delay: 0.4s;
        }

        .delay-450.animated {
            animation-delay: 0.45s;
        }

        .delay-500.animated {
            animation-delay: 0.5s;
        }


        /* ===================================cta============================== */
        .back-to-top {
            width: 50px;
            height: 50px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: var(--color-navy-blue);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 15px;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            display: none;
            z-index: 9999;
            box-shadow: 0 0 10px var(--color-sky-blue);
        }

        .cta-bottom-btn {
            position: fixed;
            right: 20px;
            bottom: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;
        }

        .cta-bottom-btn a {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--color-navy-blue);
            color: white;
            border-radius: 50%;
            font-size: 1.5em;
            transition: background-color 0.3s ease;
            position: relative;
            box-shadow: 0 0 10px var(--color-sky-blue);
        }

        .cta-bottom-btn .phone {
            font-size: 1em;
        }

        .cta-bottom-btn a .popup-animation {
            position: absolute;
            right: 50px;
            font-size: 16px;
            font-weight: 600;
            padding: 6px 15px;
            border-radius: 20px;
            text-wrap: nowrap;
            background-color: yellow;
            color: var(--color-navy-blue);
            animation: slideup 4s ease-in infinite;
        }

        @keyframes slideup {
            0% {
                transform: translateY(0) scale(.9);
                opacity: 0;
            }

            25%,
            75% {
                transform: translateY(-10px);
                opacity: 1;
            }

            100% {
                transform: translateY(-40px) scale(.9);
                opacity: 0;
            }
        }

        .cta-sec-btns {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

        .cta-sec-btns a {
            padding: 8px 20px;
            background: yellow;
            flex: 1;
            max-width: 300px;
            border-radius: 40px;
            font-weight: 600;
            font-size: 20px;
            color: black;
            transition: .3s ease-in;
        }
        .cta-sec-btns a:hover{
            scale: 1.05;
            box-shadow: 0px 0px 10px 1px white;
        }