/*==========================================================
                        CLIENTS
==========================================================*/

.clients-section{

    padding:160px 0;

    overflow:hidden;

}

.clients-section h2{

    text-align:center;

    margin:24px 0;

    font-size:clamp(3rem,5vw,4.5rem);

}

.clients-section h2 span{

    display:block;

    color:#2F8CFF;

}

.clients-section p{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

    color:#9FB0C5;

    line-height:1.8;

}

.clients-section .section-tag{

    justify-content:center;

    margin-bottom:20px;

    display:flex;

    width:max-content;

    margin:0 auto 24px;

}

/*==========================================================
                    LOGO SLIDER
==========================================================*/

.clients-slider{

    position:relative;

    overflow:hidden;

    width:100%;

}

.clients-track{

    display:flex;

    gap:28px;

    width:max-content;

    animation:clients-marquee 40s linear infinite;

}

.clients-slider:hover .clients-track{

    animation-play-state:paused;

}

.client-card{

    width:260px;

    height:140px;

    padding:10px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.client-card:hover{

    transform:translateY(-8px);

    border-color:rgba(47,140,255,.35);

    box-shadow:

        0 20px 45px rgba(0,0,0,.35),

        0 0 30px rgba(47,140,255,.18);

}

.client-card img{

    max-width:90%;

    max-height:75%;

    object-fit:contain;

}

.client-card:hover img{

    transform:scale(1.05);

}

.clients-slider::before,
.clients-slider::after{

    content:"";

    position:absolute;

    top:0;

    width:180px;

    height:100%;

    z-index:10;

    pointer-events:none;

}

.clients-slider::before{

    left:0;

    background:linear-gradient(
        to right,
        #07131F,
        transparent
    );

}

.clients-slider::after{

    right:0;

    background:linear-gradient(
        to left,
        #07131F,
        transparent
    );

}

@keyframes clients-marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}