/* =========================================================
   css/responsive.css (FULL FILE - CLEAN)
   GOALS:
   - Clean responsive behavior
   - NO .container width overrides (prevents grid misalignment)
   - Keep hero behaviour stable across breakpoints
   - Mobile: overlay text on image + form below image
   ========================================================= */

/* ------------------ Large-ish desktops (minor tuning only) ------------------ */
@media (min-width: 1201px) and (max-width: 1289px){
  /* keep any legacy toggles intact if used elsewhere */
  .dlp_slider.display-mobile{ display:none; }

  .L-banner-box{ padding-top: 175px; }
  .R-banner-box{ padding-top: 80px; }
}

/* ------------------ Small desktops / laptops ------------------ */
@media (min-width: 1001px) and (max-width: 1200px){
  .dlp_slider.display-mobile{ display:none; }

  /* give form a little more room */
  .L-banner-box{
    width: 62%;
    padding-top: 175px;
  }
  .R-banner-box{
    width: 38%;
    padding-top: 70px;
  }

  .free_sample_form{
    padding: 16px 22px;
  }
  .free_sample_form h3{
    font-size: 24px;
  }

  .heading01{ font-size: 28px; }
}

/* =============================== <= 1000 (TABLET / MOBILE) =============================== */
@media only screen and (max-width: 1000px){
  body{ overflow-x: hidden; }

  /* header/logo */
  .nmims_logo{
    text-align: center;
  }
  .nmims_logo img{
    height: auto;
    max-height: 48px;
    width: auto;
  }

  /* hide any template desktop/mobile toggles if present */
  .display-desktop{ display:none; }
  .display-mobile{ display:block; }

  /* ✅ Mobile hero overlay text ON image */
  .L-banner-box.mobile_banner_box{
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 18px 12px;
    z-index: 5;
  }

  /* Desktop left hero box hidden on mobile */
  .L-banner-box{ display:none; }

  /* ✅ IMPORTANT: Put the form BELOW the image on mobile */
  .banner_overlay{
    position: static;       /* not absolute */
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    height: auto;
    pointer-events: auto;
    padding-left: 0;
    padding-right: 0;
    margin-top: 12px;
  }

  .R-banner-box{
    width: 100%;
    float: none;
    padding-top: 0;
  }

  .free_sample_form{
    margin-top: 0;
    padding: 18px 14px;
  }

  /* mobile hero text sizing */
  .L-banner-box.mobile_banner_box h1,
  .L-banner-box.mobile_banner_box h2{
    font-size: 26px;
    line-height: 32px;
    margin: 0;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.65);
  }
  .L-banner-box.mobile_banner_box h3{
    font-size: 15px;
    margin-top: 8px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.65);
  }

  /* campus address stacks (handled in style.css too; repeated here is safe) */
  .regional_office_section .container{
    flex-direction: column;
    align-items: stretch;
  }
  .R-regional_ofc{
    max-width: 620px;
    margin: 10px auto 0 auto;
  }
}

/* ============================== <= 540 =============================== */
@media only screen and (max-width: 540px){
  .L-banner-box.mobile_banner_box h1,
  .L-banner-box.mobile_banner_box h2{
    font-size: 20px;
    line-height: 26px;
  }
  .L-banner-box.mobile_banner_box h3{
    font-size: 14px;
  }
}

/* ============================== <= 360 =============================== */
@media only screen and (max-width: 360px){
  .L-banner-box.mobile_banner_box h1,
  .L-banner-box.mobile_banner_box h2{
    font-size: 18px;
    line-height: 24px;
  }
}