/* ============================================================
   Shared site navbar (design/layout taken from the About Us page)
   Used on every page  -  Homepage, About Us, Contact Us, Value Added Services.
   Every rule is scoped under "header.site" so it can never affect
   any other element on a page that has its own separate stylesheet.
   ============================================================ */

header.site{
  --hdr-navy:#000000;
  --hdr-gold:#C7A44D;
  --hdr-gold-deep:#C7A44D;
  --hdr-ease:cubic-bezier(.2,.8,.2,1);
  --hdr-radius:3px;
  --hdr-font:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;

  position:sticky; top:0; z-index:100;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--hdr-font);
}
header.site *{box-sizing:border-box;}
header.site img,header.site svg{display:block; max-width:100%;}
header.site a{color:inherit;}

header.site .container{max-width:1200px; margin:0 auto; padding:0 24px;}
header.site .nav-row{display:flex; align-items:center; justify-content:space-between; min-height:84px; gap:16px; padding:12px 0; flex-wrap:wrap; row-gap:8px;}
header.site .brand{padding-left:10px;}
header.site .brand img{height:72px; width:auto; flex-shrink:0;}
header.site nav.primary{display:flex; gap:26px; font-size:14px; font-weight:600;}
header.site nav.primary a{text-decoration:none; color:#fff; opacity:.82; transition:opacity .2s; position:relative; padding-bottom:4px; white-space:nowrap;}
header.site nav.primary a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--hdr-gold); transition:right .25s var(--hdr-ease);}
header.site nav.primary a:hover{opacity:1;}
header.site nav.primary a:hover::after{right:0;}
header.site .has-drop{position:relative;}
header.site .has-drop .drop{position:absolute; top:100%; left:0; background:var(--hdr-navy); border:1px solid rgba(255,255,255,.12); border-radius:6px; padding:10px; min-width:220px; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .25s var(--hdr-ease); z-index:50;}
header.site .has-drop:hover .drop{opacity:1; visibility:visible; transform:translateY(0);}
header.site .has-drop .drop a{display:block; padding:10px 12px; border-radius:4px; font-size:13px;}
header.site .has-drop .drop a:hover{background:rgba(255,255,255,.06);}
header.site .header-cta{display:flex; align-items:center; gap:12px;}
header.site .header-icons{display:flex; align-items:center; gap:8px; padding-right:12px; margin-right:2px; border-right:1px solid rgba(255,255,255,.18);}
header.site .header-icons a{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s ease;}
header.site .header-icons svg{width:18px; height:18px;}
header.site .header-icons .tel-icon svg{stroke:#fff;}
header.site .header-icons .tel-icon:hover{background:var(--hdr-gold); border-color:var(--hdr-gold);}
header.site .header-icons .tel-icon:hover svg{stroke:var(--hdr-navy);}
header.site .header-icons .whatsapp-icon svg{fill:#25D366;}
header.site .header-icons .whatsapp-icon:hover{background:#25D366; border-color:#25D366;}
header.site .header-icons .whatsapp-icon:hover svg{fill:#fff;}

header.site .btn{font-family:var(--hdr-font); font-weight:700; font-size:14px; padding:13px 24px; border-radius:var(--hdr-radius); text-decoration:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid transparent; transition:transform .18s ease, background .2s ease, box-shadow .2s ease;}
header.site .btn:focus-visible{outline:2px solid var(--hdr-gold); outline-offset:3px;}
header.site .btn-gold{background:var(--hdr-gold); color:var(--hdr-navy);}
header.site .btn-gold:hover{background:var(--hdr-gold-deep); color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(199,164,77,.6);}
header.site .btn-outline-light{border-color:rgba(255,255,255,.4); color:#fff; background:transparent;}
header.site .btn-outline-light:hover{background:#fff; color:var(--hdr-navy);}
header.site .btn-sm{padding:10px 16px; font-size:12px;}

@media(max-width:1000px){header.site nav.primary{display:none;}}

/* Mobile-only hamburger menu toggle - hidden by default (desktop/tablet),
   shown only inside the max-width:520px "mobile" breakpoint below,
   positioned after Cost Calculator as the rightmost item. */
header.site .mobile-menu-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.06);
  color:#fff;
  flex-shrink:0;
  cursor:pointer;
  transition:all .2s ease;
}
header.site .mobile-menu-toggle svg{width:18px; height:18px;}
header.site .mobile-menu-toggle:hover,
header.site .mobile-menu-toggle[aria-expanded="true"]{
  background:var(--hdr-gold);
  border-color:var(--hdr-gold);
  color:var(--hdr-navy);
}

/* Mobile dropdown for nav.primary, opened by the toggle button above via
   the "nav-open" class on header.site. Scoped inside the same mobile
   media query so it can never affect desktop/tablet, where nav.primary's
   normal (max-width:1000px) hide rule above still applies untouched. */
@media(max-width:520px){
  header.site .container{padding:0 14px;}
  header.site .nav-row{flex-wrap:nowrap; gap:8px; min-height:auto; padding:10px 0; position:relative;}
  header.site .brand img{height:56px;}
  header.site .header-cta{gap:8px;}
  header.site .header-icons{gap:6px; padding-right:8px; margin-right:0;}
  header.site .header-icons a{width:34px; height:34px;}
  header.site .header-icons svg{width:16px; height:16px;}
  header.site .btn.btn-sm{padding:10px 16px; font-size:12.5px;}
  header.site .header-cta .btn-gold{display:none;}

  /* Remove WhatsApp icon on mobile - Call icon stays. */
  header.site .header-icons .whatsapp-icon{display:none;}

  /* Show the hamburger toggle on mobile only, with a little breathing
     room off the right edge of the header. */
  header.site .mobile-menu-toggle{display:flex; margin-right:8px;}

  /* nav.primary is display:none via the 1000px rule above; this wins
     when open (higher specificity + !important) to show it as a
     full-width dropdown under the header on mobile only. */
  header.site.nav-open nav.primary{
    display:flex !important;
    flex-direction:column;
    gap:4px;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--hdr-navy);
    border-top:1px solid rgba(255,255,255,.1);
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:14px;
    z-index:90;
  }
  header.site.nav-open nav.primary a{padding:12px 8px;}
  header.site.nav-open .has-drop .drop{
    position:static;
    opacity:1; visibility:visible; transform:none;
    background:rgba(255,255,255,.04);
    margin-top:4px;
  }
}

/* Screen-reader-only utility (shared site-wide)  -  used to add semantically
   correct headings that don't change the visual design. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* E-E-A-T reviewer byline - shared site-wide, safe on any page's design. */
.szuae-reviewer-byline{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:13px; color:rgba(255,255,255,.85); white-space:nowrap; flex-shrink:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:50px; padding:6px 16px 6px 10px;
  margin-bottom:18px;
}
.szuae-reviewer-byline strong{color:#fff; font-weight:600;}
.hero-badge-row{display:flex; justify-content:center; margin-top:12px;}
.szuae-reviewer-byline .rb-check{width:18px; height:18px; border-radius:50%; background:#C7A44D; color:#000; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.szuae-reviewer-byline .rb-check svg{width:11px; height:11px;}
/* On light backgrounds (e.g. inside on-white sections) */
section.on-white .szuae-reviewer-byline,section.on-bg .szuae-reviewer-byline{color:#5C574E; background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1);}
section.on-white .szuae-reviewer-byline strong,section.on-bg .szuae-reviewer-byline strong{color:#111;}

/* Quick Facts box (AIO) - shared across pages, dark-theme styled since it's used inside on-navy sections. */
.quick-facts-box{background:rgba(199,164,77,.08); border-left:4px solid #C7A44D; border-radius:6px; padding:20px 24px; margin:0 auto 40px; max-width:720px; text-align:left;}
.quick-facts-box .qf-label{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#C7A44D; margin-bottom:14px; font-family:'Inter',sans-serif;}
.quick-facts-box ul{display:grid; grid-template-columns:1fr; gap:14px 32px; margin:0; padding:0; list-style:none;}
.quick-facts-box li{color:rgba(255,255,255,.85); font-size:14.5px; line-height:1.5; margin:0; font-family:'Inter',sans-serif; position:relative; padding-left:18px;}
.quick-facts-box li::before{content:'•'; position:absolute; left:0; color:#C7A44D;}
@media(min-width:640px){
  .quick-facts-box ul{grid-template-columns:repeat(2,1fr);}
}