/* Custom Styles & CSS Variables */
        :root {
            --deep-red: #B71C1C;
            --navy-blue: #1A237E;
            --white: #FFFFFF;
            --gold: #FFD700;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--navy-blue);
            color: var(--white);
            overflow-x: hidden; /* Prevents horizontal scroll from skewed elements */
        }

        h1, h2, h3 {
            font-family: 'Bebas Neue', cursive;
            letter-spacing: 0.05em;
        }

        /* Waving Flag Background Effect */
        .flag-bg {
            /* background-image: url('img/protest.webp'); */
            background-color: rgb(255, 255, 255);
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* Parallax effect */
        }

        .stars-overlay {
            background-image: radial-gradient(white 0.5px, transparent 0.5px);
            background-size: 30px 30px;
            opacity: 0.1;
        }

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

        @keyframes marquee {
            from { transform: translateX(0%); }
            to { transform: translateX(-50%); }
        }

        /* GSAP Animation Classes */
        .gsap-fade-in {
            opacity: 0;
            transform: translateY(50px);
        }

        .gsap-slide-left {
            opacity: 0;
            transform: translateX(-100px);
        }

        .gsap-slide-right {
            opacity: 0;
            transform: translateX(100px);
        }

        .gsap-scale-in {
            opacity: 0;
            transform: scale(0.8);
        }

        .gsap-rotate-in {
            opacity: 0;
            transform: rotate(10deg) scale(0.9);
        }

        /* Smooth transitions for interactive elements */
        .campaign-button {
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform: translateY(0) scale(1);
        }

        .campaign-button:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2), 0px 0px 20px var(--gold);
        }

        /* Enhanced marquee with GSAP */
        .marquee-content {
            will-change: transform;
        }

        /* Remove old animation classes */
        .fade-in-up {
            /* Will be handled by GSAP */
        }

        /* Improved performance for animations */
        .hero-content,
        .revolution-image,
        .revolution-text,
        .vote-canvas-container,
        .vote-controls,
        .what-is-text,
        .what-is-image,
        .gallery-grid,
        .footer-content {
            will-change: transform, opacity;
        }

        .border-double {
    border: 4px solid #BBBBBB !important; 
    outline: 4px solid #BBBBBB !important;  
    outline-offset: 8px !important;  
}

.border_main{
        padding: 48px;
}


.mm-marquee { overflow: hidden; width: 100%; }
.mm-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: mmg-marquee var(--mm-duration, 22s) linear infinite;
}
.mm-marquee__group { display: flex; gap: 2rem; align-items: center; white-space: nowrap; }
.mm-marquee__group span { display:inline-block; }
@keyframes mmg-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Faster on small screens, slower on large screens for comfort */
@media (max-width: 640px)  { .mm-marquee { --mm-duration: 12s; } }
@media (min-width: 641px)  { .mm-marquee { --mm-duration: 18s; } }
@media (min-width: 1024px) { .mm-marquee { --mm-duration: 28s; } }