.client__box {
    height: 330px;
    padding: 0 20px;
    margin-top: 4px;
    text-align: center;
    background: #f8f8f8;
}

.client__con {
    padding: 35px 0;
    color: #082743;
}

.client__h2 {
    font-size: var(--size-2xl);
    font-weight: 500;
    position: relative;
}

.client__p {
    position: relative;
    font-size: var(--size-sm);
    font-weight: 300;
    color: #65606e;
    top: 20px;
}

.client__text {
    font-weight: 600;
}




.wrapper {
    width: 90%;
    max-width: 1536px;
    margin-inline: auto;
    position: relative;
    height: 100px;
    margin-top: 1rem;
    overflow: hidden;
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 2%,
      rgba(0, 0, 0, 1) 98%,
      rgba(0, 0, 0, 0)
    );
  }
  
  @keyframes scrollLeft {
    to {
      left: -200px;
    }
  }
  
  .item {
    width: 210px;
    height: 100px;
    background-color: rgb(246, 246, 246);
    border-radius: 6px;
    position: absolute;
    left: max(calc(210px * 40), 100%);
    animation-name: scrollLeft;
    animation-duration: 140s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  
  .item1 {
    animation-delay: calc(140s / 40 * (40 - 1) * -1);
  }
  
  .item2 {
    animation-delay: calc(140s / 40 * (40 - 2) * -1);
  }
  
  .item3 {
    animation-delay: calc(140s / 40 * (40 - 3) * -1);
  }
  
  .item4 {
    animation-delay: calc(140s / 40 * (40 - 4) * -1);
  }
  
  .item5 {
    animation-delay: calc(140s / 40 * (40 - 5) * -1);
  }
  
  .item6 {
    animation-delay: calc(140s / 40 * (40 - 6) * -1);
  }
  
  .item7 {
    animation-delay: calc(140s / 40 * (40 - 7) * -1);
  }
  
  .item8 {
    animation-delay: calc(140s / 40 * (40 - 8) * -1);
  }

  .item9 {
    animation-delay: calc(140s / 40 * (40 - 9) * -1);
  }
  
  .item10 {
    animation-delay: calc(140s / 40 * (40 - 10) * -1);
  }
  
  .item11 {
    animation-delay: calc(140s / 40 * (40 - 11) * -1);
  }
  
  .item12 {
    animation-delay: calc(140s / 40 * (40 - 12) * -1);
  }
  
  .item13 {
    animation-delay: calc(140s / 40 * (40 - 13) * -1);
  }
  
  .item14 {
    animation-delay: calc(140s / 40 * (40 - 14) * -1);
  }
  
  .item15 {
    animation-delay: calc(140s / 40 * (40 - 15) * -1);
  }
  
  .item16 {
    animation-delay: calc(140s / 40 * (40 - 16) * -1);
  }

  .item17 {
    animation-delay: calc(140s / 40 * (40 - 17) * -1);
  }
  
  .item18 {
    animation-delay: calc(140s / 40 * (40 - 18) * -1);
  }
  
  .item19 {
    animation-delay: calc(140s / 40 * (40 - 19) * -1);
  }
  
  .item20 {
    animation-delay: calc(140s / 40 * (40 - 20) * -1);
  }
  
  .item21 {
    animation-delay: calc(140s / 40 * (40 - 21) * -1);
  }
  
  .item22 {
    animation-delay: calc(140s / 40 * (40 - 22) * -1);
  }
  
  .item23 {
    animation-delay: calc(140s / 40 * (40 - 23) * -1);
  }
  
  .item24 {
    animation-delay: calc(140s / 40 * (40 - 24) * -1);
  }

  .item25 {
    animation-delay: calc(140s / 40 * (40 - 25) * -1);
  }
  
  .item26 {
    animation-delay: calc(140s / 40 * (40 - 26) * -1);
  }
  
  .item27 {
    animation-delay: calc(140s / 40 * (40 - 27) * -1);
  }
  
  .item28 {
    animation-delay: calc(140s / 40 * (40 - 28) * -1);
  }
  
  .item29 {
    animation-delay: calc(140s / 40 * (40 - 29) * -1);
  }
  
  .item30 {
    animation-delay: calc(140s / 40 * (40 - 30) * -1);
  }
  
  .item31 {
    animation-delay: calc(140s / 40 * (40 - 31) * -1);
  }
  
  .item32 {
    animation-delay: calc(140s / 40 * (40 - 32) * -1);
  }

  .item33 {
    animation-delay: calc(140s / 40 * (40 - 33) * -1);
  }

  .item34 {
    animation-delay: calc(140s / 40 * (40 - 34) * -1);
  }

  .item35 {
    animation-delay: calc(140s / 40 * (40 - 35) * -1);
  }

  .item36 {
    animation-delay: calc(140s / 40 * (40 - 36) * -1);
  }

  .item37 {
    animation-delay: calc(140s / 40 * (40 - 37) * -1);
  }

  .item38 {
    animation-delay: calc(140s / 40 * (40 - 38) * -1);
  }

  .item39 {
    animation-delay: calc(140s / 40 * (40 - 39) * -1);
  }

  .item40 {
    animation-delay: calc(140s / 40 * (40 - 40) * -1);
  }



  @media (min-width: 425px) {
    .client__box {
        height: 310px;
    }
  }

  /* xs */
@media (min-width: 476px) {
    .client__p {
        font-size: var(--size-base);
    }
}

/* sm */
@media (min-width: 641px) {
    .client__box {
        height: 340px;
        padding-top: 15px;
    }

   

    .client__p {
        font-size: var(--size-sm);
    }
}

/* Large screens */
@media (min-width: 769px) {
    .client__box {
        height: 340px;
        padding-top: 5px;
    }

    .client__con {
        padding: 50px 0;
    }
}

/* lg */
@media (min-width: 1024px) {
    .client__h2 {
        font-size: var(--size-3xl);
    }

  .wrapper:hover{
      animation-play-state: paused;
  }

    .client__box {
        height: 390px;
        padding-top: 0px;
    }

    .client__con {
        padding: 70px 0;
    }

    .client__p {
        font-size: var(--size-lg);
    }
}