/* ============================================================
       HERO SLIDER — PC VS MOBILE SEPARATE IMAGE VERSION
       ============================================================ */

    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 600px;
      overflow: hidden;
      background-color: #000;
    }

    .hero #heroCarousel,
    .hero .carousel,
    .hero .carousel-inner {
      height: 100% !important;
    }

    .hero .carousel-item {
      height: 100vh !important;
      min-height: 600px;
      position: relative !important;
      overflow: hidden;
    }

    /* ---------- slide background ---------- */
    .hero-slide__bg {
      position: absolute !important;
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      transform: scale(1.06);
      transition: transform 7s ease;
      z-index: 0;
    }

    .carousel-item.active .hero-slide__bg {
      transform: scale(1);
    }

    /* ⬇️ DESKTOP / PC IMAGES ⬇ * /
    /* Note: Yahan aapki original images load hongi jo badi screens ke liye hain */
    .hero-slide--1 .hero-slide__bg { background-image: url('../images/IBP-Corporate-Services-main-banner-11.jpg'); }
    .hero-slide--2 .hero-slide__bg { background-image: url('../images/Remedial-Services-main-banner-23.jpg'); }
    .hero-slide--3 .hero-slide__bg { background-image: url('../images/Trail-blazers-main-banner.jpg'); }
    .hero-slide--4 .hero-slide__bg { background-image: url('../images/Slow-Learners-main-banner.jpg'); }
    .hero-slide--5 .hero-slide__bg { background-image: url('../images/Therapeutic-Services-main-banner.jpg'); }
    .hero-slide--6 .hero-slide__bg { background-image: url('../images/Psychological-Services-main-banner.jpg'); }

    /* ---------- dark overlay (PC Par Transparent Rhega) ---------- */
    .hero-slide__overlay {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: transparent; /* PC par clear view */
      z-index: 1;
      transition: background 0.3s ease;
    }

    /* ---------- slide content ---------- */
    .hero-slide__content {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      align-items: center;
      z-index: 2;
    }

    .hero-slide__inner {
      padding: 0 8%;
      max-width: 750px;
    }

    /* ---------- tag ---------- */
    .hero-slide__tag {
      display: inline-block;
      font-family: 'DM Sans', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.90);
      border: 1px solid rgba(255, 255, 255, 0.35);
      padding: 6px 16px;
      margin-bottom: 20px;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.55s ease 0.2s, transform 0.55s ease 0.2s;
    }

    /* ---------- line ---------- */
    .hero-slide__line {
      width: 0;
      height: 2px;
      background: rgba(255, 255, 255, 0.50);
      margin-bottom: 22px;
      transition: width 0.9s ease 0.4s;
    }

    /* ---------- title ---------- */
    .hero-slide__title {
      font-family: 'Playfair Display', serif;
      font-size: clamp(34px, 5vw, 55px);
      font-weight: 700;
      line-height: 1.15;
      color: #ffffff;
      margin-bottom: 20px;
      opacity: 0;
      transform: translateY(35px);
      transition: opacity 0.65s ease 0.55s, transform 0.65s ease 0.55s;
    }

    /* ---------- description ---------- */
    .hero-slide__desc {
      font-family: 'DM Sans', sans-serif;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.8;
      color: rgba(255, 255, 255, 0.85);
      max-width: 550px;
      margin-bottom: 36px;
      opacity: 0;
      transform: translateY(25px);
      transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s;
    }

    /* ---------- buttons ---------- */
    .hero-slide__btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease 1s, transform 0.6s ease 1s;
    }

    .hero-btn {
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-decoration: none;
      padding: 14px 32px;
      border: 1.5px solid transparent;
      display: inline-block;
      transition: background 0.3s, color 0.3s, border-color 0.3s;
    }

    .hero-btn--primary {
      background: #7b1c2e;
      color: #fff;
      border-color: #7b1c2e;
    }

    .hero-btn--primary:hover {
      background: transparent;
      color: #fff;
      border-color: #fff;
    }

    /* ---------- ACTIVE slide animations ---------- */
    .carousel-item.active .hero-slide__tag,
    .carousel-item.active .hero-slide__title,
    .carousel-item.active .hero-slide__desc,
    .carousel-item.active .hero-slide__btns {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

    .carousel-item.active .hero-slide__line {
      width: 56px;
    }

    /* ---------- arrows ---------- */
    .hero-arrow {
      position: absolute !important;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.10);
      border: 1.5px solid rgba(255, 255, 255, 0.30);
      border-radius: 0 !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
      z-index: 30;
      opacity: 1 !important;
      transition: background 0.3s, border-color 0.3s;
    }

    .hero-arrow--prev { left: 20px; }
    .hero-arrow--next { right: 20px; }

    .hero-arrow:hover {
      background: rgba(255, 255, 255, 0.22);
      border-color: #fff;
    }

    .hero-arrow svg { width: 22px; height: 22px; stroke: #fff; }

    /* ---------- dots ---------- */
    .hero-dots {
      position: absolute;
      bottom: 28px; left: 8%;
      display: flex; gap: 10px; z-index: 30;
    }

    .hero-dot {
      width: 28px; height: 3px;
      background: rgba(255, 255, 255, 0.30);
      border: none; padding: 0; cursor: pointer;
      transition: background 0.3s, width 0.35s;
    }

    .hero-dot.active { width: 50px; background: #fff; }

    /* ---------- progress bar ---------- */
    .hero-progress {
      position: absolute; bottom: 0; left: 0;
      width: 100%; height: 3px;
      background: rgba(255, 255, 255, 0.12); z-index: 30;
    }

    .hero-progress-fill { height: 100%; width: 0%; background: rgba(255, 255, 255, 0.70); }

    /* ---------- scroll hint ---------- */
    .hero-scroll-hint {
      position: absolute; bottom: 24px; right: 8%; z-index: 30;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600;
      letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
    }

    .hero-scroll-line { width: 1px; height: 38px; background: rgba(255, 255, 255, 0.25); position: relative; overflow: hidden; }
    .hero-scroll-line::after {
      content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
      background: rgba(255, 255, 255, 0.75); animation: scrollDrop 2s ease infinite;
    }

    @keyframes scrollDrop { 0% { top: -100%; } 100% { top: 100%; } }

    /* ============================================================
       MOBILE & TABLET MEDIA QUERIES (Separate Images & Overlays)
       ============================================================ */

    @media (max-width: 768px) {
      .hero,
      .hero .carousel-item {
        height: 80vh !important;
        min-height: 540px !important;
      }

      /* ⬇️ MOBILE SEPARATE IMAGES OVERRIDE ⬇️ */
      /* Note: Yahan apni mobile friendly (vertical size) ki images laga dein. 
         Agar file names same hain to aap path badal sakte hain e.g., '../images/mobile/ibp-slider-1.jpg' */
      .hero-slide--1 .hero-slide__bg { background-image: url('../images/IBP-Corporate-Services-main-mobile-banner.jpg'); }
      .hero-slide--2 .hero-slide__bg { background-image: url('../images/Remedial-Services-main-mobile-banner.jpg'); }
      .hero-slide--3 .hero-slide__bg { background-image: url('../images/Trail-blazers-main-mobile-banner.jpg'); }
      .hero-slide--4 .hero-slide__bg { background-image: url('../images/Slow-Learners-main--mobile-banner.jpg'); }
      .hero-slide--5 .hero-slide__bg { background-image: url('../images/Therapeutic-Services-main-mobile-banner.jpg'); }
      .hero-slide--6 .hero-slide__bg { background-image: url('../images/Psychological-Services-main-mobile-banner.jpg'); }

      /* ⬇️ MOBILE OVERLAY ACTIVATION ⬇️ */
      /* Mobile par aate hi background gradient overlay blackish ho jayega taake text clear dikhe */
      .hero-slide__overlay {
        background: rgba(0, 0, 0, 0.80) !important;
      }

      .hero-slide__content {
        align-items: center !important;
        justify-content: center !important;
      }

      .hero-slide__inner {
        padding: 0 24px !important;
        text-align: center !important;
        width: 100%;
      }

      .hero-slide__line {
        margin: 0 auto 20px auto !important;
        width: 45px !important;
      }

      .hero-slide__title {
        font-size: 2rem !important;
        line-height: 1.25 !important;
        margin-bottom: 15px !important;
      }

      .hero-slide__desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 25px !important;
      }

      .hero-slide__btns { justify-content: center !important; }
      .hero-btn { padding: 12px 28px !important; font-size: 12px !important; }
      .hero-arrow { width: 42px !important; height: 42px !important; }
      .hero-arrow--prev { left: 10px; }
      .hero-arrow--next { right: 10px; }
      .hero-scroll-hint { display: none !important; }
      .hero-dots { left: 50%; transform: translateX(-50%); bottom: 20px; }
    }

    /* Small Phones */
    @media (max-width: 480px) {
      .hero, .hero .carousel-item {
        height: 85vh !important;
        min-height: 490px !important;
      }
      .hero-slide__inner { padding: 0 15px !important; }
      .hero-slide__title { font-size: 1.7rem !important; }
      .hero-slide__desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .hero-btn { width: 100%; text-align: center; padding: 11px 20px !important; }
      .hero-arrow { display: none !important; }
    }