/* ===============================================
   Testimonials Section Styles
   Author: Professional UI/UX Developer
   Version: 1.2.0 - Enhanced Clarity & Visibility
   =============================================== */

/* ===============================================
   TABLE OF CONTENTS:
   1. CSS Variables & Custom Properties
   2. Base Section Styles
   3. Header & Title Styles
   4. Testimonial Cards & Carousel
   5. Testimonial Content Formatting
   6. Author & Badge Styling
   7. Navigation & Controls
   8. Floating Elements Animation
   9. Buttons & CTAs
   10. Responsive Adaptations
   11. Dark Mode Styles
   12. Reduced Motion & Accessibility
   =============================================== */

/* 1. Variables & Custom Properties -------------- */
.testimonials-section {
  /* Colors - Enhanced with better integration between primary and secondary */
  --testimonials-primary: #231651; /* Deep primary color */
  --testimonials-secondary: #00C2A8; /* More saturated secondary for better contrast */
  --testimonials-primary-light: rgba(35, 22, 81, 0.85); /* Lighter version of primary */
  --testimonials-secondary-light: rgba(0, 194, 168, 0.2); /* Lighter version of secondary */
  --testimonials-blend: linear-gradient(135deg, var(--testimonials-primary), var(--testimonials-secondary)); /* Blend gradient */
  --testimonials-text: #333; /* Darker text for better contrast */
  --testimonials-text-light: #a5b0d8;
  --testimonials-bg: #f5f7ff; /* Softer background color */
  --testimonials-card-bg: rgba(255, 255, 255, 0.95); /* Slightly more opaque cards */
  --testimonials-card-shadow: 0 0.5rem 1.5rem rgba(35, 22, 81, 0.1); /* Softer shadow */
  --testimonials-overlay: rgba(0, 194, 168, 0.15); /* More visible overlay */
  
  /* Star colors - More vibrant gold with better contrast */
  --star-color: #FFC107; /* Brighter gold */
  --star-shadow: 0 0 10px rgba(255, 193, 7, 0.6); /* Stronger glow */
  
  /* Gradients - Enhanced with better color integration */
  --testimonial-gradient: linear-gradient(135deg, var(--testimonials-primary), var(--testimonials-secondary));
  --badge-gradient: linear-gradient(135deg, #00C2A8, #00886E); /* Greens derived from secondary */
  --button-gradient: linear-gradient(135deg, var(--testimonials-primary), var(--testimonials-secondary));
  --button-hover-gradient: linear-gradient(135deg, var(--testimonials-secondary), var(--testimonials-primary));
  
  /* Sizing & Spacing */
  --section-spacing: clamp(4rem, 10vw, 7rem);
  --card-spacing: clamp(1.5rem, 4vw, 2.5rem);
  --card-border-radius: 1.25rem;
  --card-inner-padding: clamp(1.5rem, 4vw, 2.25rem);
  
  /* Typography */
  --title-font-size: clamp(1.75rem, 4vw, 2.5rem); /* Adjusted title size */
  --quote-font-size: clamp(1rem, 1.5vw, 1.125rem); /* Adjusted quote size */
  --author-font-size: clamp(0.875rem, 1.25vw, 1rem); /* Adjusted author size */
  --location-font-size: clamp(0.75rem, 0.9vw, 0.875rem); /* Adjusted location size */
  
  /* Effects - Smoother transitions */
  --testimonial-transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), 
                          opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1), 
                          box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  --card-hover-scale: 1.03;
  --perspective: 1200px;
  --rotation-y: -12deg;
  --rotation-x: 4deg;
  
  /* Z-index layers */
  --z-floating: 1;
  --z-cards: 2;
  --z-controls: 3;
  
  /* Highlight colors */
  --highlight-color: rgba(0, 194, 168, 0.2); /* Subtle highlight */
  --focus-ring-color: rgba(0, 194, 168, 0.5); /* Softer focus ring */
}

