
.trusted-section{
    width:100%;
    padding:80px 100px;
    background:#EEF5FF;
}

.trusted-container{
    max-width:1335px;
    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:80px;
}

/* LEFT */

.trusted-content{
    width: 55%;
}

.trusted-title{
    margin:0 0 24px;
    max-width: 689px;

    font-size:48px;
    line-height:58px;
    font-weight:600;
    letter-spacing: 0%;

    color:rgba(34,34,34,1);
}

.trusted-description{

    max-width:689px;

    margin-bottom:38px;

    font-size:18px;
    line-height:26px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -4%;

    color:#222;
}

 


/* RIGHT */

.trusted-logos{

    width:420px;
    height:420px;

    display:flex;

    gap:18px;

    overflow:hidden;

    mask-image:linear-gradient(
        to bottom,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

}
.logo-column{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.scroll-up{

    animation:scrollUp 18s linear infinite;

}

.scroll-down{

    animation:scrollDown 18s linear infinite;

}

.logo-column:hover{

    animation-play-state:paused;

}

.logo-box{

    width: 98px;

    height:98px;

    background:#fff;

    border-radius:16px;

    display:flex;

    justify-content:center;

    align-items:center;

   border-radius: 1px solid var(--color-Blue-Ribbon-100, rgba(216, 233, 255, 1));

    flex-shrink:0;

}

.logo-box img{

    max-width:58px;

    max-height:58px;

    object-fit:contain;

}

@keyframes scrollUp{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(calc(-50% - 9px));

    }

}

@keyframes scrollDown{

    from{

        transform:translateY(calc(-50% - 9px));

    }

    to{

        transform:translateY(0);

    }

}

.logo-box{

    width:78px;
    height:78px;

    background:#fff;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #E8EDF8;
}

.logo-box img{

    max-width:56px;
    max-height:56px;

    object-fit:contain;
}
@media (max-width:991px){

.trusted-container{

    flex-direction:column;
    text-align:center;
}

.trusted-content{
    width:100%;
}

.trusted-logos{
    width:100%;
    justify-content:center;
}

}


/* Large Laptop */
@media (max-width:1400px){

    .trusted-section{
        padding:80px 60px;
    }


    .trusted-container{

        gap:50px;

    }


    .trusted-logos{

        width:380px;
        height:380px;

    }

}



/* Laptop / Tablet Landscape */
@media (max-width:1024px){


    .trusted-section{

        padding:70px 40px;

    }


    .trusted-container{

        flex-direction:column;

        text-align:center;

        gap:50px;

    }


    .trusted-content{

        width:100%;

    }

    .trusted-logos{

        width:360px;

        height:360px;

    }

}



/* Tablet */
@media (max-width: 768px) {

  .trusted-section{
    padding: 20px;;
    width:100%;
    overflow-x:hidden;
  }

  .trusted-container{
    max-width:100%;
    width:100%;
    flex-direction:column;
    gap:40px;
    justify-content:center;
    align-items:center;
  }

  /* LEFT / TEXT FIRST */
  .trusted-content{
    width:100%;
    order:1;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

   .trusted-title{
    max-width:100%;
    font-size:34px;
    line-height:43px;
    margin:0 0 20px;
  }

  .trusted-description{
    max-width:100%;
    font-size:16px;
    line-height:25px;
    margin-bottom:28px;
    text-align:center;
  }

  /* RIGHT / LOGOS SECOND */
  .trusted-logos{
    order:2;
   width: fit-content;
    gap:12px;
    overflow:hidden;
    margin:0 auto;
  }

  .logo-column{
    gap:12px;
  }

  .logo-box{
    width:85px;
    height:85px;
    border-radius:14px;
  }

  .logo-box img{
    max-width:65px;
    max-height:56px;
  }

}



/* Mobile */
@media (max-width:480px){




    .trusted-section{
        width:100%;
        box-sizing:border-box;

        padding: 16px;
        background: var(--color-neutral-200, #F8F8F8);


    }

    
    .trusted-title{

        width:100%;
        max-width:380px;
        font-size:32px;
        font-weight: 600;
        letter-spacing: -4%;

        line-height:40px;

    }


    .trusted-description{
        width:100%;
        max-width:380px;

        font-size:16px;

        line-height:24px;

    }

    .trusted-logos{

        width:100%;
        max-width:380px;

        height:382px;

        gap:10px;
        padding:16px;
        

    }


    .logo-column{

        gap:10px;

    }


    .logo-box{

        width:100%;

        height:70px;

        border-radius:12px;

    }


    .logo-box img{

        max-width:38px;

        max-height:38px;

    }

}



/* Small Phones */
@media (max-width:360px){


    .trusted-logos{

        width:230px;

        height:230px;

    }


    .logo-box{

        width:48px;

        height:48px;

    }


    .logo-box img{

        max-width:32px;

        max-height:32px;

    }

}