/* Testimonial Carousel container */
.testimonial-carousel-container {
  font-family: 'Poppins', sans-serif;
  position: relative;
  width: 100%;
  max-width: 1222px; /* Ensure it fits the content properly */
  margin: 0 auto;
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #202322; /* Container background color */
}

/* Testimonial Carousel track for sliding */
.testimonial-carousel-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
  will-change: transform;
  /* Infinite loop animation for the carousel */
  animation: scrollLeft 20s linear infinite; /* Increased the duration for smooth movement */
}

/* Testimonial Carousel slide styling */
.testimonial-carousel-slide {
  flex: 0 0 auto;
  border: 2px solid #009D4E;
  border-radius: 13px;
  width: calc(30% - 16px); /* Adjusted for 4 slides with margins */
  margin: 8px;
  background-color: #202322; /* Testimonial carousel slide background color */
  border-radius: 8px;
  overflow: hidden;
  height: 380px;  /* Increased height of the carousel slide */
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* Ensure content is aligned properly */
}

/* Title styling for the primary title */
.testimonial-carousel-title {
  color: #ffffff !important;
  line-height: 1.1;
  font-size: 18px !important; /* Poppins Bold, 18px */
  font-weight: 800;
  margin: 0 0 25px 0; /* Reduced margin between titlePrimary and titleSecondary */
  font-family: 'Poppins', sans-serif;
}

/* Title styling for the secondary title */
.testimonial-carousel-subtitle {
  color: #009D4E !important;
  line-height: 1.1;
  font-size: 18px !important; /* Poppins Bold, 18px */
  font-weight: 800;
  margin: 0 0 8px 0; /* Reduced margin between titleSecondary and description */
  font-family: 'Poppins', sans-serif;
}

/* Description styling */
.testimonial-carousel-description {
  color: #ffffff !important;
  line-height: 1.1;
  font-size: 15px !important; /* Poppins Regular, 15px */
  font-weight: 400;
  /*max-height: 100px;*/
  font-family: 'Poppins', sans-serif;
  margin: 0; /* Removed bottom margin to reduce space */
  padding-bottom: 10px; /* Small padding below description to separate it from footer */
  overflow: hidden;  /* Prevents overflow */
  text-overflow: ellipsis; /* Adds ellipsis for overflow */
  white-space: normal; /* Keeps the text on a single line */
  flex-grow: 1; /* Ensures the description grows to fill available space */
}

/* Testimonial Carousel footer styling */
.testimonial-carousel-footer {
  position: relative;
  margin-top: auto;  /* Reduced spacing between description and footer */
  text-align: left;  /* Align the footer content to the left */
  margin-bottom: 10px; /* Reduced margin to fit text within the slide */
  display: flex;
  flex-direction: column; /* Align image on top of the text */
  align-items: flex-start; /* Align image and text to the left */
  justify-content: flex-start; /* Align items to the left */
}

.testimonial-carousel-footer img {
  height: 50px; /* Set consistent height */
  width: 50px; /* Set consistent width */
  object-fit: cover; /* Ensure images are resized correctly without distortion */
  border-radius: 50%; /* Make images circular */
}

.testimonial-carousel-footer-no-img {
  height: 50px;
  width: 50px;
  background-color: #666; /* Grey background for no image */
  border-radius: 50%; /* Make the container circular */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 20px; /* Adjust the text size for the initials */
}

.testimonial-carousel-footer-text {
  color: #ffffff !important;
  font-size: 13px; /* Reduced font size to 13px */
  font-weight: 700; /* Make the name bold */
  line-height: 1.2; /* Adjust line height for readability */
  margin: 10px 0 0 10px; /* Adjust margin to ensure space between image and text */
  overflow: hidden;
  word-wrap: break-word; /* Ensures text wraps within the container */
  max-height: 36px; /* Set a max height to ensure no more than 2 lines */
}

