/* Base Styles for the Slider Container */
.custom-testimonial-slider {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 40px;
  max-width: 1100px;
  margin: 48px auto;
  position: relative; /* Crucial for absolute positioning of arrows/dots */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0F4030;
  overflow: visible; /* Changed from visible to hidden for cleaner edges, especially with centerMode off */
}

/* Slick Carousel Wrapper - usually minimal direct styling needed */
.custom-testimonial-slider__wrapper {
  margin: 0;
  padding: 0;
}

/* Individual Slide Styling */
.custom-testimonial-slider__slide {
  display: flex !important; /* Important to override Slick's default block */
  align-items: center;
  justify-content: space-between;
  min-height: 320px; /* Adjust as needed */
  gap: 60px;       /* Space between left and right columns on desktop */
  outline: none;   /* Remove Slick's focus outline */
  padding: 0;      /* No horizontal padding on the slide itself */
}

/* Left Column (Text Content - primarily for Desktop) */
.custom-testimonial-slider__left {
  flex: 1 1 55%;    /* Takes up 55% of the available space */
  min-width: 0;     /* Prevents flex items from overflowing */
  padding-right: 32px; /* Space between text and image column on desktop */
  padding-left: 32px;  /* Inner padding for the text block on desktop */
}

/* Right Column (Image - also holds mobile overlay) */
.custom-testimonial-slider__right {
  flex: 1 1 45%;    /* Takes up 45% of the available space */
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Aligns image to the right on desktop */
  min-width: 0;
  position: relative; /* For positioning the mobile overlay */
}

.custom-testimonial-slider__right img {
  width: 400px;     /* Fixed width for desktop image */
  height: 400px;    /* Fixed height for desktop image */
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  display: block;
}

/* Testimonial Quote Styling */
.custom-testimonial-slider__quote {
  font-size: 28px; /* Slightly smaller than previous for better fit */
  font-style: normal;
  color: #0F4030;
  margin-bottom: 28px; /* Adjusted from 87px */
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.5px;
}

/* Meta Information (Author, Details) Styling */
.custom-testimonial-slider__meta {
  font-size: 16px;
  color: #0F4030;
  line-height: 1.4;
  margin-top: 80px;
}