/* 2. Base Section Styles ----------------------- */
.testimonials-section {
  position: relative;
  padding: var(--section-spacing) 0;
  background-color: var(--testimonials-bg);
  overflow: hidden;
  background-image: linear-gradient(135deg, var(--testimonials-bg), #ffffff);
  border-top: 1px solid rgba(0, 194, 168, 0.25);
  border-bottom: 1px solid rgba(0, 194, 168, 0.25);
}

.testimonials-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, var(--testimonials-secondary-light) 0%, transparent 70%),
    radial-gradient(circle at 80% 70%, rgba(35, 22, 81, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.testimonials-section .container {
  position: relative;
  z-index: var(--z-cards);
  max-width: 1200px;
  content-visibility: auto;
}

/* 3. Header & Title Styles --------------------- */
.testimonials-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 7vw, 4rem);
  position: relative;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.testimonials-section.in-view .testimonials-header {
  opacity: 1;
  transform: translateY(0);
}

.testimonials-title {
  font-size: var(--title-font-size);
  background-image: var(--testimonial-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 0.25rem 1rem;
}

.testimonials-title::before {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 4px;
  background: var(--testimonial-gradient);
  border-radius: 4px;
  box-shadow: 0 2px 10px var(--testimonials-secondary-light);
}

.testimonials-title-decoration {
  height: 0.25rem;
  width: 4rem;
  background: var(--testimonial-gradient);
  border-radius: 0.25rem;
  margin: 0 auto;
  margin-top: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: width 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0 1px 6px var(--testimonials-secondary-light);
}

.testimonials-section.in-view .testimonials-title-decoration {
  width: 10rem;
}

.testimonials-decoration-accent {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: testimonial-shine 3s infinite;
  animation-play-state: paused;
}

.testimonials-section.in-view .testimonials-decoration-accent {
  animation-play-state: running;
}

@keyframes testimonial-shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 4. Testimonial Cards & Carousel -------------- */
.testimonials-stage {
  position: relative;
  margin-bottom: 3.5rem;
  perspective: var(--perspective);
}

.testimonials-perspective {
  transform-style: preserve-3d;
  position: relative;
  margin: 0 auto;
  max-width: 960px;
  min-height: 380px;
}

.testimonials-carousel {
  position: relative;
  width: 100%;
  perspective: var(--perspective);
  transform-style: preserve-3d;
  transform: translateZ(-100px);
}

.testimonial-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: var(--card-border-radius);
  background: var(--testimonials-card-bg);
  box-shadow: var(--testimonials-card-shadow);
  transform-origin: center center;
  transform: translateX(100%) rotateY(var(--rotation-y)) rotateX(var(--rotation-x)) translateZ(-100px);
  opacity: 0;
  transition: var(--testimonial-transition);
  z-index: 0;
  overflow: hidden;
  padding: var(--card-inner-padding);
  cursor: default;
  backface-visibility: hidden;
  outline: none;
  will-change: transform, opacity;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 
    0 0.8rem 2.5rem rgba(35, 22, 81, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 0 0 4px var(--highlight-color);
}

.testimonial-card.active {
  position: relative;
  transform: translateX(0) rotateY(0) rotateX(0) translateZ(0);
  opacity: 1;
  z-index: 2;
}

.testimonial-card.previous {
  transform: translateX(-100%) rotateY(calc(var(--rotation-y) * -1)) rotateX(var(--rotation-x)) translateZ(-100px);
  opacity: 0.3;
  z-index: 1;
  filter: blur(1px);
}

.testimonial-card.next {
  transform: translateX(100%) rotateY(var(--rotation-y)) rotateX(var(--rotation-x)) translateZ(-100px);
  opacity: 0.3;
  z-index: 1;
  filter: blur(1px);
}

.testimonial-card:hover,
.testimonial-card:focus {
  box-shadow: 
    0 1.5rem 3.5rem rgba(35, 22, 81, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 0 0 4px var(--highlight-color);
}

.testimonial-card:focus-visible {
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}

.testimonial-card.active:hover,
.testimonial-card.active:focus {
  transform: scale(var(--card-hover-scale));
}

.testimonial-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, 
                             var(--highlight-color) 0%, 
                             transparent 70%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.8s ease;
  transform: translateZ(-10px);
}

.testimonial-card.active .testimonial-backdrop {
  opacity: 1;
}

/* 5. Testimonial Content Formatting ------------ */
.testimonial-stars {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.star-group {
  display: flex;
  position: relative;
  background: rgba(255, 184, 0, 0.05);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
}

.star {
  color: var(--star-color);
  font-size: 1.5rem;
  margin: 0 0.2rem;
  position: relative;
  filter: drop-shadow(var(--star-shadow));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.testimonial-card.active .star {
  opacity: 1;
  transform: translateY(0);
}

.testimonial-card.active .star:nth-child(1) { transition-delay: 0.15s; }
.testimonial-card.active .star:nth-child(2) { transition-delay: 0.25s; }
.testimonial-card.active .star:nth-child(3) { transition-delay: 0.35s; }
.testimonial-card.active .star:nth-child(4) { transition-delay: 0.45s; }
.testimonial-card.active .star:nth-child(5) { transition-delay: 0.55s; }

.star.half {
  position: relative;
  overflow: hidden;
}

.star.half::after {
  content: "★";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: rgba(255, 184, 0, 0.3);
}

.testimonial-content {
  position: relative;
  margin-bottom: 2.25rem;
  border-left: 3px solid var(--highlight-color);
  border-radius: 0 0.5rem 0.5rem 0;
  padding-left: 0.5rem;
}

.testimonial-content blockquote {
  margin: 0;
  position: relative;
  padding: 0 1.75rem;
}

.testimonial-content blockquote::before {
  content: "\201C"; /* Opening quote */
  position: absolute;
  top: -1.5rem;
  left: -0.5rem;
  font-size: 3.5rem;
  font-family: Georgia, serif;
  line-height: 1;
  background-image: var(--testimonial-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.8;
}

.testimonial-content blockquote::after {
  content: "\201D"; /* Closing quote */
  position: absolute;
  bottom: -2.5rem;
  right: -0.5rem;
  font-size: 3.5rem;
  font-family: Georgia, serif;
  line-height: 1;
  background-image: var(--testimonial-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.8;
}

.testimonial-content p {
  font-size: var(--quote-font-size);
  line-height: 1.75;
  color: var(--testimonials-text);
  text-align: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
  position: relative;
  z-index: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* 6. Author & Badge Styling ------------------- */
.testimonial-author-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 2.25rem;
  position: relative;
  background: var(--testimonials-secondary-light);
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(0, 194, 168, 0.1);
}

.testimonial-author-image {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--testimonials-secondary);
  background: #fff;
  box-shadow: 
    0 0.5rem 1rem rgba(35, 22, 81, 0.15),
    0 0 0 4px rgba(255, 255, 255, 0.8);
  position: relative;
  z-index: 1;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.testimonial-card.active .testimonial-author-image {
  transform: scale(1);
  opacity: 1;
  transition-delay: 0.3s;
}

.testimonial-author-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}

.testimonial-card:hover .testimonial-author-image img {
  transform: scale(1.08);
}

.testimonial-author-info {
  margin: 0 1rem;
  text-align: center;
  transform: translateY(0.5rem);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.testimonial-card.active .testimonial-author-info {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.4s;
}

.testimonial-author {
  font-size: var(--author-font-size);
  font-weight: 700;
  background-image: var(--testimonial-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
  margin-bottom: 0.3rem;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

.testimonial-location {
  font-size: var(--location-font-size);
  color: var(--testimonials-text-light);
  margin: 0;
  font-weight: 500;
  background: rgba(0, 194, 168, 0.1);
  padding: 0.2rem 0.75rem;
  border-radius: 1rem;
  display: inline-block;
}

.testimonial-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background: var(--badge-gradient);
  border-radius: 2rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.75rem;
  box-shadow: 
    0 0.25rem 0.5rem rgba(35, 22, 81, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  transform: translateY(0.5rem);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.testimonial-card.active .testimonial-badge {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.5s;
}

.testimonial-badge-icon {
  display: inline-flex;
  margin-right: 0.375rem;
}

.testimonial-badge-icon svg {
  fill: currentColor;
}

/* 7. Navigation & Controls -------------------- */
.testimonials-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.75rem;
  z-index: var(--z-controls);
  position: relative;
}

.testimonial-nav {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 
    0 0.5rem 1.25rem rgba(35, 22, 81, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 0 0 2px var(--testimonials-secondary-light);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.testimonial-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--testimonial-gradient);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.testimonial-nav svg {
  fill: var(--testimonials-primary);
  transition: fill 0.4s ease, transform 0.3s ease;
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
}

.testimonial-nav:hover::before,
.testimonial-nav:focus::before {
  opacity: 1;
}

.testimonial-nav:hover svg,
.testimonial-nav:focus svg {
  fill: white;
  transform: scale(1.1);
}

.testimonial-nav:active {
  transform: scale(0.95);
}

.testimonial-indicators {
  display: flex;
  align-items: center;
  margin: 0 2rem;
  background: rgba(0, 194, 168, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
}

.testimonial-indicator {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgba(35, 22, 81, 0.15);
  margin: 0 0.5rem;
  border: none;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  padding: 0;
}

.testimonial-indicator::before {
  content: '';
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  right: -0.25rem;
  bottom: -0.25rem;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.4s ease;
}

.testimonial-indicator.active {
  background: var(--testimonial-gradient);
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(35, 22, 81, 0.05);
}

.testimonial-indicator.active::before {
  border-color: var(--testimonial-gradient);
}

.testimonial-indicator:hover,
.testimonial-indicator:focus {
  background: var(--testimonial-gradient);
  outline: none;
}

.testimonial-indicator:focus::before {
  border-color: var(--testimonials-secondary);
}

/* 8. Floating Elements Animation -------------- */
.testimonial-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-floating);
}

.floating-element {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(15px);
  transform: scale(0);
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1),
              opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.testimonials-section.in-view .floating-element {
  transform: scale(1);
  opacity: 0.4;
}

.element-1 {
  top: 10%;
  left: 5%;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(0, 194, 168, 0.35) 0%, transparent 70%);
  animation: float1 18s infinite ease-in-out;
}

.element-2 {
  top: 60%;
  right: 7%;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, rgba(35, 22, 81, 0.15) 0%, transparent 70%);
  animation: float2 22s infinite ease-in-out;
}

.element-3 {
  bottom: 15%;
  left: 15%;
  width: 9rem;
  height: 9rem;
  background: radial-gradient(circle, rgba(65, 105, 225, 0.12) 0%, transparent 70%);
  animation: float3 15s infinite ease-in-out;
}

.element-4 {
  top: 30%;
  right: 25%;
  width: 7rem;
  height: 7rem;
  background: radial-gradient(circle, rgba(0, 194, 168, 0.25) 0%, transparent 70%);
  animation: float4 24s infinite ease-in-out;
}

.element-5 {
  bottom: 30%;
  right: 40%;
  width: 6rem;
  height: 6rem;
  background: radial-gradient(circle, rgba(65, 105, 225, 0.08) 0%, transparent 70%);
  animation: float5 28s infinite ease-in-out;
}

@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(35px, -25px); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-30px, 35px); }
}

@keyframes float3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, 20px); }
}

