/* rythmic/public/css/index.css */

/* Global adjustments for body and html to prevent horizontal overflow and set box-sizing */
html, body {
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll for the entire page */
  min-width: unset; /* Ensure no global min-width is forcing horizontal overflow */
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Apply border-box globally */
  font-family: Arial, sans-serif; /* Add a default font-family */
  color: var(--gray900); /* Default text color */
}

.index {
  align-items: flex-start; /* Aligns content to the start of the cross axis (left for column) */
  background-color: var(--white);
  display: flex;
  flex-direction: column; /* Stack sections vertically */
  width: 100%;
  box-sizing: border-box; /* Ensure padding and border are included in width/height */
  min-width: unset; /* Remove fixed min-width for responsiveness */
  overflow-x: hidden; /* Prevent horizontal scroll for the main wrapper */
}

/* --- NEW HERO SECTION STYLES --- */
.hero-section-full-width {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1440px; /* Constrain main section width */
  margin: 0 auto;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(250, 250, 251) 100%);
  padding-top: 82px; /* From features.css header-section */
  padding-bottom: 96px; /* From features.css header-section */
  gap: 64px; /* Gap between text/buttons and image */
}

.hero-content-container {
  max-width: 960px; /* Max width for heading, subtext, buttons */
  width: 100%;
  box-sizing: border-box;
  padding: 0 32px; /* Inner horizontal padding */
  display: flex;
  flex-direction: column;
  align-items: center; /* Center children horizontally */
  gap: 40px; /* Gap between heading/text and buttons */
}

.intro-heading {
  font-size: 50px;
  line-height: 60px;
  font-weight: 700;
  margin: 0;
  text-align: center;
  width: 100%;
  max-width: 960px;
}

.intro-subtext {
  font-size: 20px;
  color: var(--gray600);
  line-height: 30px;
  text-align: center;
  width: 100%;
  max-width: 914px;
  margin: 0;
}

.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center; /* Center buttons horizontally */
  align-items: center; /* Align buttons vertically */
}

.cta-buttons .btn {
  padding: 8px 16px; /* Adjusted padding for smaller size */
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  line-height: 20px; /* Adjusted line height for smaller text */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cta-buttons .btn-primary {
  background-color: var(--blue-chill-2);
  color: var(--white);
  border: 1px solid var(--blue-chill-2);
}

.cta-buttons .btn-secondary {
  background-color: transparent;
  color: var(--gray600);
  border: 1px solid var(--gray300);
}

.hero-main-image-container { /* TARGETING ONLY THE TOP HERO IMAGE CONTAINER */
  width: 100%;
  max-width: 1280px; /* Constrain the overall width of the container */
  margin: 0 auto; /* Center the container */
  box-sizing: border-box;
  display: block; /* Change to block for aspect-ratio to work reliably on its own */
  position: relative; /* Needed for img absolute positioning if using padding-bottom fallback */
  overflow: hidden; /* Important to hide any image overflow beyond the rounded corners */

  border-radius: 10px; /* Keep border-radius for rounded corners on the container */
  /* border: 4px solid var(--gray900); */ /* COMMENTED OUT/REMOVED THIS LINE TO MAKE BORDER INVISIBLE */

  /* Use the specified aspect ratio for the container */
  aspect-ratio: 1216 / 480; /* Calculated from your specified 1216x480 space */
  /* Fallback for older browsers (remove aspect-ratio and uncomment these): */
  /* height: 0; */
  /* padding-bottom: calc(480 / 1216 * 100%); */
}

.hero-main-image-container img {
  position: absolute; /* Position the image absolutely within its relative container */
  top: 0;
  left: 0;
  width: 100%; /* Image fills its container's width */
  height: 100%; /* Image fills its container's height */
  object-fit: cover; /* **CRUCIAL**: Image will fill container, cropping if aspect ratios don't match */
  display: block; /* Removes any browser default spacing */
  border-radius: 10px; /* Ensure image itself has rounded corners matching container */
}

/* --- END NEW HERO SECTION STYLES --- */


/* --- FEATURES SECTION (for alternating rows) --- */
.features-section { /* This now explicitly wraps the feature rows */
  display: flex; /* Ensure it's a flex container for its children */
  flex-direction: column; /* Stack feature rows vertically */
  align-items: center; /* Center feature rows horizontally */
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 96px 0px;
  gap: 96px;
}

/* Feature Rows (Alternating Image/Text) */
.feature-row,
.feature-row-reverse {
  display: flex;
  flex-wrap: nowrap;
  align-items: center; /* Vertically align items in the middle */
  justify-content: center; /* Center content within the row */
  gap: 96px; /* Larger gap for desktop, matching features.css container gap */
  width: 100%;
  max-width: 1280px;
  padding: 0 32px;
  box-sizing: border-box;
}

.feature-row-reverse {
  flex-direction: row-reverse;
}

.feature-image {
  flex: 1; /* Allow to grow/shrink */
  max-width: 768px; /* Max width for image container */
  width: 100%; /* Take full width within its flex context */
  box-sizing: border-box;
  display: flex; /* For centering the image if it doesn't fill max-width */
  justify-content: center;
  align-items: center;
}

.feature-image img {
  width: 100%; /* Image fills its container */
  max-width: 100%; /* Ensure image doesn't overflow its container */
  height: auto; /* MAINTAIN ASPECT RATIO NATURALLY */
  border-radius: 10px;
  border: 4px solid var(--gray900);
  display: block;
  margin: 0 auto; /* Center image within its flex container */
}

.feature-text {
  flex: 1; /* Allow to grow/shrink */
  width: 100%;
  max-width: 400px; /* Constrain text block width to 400px for desktop */
  display: flex;
  flex-direction: column;
  gap: 32px; /* Gap between h2/p and the list */
  justify-content: flex-start;
  text-align: left; /* Default desktop alignment */
  box-sizing: border-box;
}

.feature-text h2 {
  font-size: 38px;
  line-height: 38px;
  font-weight: 600;
  color: var(--gray900);
  margin: 0;
}

.feature-text p { /* Applies to VIN-Specific PPC Automotive Ad Platform: */
  font-size: 18px;
  color: var(--gray600);
  line-height: 28px;
  margin: 0;
}

/* --- LIST ITEM STYLING FOR CHECKMARKS, TITLE, AND DESCRIPTION --- */
.feature-text ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px; /* Gap between each full list item (icon + title + description) */
}