.custom-testimonial-slider__info-row {
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.custom-testimonial-slider__name {
  font-weight: 700;
}

.custom-testimonial-slider__info-row--secondary {
  font-size: 16px;
  color: #0F4030; /* Matched primary text color */
  margin-bottom: 6px;
}

.custom-testimonial-slider__info-row--location {
  font-size: 16px;
  color: #0F4030; /* Matched primary text color */
  margin-bottom: 0;
}

.custom-testimonial-slider__location {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-location {
  display: flex;
  align-items: center;
  margin-right: 2px; /* Small gap before text */
}

.icon-location svg {
  display: block;
  width: 20px;
  height: 20px;
  stroke: #0F4030; /* SVG color */
}

/* ARROWS Styling (Positioned relative to .custom-testimonial-slider) */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10; /* Above slides but below potential popups */
  background: #EEF3EF !important; /* Light green background */
  border: none;
  border-radius: 8px; /* Slightly rounded squares */
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.slick-prev {
  left: 16px; /* Position from the left edge of the card */
}

.slick-next {
  right: 16px; /* Position from the right edge of the card */
}

.slick-arrow:hover {
  background: #e0e7e1 !important; /* Darker on hover */
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* Hide default Slick arrow characters if any appear */
.slick-prev:before,
.slick-next:before,
button:before { /* General reset for button pseudo-elements */
  display: none;
}

/* DOTS Styling (Positioned relative to .custom-testimonial-slider) */
.custom-testimonial-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 32px; /* Distance from the bottom edge of the card */
  transform: translateX(-50%);
  z-index: 10;
  width: auto; /* Let content determine width */
}

.custom-testimonial-slider__dots .slick-dots {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  bottom: -8px;
}

.custom-testimonial-slider__dots .slick-dots li {
  width: 12px;
  height: 12px;
  margin: 0; /* Remove default margins */
}

.custom-testimonial-slider__dots .slick-dots li button {
  width: 12px;
  height: 12px;
  border-radius: 50%; /* Circular dots */
  border: none;
  background: #d0d7d3; /* Inactive dot color */
  font-size: 0; /* Hide text if any */
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0; /* Remove default padding */
}

.custom-testimonial-slider__dots .slick-dots li.slick-active button {
  background: #0F4030; /* Active dot color */
}

/* Mobile Overlay (Initially hidden on desktop) */
.custom-testimonial-slider__overlay {
  display: none; /* Hidden by default, shown on mobile */
}


/* --------------- Responsive Design --------------- */

/* Mobile View - Image on Top, Text Below */
@media (max-width: 900px) { /* Your primary mobile breakpoint */
  .custom-testimonial-slider {
    padding: 24px 16px; /* Adjust padding for mobile card */
    margin: 24px auto;
    overflow: hidden; /* Keep if you don't want arrows sticking out from card edges */
                          /* Set to visible if arrows should be outside card's rounded box */
  }
  .slick-arrow {
    display: none;
  }

  .custom-testimonial-slider__slide {
    flex-direction: column !important; /* Stack image and text vertically */
    align-items: center; /* Center content horizontally */
    gap: 20px; /* Space between image and text block */
    text-align: left; /* Keep text left-aligned */
  }

  .custom-testimonial-slider__meta {
    margin-top: 32px;
  }
  /* Image container on mobile */
  .custom-testimonial-slider__right {
    order: 1; /* Ensure image is first */
    width: 100%;
    max-width: 400px; /* Max width for the image on mobile */
    margin-bottom: 0; /* Remove any bottom margin if image was previously stacked differently */
    padding: 0; /* Reset padding */
    flex: none; /* Reset flex properties */
    justify-content: center; /* Center image if it's narrower than max-width */
  }

  .custom-testimonial-slider__right img {
    width: 100%; /* Image takes full width of its container */
    height: auto; /* Maintain aspect ratio */
    max-height: 300px; /* Max image height to prevent it from being too tall */
    object-fit: cover;
    border-radius: 16px; /* Consistent rounded corners */
    display: block;
  }
  
  /* Text content block on mobile */
  .custom-testimonial-slider__left {
    order: 2; /* Ensure text is second, below image */
    display: block !important; /* Make sure it's visible (if previously hidden) */
    width: 100%;
    max-width: 100%; /* Text block takes full available width */
    padding: 0 8px; /* Add some horizontal padding for the text block */
    flex: none; /* Reset flex properties */
  }

  .custom-testimonial-slider__quote {
    font-size: 20px; /* Adjust font size for mobile */
    margin-bottom: 16px; /* Space below quote */
  }

  .custom-testimonial-slider__meta,
  .custom-testimonial-slider__info-row,
  .custom-testimonial-slider__location
  {
    font-size: 12px; /* Adjust font size for mobile */
  }
  
  /* Hide the mobile text overlay if it exists from previous versions */
  .custom-testimonial-slider__overlay {
    display: none !important;
  }

  /* Adjust Dots for Mobile - now below all content */
  .custom-testimonial-slider__dots {
    position: relative; /* Static positioning below the card content */
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 20px; /* Space between text block and dots */
    padding-bottom: 0; /* Remove extra bottom padding if any */
  }

  /* Adjust Arrows for Mobile - vertically centered to the combined block */
  .slick-prev, 
  .slick-next {
    top: 45%; /* Adjust this to vertically center against the new content height */
                 /* May need fine-tuning based on typical content height */
    transform: translateY(-50%);
    width: 38px !important;
    height: 38px !important;
    /* Keep background, border-radius, etc. as they are if you like current arrow style */
  }
  .slick-prev { 
    left: 8px; /* Position from edge of the card */
  }
  .slick-next { 
    right: 8px; /* Position from edge of the card */
  }
}

/* Smaller Mobile Devices */
@media (max-width: 480px) {
  .custom-testimonial-slider {
    padding: 16px 12px;
  }
  .slick-arrow {
    display: none !important;
  }
  .custom-testimonial-slider__meta {
    margin-top: 32px;
  }
  .custom-testimonial-slider__right img {
    max-height: 250px; /* Further restrict image height on very small screens */
    border-radius: 12px;
  }