.site-header{
  width:100%;
  background:#fff;
  border-bottom:1px solid #eef1f6;
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* keep your exact wrap */
.header-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo img{ height:40px; display:block; }

.site-header a{
  text-decoration:none;
  color:inherit;
}

/* NAV same center look */
.main-nav{
  display:flex;
  align-items:center;
  gap:32px;
}

.main-nav > a,
.main-nav > .nav-dd{ display:flex; align-items:center; }

.main-nav a,
.main-nav .nav-link{
  color:#6b7280;
  font-size:16px;
  font-weight:500;
  transition: color .2s ease;
}

.main-nav a:hover,
.main-nav .nav-link:hover{ color:#1f2a5a; }

.main-nav a.active,
.main-nav .nav-link.active{
  color:#1f2a5a;
  font-weight:600;
}

.header-cta .btn-contact{
  background:#1f2a5a;
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  transition: background .2s ease;
  white-space:nowrap;
}
.header-cta .btn-contact:hover{ background:#16204a; }

/* dropdown icon */
.dd-icon{
  font-size:12px;
  margin-left:6px;
  transform: translateY(1px);
  opacity:.9;
}

/* Backdrop */
.mega-backdrop{
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.22);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 9000;
}
.site-header.mega-open .mega-backdrop{
  opacity:1;
  pointer-events:auto;
}

/* Mega menu FULL WIDTH just under header */
.nav-dd{ position: relative; }

.mega-menu{
  position: fixed;
  left: 0;
  right: 0;
  top: 73px; /* header height approx */
  background:#fff;
  border-top:1px solid #eef2f6;
  box-shadow: 0 24px 80px rgba(15,23,42,.18);
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 9500;
}

.mega-inner{
  max-width:1280px;
  margin:0 auto;
  padding:22px 24px 26px;
}

.mega-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:600;
  color:#0f172a;
  margin-bottom:18px;
}
.mega-arrow{ font-size:24px; line-height:1; }

.mega-grid{
  display:grid;
  gap:18px 22px;
}
.mega-grid-4{
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.mega-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
  border-radius:14px;
  border:1px solid #eef2f6;
  box-shadow: 0 10px 30px rgba(15,23,42,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  background:#fff;
}

.mega-card:hover{
  transform: translateY(-2px);
  border-color:#dbe6ff;
  box-shadow:0 18px 44px rgba(15,23,42,.08);
}

.mega-ico{
  width:34px;
  height:34px;
  flex:0 0 34px;
  object-fit:contain;
}

.mega-card span{ color:#0f172a; font-size:16px; font-weight:500; }

.mega-text{ display:flex; flex-direction:column; gap:6px; }
.mega-name{ font-size:16px; font-weight:500; color:#0f172a; }
.mega-sub{ font-size:14px; font-weight:500; color:#7c3aed; }

/* show state controlled by JS (desktop hover + mobile click) */
.nav-dd.open .mega-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

/* responsive */
@media(max-width:980px){
  .mega-grid-4{ grid-template-columns: repeat(2,1fr); }
  .main-nav{ gap:18px; }
}
@media(max-width:720px){
  .main-nav{ display:none; } /* if you already have hamburger, keep it */
}
/* FIX HEADER */
.site-header{
  width:100%;
  background:#fff;
  border-bottom:1px solid #eef1f6;

  position: fixed;   /* ✅ fixed */
  top: 0;
  left: 0;
  z-index: 9999;
}

/* SVG dropdown icon (bold) */
.dd-icon{
  display:inline-flex;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  transform: translateY(2px);
  color:#1f2a5a;
  opacity: .9;
}
.dd-svg{ width:100%; height:100%; }

/* Mega menu FULL WIDTH (top will be set by JS) */
.mega-menu{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h, 72px); /* ✅ JS sets this */

  background:#fff;
  border-top:1px solid #eef2f6;
  box-shadow: 0 24px 80px rgba(15,23,42,.18);

  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 9500;
}

/* show state */
.nav-dd.open .mega-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}
.mega-text{ display:flex; flex-direction:column; gap:2px; }
.mega-name{ font-family:"Inter",system-ui,sans-serif; font-size:16px; font-weight:500; color:#0f172a; }
.mega-sub{ font-family:"Inter",system-ui,sans-serif; font-size:14px; font-weight:500; color:#6d28d9; } /* purple like screenshot */


/* =========================================
   MOBILE HEADER DRAWER (Desktop untouched)
   Paste at END of header.css
========================================= */

/* body offset for fixed header (desktop + mobile safe) */
body{
  padding-top: var(--header-h, 72px);
}

/* JS adds .active on backdrop */
.mega-backdrop.active{
  opacity:1;
  pointer-events:auto;
}

/* Hamburger button (only visible on mobile) */
.hamburger{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid #eef1f6;
  background:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hamburger span{
  width:20px;
  height:2px;
  background:#1f2a5a;
  display:block;
  position:relative;
}
.hamburger span::before,
.hamburger span::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:#1f2a5a;
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

/* ✅ Mobile drawer */
@media (max-width: 720px){
  .hamburger{ display:inline-flex; }

  /* IMPORTANT: override your old .main-nav{display:none} */
  .main-nav{
    display:flex !important;

    position: fixed;
    left: 16px;
    right: 16px;
    top: var(--header-h, 72px);

    background:#fff;
    border:1px solid #eef1f6;
    border-radius:18px;
    padding:14px;

    flex-direction:column;
    align-items:flex-start;
    gap:12px;

    box-shadow:0 24px 80px rgba(15,23,42,.18);
    z-index: 9600;

    opacity:0;
    transform: translateY(-8px);
    pointer-events:none;
    transition: .2s ease;

    max-height: calc(100vh - var(--header-h, 72px) - 24px);
    overflow:auto;
  }

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

  /* mobile: mega menu nav ke andar open ho */
  .mega-menu{
    position: static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    box-shadow:none !important;
    border-top:0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    display:none;

    padding:0;
    margin-top:6px;
  }

  .nav-dd.open .mega-menu{ display:block; }

  .mega-inner{ padding:10px 0 0; }
  .mega-grid-4{ grid-template-columns: 1fr !important; }
  .mega-card{ width:100%; padding:14px; }
}

/* =========================================
   MOBILE: CTA hide, hamburger right, contact inside menu
   Paste at END of header.css
========================================= */

body{ padding-top: var(--header-h, 72px); }

.mega-backdrop.active{ opacity:1; pointer-events:auto; }

/* mobile-contact hidden by default (desktop) */
.mobile-contact{ display:none; }

/* Hamburger button */
.hamburger{
  display:none; /* desktop hidden */
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid #eef1f6;
  background:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hamburger span{
  width:20px;
  height:2px;
  background:#1f2a5a;
  display:block;
  position:relative;
}
.hamburger span::before,
.hamburger span::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:#1f2a5a;
}
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

/* MOBILE drawer */
@media (max-width: 720px){

  .hamburger{ display:inline-flex; }

  /* ✅ desktop CTA mobile pe hide */
  .header-cta{ display:none !important; }

  /* ✅ important: your old display:none override */
  .main-nav{
    display:flex !important;

    position: fixed;
    left: 16px;
    right: 16px;
    top: var(--header-h, 72px);

    background:#fff;
    border:1px solid #eef1f6;
    border-radius:18px;
    padding:14px;

    flex-direction:column;
    align-items:flex-start;
    gap:12px;

    box-shadow:0 24px 80px rgba(15,23,42,.18);
    z-index: 9600;

    opacity:0;
    transform: translateY(-8px);
    pointer-events:none;
    transition: .2s ease;

    max-height: calc(100vh - var(--header-h, 72px) - 24px);
    overflow:auto;
  }

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

  /* contact menu item visible on mobile */
  .mobile-contact{
    display:inline-flex;
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    background:#1f2a5a;
    color:#fff !important;
    font-weight:600;
  }

  /* Mega menu mobile: inside nav */
  .mega-menu{
    position: static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    box-shadow:none !important;
    border-top:0 !important;

    opacity: 1 !important;
    visibility: visible !important;
    display:none;

    padding:0;
    margin-top:6px;
  }
  .nav-dd.open .mega-menu{ display:block; }

  .mega-inner{ padding:10px 0 0; }
  .mega-grid-4{ grid-template-columns: 1fr !important; }
  .mega-card{ width:100%; padding:14px; }
}
/* =========================================
   MOBILE: Smaller Mega Submenu + Smaller Icons
   Desktop untouched
========================================= */
@media (max-width: 720px){

  /* Entire mega block compact */
  .mega-inner{
    padding: 6px 0 0 !important;
  }

  /* Title smaller & tighter */
  .mega-title{
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    gap: 6px !important;
  }

  .mega-arrow{
    font-size: 16px !important;
  }

  /* Reduce grid spacing */
  .mega-grid{
    gap: 8px !important;
  }

  /* Compact card */
  .mega-card{
    padding: 8px 10px !important;
    border-radius: 10px !important;
    gap: 8px !important;
  }

  /* Smaller icons */
  .mega-ico{
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }

  /* Smaller text */
  .mega-card span,
  .mega-name{
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  .mega-sub{
    font-size: 11px !important;
  }

  /* Reduce vertical spacing */
  .mega-text{
    gap: 1px !important;
  }

  /* Slightly lighter card shadow */
  .mega-card{
    box-shadow: 0 4px 12px rgba(15,23,42,.06) !important;
  }

  /* Remove extra top spacing */
  .mega-menu{
    margin-top: 2px !important;
  }
}