/* Testimonials Section */
.maintman-reviews-title {
  padding: 1.5rem;
  text-align: center;
  background: #eee;
}

.maintman-reviews-title h2 {
  font-size: 2rem;
}

@keyframes review-card-slide {
  0% {
    transform: translateX(0%);
  }
  13% {
    transform: translateX(0%);
  }
  26% {
    transform: translateX(-100%);
  }
  39% {
    transform: translateX(-100%);
  }
  52% {
    transform: translateX(-200%);
  }
  65% {
    transform: translateX(-200%);
  }
  78% {
    transform: translateX(-300%);
  }
  91% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(0%);
  }
}
#testimonials {
  width: 100%;
}

.testimonial-section {
  margin: 5px 10px;
  display: flex;
  gap: 6px;
  border-radius: 8px;
  scrollbar-width: none;
  overflow: hidden;
}

.testimonial-card {
  flex: 0 0 33.2%;
  box-sizing: border-box;
  scroll-snap-align: center;
  list-style: none;
  background: #fff;
  border-radius: 15px;
  margin: 2px 0 20px;
  padding: 2px 8px;
  height: 110px;
  animation: review-card-slide 10s ease-in-out infinite;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.3);
}

.testimonial-mask {
  height: 105px;
  overflow: hidden;
  mask-image: linear-gradient(
    to bottom right,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0.2) 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

.review-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.name-img {
  display: flex;
  align-items: center;
}

.review-name img {
  margin: 0 5px;
}

@media screen and (max-width: 1646px) {
  .testimonial-card {
    flex: 0 0 100%;
  }

  @keyframes review-card-slide {
    0% {
      transform: translateX(0%);
    }
    8% {
      transform: translateX(0%);
    }
    16% {
      transform: translateX(-100%);
    }
    24% {
      transform: translateX(-100%);
    }
    32% {
      transform: translateX(-202%);
    }
    40% {
      transform: translateX(-202%);
    }
    48% {
      transform: translateX(-304%);
    }
    56% {
      transform: translateX(-304%);
    }
    64% {
      transform: translateX(-406%);
    }
    72% {
      transform: translateX(-406%);
    }
    80% {
      transform: translateX(-508%);
    }
    88% {
      transform: translateX(-508%);
    }
    100% {
      transform: translateX(0%);
    }
  }
}
