.clients {
    padding: 0 18px;
}

.clients-carousel {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.clients-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee 80s linear infinite;
    will-change: transform;
}

.clients-group {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-shrink: 0;
    padding-right: 28px;
}

.client-item {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 140px;
    padding: 8px 12px;
    flex-shrink: 0;
}

.client-logo {
    max-height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1) brightness(1.05);
    opacity: .92;
    transition: filter .15s ease, opacity .15s ease, transform .15s ease;
}

.client-item:hover .client-logo {
    filter: none;
    opacity: 1;
    transform: translateY(-3px);
}

.clients-carousel:hover .clients-track {
    animation-play-state: paused;
}



@media (prefers-reduced-motion: reduce) {
    .clients-track {
        animation: none;
        transform: translateX(0);
    }
}

.clientes-slider::before,
.clientes-slider::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.clientes-slider::before {
    left: 0;
    background: linear-gradient(to right, #ffffff 50%, transparent);
}

.clientes-slider::after {
    right: 0;
    background: linear-gradient(to left, #ffffff 50%, transparent);
}

.clientes-section .clientes-slider .clientes-group .cliente-slide img {
    max-width: none !important;
}