.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-overlay.show {
    display: block;
    opacity: 1;
}

body.nav-locked {
    overflow: hidden;
}



@media (max-width: 1250px) {
.header-actions .btn-quote {
    display: none;
}


}
/* 1250px  */


/* -------------------------------------------------------------
   1. TABLET / SMALL LAPTOP  (<= 1024px)
   ------------------------------------------------------------- */
@media (max-width: 1200px) {

    .hero-bar, nav#nav, .btn-call {
      display: none;
    }

    .hamburger{  display: flex; }

    header {
    border-bottom: 1px solid #ddd;
    }

}




/* -------------------------------------------------------------
   2. TOP BAR + HERO BAR (<= 900px)
   ------------------------------------------------------------- */
@media (max-width: 990px) {

.about-grid {
    gap: 30px;
    align-items: flex-start;
}

.route-grid.homepage {
    grid-template-columns: 1fr 1fr;
}

}
/* 990px  */



@media (max-width: 900px) {

    .headertopmain {
        grid-template-columns: 1fr;
        gap: 4px;
        text-align: center;
        font-size: 13px;
    }

    .headertopmain .iniII {
        text-align: center !important;
    }

    .hero-bar-inner {
        height: auto;
        flex-wrap: wrap;
        padding: 8px 0;
        gap: 8px;
    }

    .hero-bar-item {
        width: auto;
    }

    .hero-bar-inner a {
        font-size: 13px;
        padding: 5px 8px;
    }
}

/* -------------------------------------------------------------
   3. MOBILE (<= 768px)
   ------------------------------------------------------------- */
@media (max-width: 768px) {

   .logo img {
        max-width: 100%;
        height: 50px;
    }

    .btn-quote span {
        display: none;
    }

    .hero-bar-item:nth-child(n + 5) {
        display: none;
    }

    /* Page layout: sidebar stacks below content */
    .outer_box .row.g-5 {
        row-gap: 30px;
    }

    .lede {
        font-size: 1.5rem;
    }

    .route-card .btn {
    padding: 7px 9px;
    font-size: 13px;
    border-radius: 5px;
    }
    
    .hubs-header {
    margin-bottom: 30px;
   }

.hubs-header .section-title {
    margin-bottom: 5px;
}

.route-grid.homepage.twogrid, .route-grid.homepage{ grid-template-columns: 1fr;  }
.footer-grid{ margin-bottom:30px; }

.mobile_hide{ display:none; }
.mobile_bggrey{ background-color:#eee; }

#faq {
    padding: 50px 0;
}




}
/* 768px  */


/* -------------------------------------------------------------
   4. SMALL PHONES (<= 560px)
   ------------------------------------------------------------- */
@media (max-width: 570px) {

    .container {
        width: 94%;
    }

    .hero-bar-item:nth-child(n + 3) {
        display: none;
    }

    .hero-bar-item {
        flex: none;
        width: 50%;
        text-align: center;
    }

    .page_content h4 {
        font-size: 1.05rem;
    }
  

  .route-grid.homepage.twogrid, .route-grid.homepage {
    grid-template-columns: 1fr;
  }
  
  .contact-icon {
    display: none;
  }

  .contact-card {
    padding: 15px;
  }
  
.breadcrumb-section ul.ps-0 {
    display: none;
}

.breadcrumb-section > .container {
    justify-content: center;
}

.breadcrumb-section {
    padding: 80px 0;
}

 

}
/* 575px  */



/* -------------------------------------------------------------
   5. EXTRA SMALL (<= 400px)
   ------------------------------------------------------------- */
@media (max-width: 400px) {

    .header-inner {
        gap: 8px;
    }

}