/* 1. The main container hiding the overflow */
.logo-marquee {
    display: flex !important;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 20px 0; /* Optional top/bottom spacing */
}

/* 2. The track that holds the logos and actually moves */
.logo-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 50px; /* Space between your logos */
    width: max-content;
    animation: marquee-scroll 20s linear infinite;
}

/* 3. Target your specific client image class */
.logo-marquee-track .clientImg {
    max-width: 150px; /* Adjust based on your logo sizes */
    flex-shrink: 0;
    object-fit: contain;
}

/* Optional: Pause the scrolling when a user hovers over it */
.logo-marquee:hover .logo-marquee-track {
    animation-play-state: paused;
}

/* 4. The Animation Keyframes */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-200%); } /* -50% works perfectly because we duplicate the logos in Step 3 */
}