/* Custom styles for typography, animations, and aesthetic touches */
        body {
            background-color: #FFFDF7;
            font-family: 'Roboto', sans-serif;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Poppins', sans-serif;
        }

        .font-montserrat {
            font-family: 'Montserrat', sans-serif;
        }
        
        .font-opensans {
            font-family: 'Open Sans', sans-serif;
        }

        /* Typewriter caret effect */
        .typewriter h1::after {
            content: '|';
            animation: blink 1s step-end infinite;
            color: #FF6B6B;
        }

        @keyframes blink {
            from, to { opacity: 1; }
            50% { opacity: 0; }
        }

        /* Marquee Animation */
        .marquee-content {
            animation: marquee 50s linear infinite;
        }

        .marquee:hover .marquee-content {
            animation-play-state: paused;
        }

        @keyframes marquee {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-100%); }
        }

        /* CTA Button Glow Effect */
        .cta-glow:hover {
            box-shadow: 0 0 15px #FF6B6B, 0 0 30px #ff9a9a;
        }
        
        /* Gradient Animation for CTA section */
        .animated-gradient {
            background: linear-gradient(270deg, #f0f8ff, #f7f7f7, #fff5a1, #ffc3c3);
            background-size: 800% 800%;
            animation: gradient-animation 18s ease infinite;
        }

        @keyframes gradient-animation {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Scroll-triggered animations */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s cubic-bezier(0.6, 0.2, 0.1, 1), transform 0.8s cubic-bezier(0.6, 0.2, 0.1, 1);
        }
        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Sticky nav styling */
        .nav-scrolled {
            background-color: rgba(255, 253, 247, 0.9);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        /* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #FFFDF7;
        }
        ::-webkit-scrollbar-thumb {
            background: #39C0BA;
            border-radius: 10px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #2d9a95;
        }

        /* Modal animation */
        .modal-content-anim {
            animation: zoomIn 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }
        @keyframes zoomIn {
            0% { transform: scale(0.95); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* FAQ Accordion */
        .faq-question svg {
            transition: transform 0.3s ease;
        }
        .faq-question[aria-expanded="true"] svg {
            transform: rotate(180deg);
        }
    .marquee {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #e5e7eb;  /* gray-200 */
    border-bottom: 1px solid #e5e7eb;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1.5rem 0; /* vertical padding */
    position: relative;
}

/* ------------------ Track ------------------ */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-left-to-right 30s linear infinite;
}

/* ------------------ Content ------------------ */
.marquee-content {
    display: flex;
    gap: 1.5rem; /* spacing between images */
    flex-shrink: 0;
}

/* ------------------ Images ------------------ */
.marquee-content img {
    height: 8rem; /* small screen */
    width: auto;
    border-radius: 0.75rem; /* rounded-lg */
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* subtle shadow */
    flex-shrink: 0;
}

/* Medium screens */
@media (min-width: 768px) {
    .marquee-content img {
        height: 12rem; /* bigger on md+ screens */
    }
}

/* ------------------ Animation ------------------ */
@keyframes marquee-left-to-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}