/* ==========================================================================
   responsive.css  |  Endeavour India
   --------------------------------------------------------------------------
   Responsive fixes ONLY. This file is additive — it does not modify any
   existing CSS. The desktop design (>= 1200px) is intentionally left
   untouched: every layout rule below lives inside a max-width media query.
   A single global horizontal-overflow guard is the only unscoped rule and
   it does not change the already-correct desktop rendering.

   Load order: this file must be linked AFTER assets/css/style.css so its
   rules win on equal specificity.

   Breakpoints
     max-width: 1200px  -> large tablet / small laptop
     max-width: 992px   -> tablet landscape
     max-width: 768px   -> tablet portrait
     max-width: 576px   -> large phone
     max-width: 480px   -> phone
     max-width: 375px   -> small phone
     max-width: 320px   -> smallest phone
   ========================================================================== */


/* ==========================================================================
   GLOBAL SAFETY NET  (applies at every width, prevents overflow only)
   ========================================================================== */

/* Kill any horizontal scrollbar caused by decorative / off-canvas elements. */
html,
body {
      overflow-x: hidden;
      max-width: 100%;
}

/* Media never spills out of its container. */
img,
svg,
video,
iframe,
embed,
object {
      max-width: 100%;
}

/* Video / embeds keep their aspect ratio when width is constrained. */
video,
iframe {
      height: auto;
}

/* Long words, URLs and e-mail addresses wrap instead of forcing overflow. */
p,
li,
a,
span,
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.footer-nav a,
.get-touch-info-list li .content a {
      overflow-wrap: break-word;
      word-wrap: break-word;
}

/* Tables (none ship today, but future-proof) scroll instead of overflowing. */
table {
      max-width: 100%;
}

/* The floating scroll-to-top button and Google's reCAPTCHA badge are both
   fixed to the bottom-right corner and sit on top of each other on every
   page. Lift the button clear of the badge. */
.scroll-to-top {
      bottom: 90px;
}

/* The "Our Core Expertise" icon circles have no flex-shrink, so a long
   label (e.g. "Consumer Goods Cargo (FMCG)") on a narrow row squashes the
   60x60 circle down to a sliver instead of wrapping/truncating the text. */
.industrial-icon {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
      flex: 0 0 60px;
}


/* ==========================================================================
   @media (max-width: 1200px)   —  large tablet / small laptop
   The primary bug fix. The theme's floating header uses `margin: 0 80px`,
   which a later un-scoped rule re-applies at ALL widths. Below the desktop
   nav breakpoint (xl / 1200px) the off-canvas menu is used, so the side
   margins must collapse or the logo + hamburger overflow the viewport.
   ========================================================================== */

@media (max-width: 1200px) {

      /* Collapse the desktop side margins so the header uses the full width. */
      .header-3 {
            margin-left: 0 !important;
            margin-right: 0 !important;
      }

      /* Header row: logo (left) and hamburger (right), tidy spacing. */
      .header-3 .header-bottom-area-2 {
            gap: 16px !important;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
      }

      .header-3 .header-bottom-left {
            gap: 0 !important;
      }

      /* Header event cluster stays aligned to the right edge. */
      .header-user-event {
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
      }
}


/* ==========================================================================
   @media (max-width: 992px)   —  tablet landscape
   Grid columns already stack via the theme; just guarantee comfortable
   gutters and that full-bleed containers never exceed the viewport.
   ========================================================================== */

@media (max-width: 992px) {

      .container,
      .container-fluid {
            padding-left: 15px;
            padding-right: 15px;
      }

      /* Off-canvas menu should not be wider than the screen. */
      .offcanvas.offcanvas-start {
            width: 320px;
            max-width: 85vw;
      }

      /* Decorative floating shapes must never create scroll. */
      .right-shape,
      .arrow-shape,
      .left-shape {
            max-width: 40%;
      }

      .footer::after {
            display: none;
      }

      /* The services card slider uses a -50px inline margin so desktop can
         bleed the track past its column and show shadow/peek. On narrow
         screens that pulls the slide 38px past each edge of the viewport,
         so the card fills edge-to-edge with no breathing room. Drop the
         bleed below desktop. */
      .service-slider-1.swiper {
            margin-inline: 0;
            padding-block: 30px 40px;
      }

      /* The big stat numbers (12+, 100K+, 60+, 170+) are hollow outline
         text that only fills solid on :hover. Touch devices never hover,
         so the numbers stay unreadable against the photo background —
         make them solid on touch-sized viewports. */
      .counter-wrapper .counter-items .fun-fact-value,
      .counter-wrapper .counter-items .start-number {
            -webkit-text-stroke: initial;
            color: #00aff0;
      }
}


/* ==========================================================================
   @media (max-width: 768px)   —  tablet portrait
   Compact the floating header bar and make any table scrollable.
   ========================================================================== */

@media (max-width: 320px) {

      .industrial-item {
            font-size: 14px;
      }

}

