/* Clients Section Styles */
.clients {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    overflow: hidden !important;
    background-color: #000000 !important;
}

/* Scroller container with optimized infinite scrolling */
.clients__scroller {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: fit-content !important;
    background-color: #000000 !important;
    /* Hardware acceleration for smoother performance */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
    /* Add the CSS animation for infinite scrolling */
    animation: scroll 30s linear infinite;
}

/* Individual client item styling */
.clients__item {
    flex: 0 0 170px !important;
    margin: 0 15px !important;
}

.clients__item img {
    width: 150px !important;
    height: 120px !important;
    object-fit: contain !important;
    background-color: #fff !important;
    border: 2px solid rgb(255, 255, 255) !important;
    padding: 5px !important;
    border-radius: 5px !important;
    box-shadow: 5px 10px 15px 0px rgb(214, 214, 214) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .clients__item {
        flex: 0 0 140px !important;
        margin: 0 10px !important;
    }
    .clients__item img {
        width: 120px !important;
        height: 90px !important;
        padding: 8px !important;
    }
}

@media (max-width: 576px) {
    .clients__item {
        flex: 0 0 120px !important;
        margin: 0 8px !important;
    }
    .clients__item img {
        width: 100px !important;
        height: 70px !important;
        padding: 6px !important;
    }
}

/* Container to prevent overflow issues - HIDE SIDES */
.clients-container {
    width: 100%;
    /* Add padding on both sides to hide the scrolling issues */
    padding: 0 5%; /* Adjust this percentage as needed */
    overflow: hidden;
    position: relative;
}

/* Hide scrollbar for cleaner look */
.clients-container::-webkit-scrollbar {
    display: none;
}

.clients-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Seamless infinite scrolling animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}