/* =========================================================
   NS ELECTRICAL - SHARED NAVBAR & FOOTER
   This file is loaded LAST so every public page uses the
   exact same header/footer design as index.html.
   ========================================================= */

.header{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  width:100% !important;
  background:#fff !important;
  background-image:none !important;
  border-bottom:1px solid #e9edf3 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.header .nav{
  min-height:120px !important;
  position:relative;
}

.header .brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  text-decoration:none !important;
  color:#0b1f3a !important;
  flex-shrink:0 !important;
}

.header .logo-img{
  width:95px !important;
  height:95px !important;
  object-fit:contain !important;
  border-radius:8px !important;
}

.header .brand strong{
  font-size:20px !important;
  text-transform:uppercase !important;
  letter-spacing:normal !important;
  white-space:nowrap !important;
}

.header .nav-links{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:50px !important;
}

.header .nav-links > a,
.header .services-toggle{
  position:relative !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:1.5px !important;
  color:#31435c !important;
  text-decoration:none !important;
  transition:transform .3s ease,color .3s ease !important;
}

.header .nav-links > a:hover,
.header .services-toggle:hover{
  color:#F97F51 !important;
  transform:translateY(-2px) !important;
}


.header .nav-links > a:not(.brochure-btn)::after,
.header .services-toggle::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:-6px !important;
  width:0 !important;
  height:2px !important;
  background:#F97F51 !important;
  transform:translateX(-50%) !important;
  transition:width .3s ease !important;
}

.header .nav-links > a:not(.brochure-btn):hover::after,
.header .nav-links > a.active::after,
.header .services-toggle:hover::after{
  width:100% !important;
}

.header .brochure-btn{
  background:#dbb26b !important;
  color:#fff !important;
  padding:10px 18px !important;
  border-radius:6px !important;
  font-weight:600 !important;
  letter-spacing:1.5px !important;
  transition:.25s ease !important;
}

.header .brochure-btn:hover{
  background:#e2a43a !important;
  transform:translateY(-2px) !important;
  box-shadow:none !important;
}

.header .nav-services{
  position:relative !important;
}

.header .services-dropdown{
  position:absolute !important;
  top:100% !important;
  left:50% !important;
  transform:translateX(-50%) translateY(10px) !important;
  width:380px !important;
  display:flex !important;
  flex-direction:column !important;
  padding:15px !important;
  background:#fff !important;
  border-radius:16px !important;
  box-shadow:0 15px 40px rgba(0,0,0,.15) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:.25s ease !important;
  z-index:9999 !important;
}

.header .nav-services:hover .services-dropdown,
.header .nav-services:focus-within .services-dropdown,
.header .nav-services.open .services-dropdown{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}

.header .services-dropdown a{
  display:block !important;
  padding:18px 15px !important;
  color:#10233f !important;
  text-decoration:none !important;
  font-size:15px !important;
  font-weight:600 !important;
  letter-spacing:normal !important;
  border-bottom:1px solid #e8edf2 !important;
  transition:.2s ease !important;
}

.header .services-dropdown a:last-child{
  border-bottom:none !important;
}

.header .services-dropdown a:hover{
  background:#f3f6f9 !important;
  border-radius:10px !important;
  padding-left:20px !important;
  transform:none !important;
}

.header .nav-services::after{
  content:"" !important;
  position:absolute !important;
  left:-8px !important;
  right:-8px !important;
  top:100% !important;
  height:18px !important;
  background:transparent !important;
  z-index:9998 !important;
}

.header .menu{
  display:none !important;
}

footer{
  position:relative !important;
  z-index:10 !important;
  background:#cbbd93 !important;
  color:#0f0141 !important;
}

.footer-grid{
  display:grid !important;
  grid-template-columns:minmax(220px,1.2fr) minmax(150px,.7fr) minmax(260px,1.3fr) !important;
  gap:clamp(35px,6vw,90px) !important;
  padding:58px 0 !important;
}

.footer-brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  color:#0f0141 !important;
  text-decoration:none !important;
}

.footer-brand .logo-img2{
  width:95px !important;
  height:95px !important;
  object-fit:contain !important;
}

.footer-grid h4{
  margin:0 0 14px !important;
  font-size:14px !important;
  color:#0f0141 !important;
  letter-spacing:.4px !important;
}

.footer-grid p,
.footer-grid a:not(.brand){
  display:block !important;
  margin:8px 0 !important;
  font-size:12px !important;
  line-height:1.65 !important;
  color:#351717 !important;
  text-decoration:none !important;
}

.footer-grid a:not(.brand):hover{
  color:#0b1f3a !important;
}

.footer-company > p{
  max-width:330px !important;
  margin-top:16px !important;
}

.copyright{
  padding:15px 0 !important;
  background:#061222 !important;
  color:#aab4c3 !important;
  font-size:11px !important;
}

.contain{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

@media (max-width:800px){
  .header .nav{
    min-height:70px !important;
    padding-left:4% !important;
    padding-right:4% !important;
  }

  .header .logo-img{
    width:46px !important;
    height:46px !important;
  }

  .header .brand strong{
    font-size:12px !important;
    letter-spacing:1.2px !important;
  }

  .header .menu{
    display:block !important;
    border:none !important;
    background:none !important;
    font-size:25px !important;
    cursor:pointer !important;
    margin-left:auto !important;
  }

  .header .nav-links{
    display:none !important;
    position:absolute !important;
    left:4% !important;
    right:4% !important;
    top:70px !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:2px !important;
    padding:18px !important;
    border:1px solid #e8edf3 !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:0 15px 40px rgba(0,0,0,.10) !important;
  }

  .header .nav-links.open{
    display:flex !important;
  }

  .header .nav-links > a,
  .header .services-toggle{
    font-size:13px !important;
    letter-spacing:.4px !important;
    padding:10px 12px !important;
    transform:none !important;
  }

  .header .nav-links > a:not(.brochure-btn)::after,
  .header .services-toggle::after{
    display:none !important;
  }

  .header .nav-services{
    width:100% !important;
  }

  .header .nav-services::after{
    display:none !important;
  }

  .header .services-dropdown{
    position:static !important;
    width:auto !important;
    transform:none !important;
    display:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    padding:6px 0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }

  .header .nav-services.open .services-dropdown{
    display:flex !important;
  }

  .header .services-dropdown a{
    padding:10px 12px !important;
    font-size:12px !important;
  }

  .header .services-dropdown a:hover{
    padding-left:16px !important;
  }

  .header .brochure-btn{
    text-align:center !important;
    margin-top:5px !important;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:35px 25px !important;
    padding:45px 0 !important;
  }

  .footer-company{
    grid-column:1/-1 !important;
  }
}

@media (max-width:520px){
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .footer-company{
    grid-column:auto !important;
  }

  .footer-brand .logo-img2{
    width:52px !important;
    height:52px !important;
  }

  .copyright{
    font-size:10px !important;
  }
}


/* Inner pages keep the navbar fixed at the top. */
body:not(.home-page){
  padding-top:120px !important;
}
body:not(.home-page) .header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:10000 !important;
}

@media (max-width:800px){
  body:not(.home-page){padding-top:70px !important;}
}

/* Prevent horizontal overflow from creating a second scroll container; this keeps sticky reliable on mobile. */
html{overflow-x:clip !important;}
body{overflow-x:clip !important;}