/* Keep a stable gutter so layout width doesn't change when the scrollbar appears
html { scrollbar-gutter: stable both-edges; }  */

/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }  /* always show a gutter */
}

/* -------- Stable geometry --------
:root{
  --header-h: 88px;                
  --sticky-top: calc(var(--header-h) + var(--banner-h));
  font-size-adjust: 0.52s;
}  

:root{
  --banner-h: 0px;    
  --topbar-h: 0px;     
  --navbar-h: 0px;     
  --header-total: 0px; 
  --hide-offset: 0px;  
  --sticky-top: var(--header-total);
} */

:root{
  /* Server-safe fallbacks for first paint (JS overwrites precisely) */
  --banner-h: ;
  --topbar-h: 50px;   /* match your .header-top height */
  --navbar-h: 70px;   /* match your .navbar min-height */
  --header-total: calc(var(--banner-h) + var(--topbar-h) + var(--navbar-h));
}

/* When we hide bars (banner and/or top header), move the entire fixed wrapper up */
body.hide-bars .header-wrapper{
  transform: translateY(calc(-1 * var(--hide-offset)));
}

/* Optional polish: hide the banner visually too (you already have .top-banner.hidden) */
body.hide-bars .top-banner{
  opacity: 0;
  pointer-events: none;
}


@media (min-width:1100px){
  :root{ --header-h: 50px; }       /* desktop baseline (adjust to your real height) */
}

html, body { overflow-x: hidden; max-width: 100%; }
/*body { margin: 0; padding-top: var(--sticky-top) !important; } */
body{ padding-top: var(--header-total) !important; }

body.hide-banner.hide-topbar .header-wrapper{
  transform: translateY(calc(-1 * (var(--banner-h) + var(--topbar-h))));
}
/* (Edge case) If banner is disabled, --banner-h = 0, so hide-topbar still lifts correctly */
body:not(.hide-banner).hide-topbar .header-wrapper{
  transform: translateY(calc(-1 * var(--topbar-h)));
}


/* When non-sticky mode hides bars on scroll, we lift the whole wrapper by the combined heights */
body.hide-bars .header-wrapper{
  transform: translateY(calc(-1 * var(--hide-offset)));
}

/* Optional: fade the banner itself when hidden (visual polish) */
body.hide-bars .top-banner{ opacity: .5; }



.header { min-height: 2px; }
.header-wrapper{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  will-change: transform;
  transition: transform .25s ease;
}

/* Banner: paint-only transitions */
.top-banner{
  color:#fff; text-align:center; font-weight:600;
  height: var(--banner-h); line-height: var(--banner-h);
  overflow: hidden;
  opacity: 1; transform: translateY(0);
  transition: transform .2s ease, opacity .2s ease; }