.feature-text ul li {
  display: flex;
  align-items: flex-start; /* Align icon with the top of the list-item-text-wrapper */
  gap: 12px; /* Space between icon and the text content */
  padding: 0;
  text-align: left; /* Default desktop alignment */
}

.feature-text ul li::before {
  content: url('/assets/check-icon-6.svg'); /* Path to your checkmark SVG */
  display: inline-block;
  width: 24px; /* Adjust size of icon if needed */
  height: 24px; /* Adjust size of icon if needed */
  flex-shrink: 0; /* Prevent icon from shrinking */
  margin-top: 4px; /* Fine-tune vertical alignment with the title */
}

.feature-text .list-item-text-wrapper { /* NEW: Styles for the container of title and description */
  display: flex;
  flex-direction: column; /* Stack title and description vertically */
  gap: 4px; /* Small gap between title and description */
  width: 100%; /* Ensure it takes available width within the li */
}

.feature-text .list-item-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--gray900);
  margin: 0;
  padding: 0;
}

.feature-text .list-item-description {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--gray600);
  margin: 0;
  padding: 0;
}
/* --- END LIST ITEM STYLING --- */


/* --- METRICS SECTION STYLES --- */
.metrics-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #f8f9fb;
  padding: 96px 0px;
  gap: 64px;
}

.metrics-section h2 {
  font-size: 48px;
  line-height: 60px;
  font-weight: 600;
  color: var(--gray900);
  margin-bottom: 32px;
  text-align: center;
  max-width: 960px;
  padding: 0 32px;
}

.metrics-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 32px;
}

.metric-item {
  flex: 1 1 200px;
  min-width: 140px;
  max-width: 264px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text left within metric item for desktop */
  gap: 20px;
  text-align: left; /* Default desktop alignment */
}

.metric-item .number {
  font-size: 60px;
  line-height: 60x;
  font-weight: 600;
  color: var(--blue-chill);
  margin: 0;
}

.metric-item .label {
  font-size: 18px;
  color: var(--gray900);
  line-height: 28px;
  font-weight: 500;
  margin: 0;
}

/* --- TESTIMONIALS SECTION STYLES --- */
.testimonials-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: var(--white);
  padding: 96px 0px;
  gap: 64px;
}

.testimonials-section h2 {
  font-size: 48px;
  line-height: 60px;
  font-weight: 600;
  color: var(--gray900);
  margin: 0;
  text-align: center;
  max-width: 960px;
  padding: 0 32px;
}

/* Carousel container */
.testimonials-carousel-container {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
}

.testimonials-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.testimonials-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
  gap: 32px;
}

.testimonial-card {
  flex: 0 0 calc(50% - 16px); /* 2 cards per view */
  min-width: 280px; /* Minimum width for smaller screens */
  max-width: 500px; /* Limit maximum width for better readability */
}

