/* ==========================================================================
           MARQUEE COMPONENTS
           ========================================================================== */
        .marquee-wrapper {
            max-width: 1480px;
            width: 100%;
            margin: 0 auto;
            overflow: hidden;
            /* Glassmorphism & Glow Effects */
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 8px 32px 0 var(--glow-blue);
            position: relative;
        }

        /* Gradient masks to fade out the edges of the text nicely */
        .marquee-wrapper::before,
        .marquee-wrapper::after {
            content: "";
            position: absolute;
            top: 0;
            width: 100px;
            height: 100%;
            z-index: 2;
            pointer-events: none;
        }
        
        .marquee-wrapper::before {
            left: 0;
            background: linear-gradient(to right, var(--bg-color), transparent);
        }
        
        .marquee-wrapper::after {
            right: 0;
            background: linear-gradient(to left, var(--bg-color), transparent);
        }

        /* Specific Backgrounds & Borders */
        .bg-black-trans {
            background-color: rgba(16, 185, 129, 0.2);
            border-top: 1px solid rgba(16, 185, 129, 0.6); /* Darker outline */
            border-bottom: 1px solid rgba(16, 185, 129, 0.6); /* Darker outline */

        }

        .bg-blue-trans {
            background-color: #1e90ff;
            border-top: 1px solid rgba(37, 99, 235, 0.8); /* Darker outline */
            border-bottom: 1px solid rgba(37, 99, 235, 0.8); /* Darker outline */
        }

        /* The moving track */
        .marquee-track {
            display: flex;
            align-items: center;
            width: max-content;
            padding: 1.25rem 0;
            will-change: transform;
        }

        /* Content styling */
        .marquee-item {
            font-size: clamp(1rem, 2vw, 1.125rem);
            font-weight: 400;
            color: var(--dark-text);
            white-space: nowrap;
        }

            .marquee-item-white {
            font-size: clamp(1rem, 2vw, 1.125rem);
            font-weight: 400;
            color: var(--white);
            white-space: nowrap;
        }

        /* Unicode Spacer Styling */
        .spacer {
            margin: 0 3rem;
            color: var(--brand-blue-600);
            opacity: 0.7;
            font-size: 1.2em;
            text-shadow: 0 0 8px var(--glow-blue);
            vertical-align: middle;
        }

        /* ==========================================================================
           ANIMATIONS
           ========================================================================== */
        .scroll-rtl {
            animation: scroll-rtl 80s linear infinite;
        }

        .scroll-ltr {
            animation: scroll-ltr 80s linear infinite;
        }

        /* Pause animation on hover for better UX */
        .marquee-wrapper:hover .marquee-track {
            animation-play-state: paused;
        }

        @keyframes scroll-rtl {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        @keyframes scroll-ltr {
            0% { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }