knk bir tane kayan logoların olduğu partnerler clientler gibi bir section yapmaya çalışıyorum responsive olacak şekilde çalışacak. sürekli olarak dönmesi gerekiyor ama burada başa sarmalar ani oluyor. clonları artırarak animation sürelerini matematiğini mantıklı ayarlayarak bu kayan logo sectionunu doğru düzgün profesyonelce çalışmasını sağlamak istiyorum. ama logoların boyutları konteynerlerin boyutları falan biraz saçma duruyor anlayamadım gitti.  bana yardımcı olur musun ? işte html kodu ; <section class="clients-sa section-padding pt-10 pb-0 mb-40">

                    <div class="container">

                        <div class="sec-head mb-60">

                            <h6 class="sub-head">Our Clients & Partners</h6>

                        </div>

                        

                        <!-- Infinite Scroll Container -->

                        <div class="clients-scroll-container mb-100 md-mb20">

                            <div class="clients-scroll-track">

                                <!-- First Set of Logos -->

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/SKoda.png" alt="Skoda">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/VW.png" alt="Volkswagen">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Nike.png" alt="Nike">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/DOD.png" alt="DOD">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Mobilup.png" alt="Mobilup">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/isotlar.png" alt="Isotlar">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Aykan.png" alt="Aykan">

                                    </div>

                                </div>

                                

                                <!-- Second Set for Seamless Loop -->

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/SKoda.png" alt="Skoda">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/VW.png" alt="Volkswagen">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Nike.png" alt="Nike">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/DOD.png" alt="DOD">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Mobilup.png" alt="Mobilup">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/isotlar.png" alt="Isotlar">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Aykan.png" alt="Aykan">

                                    </div>

                                </div>

                                

                                <!-- Third Set for Extra Smooth Loop -->

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/SKoda.png" alt="Skoda">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/VW.png" alt="Volkswagen">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Nike.png" alt="Nike">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/DOD.png" alt="DOD">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Mobilup.png" alt="Mobilup">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/isotlar.png" alt="Isotlar">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Aykan.png" alt="Aykan">

                                    </div>

                                </div>

                                

                                <!-- Fourth Set for Perfect Seamless Loop -->

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/SKoda.png" alt="Skoda">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/VW.png" alt="Volkswagen">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Nike.png" alt="Nike">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/DOD.png" alt="DOD">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Mobilup.png" alt="Mobilup">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/isotlar.png" alt="Isotlar">

                                    </div>

                                </div>

                                <div class="client-logo-item">

                                    <div class="img">

                                        <img src="assets/imgs/brands/Aykan.png" alt="Aykan">

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </section>      ve bu da css ; /* --------------- Clients Infinite Scroll --------------- */



.clients-scroll-container {

    overflow: hidden;

    width: 100%;

    position: relative;

}



.clients-scroll-track {

    display: flex;

    align-items: center;

    animation: infiniteScroll 20s linear infinite;

    width: calc(400% + 120px); /* Four sets width */

}



.clients-scroll-track:hover {

    animation-play-state: paused;

}



.client-logo-item {

    flex: 0 0 auto;

    margin-right: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 170px;

    height: 120px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    padding: 25px;

    transition: all 0.3s ease;

}



.client-logo-item:hover {

    border-color: rgba(255, 255, 255, 0.3);

    transform: scale(1.05);

}



.client-logo-item .img {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    overflow: hidden;

}



.client-logo-item .img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    filter: brightness(0.8);

    transition: filter 0.3s ease;

    min-width: 120px;

    min-height: 70px;

}



.client-logo-item:hover .img img {

    filter: brightness(1);

}



@keyframes infiniteScroll {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-75%); /* Move 3/4 for 4 sets */

    }

}



/* Responsive Design for Clients */

@media (max-width: 992px) {

    .clients-scroll-track {

        animation-duration: 18s; /* Faster on tablet */

    }



    .client-logo-item {

        margin-right: 60px;

        min-width: 140px;

        height: 100px;

        padding: 20px;

    }



    .client-logo-item .img img {

        min-width: 100px;

        min-height: 60px;

    }

}



@media (max-width: 768px) {

    .clients-scroll-track {

        animation-duration: 15s; /* Faster on mobile */

    }



    .client-logo-item {

        margin-right: 40px;

        min-width: 120px;

        height: 85px;

        padding: 15px;

    }



    .client-logo-item .img img {

        min-width: 90px;

        min-height: 55px;

    }

}



@media (max-width: 480px) {

    .clients-scroll-track {

        animation-duration: 12s; /* Even faster on small screens */

    }



    .client-logo-item {

        margin-right: 30px;

        min-width: 100px;

        height: 70px;

        padding: 12px;

    }



    .client-logo-item .img img {

        min-width: 76px;

        min-height: 46px;

    }

}