:root {
  --bg1: #0f3b5f; /* top */

  --bg2: #125b86; /* bottom */

  --accent: #2ea0ff;

  --card-w: 320px;

  --card-h: 460px;

  --avatar-size: 140px;

  --shadow-color: rgba(2, 34, 53, 0.6);

  --gap: 160px; /* spacing between cards (reduced) */
}

.stage {
  width: 100%;

  height: 560px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  perspective: 1200px;

  touch-action: pan-y;

  margin-top: 50px;
}

/* shadow beneath the central active card */

.stage::after {
  content: "";

  position: absolute;

  width: 500px;

  height: 90px;

  left: 50%;

  transform: translateX(-50%);

  bottom: 48px;

  filter: blur(24px);

  /* background: radial-gradient(
    ellipse at center,

    rgba(0, 0, 0, 0.55) 0%,

    rgba(0, 0, 0, 0.08) 60%,

    rgba(0, 0, 0, 0) 100%
  ); */

  z-index: 1;
}

.testimonial_carousel {
  width: 100%;

  height: 100%;

  position: relative;

  display: block;
}

.cards {
  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  height: 100%;

  width: 100%;

  pointer-events: none;
}

.card {
  --x: 0; /* offset index */

  position: absolute;

  width: var(--card-w);

  height: var(--card-h);

  left: 50%;

  top: 50%;

  transform-origin: center bottom;

  border-radius: 8px;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1),
    rgba(250, 250, 250, 1)
  );

  padding: 120px 24px 24px 24px;
  box-shadow: 0 18px 30px rgba(4, 20, 40, 0.25);
  box-sizing: border-box;

  text-align: center;

  transition: transform 500ms cubic-bezier(0.2, 0.9, 0.25, 1),
    opacity 350ms ease;

  pointer-events: auto;

  z-index: 10;
}

.card .avatar-wrap {
  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  top: -78px;

  width: var(--avatar-size);

  height: var(--avatar-size);

  border-radius: 50%;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.9)
  );

  display: flex;

  align-items: center;

  justify-content: center;

  border: 9px solid var(--accent);

  box-sizing: content-box;

  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.card .avatar-wrap img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}

.play-btn {
  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  top: 38px;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: white;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

  border: 8px solid var(--accent);
}

.play-btn::after {
  content: "";

  display: block;

  width: 0;

  height: 0;

  border-left: 10px solid var(--accent);

  border-top: 6px solid transparent;

  border-bottom: 6px solid transparent;

  margin-left: 3px;
}

.card .text {
  color: #222;

  line-height: 1.6;

  font-size: 15px;

  margin-top: 6px;

  padding: 0 8px;

  height: 158px;

  overflow: hidden;

  text-align: center;
}

.card .who {
  margin-top: 18px;

  font-weight: 800;

  letter-spacing: 0.6px;
}

.card .who small {
  font-weight: 600;

  color: #888;

  margin-left: 8px;

  font-size: 14px;
}

/* position variants adjusted to reduce gap and show 5 at once */

.card[data-pos="0"] {
  transform: translate(-50%, -50%) translateX(0px) scale(1) rotateY(0deg)
    translateZ(80px);

  opacity: 1;

  z-index: 50;
}

.card[data-pos="-1"] {
  transform: translate(-50%, -50%) translateX(calc(var(--gap) * -1))
    rotateZ(-6deg) rotateY(20deg) scale(0.86) translateY(8px);

  opacity: 0.98;

  z-index: 40;
}

.card[data-pos="1"] {
  transform: translate(-50%, -50%) translateX(calc(var(--gap) * 1))
    rotateZ(6deg) rotateY(-20deg) scale(0.86) translateY(8px);

  opacity: 0.98;

  z-index: 40;
}

.card[data-pos="-2"] {
  transform: translate(-50%, -50%) translateX(calc(var(--gap) * -2))
    rotateZ(-10deg) rotateY(28deg) scale(0.72) translateY(16px);

  opacity: 0.78;

  z-index: 30;

  filter: saturate(0.9);
}

.card[data-pos="2"] {
  transform: translate(-50%, -50%) translateX(calc(var(--gap) * 2))
    rotateZ(10deg) rotateY(-28deg) scale(0.72) translateY(16px);

  opacity: 0.78;

  z-index: 30;

  filter: saturate(0.9);
}

.card[data-pos="out"] {
  transform: translate(-50%, -50%) translateY(-20px) scale(0.5);

  opacity: 0;

  z-index: 5;
}

@media (max-width: 1100px) {
  :root {
    --gap: 120px;

    --card-w: 280px;

    --card-h: 420px;

    --avatar-size: 120px;
  }
}

@media (max-width: 800px) {
  :root {
    --gap: 100px;

    --card-w: 260px;

    --card-h: 400px;

    --avatar-size: 110px;
  }

  .card[data-pos="-2"],
  .card[data-pos="2"] {
    display: none;
  }

  .stage::after {
    width: 320px;
  }
}

/* nav buttons */

.nav-btn {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  display: none;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 80;

  backdrop-filter: blur(4px);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.nav-btn.left {
  left: 6%;
}

.nav-btn.right {
  right: 6%;
}

.nav-btn:active {
  transform: translateY(-50%) scale(0.96);
}

.nav-btn::after {
  content: "";

  display: block;

  width: 0;

  height: 0;

  border-top: 10px solid transparent;

  border-bottom: 10px solid transparent;
}

.nav-btn.left::after {
  border-right: 14px solid white;

  margin-left: 3px;
}

.nav-btn.right::after {
  border-left: 14px solid white;

  margin-left: 3px;
}

/* bottom controls */

.controls {
  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  bottom: 22px;

  display: flex;

  gap: 12px;

  align-items: center;

  z-index: 60;
}

.dot {
  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.25);

  display: inline-block;

  cursor: pointer;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.dot.active {
  background: transparent;

  border: 2px solid rgba(255, 255, 255, 0.9);

  width: 18px;

  height: 18px;
}