/* Infinite loop animation for the carousel */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%); /* Moves the track by 50% of its width */
  }
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .testimonial-carousel-container {
    padding-top: 16px;
    padding-bottom: 16px;
    width: 100%; /* Ensure the container takes full width */
    overflow: hidden; /* Prevents horizontal scrolling on the container */
  }

  .testimonial-carousel-track {
    display: flex;
    gap: 16px; /* Small gap between slides */
    /*overflow-x: scroll; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-snap-type: x mandatory; /* Ensures smooth scroll behavior */
    scroll-behavior: smooth; /* Adds smooth scrolling */
    animation: scrollLeft 20s linear infinite; /* Keep the animation for mobile */
    width: 200%; /* Ensure the track is wide enough for both original and cloned slides */
  }

  .testimonial-carousel-slide {
    width: calc(100%-50px);/* Each slide takes almost full width, leaving space for margin */
    height: auto; /* Auto height for responsiveness */
    padding: 16px; /* Adjust padding for smaller screens */
    box-sizing: border-box; /* Ensures padding is included in the slide's width */
    scroll-snap-align: start; /* Ensures each slide aligns properly when scrolling */
  }

  .testimonial-carousel-title,
  .testimonial-carousel-subtitle {
    font-size: 16px !important; /* Smaller titles for mobile */
  }

  .testimonial-carousel-description {
    font-size: 14px !important; /* Smaller description text */
    line-height: 1.3;
    padding-bottom: 8px;
  }

  .testimonial-carousel-footer {
    flex-direction: row; /* Image and text side by side */
    align-items: center;
    margin-bottom: 8px;
  }

  .testimonial-carousel-footer img,
  .testimonial-carousel-footer-no-img {
    height: 40px;
    width: 40px;
  }

  .testimonial-carousel-footer-text {
    font-size: 12px;
    margin: 0 0 0 8px;
    max-height: none;
  }

  /* Hide scrollbar on mobile */
  .testimonial-carousel-track::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }

  .testimonial-carousel-track {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
  }
}

@media screen and (max-width: 500px) {
  .testimonial-carousel-container {
    padding-top: 8px;
    padding-bottom: 8px;
    width: 100%; /* Ensure the container takes full width */
    overflow: hidden; /* Prevents horizontal scrolling on the container */
  }

  .testimonial-carousel-track {
    display: flex;
    gap: 8px; /* Small gap between slides */
    /*overflow-x: scroll; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-snap-type: x mandatory; /* Ensures smooth scroll behavior */
    scroll-behavior: smooth; /* Adds smooth scrolling */
    animation: scrollLeft 20s linear infinite; /* Keep the animation for mobile */
    width: 200%; /* Ensure the track is wide enough for both original and cloned slides */
  }

  .testimonial-carousel-slide {
    width: calc(100%-16px);/* Each slide takes almost full width, leaving space for margin */
    height: auto; /* Auto height for responsiveness */
    padding: 16px; /* Adjust padding for smaller screens */
    box-sizing: border-box; /* Ensures padding is included in the slide's width */
    scroll-snap-align: start; /* Ensures each slide aligns properly when scrolling */
  }

  .testimonial-carousel-title,
  .testimonial-carousel-subtitle {
    font-size: 14px !important; /* Smaller titles for mobile */
  }

  .testimonial-carousel-description {
    font-size: 12px !important; /* Smaller description text */
    line-height: 1.3;
    padding-bottom: 8px;
  }

  .testimonial-carousel-footer {
    flex-direction: row; /* Image and text side by side */
    align-items: center;
    margin-bottom: 8px;
  }

  .testimonial-carousel-footer img,
  .testimonial-carousel-footer-no-img {
    height: 40px;
    width: 40px;
  }

  .testimonial-carousel-footer-text {
    font-size: 12px;
    margin: 0 0 0 8px;
    max-height: none;
  }

  /* Hide scrollbar on mobile */
  .testimonial-carousel-track::-webkit-scrollbar {
    display: none; /* Hides the scrollbar */
  }

  .testimonial-carousel-track {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
  }
}