/*
 * Vhanja Constructions Limited - Premium Navbar V2
 * Public website navigation only.
 */

.vg-topbar-premium{
  position:relative;
  background:#061522!important;
  color:#d9e7ef!important;
  border-bottom:1px solid rgba(255,255,255,.07);
  min-height:36px;
  font-size:10.5px!important;
  letter-spacing:.035em
}
.vg-topbar-premium:after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,#2fd39e 24%,#e9bd64 50%,#0b76ff 76%,transparent);
  opacity:.55
}
.vg-topbar-premium .container{min-height:36px}
.vg-topbar-left{display:flex!important;align-items:center;gap:9px}
.vg-topbar-left strong{font-weight:800;color:#fff}
.vg-topbar-separator{width:1px;height:13px;background:rgba(255,255,255,.18)}
.vg-live-dot{width:7px;height:7px;border-radius:50%;background:#41daa4;box-shadow:0 0 0 4px rgba(65,218,164,.11),0 0 13px rgba(65,218,164,.65)}
.vg-topbar-premium .vg-topbar-actions{display:flex;align-items:center;gap:6px}
.vg-topbar-premium .vg-topbar-actions a{
  display:inline-flex;align-items:center;gap:6px;
  color:#e5eff5!important;text-decoration:none!important;
  padding:5px 9px;border-radius:999px;
  transition:.2s ease
}
.vg-topbar-premium .vg-topbar-actions a:hover{background:rgba(255,255,255,.08);color:#fff!important}

.vg-navbar-premium{
  --vg-nav-ink:#071827;
  --vg-nav-blue:#0b5cff;
  --vg-nav-green:#08785f;
  --vg-nav-gold:#d9aa4f;
  background:rgba(255,255,255,.88)!important;
  border-bottom:1px solid rgba(9,34,56,.08)!important;
  box-shadow:0 10px 40px rgba(15,38,57,.075)!important;
  backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  padding:9px 0!important
}
.vg-navbar-premium>.container{
  min-height:70px;
  max-width:1440px
}
.vg-navbar-premium .vg-brand{
  display:flex!important;align-items:center;gap:12px;
  min-width:0;margin-right:22px;padding:0!important;text-decoration:none
}
.vg-navbar-premium .vg-brand-v3d{
  width:52px!important;height:52px!important;flex:0 0 52px!important
}
.vg-navbar-premium .vg-brand-v3d::before{inset:3px!important;border-radius:17px!important;opacity:.55!important}
.vg-navbar-premium .vg-brand-v3d::after{inset:6px!important;border-radius:15px!important}
.vg-navbar-premium .vg-brand-vface{width:49px!important;height:49px!important}
.vg-navbar-premium .vg-brand-copy{display:flex;flex-direction:column;min-width:0}
.vg-navbar-premium .vg-brand-copy>strong{
  color:#071827!important;font-size:17px!important;line-height:1!important;
  font-weight:950!important;letter-spacing:-.035em!important;white-space:nowrap
}
.vg-brand-tagline{
  display:block!important;margin-top:4px!important;
  color:#6b7b8a!important;font:850 8px/1 Inter,sans-serif!important;
  letter-spacing:.19em!important
}
.vg-navbar-premium .vg-brand-services{
  margin-top:5px!important;font-size:7.5px!important;gap:4px!important;letter-spacing:.045em!important
}
.vg-navbar-premium .vg-svc-sep{width:2px!important;height:2px!important}

.vg-premium-navlist{
  padding:5px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(247,250,252,.94),rgba(242,247,250,.8));
  border:1px solid rgba(17,50,75,.065)
}
.vg-navbar-premium .nav-link{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:40px;padding:9px 12px!important;
  border-radius:999px;
  color:#435568!important;
  font-size:12px!important;font-weight:800!important;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease
}
.vg-navbar-premium .nav-link:hover{
  color:#071827!important;
  background:#fff;
  box-shadow:0 7px 19px rgba(13,40,62,.08)
}
.vg-navbar-premium .nav-link.active{
  color:#fff!important;
  background:linear-gradient(135deg,#08263d,#0a5f66);
  box-shadow:0 10px 24px rgba(6,65,77,.23)
}
.vg-navbar-premium .nav-link.active:after{
  content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);
  width:18px;height:2px;border-radius:999px;background:#e9bd64
}
.vg-navbar-premium .dropdown-toggle:after{margin-left:6px;opacity:.55}
.vg-navbar-premium .vg-portal-link{color:#24445c!important}
.vg-navbar-premium .vg-portal-link i{color:#0b8f76}

.vg-navbar-premium .vg-btn-customer,
.vg-navbar-premium .vg-btn-primary{
  min-height:42px;border-radius:999px!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:7px;
  padding:9px 14px!important;
  font-size:11px!important;font-weight:900!important;
  white-space:nowrap
}
.vg-navbar-premium .vg-btn-customer{
  border:1px solid rgba(8,120,95,.22)!important;
  color:#086b56!important;
  background:linear-gradient(180deg,#f9fffd,#edf9f5)!important;
  box-shadow:inset 0 1px #fff
}
.vg-navbar-premium .vg-btn-customer:hover{
  background:#08785f!important;color:#fff!important;border-color:#08785f!important;
  transform:translateY(-1px);box-shadow:0 10px 24px rgba(8,120,95,.20)
}
.vg-navbar-premium .vg-btn-primary{
  border:1px solid #071f37!important;color:#fff!important;
  background:linear-gradient(115deg,#061827 0%,#0a405b 52%,#0b756f 100%)!important;
  box-shadow:0 12px 25px rgba(8,55,74,.22)!important
}
.vg-navbar-premium .vg-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 31px rgba(8,55,74,.29)!important;
  filter:saturate(1.08)
}
.vg-navbar-premium .vg-btn-primary i{color:#f0cb7d}

.vg-navbar-premium .vg-portal-menu{
  padding:9px!important;border:1px solid rgba(16,45,66,.10)!important;
  border-radius:18px!important;background:rgba(255,255,255,.98)!important;
  box-shadow:0 24px 60px rgba(15,36,51,.18)!important
}
.vg-navbar-premium .vg-portal-menu .dropdown-item{
  border-radius:11px;padding:10px 12px;font-size:11px;font-weight:750;color:#30475a
}
.vg-navbar-premium .vg-portal-menu .dropdown-item:hover{background:#eef8f5;color:#08785f}

.vg-premium-toggler{
  border:1px solid rgba(11,55,78,.13)!important;
  border-radius:14px!important;padding:8px 10px!important;
  display:flex;align-items:center;gap:8px;
  background:#f7fafc!important;
  box-shadow:none!important
}
.vg-menu-label{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:#506579}
.vg-premium-toggler .navbar-toggler-icon{width:21px;height:21px}

@media(min-width:1200px){
  .vg-navbar-premium .navbar-collapse{min-width:0}
  .vg-navbar-premium .vg-premium-navlist{gap:1px}
}

@media(max-width:1399.98px) and (min-width:1200px){
  .vg-navbar-premium .vg-brand-copy>strong{font-size:15px!important}
  .vg-navbar-premium .vg-brand-services{display:none!important}
  .vg-navbar-premium .nav-link{padding-left:9px!important;padding-right:9px!important;font-size:11px!important}
  .vg-navbar-premium .vg-btn-customer,.vg-navbar-premium .vg-btn-primary{padding-left:11px!important;padding-right:11px!important}
}

@media(max-width:1199.98px){
  .vg-navbar-premium{padding:7px 0!important}
  .vg-navbar-premium>.container{min-height:62px}
  .vg-navbar-premium .vg-brand-v3d{width:47px!important;height:47px!important;flex-basis:47px!important}
  .vg-navbar-premium .vg-brand-vface{width:44px!important;height:44px!important}
  .vg-navbar-premium .navbar-collapse{
    margin-top:10px;padding:12px;
    border:1px solid rgba(14,48,69,.10);
    border-radius:22px;
    background:rgba(255,255,255,.98);
    box-shadow:0 24px 60px rgba(16,39,57,.15);
    max-height:calc(100dvh - 112px);
    overflow-y:auto;overscroll-behavior:contain
  }
  .vg-premium-navlist{
    padding:0;border:0;border-radius:0;background:transparent;
    align-items:stretch!important
  }
  .vg-navbar-premium .nav-item{width:100%}
  .vg-navbar-premium .nav-link{
    width:100%;justify-content:flex-start;
    min-height:46px;padding:11px 13px!important;border-radius:13px;
    font-size:13px!important
  }
  .vg-navbar-premium .nav-link.active:after{display:none}
  .vg-navbar-premium .nav-link.active{background:linear-gradient(135deg,#09253c,#0b716d)}
  .vg-navbar-premium .vg-nav-account,.vg-navbar-premium .vg-nav-estimate{margin:8px 0 0!important}
  .vg-navbar-premium .vg-btn-customer,.vg-navbar-premium .vg-btn-primary{width:100%;min-height:48px}
  .vg-service-megamenu{position:static!important;transform:none!important;width:100%!important}
}

@media(max-width:767.98px){
  .vg-topbar-premium{display:none!important}
  .vg-navbar-premium{
    top:0!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 7px 26px rgba(15,37,54,.10)!important
  }
  .vg-navbar-premium>.container{padding-left:14px!important;padding-right:14px!important}
  .vg-navbar-premium .vg-brand{margin-right:8px}
  .vg-navbar-premium .vg-brand-copy>strong{font-size:14px!important}
  .vg-brand-tagline{font-size:7px!important}
  .vg-navbar-premium .vg-brand-services{display:none!important}
}

@media(max-width:374.98px){
  .vg-navbar-premium .vg-brand-copy>strong{font-size:12.5px!important}
  .vg-brand-tagline{letter-spacing:.12em!important}
  .vg-navbar-premium .vg-brand-v3d{width:42px!important;height:42px!important;flex-basis:42px!important}
  .vg-navbar-premium .vg-brand-vface{width:39px!important;height:39px!important}
}