﻿.partners-wrap {
    --card-bg: #fff;
    --ring: rgba(0,0,0,.06);
    --radius: 20px;
    --speed: 35s;
    --gap: 15px;
    margin: 40px auto;
}

.partners-title {
    text-align: center;
    font-weight: 800;
    letter-spacing: .2px;
    margin: 0 0 16px;
}

.partners-marquee {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    height: 27vh;
    padding: clamp(14px, 2vw, 20px);
}

    .partners-marquee::before,
    .partners-marquee::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        mask: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
        -webkit-mask: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, rgba(0,0,0,0) 100%);
    }


.partners-track {
    display: flex;
    align-items: center;
    align-content: center;
    gap: var(--gap);
    width: max-content;
    animation: partners-scroll var(--speed) linear infinite;
}

.partners-marquee:hover .partners-track {
    animation-play-state: paused;
}


.partner {
    display: grid;
    place-items: center;
    height: var(--h);
    min-width: clamp(110px, 16vw, 220px);
    margin: 0;
}

    .partner img {
        height: 100%;
        width: auto;
        border-radius: 32%;
        max-width: 160px;
        object-fit: contain;
        transition: transform .25s ease, filter .25s ease, opacity .25s ease;
        will-change: transform;
    }

    .partner:hover img {
        transform: scale(1.05);
        filter: none;
        opacity: 1;
    }

@keyframes partners-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

