.testimonial-section {
  background-color: #242424;
  color: #fff;
  padding: 4.0833vw 2.4417vw;
  /* padding-right:0vw; */
  font-family: sans-serif;
}

.section-title {
  text-align: left;
   font-size: clamp(2.5rem, 5vw, 2.75rem);
  font-weight: 550;
  margin-bottom: 1.5625vw;
  margin-left: 1.5625vw;
}

.testimonial-carousel {
  position: relative;
  min-width: 78.1250vw;
  margin: 0 auto;
}

.testimonial-wrapper {
  display: flex;
  /* align-items: center; */
  /* justify-content: space-around; */
  position: relative;
}
/* If you want the whole card to be the same height across the carousel */
.testimonial-container {
  display: flex;
  /* enforce a uniform height on all cards */
  align-items: stretch;
  gap: 4.0417vw;
  overflow: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
   padding: 0.5208vw 1.5208vw; 
  
  /* padding-right: 0.9vw; */
}
/* .testimonial-container {
  display: flex;
  gap: 1.0417vw;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 0.5208vw 1.5208vw;
  flex: 1;
} */

/* .testimonial-card {
  background-color: #242424;
  border-radius: 1.2500vw;
  padding: 1.0417vw;
  min-width: 50%;
  box-shadow: 0 0 0.5208vw rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 1.0417vw;
  border: 0.0521vw solid #8E8E8E;
} */
.testimonial-card {
  display: flex;
  flex:0 0 47%;
  align-items: flex-start;    /* start both items at the top */
  gap: 3.0417vw;
  background-color: #242424;
  border-radius: 1.25vw;
  padding: 1.5417vw;
  /* padding-right: 1.2417vw; */
  /* padding-top: 2vw;
  padding-bottom: 0vw; */
  max-width: 100%; 
  box-shadow: 0 0 0.5208vw rgba(0, 0, 0, 0.4);
  border: 0.0521vw solid #8E8E8E;
}
/* .client-img {
  border-radius: 0.6250vw;
  object-fit: cover;
} */
.client-img {
  /* width: 25%; */
  height: 15vw;         
  border-radius: 0.925vw;
  object-fit: cover;
}
/* .testimonial-text {
  flex: 1;
} */
.testimonial-text {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  gap:1.5vw;
  /* height: 15vw;          */
  /* height: 15vw;          */
}
.quote-mark {
  display: block; /* or flex */
  width: 100%;
}
.quote-mark img {
   display: block; 
  /* padding: 0.5208vw; */
  width: 10%;
}
.testimonial-text p{
 font-size: clamp(0.7333vw, 2.0vw, 1.1375vw);     /* 16-0.9375vw */
 font-weight: 350;
  line-height: 1.4;
  margin: 0 auto; 
  text-align: left;
  color: #fff;
}
.testimonial-text h4 {
  /* margin-top: 0.0208vw;
   */
 /* padding-bottom: 2vw; */
   font-size: 2rem;
  font-weight: 550;
  color: #fff;
}

.nav-btns {
  position: absolute;
  top: -4.1850vw;
  right: 3.0vw;
  display: flex;
  flex-direction: row;
  gap: 2.0208vw;
}
.nav-btns svg{
  width:2vw;
  height:2vw;
  stroke: none;
   stroke: none;
  background-color: #242424; /* or any color you want */
  border-radius: 50%;
  padding: 6px; /* adjust to center the icon */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* subtle shadow */
  box-sizing: content-box; /* so padding doesn't affect size */
}
.arrow-icon {
  width: 4px;
  height: 8px;
}

.nav-btn {
  background: #242424;
  border: none;
  color: white;
  width: 1.2500vw;
  height: 1.2500vw;
  font-size: 0.7292vw;
  cursor: pointer;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 0.4167vw;
  margin-top: 2.5208vw;
}

.dot {
  width: 0.7292vw;
  height: 0.7292vw;
  background-color: #717171;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.dot.active {
  width: 4.5833vw;
  background-color: #717171;
  border-radius: 1.0417vw;
}

.why-best {
  display: flex;
  /* grid-template-columns: repeat(auto-fit, minmax(16.6667vw, 1fr)); */
  gap: 0.208vw;
  margin: 0 auto;
  padding: 3.1250vw 3.5vw;
  /* padding-right:1.0vw; */
  box-sizing: border-box;
  background-color: white;
  padding-bottom: 4.1250vw;
}

.why-best .column {
  display: flex;
  flex-direction: column;
  /* gap: 0.1417vw; */
}
.column.left{
  max-width: 38%;
}
.column.right{
  max-width:62%;
}
.team-img {
  /* width: 100%;
  height: auto; */
  border-radius: 0.5208vw;
  /* display: block; */
  position: relative;
  top: 1.5042vw;
  /* right:4.0vw; */
  /* z-index: 1000; */
  transition: transform 0.4s ease-in-out;
  transform-origin: center;
}
/* .team-img:hover { */
  /* transform: scale(1.1); or 1.2 for more zoom */
/* } */
.ware-img {
  margin-left: 0.921vw;
  width: 90%;
  position: relative;
  bottom: 8.2500vw;
}
@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.trusted-text img {
  width: 110%;
  position: relative;
  left: 0.7vw;
  bottom: 4.4083vw;
  z-index: 3000;
  /* animation: slideFromLeft 1.5s ease-out forwards; */
  transform: translateX(-100%);
  opacity: 0;
}
.trusted-text img.animate {
  animation: slideFromLeft 1.0s ease-out forwards;
}
/* .trusted-text:hover{
   animation: slideFromLeft 1.5s ease-out forwards;
} */
.stats h2 {
  font-size: clamp(2.5rem, 5vw, 2.75rem);
  font-weight: 550;
  color: #111;
  /* margin-top: -2vw; */
}

.stat-items {
  margin-right: 25%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap:5vw;
  /* justify-content: space-between; */
  /* flex-wrap: wrap; */
}

.stats {
  display: flex;
  gap: 1.8208vw;
  flex-direction: column;
  /* margin-right: 2vw; */
}

.stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.0417vw;
  min-width: 37%;
}

/* .stat span {
  font-size: 1.6667vw;
} */

.stat-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  /* line-height: 1.2; */
}

.stat h5 {
  /* display: block; */
  font-size: 1.400vw;
}

.stat p {
  /* display: block; */
  color: #333333;
  font-size: 1.0500vw;
  margin-top: 0.05vw;
  font-weight: 400;
}
.stat svg{
  max-width: 4.17vw;
  max-height: 4.17vw;
}
.stat svg:hover{
  transform: scale(1.1);
}
@media (max-width: 31.2500vw) {
  .stat-items {
    flex-direction: column;
    gap: 0.7812vw;
  }
}

