/*
 * mobile-fix.css — Express Delivery (expressdelivery.co.in)
 * FINAL COMBINED FIX — v3.0
 *
 * Goals:
 *   1. Zero horizontal scroll on any device/viewport
 *   2. No content wider than screen (Meta/Facebook/WhatsApp crawler pass)
 *   3. Navbar/logo/mobile menu correct — NO overflow:hidden on nav/header/dropdown parents
 *   4. Services dropdown fully visible with correct z-index
 *   5. All forms mobile-responsive, no overflow
 *   6. Desktop layout UNCHANGED
 *
 * Load order: after responsive.css (last stylesheet)
 */

/* ═══════════════════════════════════════════════════════
   § 1 — BOX MODEL & GLOBAL OVERFLOW ROOT FIX
   html overflow-x MUST be hidden; body alone is not enough.
   ═══════════════════════════════════════════════════════ */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
img, video, svg, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* ═══════════════════════════════════════════════════════
   § 2 — HEADER TOP BAR
   Use flex-wrap instead of overflow:hidden so items stack
   correctly without clipping the dropdown.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .header-area .header-list {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .header-area .header-list li { min-width: 0; }
  .header-area .header-list a,
  .header-area .header-list span {
    font-size: 12px;
    word-break: break-word;
  }
}

/* ═══════════════════════════════════════════════════════
   § 3 — NAVBAR & SERVICES DROPDOWN
   NEVER set overflow:hidden on .navbar or any ancestor
   of .dropdown-menu — it will clip the dropdown.
   Instead ensure z-index is correct and use position:relative.
   ═══════════════════════════════════════════════════════ */
.navbar {
  z-index: 1030;
  position: relative;
}

/* Dropdown must always escape its parent visually */
.navbar .navbar-nav .nav-item .dropdown-menu {
  z-index: 1031 !important;
  overflow: visible !important;
}

/* Logo on mobile */
@media (max-width: 991px) {
  .navbar .navbar-brand img,
  .navbar .navbar-brand .main-logo {
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
  }
  /* Keep quote button from spilling right */
  .navbar .others-options {
    position: absolute;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }
  .navbar .others-options ul li .global-btn {
    padding: 7px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
}

/* Mobile offcanvas max width */
.side-modal.offcanvas,
.side-modal.offcanvas-end {
  width: 280px !important;
  max-width: 85vw !important;
}

/* ═══════════════════════════════════════════════════════
   § 4 — BOOTSTRAP ROW NEGATIVE-MARGIN FIX
   Bootstrap rows have negative margins that push content
   past the viewport on pages without an overflow wrapper.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  .row {
    --bs-gutter-x: 1rem;
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left:  calc(var(--bs-gutter-x) * -0.5);
  }
  .row > * {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left:  calc(var(--bs-gutter-x) * 0.5);
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════
   § 5 — CONTAINERS
   ═══════════════════════════════════════════════════════ */
.container, .container-fluid { max-width: 100%; }

@media (max-width: 575px) {
  .container,
  .container-fluid,
  .container-fluid.defaul-padding {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   § 6 — HERO SLIDER (Bootstrap Carousel)
   ═══════════════════════════════════════════════════════ */
.carousel { overflow: hidden; max-width: 100%; }
.carousel-inner { overflow: hidden; }
.carousel-item img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .carousel-item img {
    min-height: 200px;
    max-height: 380px;
  }
}

/* ═══════════════════════════════════════════════════════
   § 7 — BANNER CONTENT H1 (margin-right was -150px)
   ═══════════════════════════════════════════════════════ */
.main-banner-content h1 {
  margin-right: 0 !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
@media (max-width: 767px) {
  .main-banner-area { overflow: hidden; }
  .main-banner-content h1 { font-size: 26px; line-height: 1.3; }
}

/* ═══════════════════════════════════════════════════════
   § 8 — SWIPER SLIDERS
   Nav buttons use right:-80px / left:-80px. Hide on <1200px.
   ═══════════════════════════════════════════════════════ */
.swiper { overflow: hidden !important; }

@media (max-width: 1199px) {
  .services-area .services-items .swiper-button-next,
  .services-area .services-items .swiper-button-prev,
  .testimonials-items .testimonials-btn .swiper-button-next,
  .testimonials-items .testimonials-btn .swiper-button-prev {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   § 9 — SECTION-LEVEL OVERFLOW CONTAINMENT
   Safe to apply here — none of these sections contain
   dropdown menus.
   ═══════════════════════════════════════════════════════ */
.tr-services-area,
.why-choose-us-area,
.projects-area,
.faq-area,
.get-in-touch-area,
.locations-area,
.footer-area,
.copyright-area,
.page-banner-area,
.contact-us-page-area,
.about-us-area,
.testimonials-area {
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════
   § 10 — FORMS — Full Mobile Fix
   ═══════════════════════════════════════════════════════ */
input,
textarea,
select,
.form-control,
.form-select {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  -webkit-appearance: none;
  width: 100% !important;
}

@media (max-width: 767px) {
  .get-form  { padding: 20px 15px !important; }
  .contact-form { padding: 20px 15px !important; }

  .get-form .row,
  .contact-form .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .get-form .row > [class*="col-"],
  .contact-form .row > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Force every form column full-width on phone */
  .get-form [class*="col-"],
  .contact-form [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .get-form .global-btn,
  .contact-form .global-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════
   § 11 — FOOTER
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .footer-area .container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   § 12 — PAGE BANNER (inner pages)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .page-banner-area { padding: 50px 0 !important; }
  .page-banner-content h1,
  .page-banner-content .fs-50 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ═══════════════════════════════════════════════════════
   § 13 — GALLERY PAGE (inline CSS override)
   gallery.html has inline h1:42px with no media query
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .gallery-intro h1 { font-size: 26px !important; line-height: 1.3 !important; }
  .gallery-intro p  { font-size: 15px !important; }
}

/* ═══════════════════════════════════════════════════════
   § 14 — OFFICE LOCATION MAP PINS
   Absolutely-positioned dots with fixed pixel values
   ═══════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .office-location__location { overflow: hidden; }
  .office-location__location-single { display: none !important; }
}

/* ═══════════════════════════════════════════════════════
   § 15 — CTA / WAREHOUSE CARD
   ═══════════════════════════════════════════════════════ */
.warehouse-card { overflow: hidden; max-width: 100%; }
@media (max-width: 767px) {
  .warehouse-card { padding: 30px 20px !important; }
}

/* ═══════════════════════════════════════════════════════
   § 16 — TEXT OVERFLOW SAFETY
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  p, h1, h2, h3, h4, h5, h6, li, a, span, label, td, th {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ═══════════════════════════════════════════════════════
   § 17 — BACK-TO-TOP
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .back-to-top { right: 10px !important; bottom: 10px !important; }
}

/* ═══════════════════════════════════════════════════════
   § 18 — THANK-YOU PAGE
   ═══════════════════════════════════════════════════════ */
.thankyou-section {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.thankyou-box {
  max-width: 600px;
  width: 100%;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 50px 30px;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
.thankyou-box .tick-icon {
  width: 72px;
  height: 72px;
  background: #fd5523;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
  font-size: 36px;
  color: #fff;
  line-height: 1;
}

/* END mobile-fix.css v3.0 */