@font-face {
    font-family: 'YEKAN';
    src: url("../fonts/yekan/YekanBakhFaNum-Thin.ttf");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'YEKAN';
    src: url("../fonts/yekan/YekanBakhFaNum-Light.ttf");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'YEKAN';
    src: url("../fonts/yekan/YekanBakhFaNum-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'YEKAN';
    src: url("../fonts/yekan/YekanBakhFaNum-SemiBold.ttf");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'YEKAN';
    src: url("../fonts/yekan/YekanBakhFaNum-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'YEKAN';
    src: url("../fonts/yekan/YekanBakhFaNum-ExtraBold.ttf");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'YEKAN';
    src: url("../fonts/yekan/YekanBakhFaNum-Black.ttf");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'YEKAN';
    src: url("../fonts/yekan/YekanBakhFaNum-ExtraBlack.ttf");
    font-weight: 950;
    font-style: normal;
}

body {
    font-family: 'YEKAN';
    font-weight: 400 !important;
}

h1 {
    font-weight: 900 !important;
    font-size: 25px !important;
}

h2 {
    font-weight: 700 !important;
    font-size: 24px !important;
}

h3 {
    font-weight: 700 !important;
    font-size: 22px !important;
}

  .clients-slider {
    overflow: hidden;
    padding: 15px 0;
  }
    
.slider-track {
    display: flex;
    width: calc(120px * 14); /* 7 لوگو دو بار */
    animation: scroll 50s linear infinite;
}
.slider-track.reverse {
    animation-direction: reverse;
}
    
.slide {
    flex: 0 0 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}
    
.slide img {
    background-color:white;
    border-radius:10px;
    max-height: 60px;
    transition: filter 0.3s ease;
}
    
.slide img:hover {
    filter: grayscale(0%);
}
    
@keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-70px * 7));
    }
}
    
/* ریسپانسیو */
@media (max-width: 768px) {
    .slider-track {
      width: calc(150px * 14);
      animation-duration: 40s;
    }
    .slide {
      flex: 0 0 150px;
      padding: 0 10px;
    }
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(calc(-150px * 7));
      }
    }
}