/* main slider container */
    .testimonial-slider {
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
    }

    /* header section - red, black, white energy */
    .slider-header {
      text-align: center;
      margin-bottom: 3rem;
    }

    .badge {
      display: inline-block;
      background: #c00000;
      color: white;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 0.4rem 1.2rem;
      border-radius: 40px;
      margin-bottom: 1rem;
      box-shadow: 0 0 12px rgba(192, 0, 0, 0.6);
    }

    h2 {
      font-size: 2.8rem;
      font-weight: 800;
      background: linear-gradient(125deg, #a9a9a9, #4a4949);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: -0.02em;
    }

    h2 span {
      color: #c00000;
      background: none;
      -webkit-background-clip: unset;
      background-clip: unset;
      text-shadow: 0 0 10px rgba(192, 0, 0, 0.4);
    }

    .subhead {
      color: #9ca3af;
      font-size: 0.9rem;
      margin-top: 0.6rem;
      border-bottom: 1px dashed rgba(192, 0, 0, 0.4);
      display: inline-block;
      padding-bottom: 0.3rem;
    }

    /* slider wrapper */
    .slider-wrapper {
      position: relative;
      overflow: hidden;
      border-radius: 2rem;
      padding: 0.5rem 0;
    }

    .slider-track {
      display: flex;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      gap: 2rem;
    }

    /* each card - exactly 1/3 of container minus gap adjustments */
    .testimonial-card {
      flex: 0 0 calc(33.333% - 1.35rem);
      max-width: 450px;
      min-width: 280px;
      background: rgba(8, 8, 8, 0.85);
      backdrop-filter: blur(10px);
      border-radius: 1.8rem;
      padding: 1.8rem 1.6rem;
      border: 1px solid rgba(255, 255, 255, 0.07);
      transition: all 0.3s ease;
      box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.6);
      position: relative;
    }

    /* red accent border on hover */
    .testimonial-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 15%;
      width: 70%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #c00000, #ff4d4d, #c00000, transparent);
      border-radius: 4px;
      opacity: 0.5;
      transition: opacity 0.3s;
    }

    .testimonial-card:hover {
      transform: translateY(-6px);
      border-color: rgba(192, 0, 0, 0.4);
      background: rgba(15, 15, 15, 0.95);
      box-shadow: 0 28px 35px -12px rgba(192, 0, 0, 0.25);
    }

    .quote-icon {
      font-size: 2rem;
      color: #c00000;
      margin-bottom: 1rem;
      opacity: 0.8;
    }

    .testimonial-text {
      color: #f0f0f0;
      font-size: 0.95rem;
      line-height: 1.55;
      font-weight: 400;
      margin-bottom: 1.3rem;
    }

    .rating {
      display: flex;
      gap: 0.25rem;
      margin-bottom: 1.3rem;
    }

    .rating i {
      font-size: 0.85rem;
      color: #4a4a4a;
    }

    .rating i.filled {
      color: #c00000;
      text-shadow: 0 0 3px #c00000;
    }

    .rating i.half-filled {
      color: #c00000;
    }

    .client-info {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: 1rem;
    }

    .avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #c00000;
      background: #1a1a1a;
    }

    .client-details h4 {
      color: white;
      font-weight: 600;
      font-size: 0.95rem;
    }

    .client-details .title {
      color: #c00000;
      font-size: 0.65rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* navigation controls */
    .slider-controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.5rem;
      margin-top: 2.5rem;
    }

    .nav-btn {
      background: rgba(0, 0, 0, 0.75);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(192, 0, 0, 0.6);
      width: 48px;
      height: 48px;
      border-radius: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      color: white;
      font-size: 1.3rem;
    }

    .nav-btn:hover {
      background: #c00000;
      border-color: white;
      transform: scale(1.05);
      box-shadow: 0 0 12px #c00000;
    }

    .dots-container {
      display: flex;
      gap: 0.7rem;
      align-items: center;
    }

    .dot {
      width: 10px;
      height: 10px;
      background-color: #3a3a3a;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.25s;
    }

    .dot.active {
      background-color: #c00000;
      width: 28px;
      border-radius: 10px;
      box-shadow: 0 0 8px #c00000;
    }

    /* dynamic action buttons */
    .dynamic-actions {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 2rem;
      flex-wrap: wrap;
    }

    .action-btn {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(192, 0, 0, 0.5);
      padding: 0.6rem 1.4rem;
      border-radius: 40px;
      color: #f0f0f0;
      font-weight: 500;
      font-size: 0.8rem;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .action-btn i {
      color: #c00000;
    }

    .action-btn:hover {
      background: #c00000;
      border-color: white;
      color: white;
    }

    .action-btn:hover i {
      color: white;
    }

    /* responsive: on tablet show 2 cards, on mobile 1 card */
    @media (max-width: 950px) {
      .testimonial-card {
        flex: 0 0 calc(50% - 1rem);
      }
    }

    @media (max-width: 680px) {
      .testimonial-card {
        flex: 0 0 100%;
      }
      h2 {
        font-size: 2rem;
      }
      .slider-controls {
        margin-top: 1.5rem;
      }
    }

    /* card entrance animation */
    @keyframes cardFade {
      0% { opacity: 0; transform: translateY(10px);}
      100% { opacity: 1; transform: translateY(0);}
    }
    .testimonial-card {
      animation: cardFade 0.4s ease-out;
    }