/* =========================================================
   HEADER.CSS — Topbar + Navigation
   Requires style.css to be loaded first.
========================================================= */
/* ────────────────────────────────────────────
   TOPBAR — above nav, phone + live chat
──────────────────────────────────────────── */
.topbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 201;
   height: 38px;
   background: #171718;
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   display: flex;
   align-items: center
}

.topbar-i {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 20px
}

.topbar-phone {
   display: flex;
   align-items: center;
   gap: 7px;
   font-family: var(--fm);
   font-size: 11px;
   color: rgba(255, 255, 255, .45);
   text-decoration: none;
   letter-spacing: .03em;
   transition: color .15s
}

.topbar-phone:hover {
   color: var(--white)
}

.topbar-phone svg {
   width: 13px;
   height: 13px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex-shrink: 0
}

.topbar-chat {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 24px;
   padding: 0 12px;
   border-radius: 100px;
   background: rgba(222, 37, 58, .12);
   border: 1px solid rgba(222, 37, 58, .3);
   font-family: var(--fm);
   font-size: 10px;
   font-weight: 500;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--red);
   cursor: pointer;
   transition: background .2s, border-color .2s
}

.topbar-chat:hover {
   background: rgba(222, 37, 58, .22);
   border-color: rgba(222, 37, 58, .5)
}

.topbar-chat-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--red);
   animation: pulse 2s ease infinite;
   flex-shrink: 0
}

/* ────────────────────────────────────────────
   NAV — transparent over dark hero, darkens on scroll
   Desktop same UI + Bootstrap-like toggle from 991px
──────────────────────────────────────────── */
.nav {
   position: fixed;
   top: 38px;
   left: 0;
   right: 0;
   z-index: 200;
   background: transparent;
   height: 72px;
   display: flex;
   align-items: center;
   transition: background .3s, border-color .3s, backdrop-filter .3s;
   border-bottom: 1px solid transparent
}

.nav.on {
   background: rgba(14, 14, 15, .96);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-bottom-color: rgba(255, 255, 255, .07)
}

.nav-i {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   position: relative
}

.nav-menu {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 28px;
   flex: 1
}

.nav-links {
   display: flex;
   gap: 28px;
   list-style: none
}

.nav-links a {
   font-family: var(--fd);
   font-size: 13px;
   font-weight: 500;
   color: rgba(255, 255, 255, .5);
   text-decoration: none;
   transition: color .15s
}

.nav-links a:hover {
   color: var(--white)
}

.nav-cta {
   display: flex;
   gap: 8px;
   align-items: center;
   flex-shrink: 0
}

.nav-toggle {
   display: none;
   width: 42px;
   height: 38px;
   border: 1px solid rgba(255, 255, 255, .18);
   border-radius: 8px;
   background: rgba(255, 255, 255, .04);
   cursor: pointer;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 5px;
   padding: 0;
   transition: background .2s, border-color .2s;
   flex-shrink: 0
}

.nav-toggle:hover {
   background: rgba(255, 255, 255, .08);
   border-color: rgba(255, 255, 255, .3)
}

.nav-toggle span {
   width: 20px;
   height: 2px;
   background: var(--white);
   border-radius: 10px;
   transition: transform .25s ease, opacity .25s ease
}

.nav-toggle.active span:nth-child(1) {
   transform: translateY(7px) rotate(45deg)
}

.nav-toggle.active span:nth-child(2) {
   opacity: 0
}

.nav-toggle.active span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg)
}


@media(max-width:991px) {
   .nav-toggle {
      display: flex
   }

   .nav-i {
      gap: 16px
   }

   .nav .wrap {
    width: 100%;
   }

   .nav-menu {
      position: absolute;
      top: calc(100% + 16px);
      left: 0;
      right: 0;
      display: block;
      background: rgba(14, 14, 15, .98);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 14px;
      padding: 12px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity .25s ease, visibility .25s ease, transform .25s ease
   }

   .nav-menu.open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto
   }

   .nav-links {
      display: flex;
      flex-direction: column;
      gap: 0;
      width: 100%
   }

   .nav-links li {
      width: 100%
   }

   .nav-links a {
      display: block;
      width: 100%;
      padding: 13px 14px;
      border-radius: 9px;
      color: rgba(255, 255, 255, .62)
   }

   .nav-links a:hover {
      background: rgba(255, 255, 255, .06);
      color: var(--white)
   }

   .nav-cta {
      width: 100%;
      margin-top: 10px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, .08)
   }

   .nav-cta .btn {
      width: 100%
   }
	.topbar-i{
		justify-content: space-between;
	}
}


.site-header .wrap{
   width: 100%;
}
.site-header .nav-links{
   margin: 0 auto;
}