/* When there are fewer than 4 testimonials, space them evenly */
.testimonials-track:has(.testimonial-card:nth-child(3):last-child) .testimonial-card {
  flex: 0 0 calc(33.333% - 21px); /* 3 cards per view */
}

.testimonials-track:has(.testimonial-card:nth-child(2):last-child) .testimonial-card {
  flex: 0 0 calc(50% - 16px); /* 2 cards per view */
}

.testimonials-track:has(.testimonial-card:nth-child(1):last-child) .testimonial-card {
  flex: 0 0 calc(100% - 0px); /* 1 card per view */
}

/* Fallback CSS classes for browsers that don't support :has() */
.testimonials-track.single-testimonial .testimonial-card {
  flex: 0 0 calc(100% - 0px); /* 1 card per view */
}

.testimonials-track.two-testimonials .testimonial-card {
  flex: 0 0 calc(50% - 16px); /* 2 cards per view */
}

.testimonials-track.three-testimonials .testimonial-card {
  flex: 0 0 calc(33.333% - 21px); /* 3 cards per view */
}

/* Navigation arrows */
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  border: 2px solid var(--gray300);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.carousel-nav:hover {
  background: var(--blue-chill);
  border-color: var(--blue-chill);
  color: var(--white);
  box-shadow: 0px 8px 15px -3px rgba(0, 0, 0, 0.2);
}

.carousel-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--gray100);
  border-color: var(--gray300);
}

.carousel-nav:disabled:hover {
  background: var(--gray100);
  border-color: var(--gray300);
  color: var(--gray600);
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.carousel-nav-left {
  left: -24px;
}

.carousel-nav-right {
  right: -24px;
}

.carousel-nav svg {
  width: 20px;
  height: 20px;
}

.testimonial-card {
  background-color: var(--white);
  border: 1px solid var(--gray300);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: auto;
  min-height: 200px;
}

.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 10px 25px -3px rgba(0, 0, 0, 0.1);
}

.testimonial-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.testimonial-text {
  font-size: 16px;
  line-height: 24px;
  color: var(--gray900);
  font-style: italic;
  margin: 0;
}

.testimonial-rating {
  display: flex;
  gap: 4px;
}

.testimonial-rating .star {
  font-size: 20px;
  color: var(--gray300);
  transition: color 0.2s ease;
}

.testimonial-rating .star.filled {
  color: #fbbf24; /* Amber color for filled stars */
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--gray300);
  padding-top: 16px;
}

.author-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray900);
  margin: 0;
}

.author-details {
  font-size: 14px;
  color: var(--gray600);
  margin: 0;
}

