/* ===========================
   TRUSTED BY
=========================== */

.trusted{

    padding:100px 0;

    background:#000;

    overflow:hidden;

}

.trusted .section-tag{

    text-align:center;

    display:block;

}

.trusted h2{

    text-align:center;

    font-size:3rem;

    margin:18px 0 55px;

    color:#fff;

}

/* ===========================
   MARQUEE
=========================== */

.trusted-slider{

    position:relative;

    overflow:hidden;

    -webkit-mask-image:linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

    mask-image:linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

}

.trusted-track{

    display:flex;

    align-items:center;

    gap:80px;

    width:max-content;

    animation:marquee 65s linear infinite;

}

.trusted-track img{

    width:90px;

    height:90px;

    object-fit:contain;

    flex-shrink:0;

    opacity:.55;

    filter:grayscale(100%);

    transition:.35s ease;

}

.trusted-track img:hover{

    opacity:1;

    filter:grayscale(0);

    transform:scale(1.08);

}

.trusted-slider{

    margin-bottom:35px;

}

.trusted-slider.reverse .trusted-track{

    animation-direction:reverse;

}



@keyframes marquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/* ===========================
   TRUSTED ANIMATION
=========================== */

.trusted .section-tag,
.trusted h2,
.trusted-slider{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);

}

.trusted.active .section-tag{

    opacity:1;

    transform:translateY(0);

    transition-delay:.10s;

}

.trusted.active h2{

    opacity:1;

    transform:translateY(0);

    transition-delay:.25s;

}

.trusted.active .trusted-slider:nth-of-type(1){

    opacity:1;

    transform:translateY(0);

    transition-delay:.45s;

}

.trusted.active .trusted-slider:nth-of-type(2){

    opacity:1;

    transform:translateY(0);

    transition-delay:.65s;

}

/* ===========================
   RESPONSIVE
=========================== */

@media (max-width:992px){

    .trusted{

        padding:80px 0;

    }

    .trusted h2{

        font-size:2.4rem;

    }

    .trusted-track{

        gap:55px;

    }

    .trusted-track img{

        width:75px;

        height:75px;

    }

}

@media (max-width:768px){

    .trusted{

        padding:70px 0;

    }

    .trusted h2{

        font-size:2rem;

        margin-bottom:40px;

    }

    .trusted-track{

        gap:40px;

    }

    .trusted-track img{

        width:60px;

        height:60px;

    }

}