.testimonials-carousel {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden; 
  height: 50vh;
}

@media (max-width: 746px) {
  .testimonials-carousel {
    height: 100vh;
  }
}

.carousel-track {
  display: flex;
  gap: var(--padding-big); 
 
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;

  padding-inline: var(--padding-bigger);
}

.carousel-track::-webkit-scrollbar {
  display: none; 
}

.testimonial-card {
  display: flex;

  flex-direction: column;

  gap: var(--padding-normal);

  padding: var(--padding-close);
  margin: var(--padding-tight);

  flex: 0 0 60%;

  scroll-snap-align: center; /* Align the card to the start of the viewport */

  isolation: isolate;
}

.testimonial-card:focus {
  outline: 1px solid var(--clr-darkbg-line);
  border-radius: var(--padding-close);
}

.testimonial-quote {
  position: relative;
}

.testimonial-quote::after {
  content: '';
  position: absolute;
  background: url('/img/quotes.svg') no-repeat;
  background-size: contain;
  width: 100px;
  height: 100px;
  top: var(--padding-close);
  left: 0;
  z-index: 2;
  opacity: 0.7;
}

.carousel-button {
  display: flex;
  background: transparent;
  border: none;
  position: absolute;
  width: 40px;
  height: 100%;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  pointer-events: auto;

  color: var(--clr-black);
  z-index: 3;
}

.arrow-icon {
  width: 20px; /* Arrow width */
  height: 100%; /* Match button height */
}

.carousel-button:hover {
  color: var(--clr-cta);
}
.carousel-button:active {
  color: var(--clr-cta-shade);
}

.carousel-button.prev {
  left: var(--padding-tight);
}

.carousel-button.next {
  right:  var(--padding-tight);
}

.testimonial-card > .center-object {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.testimonial-card-content {
     
  user-select: none;
  -webkit-user-drag: none;
}

.testimonial-card-content .copy,
.testimonial-card-content .left-object {
   
  user-select: none;
  -webkit-user-drag: none;
}

.testimonial-card-content .copy {
  max-width: 60ch;
}

.round-image {
  width: 42px;
  max-height: 100%;
  aspect-ratio: 1;
  border-radius: 999rem;

  user-select: none;
  -webkit-user-drag: none;
}

/* Responsive Design */
.carousel-button {
  display: block; /* Default to visible */
}

@media (max-width: 700px) {
  .carousel-button {
      display: none; /* Hide on smaller screens */
  }

  .carousel-track {
    gap: var(--padding-tight);
    padding-inline: var(--padding-close)
  }



  .testimonial-card {
    display: block;

    flex: 0 0 40%;
    width: 40%;

    scroll-snap-align: center;
  }

  .testimonial-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    
  }

/*   
  .testimonial-card-content p {
    text-align:justify;
  
  } */
}

@media (max-width: 480px) {

  .testimonials-carousel {
    height: 70vh;
  }


  .testimonial-card > .center-object {
    align-items: center;

  }

  .round-image {
    width: 50%;
  }

  .carousel-track {
    scroll-snap-type: x mandatory; /* Enable scroll snapping */

    gap:0;

    padding-inline: var(--padding-normal);
  }

  
  .testimonial-card {
      display: block;
      flex: 0 0 auto;
      width: 95%;
      padding-inline: var(--padding-close);
      margin-inline: 0;

      scroll-snap-align: center;
  }

  .testimonial-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .testimonial-card-content p {
    text-align: center;

  }
  
}