@media (max-width: 768px) {

      /* Keep the header bar height sensible on tablets/phones. */
      .header-bottom-area-2 {
            padding-top: 4px;
            padding-bottom: 4px;
      }

      .endeavour-logo {
            max-height: 70px;
      }

      /* Any future table becomes horizontally scrollable instead of clipping. */
      table {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
      }

      .footer::after {
            display: none;
      }

      .endeavour-logo {
            max-height: 55px;
      }

      /* "Why Choose Us" / "About" checklists: the two <ul> columns wrap onto
         separate rows below 1199px, but the flex `gap` between them (20px)
         stacked on top of each li's own margin-bottom made the space between
         the two lists look much bigger/uneven than the space between items
         inside one list. Stack them as a single column with matching gaps. */
      .why-choose-us-wrapper-4 .why-choose-us-content-4 .list-box,
      .about-wrapper-4 .about-content-4 .list-box {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            gap: 0;
      }

      .about-wrapper-4 .about-content-4 .list-box {
            padding: 20px 24px;
      }

      .why-choose-us-wrapper-4 .why-choose-us-content-4 .list-box ul li,
      .about-wrapper-4 .about-content-4 .list-box ul li {
            margin-bottom: 10px;
      }

      .why-choose-us-wrapper-4 .why-choose-us-content-4 .list-box ul:last-child li:last-child,
      .about-wrapper-4 .about-content-4 .list-box ul:last-child li:last-child {
            margin-bottom: 0;
      }

      .feature-section-5 .feature-info .feature-box-items .icon img {
            width: 50px;
      }

      .counter-wrapper .counter-items .fun-fact-value {
            font-size: 45px;
      }

      .counter-wrapper .counter-items .start-number {
            font-size: 45px;
      }

      .counter-wrapper .counter-items h5 {
            font-size: 16px;
      }

      .counter-wrapper {
            display: inherit;
      }

      .counter-wrapper .counter-items {
            margin: 30px 0;
      }

      .service-item {
            padding: 10px;
      }

      .industrial-item {
            font-size: 16px;
      }

      .contact-wrapper-4 .contact-items .content p{font-size: 16px;}
      .contact-wrapper-4 .contact-content{padding: 10px;}
      .btn{padding-left: 15px; font-size: 14px;}

      .why-choose-us-wrapper-4 .why-choose-us-content-4 .counter-box-items .counter-box .count{font-size: 40px;}

      .hero-title{font-size: 35px;}

      .get-touch-info-list li .content a, .get-touch-info-list li .content address{font-size: 15px;}

      .breadcrumb-area{padding-block: 120px 60px;}

      blockquote{font-size: 16px;}

      .cta-wrapper-3 .right-content{padding-top: 20px;}

      .bg-cover{background-position: 60%;}

      .service-slider-1.swiper{margin-block-end: 0;}
      .service-slider-1.swiper{padding-block: 30px 0;}
      .slider-button-vertical-center{margin-top: 10px;}
}


/* ==========================================================================
   @media (max-width: 576px)   —  large phone
   Tighten the logo and header cluster so the bar never crowds; comfortable
   container padding for readable text blocks.
   ========================================================================== */

@media (max-width: 576px) {

      .endeavour-logo {
            max-height: 58px;
      }

      .header-3 .header-bottom-area-2 {
            gap: 10px !important;
      }

      .container,
      .container-fluid {
            padding-left: 14px;
            padding-right: 14px;
      }

      /* Off-canvas menu sized for small phones. */
      .offcanvas.offcanvas-start {
            width: 300px;
            max-width: 88vw;
      }

      /* Buttons stay easily tappable and never overflow their row. */
      .btn {
            max-width: 100%;
      }
}


/* ==========================================================================
   @media (max-width: 480px)   —  phone
   ========================================================================== */

@media (max-width: 480px) {

      .endeavour-logo {
            max-height: 52px;
      }

      .container,
      .container-fluid {
            padding-left: 12px;
            padding-right: 12px;
      }

      .offcanvas.offcanvas-start {
            width: 280px;
            max-width: 90vw;
      }
}


/* ==========================================================================
   @media (max-width: 375px)   —  small phone
   ========================================================================== */

@media (max-width: 375px) {

      .endeavour-logo {
            max-height: 48px;
      }

      .header-3 .header-bottom-area-2 {
            gap: 8px !important;
      }

      /* Navigation / event buttons keep a reliable tap target. */
      .navbar-toggler {
            padding: 6px;
            line-height: 1;
      }

      .offcanvas.offcanvas-start {
            width: 260px;
            max-width: 90vw;
      }
}


/* ==========================================================================
   @media (max-width: 320px)   —  smallest phone
   Final guard: keep the logo and header bar inside the narrowest viewport.
   ========================================================================== */

@media (max-width: 320px) {

      .endeavour-logo {
            max-height: 44px;
      }

      .container,
      .container-fluid {
            padding-left: 10px;
            padding-right: 10px;
      }

      .header-3 .header-bottom-area-2 {
            gap: 6px !important;
      }

      .offcanvas.offcanvas-start {
            width: 250px;
            max-width: 92vw;
      }
}


@media (max-width: 1400px) {

      .footer::before{display: none;}
}