.top-banner a{ color:#fff; }
.top-banner.hidden{
  transform: none;          /* prevent double-translate */
  opacity: 0;
  pointer-events: none;
}

/* Prevent accidental layout transitions globally */
*{ transition-property: color, background-color, opacity, transform; }

/* -------- Header visuals (your design) -------- */
.header-top {
  background:#f1efef;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 180px; font-size:14px;
  transition: transform .2s ease, opacity .2s ease;
}
.top-links { display:flex; align-items:center; gap:20px; }
.top-links a{ text-decoration:none; color:#57585a; font-size:14px; font-family: Inter, sans-serif; }
.top-links a:hover{ color:#0077c8; }

.navbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 180px; background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.05);
  font-family: "Poppins", sans-serif;
 /* transition: background-color .1s ease, box-shadow .1s ease;*/
  z-index:1000;
  min-height: 70px;
  align-items: center;
  min-height: 70px;
}

.header-top,
.navbar {
  transition: transform 0.3s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

.nav-left .logo img{ height:70px; display: block; width: auto; }

.nav-right{ display:flex; align-items:center; gap:30px; font-size:16px; }
.nav-links{ display:flex; list-style:none; gap:25px; margin:0; padding:0; white-space: nowrap; }
.nav-links a{
  color:#57585a; text-decoration:none; padding:7px 12px;
  border-bottom:2px solid transparent;
  transition: color .3s, border-bottom .3s;
  font-family:"Poppins",sans-serif !important;
}
.nav-links a:hover{ color:#0077c8; }

.navbar, .nav-container, .nav-right, .nav-links { min-width: 0; }
.nav-links > li { display: inline-flex; align-items: center; }

.nav-links > li:not(:last-child)::after{
  content:""; display:inline-block; width:1px; height:18px;
  background:rgba(0,0,0,.15); margin-left:18px; vertical-align:middle;
}
.nav-links > li:last-child{ margin-right:8px; }

.nav-item.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute; top:100%; left:-25px; display:none; background:#fff;
  min-width:280px; border-radius:6px; padding:15px 20px; box-shadow:0 4px 10px rgba(0,0,0,.1); z-index:1000;
}
.dropdown-menu li{ border-top:1px solid #eee; }
.dropdown-menu li:first-child{ border-top:none; }
.dropdown-menu li a{ display:block; padding:14px 24px; color:#004f8f; font-weight:500; transition: background-color .3s; }
.dropdown-menu li a:hover{ color:#1d99dd; }
.nav-item.dropdown:hover .dropdown-menu{ display:block; }

.contact-button a{
  background:#1d99dd; color:#fff; font-weight:700; font-size:15px;
  padding:10px 20px; text-decoration:none; border-radius:4px; transition: background-color .3s;
}
.contact-button a:hover{ background:#188ac8; }

/* -------- Mobile nav -------- */
.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:0; }
.hamburger span{ height:3px; width:25px; background:#0077c8; }

.mobile-nav{
  position:fixed; top:0; right:0; transform:translateX(100%);
  transition: transform .1s ease-in-out;
  width:350px; height:100vh; background:#fff;
  box-shadow:-2px 0 10px rgba(0,0,0,.2); z-index:2000; padding:20px; overflow-y:auto;
}
.mobile-nav.active{ transform: translateX(0); }
.mobile-nav .close-btn{
  font-size:30px; cursor:pointer; background:none; border:none; float:left;
}
.mobile-nav ul{ list-style:none; margin:20px 0; padding:0; padding-top:30px; font-size: 18px; }
li.top-nav-mobile a{ color:#1d99dd; }
li.mobile-button a{ display:flex; justify-content:center; }
.mobile-nav a{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 10px; color:#57585a; text-decoration:none; font-weight:700;
}

ul.submenu { padding-top: 0px; }
.mobile-nav a:hover{ color:#0077c8; }
.expand-toggle{ font-size:22px; color:#1d99dd; }
.submenu{ display:none; padding-left:15px; margin-top:0; }
.submenu a{ color:#0077c8; font-weight:400; }

/* ------ Nav mobie slide in animation ----*/
/* Panel starts off-screen */
.mobile-nav{
  position: fixed;
  top: 0; right: 0;
  transform: translateX(100%);           /* hidden */
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s ease;
  will-change: transform;
}

/* Slide in when JS adds .active */
.mobile-nav.active{
  transform: translateX(0);              /* visible */
  box-shadow: -2px 0 18px rgba(0,0,0,.18);
}

/* Optional dimmed backdrop driven by .nav-open on <body> */
.body-overlay{
  position: fixed; inset: 0; pointer-events: none;
  background: rgba(0,0,0,.24);
  opacity: 0; transition: opacity .35s ease;
}
body.nav-open .body-overlay{ pointer-events: auto; opacity: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mobile-nav, .body-overlay{ transition: none !important; }
}



/*--- end nav mobile slide in animation --*/

/* -------- Responsive tuning -------- */
@media (max-width:1600px){
  .navbar{ padding:0 80px; }
  .header-top{ padding:10px 120px; }
  .nav-links{ gap:18px; }
  .nav-right{ gap:22px; }
  .nav-links > li:not(:last-child)::after{ margin-left:14px; }
  .contact-button a{ padding:8px 18px; font-size:14px; }
  .nav-left .logo img{ height:65px; }
}
@media (min-width:1025px) and (max-width:1280px){
  .navbar{ padding:0 30px; }
  .nav-links{ gap:16px; }
  .nav-right{ gap:18px; }
  .nav-links > li:not(:last-child)::after{ margin-left:12px; }
  .nav-left .logo img{ height:68px; }
}
@media (max-width:1100px){
  .header-top{ display:none; }
  .hamburger{ display:flex; }
  .nav-right{ display:none !important; }
  .navbar{ padding:0 40px; }
  .nav-left .logo img{ height:65px; }
}
@media (max-width: 767px){
  .mobile-nav a { border-bottom: 1px solid #e0e0e0; }
}
@media (min-width:2000px){
  .header-top, .navbar{ padding:8px 310px; }
}