.test {
      overflow: hidden;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    }

    /* ----- ANIMATED BACKGROUND (HOTEL LUXURY) ----- */
    .testimonial-bg {
      position: fixed;
      inset: 0;
      background: url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&w=1600&q=80') no-repeat center/cover;
      z-index: -3;
      animation: slowZoom 16s infinite alternate ease-in-out;
    }

    .testimonial-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(2px);
      z-index: -2;
    }

    .testimonial-light {
      position: fixed;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 30% 40%, rgba(255, 220, 150, 0.25), transparent 60%);
      animation: driftLight 14s linear infinite;
      z-index: -1;
      pointer-events: none;
    }

    @keyframes slowZoom {
      0% { transform: scale(1.05); }
      100% { transform: scale(1.2); }
    }

    @keyframes driftLight {
      0% { transform: translate(-30%, -30%) rotate(0deg); }
      50% { transform: translate(20%, 20%) rotate(5deg); }
      100% { transform: translate(-30%, -30%) rotate(0deg); }
    }

    /* ----- FLOATING PARTICLES (soft sparkle) ----- */
    .testimonial-particle {
      position: fixed;
      width: 4px;
      height: 4px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(255, 245, 200, 0.8);
      animation: rise 12s linear infinite;
      z-index: -1;
    }

    @keyframes rise {
      0% { transform: translateY(100vh) scale(0.8); opacity: 0; }
      20% { opacity: 0.9; }
      80% { opacity: 0.7; }
      100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
    }

    /* ----- MAIN SECTION ----- */
    .test {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh; /* fallback */
    }

    .testimonial-section {
      width: 100%;
      max-width: 750px;
      padding: 2rem 1.5rem;
      text-align: center;
      position: relative;
      z-index: 5;
    }

    /* fixed heading selector – was .testimonial h2 */
    .testimonial-section h2 {
      font-size: clamp(2rem, 6vw, 2.8rem);
      font-weight: 400;
      letter-spacing: 4px;
      text-transform: uppercase;
      margin-bottom: 2rem;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
      backdrop-filter: blur(4px);
      display: inline-block;
      padding: 0.5rem 2rem;
      border-radius: 60px;
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255,255,240,0.2);
    }

    /* ----- SLIDER CARD (harmonized classes) ----- */
    .testimonial-slider {
      max-width: 550px;
      margin: 0 auto 1.5rem;
      overflow: hidden;
      border-radius: 24px;
    }

    .testimonial-slides {
      display: flex;
      transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .testimonial-card {
      min-width: 100%;
      padding: 2rem 1.8rem 2.5rem;
      background: rgba(10, 10, 15, 0.4);
      backdrop-filter: blur(16px);
      border-radius: 24px;
      color: #f5f0e8;
      text-shadow: 0 2px 5px rgba(0,0,0,0.3);
      border: 1px solid rgba(255,235,200,0.2);
      box-shadow: 0 15px 25px -12px rgba(0,0,0,0.5);
      transition: transform 0.3s ease;
    }

    .testimonial-card:hover {
      transform: scale(1.01);
      background: rgba(20, 20, 30, 0.5);
    }

    .testimonial-text {
      font-size: 1.4rem;
      line-height: 1.6;
      font-weight: 300;
      font-style: italic;
      margin-bottom: 2rem;
      quotes: "“" "”" "‘" "’";
    }
    .testimonial-text::before { content: "“"; font-size: 2.5rem; opacity: 0.6; margin-right: 0.2rem; }
    .testimonial-text::after { content: "”"; font-size: 2.5rem; opacity: 0.6; margin-left: 0.2rem; }

    .testimonial-user {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      font-size: 1.2rem;
      font-weight: 400;
    }

    .testimonial-user img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid rgba(255,245,200,0.8);
      box-shadow: 0 6px 14px rgba(0,0,0,0.4);
    }

    /* ----- DOTS + NAVIGATION ----- */
    .testimonial-slider-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 10px;
    }

    .testimonial-dots {
      display: flex;
      gap: 12px;
    }

    .testimonial-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(220, 210, 200, 0.5);
      border: 1px solid rgba(255,255,255,0.4);
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    }

    .testimonial-dot.active {
      background: #f5e7c8;
      transform: scale(1.3);
      border-color: white;
      box-shadow: 0 0 15px #ffecb3;
    }

    .testimonial-nav-btn {
      background: rgba(30, 30, 35, 0.7);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,240,210,0.3);
      color: white;
      font-size: 1.8rem;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: 0.25s;
      box-shadow: 0 8px 16px rgba(0,0,0,0.5);
      line-height: 1;
      user-select: none;
      font-weight: 300;
      padding-bottom: 6px;
    }

    .testimonial-nav-btn:hover {
      background: rgba(70, 65, 60, 0.8);
      border-color: rgba(255,255,220,0.7);
      transform: scale(1.08);
      color: #fff8e7;
    }

    /* pause indicator (fixed class) */
    .testimonial-slider-container.paused .testimonial-slides {
      transition-duration: 0.2s;
    }

    /* focus style for accessibility */
    .testimonial-dot:focus-visible {
      outline: 2px solid white;
      outline-offset: 2px;
    }

    /* responsive */
    @media (max-width: 500px) {
      .testimonial-card { padding: 1.5rem 1rem; }
      .testimonial-text { font-size: 1.2rem; }
      .testimonial-user img { width: 48px; height: 48px; }
    }