.overflow-hidden {
    overflow: hidden; /* hide scroll */
    width: 100%;
}

.logo-track {
    display: flex;
    gap: 2rem;
    align-items: center;
    animation: scroll 60s linear infinite; /* default for desktop */
}

.logo-track img {
    max-height: 100px;
    object-fit: contain;
}

/* Keyframes for continuous scrolling */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-200%); /* move full width of the duplicated track */
    }
}

/* MOBILE STYLES */
@media (max-width: 768px) {

    .logo-track {
        gap: 0.3rem;
        animation: scroll 25s linear infinite; /* faster for smaller screen */
    }

    .logo-track img {
        max-height: 80px; /* smaller logos on mobile */
    }

    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(-350%); } /* same logic, track adapts naturally */
    }
}

/* TABLET STYLES */
@media (min-width: 769px) and (max-width: 1200px) {
    .logo-track {
        animation: scroll 60s linear infinite;
    }

    .logo-track img {
        max-height: 80px;
    }
}