@keyframes float4 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, -30px); }
}

@keyframes float5 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15px, 25px); }
}

/* 9. Buttons & CTAs --------------------------- */
.testimonials-cta {
  text-align: center;
  transform: translateY(2rem);
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 0.3s;
}

.testimonials-section.in-view .testimonials-cta {
  transform: translateY(0);
  opacity: 1;
}

.testimonials-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 3rem;
  background: var(--testimonial-gradient);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 2.5rem;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
  text-decoration: none;
  letter-spacing: 0.05em;
  box-shadow: 
    0 0.6rem 1.75rem rgba(35, 22, 81, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  text-transform: uppercase;
}

.testimonials-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--button-hover-gradient);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

.testimonials-button::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.testimonials-button:hover {
  transform: translateY(-0.3rem);
  box-shadow: 
    0 0.85rem 2.25rem rgba(35, 22, 81, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset,
    0 0 15px rgba(0, 194, 168, 0.3);
}

.testimonials-button:hover::before {
  opacity: 1;
}

.testimonials-button:hover::after {
  opacity: 0.7;
  transform: scale(1);
}

.testimonials-button:active {
  transform: translateY(-0.1rem);
}

.testimonials-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  background: rgba(255, 255, 255, 0.15);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 4px;
}

.testimonials-button:hover .testimonials-button-icon {
  transform: translateX(0.375rem);
  background: rgba(255, 255, 255, 0.25);
}

