.client-testimonials {
  margin: 80px 0;
  padding: 0 20px;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  width: 100%;
}


.client-testimonials h2 {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #1f5ea9;
}

/* 2) CAROUSEL CONTAINER */
.carousel-container {
  position: relative;
  margin: 0 auto;
  overflow: hidden; /* Hide anything out of bounds */
  height: 300px; /* Enough height to hold the cards */
}

/* 3) TRACK: We position cards absolutely inside this track */
.carousel-track {
  position: relative;
  /* Increase width for the cards row, giving a wide space. 
     We won't rely on this width for layout, but it helps if 
     you want a visual boundary. */
  width: 90%;
  margin: 0 auto;
  height: 100%;
}

/* 4) TESTIMONIAL CARDS */
.testimonial-card {
  position: absolute;
  width: 31%; /* Show 3 visible cards in total width (100%) */
  box-sizing: border-box;
  background: #fff;
  margin: 0; /* We'll control spacing in "left" offsets and margins as needed */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  top: 0; /* align to top */
  transition: all 0.3s ease;
  text-align: left; /* card content left aligned */
}

/* Center card highlight: white bold text, 
   different background color, etc. */
.testimonial-card.center {
  background-color: #3fbfea;
  transform: scale(1.02) translateY(-5px);
}

/* The center card's text is white and bold */
.testimonial-card.center p,
.testimonial-card.center h4 {
  color: #fff !important;
  font-weight: 700;
}

/* Card text styling */
.testimonial-card p {
  color: #1f5ea9;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Client name or heading */
.testimonial-card h4 {
  margin-top: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f5ea9;
}

/* Logo inside the card */
.testimonial-logo {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

/* 5) NAVIGATION BUTTONS */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #1f5ea9;
  color: #fff;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.2rem;
  z-index: 5;
  outline: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.prev-btn {
  left: 15px;
}
.next-btn {
  right: 15px;
}

/* Hover effect on buttons */
.carousel-btn:hover {
  background: #3fbfea;
}

/* Optional: disabled state if needed */
/*
.carousel-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
*/

/* 6) RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
  /* Show only 1 card at a time on smaller screens */
  .testimonial-card {
    width: 100%;
  }

  /* We can hide navigation buttons on mobile or keep them */
  .carousel-btn {
    display: none; 
  }

  .client-testimonials h2 {
    font-size: 1.6rem;
  }
}