.logo-marquee{
    width:100%;
    overflow:hidden;
    position:relative;
    padding:20px 0;
}

.logo-track{
    display:flex;
    align-items:center;
    gap:70px;
    width:max-content;
    animation:scrollLogos 35s linear infinite;
}

.logo-track img{
    height:50px;
    width:auto;
    flex-shrink:0;
    transition:transform .3s ease, opacity .3s ease;
}

.logo-track img:hover{
    transform:scale(1.08);
}

.logo-marquee:hover .logo-track{
    animation-play-state:paused;
}

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

@media(max-width:767px){
    .logo-track{
        gap:40px;
        animation-duration:25s;
    }

    .logo-track img{
        height:36px;
    }
}