/* Testimonials Section */
.testimonials-section {
    background: #000;
    padding: 80px 0;
    overflow: hidden;
}

.testimonials-container {
    max-width: 100%;
}

/* Testimonials Heading */
.testimonials-heading {
    font-family: "Anton", sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: white;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: 2px;
}

.testimonials-heading .highlight {
    color: #FF6B35;
}


/* Testimonials Rows */
.testimonials-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    width: fit-content;
}

/* Left to Right Animation */
.testimonials-row-left {
    animation: slideLeft 30s linear infinite;
}

/* Right to Left Animation */
.testimonials-row-right {
    animation: slideRight 30s linear infinite;
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Pause on Hover */
.testimonials-row:hover {
    animation-play-state: paused;
}

/* Testimonial Card */
.testimonial-card {
    background: #131316;
    border-radius: 8px;
    border: 1px solid #242424;
    padding: 20px;
    width: 407px;
    min-width: 407px;
    height: 147px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #9AA4B2;
    line-height: 1.5;
    margin-bottom: 15px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-author img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: white;
    font-weight: 500;
}

/* ===== Mobile adapter (replace your previous mobile block) ===== */

/* Mobile: <= 768px — create a minimal deck and hide the desktop rows */
@media (max-width: 768px) {
  /* keep section padding but reduce extreme spacers */
  .testimonials-section {
    padding: 48px 0 60px 0;      /* INCREASED: added bottom padding */
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .testimonials-heading {
    font-size: 2rem;
    margin-bottom: 28px;
    padding: 0 20px;
  }

  /* Hide only the rows, not the container */
  .testimonials-row-left,
  .testimonials-row-right {
    display: none;
  }

  /* the deck we create in JS; will contain the same .testimonial-card nodes */
  .testimonials-stack { 
    display: block; 
    width: 100%; 
    max-width: 980px; 
    margin: 0 auto; 
    padding: 0 16px; 
  }
  
  .deck {
    position: relative;
    height: 200px;                /* REDUCED: adjust to fit card height better */
    display: block;
    overflow: visible;
    touch-action: pan-y;
    user-select: none;
    margin-bottom: 20px;          /* ADDED: spacing to controls */
  }

  /* Layer the existing .testimonial-card WITHOUT changing inner visuals */
  .deck .testimonial-card {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    margin: 0 auto;
    transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 300ms ease;
    z-index: 1;
    cursor: grab;
    width: 86%;
    max-width: 640px;
    /* do NOT override colors / padding / typography - keep original look */
  }

  /* stacked visual positions (front -> back) */
  .deck .testimonial-card[data-pos="0"] { transform: translateX(-50%) translateY(0) scale(1); z-index:40; opacity:1; pointer-events:auto; }
  .deck .testimonial-card[data-pos="1"] { transform: translateX(-50%) translateY(12px) scale(.98); z-index:30; opacity:.95; pointer-events:auto; }
  .deck .testimonial-card[data-pos="2"] { transform: translateX(-50%) translateY(26px) scale(.95); z-index:20; opacity:.8; pointer-events:none; }
  .deck .testimonial-card[data-pos="3"] { transform: translateX(-50%) translateY(40px) scale(.92); z-index:10; opacity:.6; pointer-events:none; }
  .deck .testimonial-card[data-pos="off"] { transform: translateX(-50%) translateY(60px) scale(.88); z-index:5; opacity:0; pointer-events:none; }

  .deck .testimonial-card.dragging { transition: none; cursor: grabbing; }

  /* controls (optional) */
  .deck-controls { 
    display: flex; 
    gap: 12px; 
    align-items: center; 
    justify-content: center; 
    margin-top: 0;               /* REMOVED: extra top margin */
  }
  
  .deck-controls button { 
    background: rgba(255,255,255,0.04); 
    color: #fff; 
    border: 0; 
    width: 40px; 
    height: 36px; 
    border-radius: 8px; 
    font-size: 20px; 
    cursor: pointer;
  }
  
  .dots { 
    display: flex; 
    gap: 6px; 
  }
  
  .dots button { 
    width: 8px; 
    height: 8px; 
    border-radius: 8px; 
    background: rgba(255,255,255,0.12); 
    border: 0; 
    padding: 0; 
    cursor: pointer;
  }
  
  .dots button.active { 
    background: #fff; 
  }
}

/* Small phones: tweak text and card size slightly */
@media (max-width: 480px) {
  .testimonials-heading { 
    font-size: 1.75rem; 
  }
  
  .deck { 
    height: 180px;              /* REDUCED: slightly smaller for mobile */
    margin-bottom: 16px;        /* REDUCED: less spacing on small screens */
  }
  
  .deck .testimonial-card { 
    max-width: 340px; 
  }
}