.testimonial-slider {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  position: relative;
  width: 1140px;
}
/* Left Side Cards */
.cards-wrapper {
  width: 600px;
  height: 600px; /* 3 cards visible */
  overflow: hidden;
  position: relative;
}
.cards-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.6s ease;
}
.card {
  width: auto;
  height: 200px; /* fixed card height */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;
  opacity: 0.3;
  transform: scale(0.9);
  transition: all 0.4s;
  color: #999;
}
.card.active {
  opacity: 1;
  transform: scale(1);
  padding:20px;
}
.clients-desc h3, p
{
    margin: 0px;
}
/* Right Side Content */
.content {
  position: relative;
  width: 100%;
  min-height: 250px;
}
.content::before{
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 194' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.3' fill-rule='evenodd' clip-rule='evenodd' d='M253.391 132.796c-1.757-5.377-4.767-10.325-8.987-14.759-4.407-4.657-10.199-8.274-17.394-10.865-7.161-2.585-16.391-3.915-27.78-3.915h-15.45c1.855-19.0065 8.628-35.1997 20.314-48.5867 11.686-13.3592 27.904-25.0901 48.619-35.165L240.163.00001C212.867 11.6339 189.537 28.6448 170.164 51.1365c-19.394 22.4918-29.032 44.7895-29.032 66.9005 0 23.752 5.584 42.378 16.868 55.834C169.285 187.32 185.434 194 206.474 194c13.312 0 24.915-4.435 34.754-13.338C251.081 171.758 256 161.343 256 149.46c0-5.71-.879-11.287-2.609-16.664Zm-141.132 0c-1.743-5.377-4.774-10.325-8.973-14.759-4.4215-4.657-10.2197-8.274-17.3808-10.865-7.1888-2.585-16.4184-3.915-27.8001-3.915H42.6759c1.8404-19.0065 8.6071-35.1997 20.3-48.5867 11.6999-13.3592 27.8902-25.0901 48.6191-35.165L99.0237 0C71.7424 11.6339 48.4048 28.6448 29.0249 51.1365 9.64501 73.6283-.00002 95.926-.00002 118.037c0 23.752 5.59737 42.378 16.87522 55.834C28.1461 187.32 44.2948 194 65.3353 194c13.3397 0 24.9221-4.435 34.7607-13.338 9.853-8.904 14.772-19.319 14.772-31.202 0-5.71-.858-11.287-2.609-16.664Z' fill='url(%23a)'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='256' y1='194' x2='53.3143' y2='-45.1797' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23009CFF' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%239536E5'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  position: absolute;
  width: 138px;
  height: 104px;
  left: 6rem;
  top: 40%;
  -webkit-transform: translateY(-40%);
  transform: translateY(-40%);
  -webkit-filter: drop-shadow(0 0 0 #4396fc) brightness(1.4);
  filter: drop-shadow(0 0 0 #4396fc) brightness(1.4);
}
.content-reviews{
    opacity: 1;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 50px;
    margin-top: 60px;
}
.content-reviews .cta-btn a {
    text-decoration: none;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.contentBox {
  width: 100%;
  height: auto;
  position: absolute;
  top: 20%;
  left: 20%;
  opacity: 0;
  transition: opacity 0.6s;
}
.contentBox.active {
  opacity: 1;
  position: relative;
}
/* Arrows */
.slider-controls {
  position: absolute;
  left: 47%;
  top: 45%;
  transform: translate(100%, -50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}
.slider-controls button {
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
}
.slider-controls button svg {
    transform: rotate(271deg);
}
.slider-controls button:hover, button:focus {
	background:none !important;
	border:none !important;
}
.slider-controls button:focus {
	background:none !important;
	border:none !important;
}

/* =========================
   Responsive Media Queries
   ========================= */

/* 1140px and below (large desktops → slightly smaller screens) */
@media (max-width: 1140px) {
  .testimonial-slider {
    width: 100%;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
  }

  .cards-wrapper {
    width: 500px;
    height: 500px;
  }

  .card {
    width: 500px;
    height: 170px;
  }

  .contentBox {
    width: 90%;
    left: 5%;
  }

  .slider-controls {
    left: 54%;
  }
}

/* 1024px and below (tablet landscape, also covers 992–1024) */
@media (max-width: 1024px) {
  .testimonial-slider {
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-items: center;
  }

  .cards-wrapper {
    width: 80%;
    height: 300px;
  }

  .card {
    flex: 0 0 180px;
    height: 180px;
    scroll-snap-align: start;
  }

  .slider-controls {
    flex-direction: row;
    left: 90%;
    top: 60%;
    transform: translate(-50%, 20px);
  }
}

/* 768px and below (tablet portrait) */
@media (max-width: 768px) {
  .contentBox {
    width: 90%;
    left: 5%;
  }

  .content::before {
    left: 1rem;
    top: 10%;
    width: 100px;
    height: 80px;
  }

  .content-reviews {
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
    align-items: flex-start;
  }
}

/* 576px and below (mobile) */
@media (max-width: 576px) {
  .cards-wrapper {
    width: 100%;
    height: 400px;
  }

  .cards-track {
    gap: 15px;
  }
    .slider-controls {
        flex-direction: row;
        left: 83%;
        top: 64%;
        transform: translate(-50%, 20px);
    }
  .card {
    flex: 0 0 200px;
    height: 160px;
  }

  .clients-desc h3 {
    font-size: 16px;
  }

  .clients-desc p {
    font-size: 14px;
  }

  .contentBox h2 {
    font-size: 20px;
  }

  .contentBox p {
    font-size: 14px;
  }
}

/* 400px and below (small mobile) */
@media (max-width: 400px) {
  .cards-wrapper {
    width: 100%;
    height: 200px;
  }

  .card {
    opacity: 1;
    transform: scale(1);
  }

  .contentBox {
    width: 90%;
    left: 5%;
  }

  .content::before {
    left: 1rem;
    top: 10%;
    width: 100px;
    height: 80px;
  }

  .content-reviews {
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
    align-items: flex-start;
  }
}