/* ============================================================
   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;}}
@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;}
  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;}
}

/* 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);}
}