/*==========================================
Trusted By
==========================================*/

.trusted-by{

    padding:120px 0;

    position:relative;

    overflow:hidden;
}

/*--------------------------------*/

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;
}

/*--------------------------------*/

.section-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border-radius:999px;

    border:1px solid rgba(37,99,235,.25);

    background:rgba(255,255,255,.03);

    color:var(--color-secondary);

    font-size:.8rem;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:24px;
}

/*--------------------------------*/

.section-header h2{

    font-size:clamp(2.4rem,5vw,4rem);

    margin-bottom:24px;

    line-height:1.15;
}

.section-header h2 span{

    display:block;

    background:var(--gradient-primary);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

/*--------------------------------*/

.section-header p{

    font-size:1.1rem;

    color:var(--color-text-muted);

    line-height:1.8;
}

/*==========================================
Logo Marquee
==========================================*/

.logo-marquee{

    position:relative;

    overflow:hidden;

    margin-top:70px;

    padding:30px 0;
}

/* Fade Effect */

.logo-marquee::before,
.logo-marquee::after{

    content:"";

    position:absolute;

    top:0;

    width:180px;

    height:100%;

    z-index:2;

    pointer-events:none;
}

.logo-marquee::before{

    left:0;

    background:linear-gradient(
        to right,
        var(--color-background),
        transparent
    );

}

.logo-marquee::after{

    right:0;

    background:linear-gradient(
        to left,
        var(--color-background),
        transparent
    );

}

/* Track */

.logo-track{

    display:flex;

    align-items:center;

    gap:80px;

    width:max-content;

    animation:marquee 28s linear infinite;
}

.logo-marquee:hover .logo-track{

    animation-play-state:paused;

}

/* Logos */

.logo-track img{

    height:34px;

    width:auto;

    opacity:.45;

    filter:grayscale(100%);

    transition:.35s ease;
}

.logo-track img:hover{

    opacity:1;

    filter:none;

    transform:translateY(-3px);
}

/* Animation */

@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}
@media (max-width:768px){

    .logo-track{

        gap:50px;

        animation-duration:18s;

    }

    .logo-track img{

        height:26px;

    }

}