/* ============================================= */
/* ✅ FULL-WIDTH CONTINUOUS MARQUEE ANIMATION ✅ */
/* ============================================= */

/* Wrapper to ensure full-width scrolling */
section[data-module="logo-our-partner"] .marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

/* Main scrolling container */
section[data-module="logo-our-partner"] .marquee {
    display: flex;
    gap: 2rem; /* Reduce spacing between logos */
    animation: marquee 50s linear infinite;
    width: max-content; /* Ensures smooth scrolling */
}

/* Prevent marquee from stopping on hover */
section[data-module="logo-our-partner"] .marquee-wrapper:hover .marquee {
    animation-play-state: paused !important;
}

/* ✅ FIX: Ensure exactly 5 logos show on desktop */
@media (min-width: 1200px) and (max-width: 1920px) {
    section[data-module="logo-our-partner"] .marqueelogo {
        height: 100px; /* Fixed height to ensure consistency */
        width: auto; /* Auto width to maintain aspect ratio */
        flex: 1 1 auto; /* Ensures equal spacing for 5 logos */
        max-width: 220px; /* Prevents logos from being too big */
    }
}

/* ✅ FIX: Show 3 logos on tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    section[data-module="logo-our-partner"] .marqueelogo {
        height: 90px;
        width: auto;
        flex: 1 1 auto;
        max-width: 180px;
    }
}

/* ✅ FIX: Show only 2 logos on mobile */
@media (max-width: 767px) {
    section[data-module="logo-our-partner"] .marqueelogo {
        height: 80px;
        width: auto;
        flex: 1 1 auto;
    }
}

/* ============================================= */
/* ✅ SMOOTH INFINITE SCROLLING ANIMATION ✅ */
/* ============================================= */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}