header {
  position: fixed; width: 100%; overflow: visible;
  top:0; left:0; right:0;
  animation: headerGrow 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
header {
  z-index: 999999 !important;
}
header .dropdown {
  z-index: 999999 !important;
}
@keyframes headerGrow {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.header-bg {
  position: absolute; inset: 0;
  background-image: url('carbg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0a0f0e;
  z-index: 0;
  overflow: hidden;
}
.header-bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(10,15,14,1) 0%, rgba(0,10,15,0.88) 40%, rgba(0,0,0,0.75) 100%);
  pointer-events:none;
}
.header-inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 82px;
}
.brand { justify-self: start; margin-left: clamp(-20px, -8vw, -125px); }
.call-btn-wrap { justify-self: end; margin-right: clamp(-20px, -8vw, -125px); }

/* ── BRAND ── */
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; flex-shrink:0; }

.logo-wrap {
  position:relative; width:58px; height:58px;
  animation: logoEntry 1s 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes logoEntry {
  from { opacity:0; transform:scale(0.2) rotate(-30deg); }
  to   { opacity:1; transform:scale(1) rotate(0deg); }
}
.logo-pulse {
  position:absolute; inset:-7px; border-radius:50%;
  border:1.5px solid rgba(0,201,167,0.3);
  animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse {
  0%,100%{transform:scale(1);opacity:0.3;}
  50%{transform:scale(1.18);opacity:0.65;}
}
.logo-img {
  width:80px; height:80px; object-fit:contain; display:block;
  filter:drop-shadow(0 0 8px rgba(0,180,216,0.55)) brightness(1.15);

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.logo-fallback { display:none; width:100%; height:100%; }

.brand-name {
  font-family:'Rajdhani',sans-serif;
  font-size:2.1rem; font-weight:700; letter-spacing:3px;
  background:linear-gradient(90deg,#00C9A7 0%,#00B4D8 50%,#00C9A7 100%);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:brandSlide 0.9s 0.55s cubic-bezier(0.22,1,0.36,1) both, gradShift 4s linear infinite;
}
@keyframes brandSlide { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes gradShift { to{background-position:200% center} }

/* ── DESKTOP NAV ── */
nav { display:flex; align-items:center; gap:2px; animation:navFade 0.8s 0.65s ease both; }
@keyframes navFade { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

.nav-btn {
  font-family:'Exo 2',sans-serif; font-size:0.875rem; font-weight:500;
  color:rgba(210,240,235,0.8); background:transparent; border:none;
  cursor:pointer; padding:8px 18px; border-radius:6px;
  position:relative; letter-spacing:0.4px; transition:color 0.25s;
  text-decoration:none; white-space:nowrap;
}
.nav-btn::after {
  content:''; position:absolute; bottom:4px; left:18px; right:18px; height:1.5px;
  background:linear-gradient(90deg,#00C9A7,#00B4D8);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1); border-radius:2px;
}
.nav-btn:hover { color:#00C9A7; }
.nav-btn:hover::after { transform:scaleX(1); }

.sep { width:3px; height:3px; border-radius:50%; background:rgba(0,201,167,0.25); flex-shrink:0; }

/* ── SERVICES DROPDOWN ── */
.services-wrap { position:relative; }
.services-btn {
  font-family:'Exo 2',sans-serif; font-size:0.875rem; font-weight:600;
  color:#00dfc0; background:linear-gradient(135deg,rgba(0,201,167,0.13),rgba(0,180,216,0.13));
  border:1px solid rgba(0,201,167,0.35); cursor:pointer;
  padding:8px 20px; border-radius:7px; position:relative;
  letter-spacing:0.4px; transition:all 0.4s;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.services-btn .chev {
  width:11px; height:11px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform 0.4s;
}
.services-wrap:hover .chev { transform:rotate(180deg); }
.services-btn::after {
  content:''; position:absolute; bottom:3px; left:16px; right:16px; height:1.5px;
  background:linear-gradient(90deg,#00C9A7,#00B4D8);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1); border-radius:2px;
}
.services-wrap:hover .services-btn {
  background:linear-gradient(135deg,rgba(0,201,167,0.22),rgba(0,180,216,0.22));
  border-color:rgba(0,201,167,0.6); color:#00ffda;
}
.services-wrap:hover .services-btn::after { transform:scaleX(1); }

.dropdown {
  position: fixed;
  right: auto;
  margin-right: 0;
  position:fixed; top:82px;
  min-width:260px;
  background:rgba(4,14,18,0.97);
  border:1px solid rgba(0,201,167,0.2); border-radius:10px;
  padding:8px 0; backdrop-filter:blur(14px);
  opacity:0; pointer-events:none;
  transition:opacity 0.35s ease, transform 0.35s ease;
  z-index:999999;
  transform:translateY(-8px);
}
.dropdown::before {
  content:''; position:absolute; top:-10px; left:0; right:0; height:10px;
}
.dropdown.drop-open {
  opacity:1 !important;
  pointer-events:all !important;
  transform:translateY(0) !important;
}
.services-btn.drop-open {
  background:linear-gradient(135deg,rgba(0,201,167,0.22),rgba(0,180,216,0.22)) !important;
  border-color:rgba(0,201,167,0.6) !important;
  color:#00ffda !important;
}
.services-btn.drop-open .chev {
  transform:rotate(180deg);
}
.dropdown-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 18px; color:rgba(180,230,225,0.75);
  font-size:0.82rem; font-weight:500; cursor:pointer;
  transition:all 0.25s ease; text-decoration:none;
  border-left:2px solid transparent;
  transform:translateX(0);
}
.dropdown-item:hover {
  color:#00C9A7; background:rgba(0,201,167,0.07);
  border-left-color:#00C9A7; transform:translateX(6px);
}
.dropdown-item:hover { color:#00C9A7; background:rgba(0,201,167,0.07); border-left-color:#00C9A7; }
.d-icon { width:28px;height:28px;border-radius:6px;background:rgba(0,201,167,0.1);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }

/* ── CALL BTN ── */
.call-btn {
  font-family:'Exo 2',sans-serif; font-size:0.9rem; font-weight:600; color:#0a0f0e;
  background:linear-gradient(135deg,#00C9A7 0%,#00B4D8 100%);
  border:none; cursor:pointer; padding:11px 26px; border-radius:8px;
  letter-spacing:0.5px; position:relative; overflow:hidden;
  transition:transform 0.2s, box-shadow 0.2s; white-space:nowrap;
  animation:callEntry 0.8s 0.75s cubic-bezier(0.22,1,0.36,1) both;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
@keyframes callEntry { from{opacity:0;transform:scale(0.75)} to{opacity:1;transform:scale(1)} }
.call-btn::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent);opacity:0;transition:opacity 0.2s; }
.call-btn:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 6px 26px rgba(0,201,167,0.45); }
.call-btn:hover::before { opacity:1; }
.call-btn:active { transform:scale(0.97); }

/* ── HAMBURGER ── */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:8px; background:none; border:none;
  animation: callEntry 0.8s 0.75s cubic-bezier(0.22,1,0.36,1) both;
}
.hamburger span {
  display:block; width:26px; height:2.5px;
  background:rgba(0,201,167,0.85); border-radius:2px;
  transition:all 0.55s cubic-bezier(0.22,1,0.36,1);
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── MOBILE DRAWER ── */
.mobile-drawer {
  flex-direction:column;
  background:rgba(4,12,16,0.98);
  border-top:1px solid rgba(0,201,167,0.14);
  overflow:hidden;
  max-height:0; opacity:0;
  display:flex;
  transition: max-height 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease, padding 0.35s ease;
  padding: 0 24px;
  position:relative; z-index:1;
}
.mobile-drawer.open { max-height:700px; opacity:1; padding:14px 24px 28px; }

.m-btn {
  font-family:'Exo 2',sans-serif; font-size:1rem; font-weight:500;
  color:rgba(200,235,230,0.85); background:none; border:none;
  cursor:pointer; padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  text-align:left; letter-spacing:0.3px; transition:color 0.2s; width:100%;
}
.m-btn:hover { color:#00C9A7; }

.m-services-toggle {
  font-family:'Exo 2',sans-serif; font-size:1rem; font-weight:600;
  color:#00C9A7; background:none; border:none; cursor:pointer;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.06);
  text-align:left; letter-spacing:0.3px;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; transition:color 0.2s;
}
.m-chev {
  width:14px; height:14px; fill:none; stroke:#00C9A7;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform 0.35s cubic-bezier(0.22,1,0.36,1); flex-shrink:0;
}
.m-services-toggle.open .m-chev { transform:rotate(180deg); }

.m-services-list {
  overflow:hidden; max-height:0; opacity:0;
  display:flex; flex-direction:column;
  transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
}
.m-services-list.open { max-height:400px; opacity:1; }

.m-svc {
  display:flex; align-items:center; gap:12px;
  padding:10px 0 10px 6px;
  color:rgba(170,220,215,0.75); font-size:0.875rem;
  cursor:pointer; transition:color 0.2s;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.m-svc:hover { color:#00C9A7; }
.m-svc-icon {
  width:30px; height:30px; border-radius:6px;
  background:rgba(0,201,167,0.1);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
}

.m-call {
  margin-top:18px;
  font-family:'Exo 2',sans-serif; font-size:1rem; font-weight:600;
  color:#0a0f0e; background:linear-gradient(135deg,#00C9A7,#00B4D8);
  border:none; border-radius:8px; padding:15px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform 0.2s, box-shadow 0.2s; letter-spacing:0.4px; width:100%;
}
.m-call:hover { transform:scale(1.02); box-shadow:0 4px 20px rgba(0,201,167,0.4); }

@media(max-width:768px) {
  .header-inner { height:68px; padding:0 16px; grid-template-columns:1fr auto; }
  .brand { margin-left:0 !important; }
  .call-btn-wrap { margin-right:0 !important; }
  .brand-name { font-size:1.55rem; }
  .logo-wrap { width:46px; height:46px; }
  nav, .call-btn { display:none !important; }
  .hamburger { display:flex !important; }
}
@media(max-width:400px) {
  .brand-name { font-size:1.25rem; }
  .header-inner { padding:0 12px; }
}