/* --- Mobile Responsiveness Overrides (max-width: 991.98px for 'lg' breakpoint) --- */
@media (max-width: 991.98px) {

  /* Adjust padding and gaps for all major sections */
  .hero-section-full-width,
  .features-section,
  .metrics-section,
  .testimonials-section,
  .footer {
      padding: 48px 16px;
      gap: 32px;
  }

  /* Intro content adjustments for mobile */
  .hero-content-container {
    padding: 0 16px;
    gap: 32px;
  }

  .intro-heading {
    font-size: 30px;
    line-height: 44px;
    text-align: left;
  }

  .intro-subtext {
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }

  .cta-buttons {
    flex-direction: row; /* Keep ROW for side-by-side buttons */
    justify-content: center; /* Center the buttons group */
    align-items: center; /* Vertically align them */
    gap: 12px; /* Gap between buttons */
    width: auto; /* Allow the container to shrink-wrap its content */
  }
  .cta-buttons .btn {
    width: auto; /* Let buttons size to content */
    max-width: unset; /* Remove any max-width constraint */
    padding: 8px 16px; /* Ensure smaller padding on mobile too */
    line-height: 20px; /* Ensure smaller text on mobile too */
  }

  /* Mobile for the main hero image */
  .hero-main-image-container {
    padding: 0 16px;
    max-width: 100%;
    aspect-ratio: 1216 / 480; /* Keeping consistent for now, but monitor for mobile cropping */
  }

  .hero-main-image-container img {
    /* No border here */
  }

  /* Feature Rows (Stack columns on mobile) */
  .feature-row,
  .feature-row-reverse {
    flex-direction: column;
    gap: 32px;
    padding: 0 16px;
  }

  /* CRITICAL CHANGE: Order adjustment for ALL feature rows on mobile */
  .feature-row .feature-image,
  .feature-row-reverse .feature-image { /* Target images in both row types */
    order: -1; /* Make images appear first on mobile */
  }

  .feature-row .feature-text,
  .feature-row-reverse .feature-text { /* Target text in both row types */
    order: 1; /* Make text appear after image on mobile */
  }

  .feature-image {
    width: 100%;
    flex: 0 0 auto;
    padding: 0;
  }

  .feature-image img {
    max-width: 100%;
    height: auto;
    border: 2px solid var(--gray900);
  }

  .feature-text {
    width: 100%;
    flex: 0 0 auto;
    text-align: left;
    max-width: 100%; /* Ensure it can take full width on mobile */
    gap: 24px;
    align-items: flex-start;
  }

  .feature-text h2 {
    font-size: 28px;
    line-height: 36px;
    text-align: left;
  }

  .feature-text p { /* Applies to VIN-Specific PPC Automotive Ad Platform: */
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }

  /* --- Mobile LIST ITEM STYLING --- */
  .feature-text ul {
    align-items: flex-start;
    gap: 24px;
  }

  .feature-text ul li {
    flex-direction: row; /* Keep icon and text in a row */
    align-items: flex-start; /* Align icon with the top of text */
    gap: 8px; /* Space between icon and stacked text */
    text-align: left;
  }

  .feature-text ul li::before {
    margin-top: 4px; /* Retain alignment margin for row */
  }

  .feature-text .list-item-text-wrapper {
    width: 100%; /* Take full width in mobile list item */
  }

  .feature-text .list-item-title {
    font-size: 16px;
    line-height: 24px;
    text-align: left;
  }

  .feature-text .list-item-description {
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    margin-top: 0;
  }
  /* --- END MOBILE LIST ITEM STYLING --- */


/* --- Mobile Responsiveness Overrides (max-width: 991.98px for 'lg' breakpoint) --- */
@media (max-width: 991.98px) {

  /* ... (other mobile adjustments) ... */

  /* Metrics section adjustments for mobile */
  .metrics-section h2 {
    font-size: 36px; /* Matched from features.css */
    line-height: 44px; /* Matched from features.css */
    margin-bottom: 24px; /* Matched from features.css */
    padding: 0 16px;
    text-align: left;
  }

  .metrics-grid {
    flex-direction: column; /* Matched from features.css */
    gap: 0px; /* Set to 0px as you tested */
    padding: 0 16px;
    align-items: flex-start; /* Matched from features.css */
  }

  .metric-item {
    max-width: 100%;
    align-items: flex-start; /* Matched from features.css */
    text-align: left; /* Matched from features.css */
    gap: 4px; /* Space between number and label */
    margin: 0; /* ADDED: Ensure no external margin on the item */
    padding: 0; /* ADDED: Ensure no internal padding on the item contributing to space */
  }

  .metric-item .number {
    font-size: 32px; /* Matched from features.css */
    color: var(--blue-chill);
    line-height: 1.2; /* Adjusted: Explicitly set a smaller line-height for number */
    margin-bottom: 0px;
    padding: 0; /* ADDED: Ensure no padding on the number */
  }

  .metric-item .label {
    font-size: 15px; /* Matched from features.css */
    color: var(--gray900);
    line-height: 1.2; /* Adjusted: Explicitly set a smaller line-height for label */
    margin-top: 0px; /* ADDED: Ensure no top margin */
    padding: 0; /* ADDED: Ensure no padding on the label */
  }

  /* Testimonials section adjustments for mobile */
  .testimonials-section {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  
  .testimonials-section h2 {
    font-size: 31px; /* Reduced by 5px from 36px */
    line-height: 39px; /* Adjusted proportionally */
    margin-bottom: 24px;
    padding: 0 16px;
    text-align: left;
  }

  .testimonials-carousel-container {
    padding: 0 16px !important;
    position: relative;
    overflow: hidden;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .testimonials-carousel {
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .testimonials-track {
    gap: 16px !important; /* Smaller gap on mobile */
    max-width: 100% !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  /* Force single card layout on mobile with maximum specificity */
  .testimonials-section .testimonials-carousel-container .testimonials-carousel .testimonials-track .testimonial-card,
  .testimonials-track:has(.testimonial-card:nth-child(3):last-child) .testimonial-card,
  .testimonials-track:has(.testimonial-card:nth-child(2):last-child) .testimonial-card,
  .testimonials-track:has(.testimonial-card:nth-child(1):last-child) .testimonial-card,
  .testimonials-track.single-testimonial .testimonial-card,
  .testimonials-track.two-testimonials .testimonial-card,
  .testimonials-track.three-testimonials .testimonial-card {
    flex: 0 0 calc(100% - 0px) !important; /* Force single card on mobile */
    min-width: 280px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 20px !important; /* Smaller padding on mobile */
    gap: 16px !important; /* Smaller gap between elements */
    min-height: 180px !important; /* Smaller minimum height on mobile */
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.1) !important; /* Lighter shadow on mobile */
  }

  /* Hide navigation arrows on mobile since we use auto-scroll */
  .carousel-nav {
    display: none;
  }

  .testimonial-content {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .testimonial-text {
    font-size: 15px !important;
    line-height: 22px !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .testimonial-author {
    gap: 2px !important;
    max-width: 100% !important;
  }

  .author-name {
    font-size: 14px !important;
    max-width: 100% !important;
  }

  .author-details {
    font-size: 12px !important;
    max-width: 100% !important;
  }

  .testimonial-rating .star {
    font-size: 16px; /* Smaller stars on mobile */
  }
  
  /* Ensure smooth scrolling on mobile */
  .testimonials-track {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Better touch targets for mobile */
  .testimonial-card:hover {
    transform: none; /* Disable hover effects on mobile */
  }

}

/* MOBILE TESTIMONIALS - Complete override for mobile devices */
@media (max-width: 991.98px) {
  
  /* Reset and constrain the entire testimonials section */
  .testimonials-section {
    max-width: 100vw !important;
    width: 100vw !important;
    overflow: hidden !important;
    padding: 48px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Force carousel container to mobile width with proper centering */
  .testimonials-carousel-container {
    max-width: 100vw !important;
    width: 100vw !important;
    padding: 0 16px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  /* Force carousel to mobile width with centering */
  .testimonials-carousel {
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 auto !important;
  }
  
  /* Force track to mobile layout with proper alignment */
  .testimonials-track {
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    gap: 0 !important; /* Remove gap to prevent shifting */
    flex-wrap: nowrap !important;
    display: flex !important;
    transition: transform 0.3s ease-in-out !important;
    align-items: center !important;
  }
  
  /* COMPLETE OVERRIDE of all desktop card styles - optimized for 412px and similar mobile devices */
  .testimonial-card {
    flex: 0 0 calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: calc(100vw - 32px) !important;
    padding: 18px !important; /* Slightly reduced padding for 412px screens */
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: var(--white) !important;
    border: 1px solid var(--gray300) !important;
    border-radius: 12px !important;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
    min-height: 160px !important; /* Reduced height for mobile screens */
    justify-content: space-between !important;
  }
  
  /* Override all content within cards */
  .testimonial-content {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    flex: 1 !important;
  }
  
  .testimonial-text {
    font-size: 14px !important; /* Slightly smaller for 412px screens */
    line-height: 20px !important; /* Tighter line height for mobile */
    max-width: 100% !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    color: var(--gray900) !important;
    font-style: italic !important;
    margin: 0 !important;
    flex: 1 !important; /* Allow text to expand */
  }
  
  .testimonial-author {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .author-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gray900) !important;
    max-width: 100% !important;
  }
  
  .author-details {
    font-size: 12px !important;
    color: var(--gray600) !important;
    max-width: 100% !important;
  }
  
  .testimonial-rating {
    display: flex !important;
    gap: 4px !important;
    max-width: 100% !important;
  }
  
  .testimonial-rating .star {
    font-size: 16px !important;
    color: var(--gray300) !important;
  }
  
  .testimonial-rating .star.filled {
    color: #fbbf24 !important;
  }
  
  /* Hide navigation arrows completely on mobile */
  .carousel-nav {
    display: none !important;
  }
  
  /* Disable hover effects on mobile */
  .testimonial-card:hover {
    transform: none !important;
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
  }
}

/* Additional optimizations for smaller mobile screens (412px and similar) */
@media (max-width: 450px) {
  .testimonials-section h2 {
    font-size: 28px !important; /* Even smaller for very small screens */
    line-height: 36px !important;
  }
  
  .testimonial-card {
    padding: 16px !important; /* Tighter padding for small screens */
    min-height: 140px !important; /* Reduced height */
  }
  
  .testimonial-text {
    font-size: 13px !important; /* Smaller text for very small screens */
    line-height: 18px !important;
  }
  
  .author-name {
    font-size: 13px !important;
  }
  
  .author-details {
    font-size: 11px !important;
  }
}

/* Variables - ensure these are defined elsewhere or added here */
:root {
  --white: #ffffff;
  --gray100: #f2f4f7;
  --gray300: #d0d5dd;
  --gray600: #475467;
  --gray900: #101828;
  --blue-chill: #0199a6;
  --blue-chill-2: #0199a6;
}