.logo-slider {
    width: 60%;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0;
}

.slider-track {
    display: flex;
    width: calc(170px * 12); /* 6 logos + 6 duplicates, 150px width + 20px margin */
    animation: scroll 20s linear infinite;
}

.logo-item {
    flex: 0 0 auto;
    width: 130px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.5s ease-in-out;

}

.logo-item img:hover
{
    filter: grayscale(0%);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-170px * 6)); /* Move by original 6 logos */
    }
}

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

@media (max-width: 768px) {
    .logo-slider {
        width: 90%;
    }
    .logo-item {
        width: 120px;
        height: 80px;
    }
    .slider-track {
        width: calc(140px * 12); /* Adjusted for smaller logos */
    }
    @keyframes scroll {
        100% {
            transform: translateX(calc(-140px * 6));
        }
    }
}


/*@keyframes slide {*/
/*  from {*/
/*    transform: translateX(0);*/
/*  }*/
/*  to {*/
/*    transform: translateX(-100%);*/
/*  }*/
/*}*/

/*.logos {*/
/*  overflow: hidden;*/
/*  padding: 20px 0;*/
/*  background: white;*/
/*  white-space: nowrap;*/
/*  position: relative;*/
/*  max-width: 50%;*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*}*/

/*.logos:before, .logos:after {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  width: 75px;*/
/*  height: 40%;*/
/*  content: "";*/
/*  z-index: 2;*/
/*}*/

/*.logos:before {*/
/*  left: 0;*/
/*  background: transparent;*/
/*}*/

/*.logos:after {*/
/*  right: 0;*/
/*  background: transparent;*/
/*}*/

/*.logos:hover .logos-slide {*/
/*  animation-play-state: paused;*/
/*}*/

/*.logos-slide {*/
/*  display: inline-block;*/
/*  animation: 45s slide infinite linear;*/
/*  margin-left: inherit;*/
/*  margin-right: inherit;*/
/*}*/

/*.logos-slide img {*/
/*  height: 40px;*/
/*  margin: 0 40px;*/
/*}*/