/* SP WorldTech — Premium global header refresh */
.site-header{position:sticky!important;top:0!important;z-index:1000!important;background:rgba(255,255,255,.97)!important;border-bottom:1px solid #e7edf5!important;box-shadow:0 10px 30px rgba(15,35,65,.07)!important;backdrop-filter:blur(18px)}
.site-header .container.nav-wrap{max-width:1440px!important;min-height:88px!important;padding:8px 22px!important;display:flex!important;align-items:center!important;gap:26px!important}
.site-header .brand-link{width:218px!important;min-width:218px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;text-decoration:none!important;color:#10233f!important}
.site-header .brand-logo{width:55px!important;height:55px!important;object-fit:cover!important;border-radius:16px!important;border:2px solid #17365f!important;box-shadow:0 5px 16px rgba(17,49,88,.18)!important}
.site-header .brand-link::after{content:'SP WorldTech';display:block!important;font-size:16px!important;font-weight:900!important;letter-spacing:-.45px!important;color:#10233f!important;line-height:1!important}
.site-header .main-nav{flex:1!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;min-width:0!important;white-space:nowrap!important}
.site-header .main-nav>a:not(.nav-btn){display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;padding:9px 11px!important;border-radius:12px!important;font-size:13px!important;font-weight:800!important;color:#152946!important;transition:all .18s ease!important}
.site-header .main-nav>a:not(.nav-btn):hover{background:#eef5ff!important;color:#075edb!important;transform:translateY(-1px)!important}
.site-header .main-nav>a[href="./index.html"]{background:linear-gradient(135deg,#1268e8,#11a7b7)!important;color:#fff!important;box-shadow:0 8px 18px rgba(18,104,232,.2)!important}
.site-header .main-nav .nav-btn.primary{margin-left:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:11px 20px!important;border-radius:24px!important;background:linear-gradient(135deg,#1469e8,#12a8b8)!important;color:#fff!important;font-size:14px!important;font-weight:900!important;box-shadow:0 10px 24px rgba(18,104,184,.2)!important;border:0!important}
.site-header .main-nav .nav-btn.primary:hover{transform:translateY(-1px)!important;filter:brightness(1.04)!important}
.site-header .mobile-menu-btn{border:0!important;background:#edf5ff!important;color:#1268d8!important;border-radius:12px!important;padding:10px 12px!important;font-size:20px!important}
.site-header .mobile-menu{border-top:1px solid #e7edf5!important;background:#fff!important;box-shadow:0 12px 30px rgba(15,35,65,.08)!important;padding:10px 18px 16px!important}
.site-header .mobile-menu a{display:block!important;padding:12px 10px!important;border-radius:10px!important;font-weight:800!important;color:#152946!important}
.site-header .mobile-menu a:hover{background:#eef5ff!important;color:#075edb!important}
@media(max-width:1250px){.site-header .container.nav-wrap{gap:12px!important}.site-header .brand-link{width:150px!important;min-width:150px!important}.site-header .brand-logo{width:48px!important;height:48px!important}.site-header .brand-link::after{font-size:14px!important}.site-header .main-nav>a:not(.nav-btn){padding:8px 7px!important;font-size:12px!important}.site-header .main-nav .nav-btn.primary{padding:10px 15px!important;font-size:13px!important}}
@media(max-width:980px){.site-header .container.nav-wrap{min-height:76px!important}.site-header .brand-link{width:auto!important;min-width:0!important;align-items:flex-start!important;flex-direction:row!important;gap:9px!important}.site-header .brand-logo{width:45px!important;height:45px!important;border-radius:12px!important}.site-header .brand-link::after{align-self:center!important;font-size:15px!important}.site-header .main-nav{display:none!important}.site-header .mobile-menu-btn{display:block!important;margin-left:auto!important}}
@media(min-width:981px){.site-header .mobile-menu-btn{display:none!important}}

/* === FINAL HEADER POSITION + RESPONSIVE POLISH === */
.site-header .container.nav-wrap{
  max-width:1600px!important;
  min-height:92px!important;
  padding:10px 24px!important;
  gap:24px!important;
  align-items:center!important;
}
.site-header .brand-link{
  width:190px!important;
  min-width:190px!important;
  max-width:190px!important;
  flex:0 0 190px!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  text-align:center!important;
}
.site-header .brand-logo{
  width:52px!important;
  height:52px!important;
  flex:0 0 52px!important;
  border-radius:14px!important;
  padding:2px!important;
  object-fit:contain!important;
}
.site-header .brand-link::after{
  content:'SP WorldTech'!important;
  display:block!important;
  margin:0!important;
  font-size:15px!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:-.35px!important;
  color:#10233f!important;
  white-space:nowrap!important;
}
.site-header .main-nav{
  flex:1 1 auto!important;
  min-width:0!important;
  justify-content:flex-start!important;
  gap:5px!important;
  overflow:visible!important;
}
.site-header .main-nav>a:not(.nav-btn){
  min-height:42px!important;
  padding:9px 10px!important;
  font-size:13px!important;
  font-weight:850!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
.site-header .main-nav .nav-btn.primary{
  margin-left:auto!important;
  min-height:46px!important;
  padding:11px 20px!important;
  font-size:14px!important;
  flex:0 0 auto!important;
}

/* At smaller desktop/tablet widths use the menu instead of squeezing buttons together. */
@media(max-width:1320px){
  .site-header .container.nav-wrap{min-height:84px!important;padding:8px 18px!important;gap:16px!important}
  .site-header .brand-link{width:170px!important;min-width:170px!important;max-width:170px!important;flex-basis:170px!important}
  .site-header .brand-logo{width:48px!important;height:48px!important;flex-basis:48px!important}
  .site-header .main-nav{display:none!important}
  .site-header .mobile-menu-btn{display:inline-flex!important;margin-left:auto!important}
}
@media(min-width:1321px){.site-header .mobile-menu-btn{display:none!important}}
@media(max-width:980px){
  .site-header .container.nav-wrap{min-height:76px!important;padding:7px 14px!important}
  .site-header .brand-link{width:auto!important;min-width:0!important;max-width:none!important;flex-basis:auto!important;flex-direction:row!important;align-items:center!important;gap:9px!important}
  .site-header .brand-logo{width:45px!important;height:45px!important;flex-basis:45px!important}
  .site-header .brand-link::after{font-size:15px!important}
}

/* Compact navigation fit: preserve the logo and keep Join Free fully visible */
@media(min-width:1321px){
 .site-header .container.nav-wrap{gap:14px!important;padding-left:24px!important;padding-right:22px!important}
 .site-header .brand-link{flex-basis:180px!important;width:180px!important;min-width:180px!important;max-width:180px!important}
 .site-header .main-nav{margin-left:4px!important;gap:3px!important}
 .site-header .main-nav>a:not(.nav-btn){padding-left:7px!important;padding-right:7px!important;font-size:12px!important}
 .site-header .main-nav .nav-btn.primary{padding:10px 15px!important;margin-left:8px!important;white-space:nowrap!important}
 .site-header .main-nav .nav-btn.primary i,.site-header .main-nav .nav-btn.primary svg,.site-header .main-nav .nav-btn.primary .icon{display:none!important}
}

/* 2026-10-09: Unified navigation bar — one shared background, not individual button cards. */
@media (min-width:1321px){
  .site-header .container.nav-wrap{gap:10px!important;padding-left:18px!important;padding-right:18px!important;}
  .site-header .brand-link{flex:0 0 168px!important;width:168px!important;min-width:168px!important;max-width:168px!important;}
  .site-header .main-nav{flex:1 1 0!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:0!important;padding:5px!important;border-radius:16px!important;background:linear-gradient(110deg,#0758b8 0%,#087fbd 55%,#079b9c 100%)!important;box-sizing:border-box!important;}
  .site-header .main-nav>a:not(.nav-btn),
  .site-header .main-nav>a[href="./index.html"],
  .site-header .main-nav .nav-btn.primary{background:transparent!important;color:#fff!important;box-shadow:none!important;border:0!important;border-radius:10px!important;min-width:0!important;min-height:42px!important;padding:9px 8px!important;margin:0!important;font-size:12px!important;font-weight:900!important;flex:0 1 auto!important;white-space:nowrap!important;}
  .site-header .main-nav>a:not(.nav-btn):hover,
  .site-header .main-nav>a[href="./index.html"]:hover,
  .site-header .main-nav .nav-btn.primary:hover{background:rgba(255,255,255,.17)!important;color:#fff!important;transform:none!important;filter:none!important;}
  .site-header .main-nav .nav-btn.primary{margin-left:2px!important;padding-left:10px!important;padding-right:10px!important;}
  .site-header .main-nav .nav-btn.primary i,.site-header .main-nav .nav-btn.primary svg,.site-header .main-nav .nav-btn.primary .icon{display:none!important;}
}
@media (min-width:981px) and (max-width:1320px){
  .site-header .main-nav{display:none!important;}
  .site-header .mobile-menu-btn{display:inline-flex!important;margin-left:auto!important;}
}
@media (max-width:980px){
  .site-header .main-nav{display:none!important;}
  .site-header .mobile-menu-btn{display:inline-flex!important;margin-left:auto!important;}
}

/* 2026-10-09 corrective override: one continuous nav background and no clipped Join Free. */
@media (min-width: 1321px) {
  .site-header .container.nav-wrap { display:flex!important; gap:10px!important; padding-left:16px!important; padding-right:16px!important; }
  .site-header .brand-link { flex:0 0 160px!important; width:160px!important; min-width:160px!important; max-width:160px!important; }
  .site-header .main-nav {
    display:flex!important; flex:1 1 0!important; width:0!important; min-width:0!important;
    overflow:visible!important; justify-content:space-between!important; align-items:center!important;
    gap:0!important; padding:5px!important; box-sizing:border-box!important;
    background:linear-gradient(110deg,#0758b8 0%,#087fbd 55%,#079b9c 100%)!important;
    border-radius:14px!important;
  }
  .site-header .main-nav > a,
  .site-header .main-nav > a:link,
  .site-header .main-nav > a:visited,
  .site-header .main-nav > a[href="./index.html"],
  .site-header .main-nav > .nav-btn,
  .site-header .main-nav > .nav-btn.primary {
    background:transparent!important; background-color:transparent!important; background-image:none!important;
    color:#fff!important; border:0!important; box-shadow:none!important; text-decoration:none!important;
    display:inline-flex!important; flex:0 1 auto!important; min-width:0!important; max-width:none!important;
    align-items:center!important; justify-content:center!important; white-space:nowrap!important;
    padding:9px 6px!important; margin:0!important; border-radius:8px!important;
    font-size:clamp(10px,.76vw,12px)!important; font-weight:900!important; line-height:1.1!important;
  }
  .site-header .main-nav > a:hover,
  .site-header .main-nav > a.active,
  .site-header .main-nav > .nav-btn:hover,
  .site-header .main-nav > .nav-btn.primary:hover { background:rgba(255,255,255,.17)!important; color:#fff!important; transform:none!important; }
  .site-header .main-nav > .nav-btn.primary { flex:0 0 auto!important; padding:10px 9px!important; }
  .site-header .main-nav > .nav-btn.primary i,
  .site-header .main-nav > .nav-btn.primary svg,
  .site-header .main-nav > .nav-btn.primary .icon { display:none!important; }
}
@media (min-width:981px) and (max-width:1320px) {
  .site-header .main-nav { display:none!important; }
  .site-header .mobile-menu-btn { display:inline-flex!important; margin-left:auto!important; }
}

/* FINAL SHARED NAVIGATION: align site-header pages with the approved single-bar reference. */
@media (min-width: 1321px) {
  .site-header .container.nav-wrap { gap: 16px !important; padding-left: 18px !important; padding-right: 18px !important; }
  .site-header .brand-link { flex: 0 0 190px !important; width: 190px !important; min-width: 190px !important; max-width: 190px !important; }
  .site-header .main-nav {
    display: flex !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
    justify-content: space-between !important; align-items: center !important; gap: 0 !important;
    padding: 0 8px !important; min-height: 78px !important; border-radius: 17px !important;
    background: #0758b8 !important; overflow: hidden !important; box-sizing: border-box !important;
  }
  .site-header .main-nav > a,
  .site-header .main-nav > a:not(.nav-btn),
  .site-header .main-nav > a[href="./index.html"],
  .site-header .main-nav > .nav-btn,
  .site-header .main-nav > .nav-btn.primary {
    display: inline-flex !important; flex: 0 1 auto !important; align-items: center !important; justify-content: center !important;
    min-width: 0 !important; min-height: 48px !important; margin: 0 !important;
    padding: 0 clamp(7px, .85vw, 17px) !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; background-image: none !important; box-shadow: none !important;
    color: #fff !important; font-size: clamp(12px, .95vw, 17px) !important; font-weight: 850 !important;
    line-height: 1.1 !important; text-decoration: none !important; white-space: nowrap !important; transform: none !important;
  }
  .site-header .main-nav > a[href*="privacy"],
  .site-header .main-nav > a[href*="terms"],
  .site-header .main-nav > a[href*="contact"] { display: none !important; }
  .site-header .main-nav > a:hover,
  .site-header .main-nav > a.active,
  .site-header .main-nav > .nav-btn:hover,
  .site-header .main-nav > .nav-btn.primary:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
  .site-header .main-nav > .nav-btn.primary { flex: 0 0 auto !important; padding-left: clamp(9px, 1vw, 18px) !important; padding-right: clamp(9px, 1vw, 18px) !important; }
}