/* ==========================================================================
   GeoCentroid mobile / tablet fixes  (v2)
   Load AFTER responsive.css:  style.css -> index.css -> responsive.css -> mobile-fixes.css
   Only touches screens <= 1100px (the hamburger-menu range), desktop is unchanged.
   ========================================================================== */

/* 1. Safety net: nothing may push the page sideways */
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* 2. Testimonial block: -8em left margin pushed it off-screen */
@media (max-width: 991px) {
  .test-quote-sec { margin-left: 0 !important; }
}

/* ===================== HEADER / MENU (<= 1100px) ===================== */
@media (max-width: 1100px) {

  /* Whole header sits above the slider and page content, so menus can never hide behind them */
  #header { position: relative; z-index: 10000; }

  /* Menu bar stays in the page flow: opening the menu pushes content down instead of covering it */
  #header nav.main_menu:not(.stricky-fixed) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
  }
  .nav-home-three .nav-holder.nav-menu,
  .nav-home-three .nav-t-holder { float: left !important; width: 100% !important; }

  /* Hamburger: one clean 44px button at the right edge of the bar
     (theme had negative margins that pulled the icon out of its box) */
  .nav-t-holder .nav-t-header {
    float: right;
    width: auto !important;
    margin: 0;
    padding: 10px 15px !important;
  }
  .nav-t-holder .nav-t-header button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin: 0 !important; padding: 0 !important;
    font-size: 22px; line-height: 1;
    color: #fff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .75) !important;
    border-radius: 6px;
  }
  .nav-t-holder .nav-t-header button i {
    margin: 0 !important; padding: 0 !important;
    background: transparent !important;
    color: #fff !important; line-height: 1;
  }

  /* Opened menu: simple stacked list, in the flow, never clipped */
  .nav-t-holder .nav-t-footer {
    position: relative !important;
    z-index: 1;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    clear: both;
    width: 100%;
  }
  .nav-t-holder .nav-t-footer ul.nav { margin: 0; padding: 0; width: 100%; }
  .nav-t-holder .nav-t-footer ul.nav > li {
    display: block !important; float: none !important;
    width: 100%; padding: 0 !important;
  }
  .nav-t-holder .nav-t-footer ul.nav li > a { display: block; }

  /* Sub-menus (2 levels): open inside the list, indented, not floating over the page */
  .nav-t-holder .nav-t-footer ul.nav ul.sub-menu {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;   /* hiding is done with display:none, which the menu script toggles */
    box-shadow: none !important;
    margin: 0; padding: 0;
  }
  .nav-t-holder .nav-t-footer ul.nav ul.sub-menu li a { padding-left: 40px; }
  .nav-t-holder .nav-t-footer ul.nav ul.sub-menu ul.sub-menu li a { padding-left: 60px; }
}

/* ============================ PHONES (<= 767px) ============================ */
@media (max-width: 767px) {

  /* Top white strip: was ~106px tall for one row of social icons -> compact */
  .pad-logo.logo-wrapper { padding: 6px 0 !important; min-height: 44px !important; align-items: center; }
  .top-two-right .top-panel { margin: 0 !important; }
  .touch_top ul .item,
  #social-media-right-icon { padding: 0 5px !important; }
  .touch_top ul { margin-bottom: 0; }

  /* New logo has navy text and the menu bar is navy: give it a white badge */
  .nav-home-three .nav-t-holder { min-height: 64px; }
  .nav-home-three .logo-mobile {
    display: block;
    box-sizing: border-box;
    width: 170px;
    max-width: calc(100% - 100px);   /* room for the hamburger */
    padding: 6px 10px;
    top: 9px; left: 0;
    background: #fff;
    border-radius: 6px;
    line-height: 0;
    z-index: 2;
  }
  .nav-home-three .logo-mobile a { display: block; }
  .nav-home-three .logo-mobile img { display: block; width: 100%; height: auto; }

  /* 16px stops iOS Safari zooming the page when a field is tapped */
  input, select, textarea, .form-control { font-size: 16px !important; }

  /* Request-a-quote popup fits the screen */
  .modal-dialog { margin: 10px; }
  .modal-content { max-width: 100%; }
  .modal-body { padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
  .modal-body .input_form > [class*="col-"] { padding-left: 10px; padding-right: 10px; }

  /* Footer: one column, same left edge for every block */
  .sidebar-footer .footer-column { float: none; width: 100%; padding: 0 15px; margin: 0 0 24px; }
  .sidebar-footer .footer-column .widget { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .footer-bg3 { overflow-wrap: anywhere; }
  .footer-bg3 a[href^="mailto:"], .footer-bg3 .contact_mail { word-break: break-all; }
  .footer-t-bottom { padding-left: 15px; padding-right: 15px; text-align: center; }

  h1, h2, h3, h4 { overflow-wrap: break-word; }
}

@media (max-width: 360px) {
  .nav-home-three .logo-mobile { width: 150px; }
}