/* Scoped: everything under .video-stack-section */
      .video-stack-section {
  --primary-navy: #1a237e;
  --muted: #6c757d;
  font-family: "Poppins", sans-serif;

  background: #0a3d7e;   /* 👈 yeh line add karo */
}

      .video-stack-section .video-stack-wrap {
        padding: 3.2rem 2rem;
        background: transparent;
      }
      .video-stack-section .video-stack-inner {
        display: flex;
        gap: 2.5rem;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
      }

      /* LEFT column (text) */
      /* LEFT column (text) - frosted background for readability */
      .video-stack-section .video-stack-left {
        margin-top: -5rem;
        width: 40%;
        min-width: 300px;
        background: white; /* translucent white */
        padding: 2rem;
        border-radius: 12px;
        backdrop-filter: blur(6px); /* subtle frosted glass effect */
        -webkit-backdrop-filter: blur(6px); /* Safari support */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      }

      .video-stack-section .vs-badge {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1a237e, #3949ab);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        margin-bottom: 16px;
        box-shadow: 0 10px 30px rgba(26, 35, 126, 0.12);
      }
      .video-stack-section .vs-label {
        display: inline-block;
        background: rgba(26, 35, 126, 0.08);
        color: var(--primary-navy);
        padding: 6px 12px;
        border-radius: 28px;
        font-weight: 700;
        font-size: 12px;
      }
      .video-stack-section .vs-heading {
        font-family: "Playfair Display", serif;
        font-size: 34px;
        color: #0b1;
        margin: 12px 0 18px;
        color: var(--primary-navy);
        line-height: 1.05;
      }
      .video-stack-section .vs-gradient {
        background: linear-gradient(90deg, #283593, #3949ab);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .video-stack-section .vs-desc {
        color: var(--muted);
        line-height: 1.6;
        margin-bottom: 8px;
      }

      /* RIGHT column (stack) */
      .video-stack-section .video-stack-right {
        width: 60%;
        min-width: 360px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        position: relative;
      }

      /* stack container */
      .video-stack-section .vs-stack {
        width: 520px;
        max-width: 92%;
        height: 360px;
        position: relative;
        display: block;
        perspective: 1400px;
        touch-action: pan-y;
        outline: none;
      }

      /* card base */
      .video-stack-section .vs-card {
        position: absolute;
        left: 50%;
        top: 50%;
        transform-style: preserve-3d;
        transform-origin: center center;
        transition: transform 550ms cubic-bezier(0.2, 0.9, 0.25, 1),
          opacity 400ms ease, box-shadow 400ms ease;
        width: 420px;
        max-width: 88%;
        height: 260px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 20px 40px rgba(8, 15, 50, 0.12);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        z-index: 0;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.9) rotate(-6deg);
      }

      /* media inside card */
      .video-stack-section .vs-media {
        flex: 1;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .video-stack-section .vs-media img,
      .video-stack-section .vs-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      /* profile/meta */
      .video-stack-section .vs-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 3px 10px; /* reduced height */
        border-top: 1px solid #f1f3f6;
        background: #fff;
      }
      .video-stack-section .vs-profile img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #fff;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
      }
      /* Move the name to the right */
.video-stack-section .vs-info {
  margin-left: auto;   /* pushes it to the far right */
  text-align: right;   /* align text properly */
}
      .video-stack-section .vs-info h4 {
        margin: 0;
        font-size: 15px;
        color: #1a237e;
      }
      .video-stack-section .vs-info p {
        margin: 0;
        font-size: 12px;
        color: var(--muted);
      }

      /* controls */
      .video-stack-section .vs-controls {
        display: flex;
        gap: 12px;
        margin-top: 10px;
      }
      .video-stack-section .vs-btn {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: none;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 6px 18px rgba(8, 15, 50, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 14px;
      }
      .video-stack-section .vs-btn:active {
        transform: scale(0.98);
      }

      /* positions — these control where each card sits in the stack */
      /* visible top card (front) */
      .video-stack-section .vs-card.pos-0 {
        z-index: 50;
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1) rotate(0deg) translateZ(40px);
        box-shadow: 0 30px 60px rgba(8, 15, 50, 0.16);
      }

      /* second card slightly behind and rotated */
      .video-stack-section .vs-card.pos-1 {
        z-index: 40;
        opacity: 1;
        transform: translate(-44%, -46%) scale(0.95) rotate(-4deg)
          translateZ(20px);
      }

      /* third card further back */
      .video-stack-section .vs-card.pos-2 {
        z-index: 30;
        opacity: 1;
        transform: translate(-38%, -42%) scale(0.9) rotate(-8deg)
          translateZ(0px);
      }

      /* fourth card (subtle) */
      .video-stack-section .vs-card.pos-3 {
        z-index: 20;
        opacity: 0.9;
        transform: translate(-34%, -38%) scale(0.86) rotate(-12deg)
          translateZ(-20px);
      }

      /* hidden/back card */
      .video-stack-section .vs-card.pos-4 {
        z-index: 10;
        opacity: 0.75;
        transform: translate(-30%, -34%) scale(0.82) rotate(-16deg)
          translateZ(-40px);
      }

      /* ensure any cards beyond 4 are out of sight */
      .video-stack-section .vs-card.pos-hidden {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7) rotate(-20deg)
          translateZ(-80px);
        z-index: 0;
      }

      /* disable pointer events while animating */
      .video-stack-section .vs-stack.animating .vs-card {
        pointer-events: none;
      }

      .video-stack-section .vs-media {
        position: relative;
        flex: 1;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .video-stack-section .vs-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;      /* remove iframe rounding so parent's overflow:hidden does the clipping */
  display: block;        /* avoids inline/whitespace issues */
  background: transparent; /* ensure player surface is transparent where possible */
}

/* ----------------------------
   Video Testimonials Heading
   ---------------------------- */
.video-stack-header {
  text-align: center;
  margin-bottom: 30px; /* ⬅ increased from 40px */
  padding-top: 100px;   /* keep as is */
}


.video-stack-title {
  font-family: 'Six Caps', sans-serif;
  font-size: 5rem;
  font-weight: 400;
  letter-spacing: 4px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  margin: 0 0 18px 0;
}

.video-stack-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: #c4c5c7;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}


      /* responsive */
      @media (max-width: 992px) {
        .video-stack-section .video-stack-inner {
          flex-direction: column;
          gap: 1.6rem;
          align-items: center;
        }
        .video-stack-section .video-stack-left {
          width: 100%;
          text-align: center;
        }
        .video-stack-section .video-stack-right {
          width: 100%;
        }
        .video-stack-section .vs-stack {
          height: 320px;
        }
        .video-stack-section .vs-card {
          height: 240px;
        }
      }

      @media (max-width: 480px) {
        .video-stack-section .vs-stack {
          height: 240px;
        }
        .video-stack-section .vs-card {
          height: 190px;
          width: 320px;
        }
      }





      /* ✅ Mobile only: match text card height with video card */
@media (max-width: 480px) {
  .video-stack-section .video-stack-left {
    height: 190px;  /* same as .vs-card height on small screens */
    display: flex;
    flex-direction: column;
    justify-content: center; /* keep content centered */
  }
}

@media (max-width: 992px) and (min-width: 481px) {
  .video-stack-section .video-stack-left {
    height: 240px; /* same as .vs-card height for tablets */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .video-stack-title {
    font-size: 3.4rem;
  }
}
@media (max-width: 767px) {
  .video-stack-title {
    font-size: 2.2rem;
    letter-spacing: 2px;
  }

   .video-stack-header {
    margin-bottom: 60px; /* ⬅ increase gap below heading on mobile */
  }
}