.testimonials-button svg {
  fill: currentColor;
}

/* 10. Responsive Adaptations ------------------ */
@media (max-width: 768px) {
  .testimonials-perspective {
    min-height: 480px;
  }
  
  .testimonial-card {
    padding: 1.5rem;
  }
  
  .testimonial-content blockquote::before {
    top: -1rem;
    left: -0.25rem;
    font-size: 3rem;
  }
  
  .testimonial-content blockquote::after {
    bottom: -2rem;
    right: -0.25rem;
    font-size: 3rem;
  }
  
  .testimonial-author-image {
    width: 4.5rem;
    height: 4.5rem;
  }
  
  .testimonial-nav {
    width: 3.5rem;
    height: 3.5rem;
  }
  
  .testimonial-nav svg {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  .testimonials-perspective {
    min-height: 560px;
  }
  
  .testimonial-card {
    padding: 1.25rem;
  }
  
  .testimonial-author-container {
    flex-direction: column;
    padding: 0.75rem;
  }
  
  .testimonial-author-info {
    margin: 1rem 0;
  }
  
  .testimonial-content blockquote {
    padding: 0 0.5rem;
  }
  
  .testimonial-nav {
    width: 3rem;
    height: 3rem;
  }
  
  .testimonial-nav svg {
    width: 24px;
    height: 24px;
  }
  
  .testimonial-indicators {
    margin: 0 1rem;
  }
  
  .testimonial-indicator {
    width: 0.875rem;
    height: 0.875rem;
  }
}

/* 11. Dark Mode Styles ------------------------ */
@media (prefers-color-scheme: dark) {
  .testimonials-section {
    --testimonials-text: #f0f6ff;
    --testimonials-text-light: #a5b0d8;
    --testimonials-bg: var(--dark-bg, #0c0c18);
    --testimonials-card-bg: rgba(25, 25, 42, 0.95);
    --highlight-color: rgba(0, 194, 168, 0.2);
    --testimonials-secondary-light: rgba(0, 194, 168, 0.12);
    background-image: linear-gradient(135deg, rgba(12, 12, 24, 0.97), rgba(18, 18, 36, 0.97));
    border-top: 1px solid rgba(0, 194, 168, 0.12);
    border-bottom: 1px solid rgba(0, 194, 168, 0.12);
  }
  
  .testimonials-section::before {
    background-image: 
      radial-gradient(circle at 20% 30%, rgba(0, 194, 168, 0.08) 0%, transparent 70%),
      radial-gradient(circle at 80% 70%, rgba(35, 22, 81, 0.12) 0%, transparent 70%);
  }
  
  .testimonial-content blockquote::before,
  .testimonial-content blockquote::after {
    opacity: 0.3;
  }
  
  .testimonial-card {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 
      0 0.8rem 2rem rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 0 0 3px rgba(0, 194, 168, 0.08);
  }
  
  .testimonial-nav {
    background: rgba(38, 38, 42, 0.9);
    box-shadow: 
      0 0.5rem 1.25rem rgba(0, 0, 0, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 0 0 2px rgba(0, 194, 168, 0.15);
  }
  
  .testimonial-indicators {
    background: rgba(0, 194, 168, 0.05);
  }
  
  .testimonial-indicator {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .testimonial-author-image {
    box-shadow: 
      0 0.5rem 1rem rgba(0, 0, 0, 0.35),
      0 0 0 3px rgba(255, 255, 255, 0.12);
  }
  
  .testimonial-author-container {
    background: rgba(0, 194, 168, 0.03);
  }
  
  .testimonial-location {
    background: rgba(0, 194, 168, 0.07);
  }
}

/* 12. Reduced Motion & Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .testimonials-title-decoration,
  .testimonial-card,
  .testimonial-author-image,
  .testimonial-author-info,
  .testimonial-badge,
  .testimonials-button,
  .testimonials-button-icon,
  .floating-element,
  .testimonial-card.active:hover,
  .testimonial-card.active:focus {
    transition-duration: 0.1s;
  }
  
  .floating-element {
    animation: none;
  }
  
  .testimonials-section .star {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  @keyframes testimonial-shine {
    0%, 100% { left: -100%; }
  }
  
  .testimonial-card.previous,
  .testimonial-card.next,
  .testimonial-card.active {
    transition: opacity 0.3s ease;
  }
  
  .testimonial-card.previous,
  .testimonial-card.next {
    transform: none;
    opacity: 0;
    filter: none;
  }
}

/* Fade-in Effects for Testimonials Section */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}