/* ── RESET & VARIABLES ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --nav-bg:#ffffff;
  --nav-border:rgba(0,0,0,0.08);
  --text:#1a1a2e;
  --muted:#6b7280;
  --accent:#5e1d46;
  --accent-light:#f5f5f5;
  --accent-hover:#0d47a1;
  --drop-bg:#ffffff;
  --drop-shadow:0 8px 32px rgba(0,0,0,0.12);
  --tab-active:#5e1d46;
  --sub-hover:#f3f6ff;
  --cta-bg:#5e1d46;
  --cta-text:#fff;
  --mob-bg:#fff;
  --transition:0.18s ease;
}
/* body{font-family:'Plus Jakarta Sans',sans-serif;background:#f0f4ff;min-height:100vh} */

/* ── NAV SHELL ── */
nav{
  position:sticky;top:0;z-index:999;
  background:var(--nav-bg);
  /* border-bottom:1px solid var(--nav-border); */
  backdrop-filter:blur(10px);
}
.nav-inner{
  /* max-width:1200px; */
  margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  /* padding:0 1.5rem; */
  height:62px;
  gap:30px
}
.brand{
  font-weight:700;font-size:1.2rem;color:var(--accent);
  letter-spacing:-0.02em;text-decoration:none;flex-shrink:0;
}
.brand span{color:var(--text);}

/* ── DESKTOP NAV LIST ── */
.nav-list{
  display:flex;align-items:center;gap:2px;list-style:none;
  margin-bottom:0px;
}
.nav-item{position:relative;}
.nav-link{
  display:flex;align-items:center;gap:5px;
  padding:0.5rem 0.8rem;
  font-size:0.875rem;font-weight:500;color:var(--text);
  text-decoration:none;border-radius:8px;
  cursor:pointer;background:none;border:none;
  transition:background var(--transition),color var(--transition);
  white-space:nowrap;
}
.nav-link:hover,.nav-item.open>.nav-link{
  background:var(--accent-light);color:var(--accent);
}
.nav-link .chevron{
  width:14px;height:14px;transition:transform 0.2s;
  stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.nav-item.open>.nav-link .chevron{transform:rotate(180deg);}

/* ── DROPDOWN BASE ── */
.dropdown-wrap{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  opacity:0;pointer-events:none;
  background:var(--drop-bg);border:1px solid var(--nav-border);
  border-radius:14px;box-shadow:var(--drop-shadow);
  transition:opacity 0.18s ease,transform 0.18s ease;
}
.nav-item.open>.dropdown-wrap{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}

/* ── SIMPLE DROPDOWN ── */
.simple-drop{min-width:200px;padding:8px;}
.simple-drop a{
  display:block;padding:0.5rem 0.8rem;
  font-size:0.875rem;color:var(--text);text-decoration:none;
  border-radius:8px;
  transition:background var(--transition),color var(--transition);
}
.simple-drop a:hover{background:var(--sub-hover);color:var(--accent);}

/* ── MEGA MENU ── */
.mega-drop{
  left:0;transform:translateX(0) translateY(-6px);
  min-width:700px;padding:0;overflow:hidden;
}
.nav-item.open>.mega-drop{
  /* transform:translateX(0) translateY(0); */
}
.mega-inner{display:flex;}

/* Sidebar tabs */
.mega-tabs{
  width:230px;flex-shrink:0;
  background:#dde7ee;
  border-right:1px solid var(--nav-border);
  padding:10px 8px;
  list-style:none;
}
.mega-tabs li{margin-bottom:2px;}
.tab-btn{
  display:flex;align-items:center;
  width:100%;padding:0.5rem 0.75rem;
  font-size:0.82rem;font-weight:500;color:var(--muted);
  background:none;border:none;border-radius:8px;cursor:pointer;
  text-align:left;
  transition:background var(--transition),color var(--transition);
  position: relative;
}
.tab-btn:hover{background:#eef1f8;color:var(--text);}
.tab-btn.active{
  background:var(--accent-light);color:var(--accent);font-weight:600;
}
.tab-btn .tc{
  width:12px;height:12px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  opacity:0.5;
  position: absolute;
  right:0px;
}
.tab-btn.active .tc{opacity:1;}
.tab-plain{
  display:block;padding:0.5rem 0.75rem;
  font-size:0.82rem;font-weight:500;color:var(--muted);
  text-decoration:none;border-radius:8px;
  transition:background var(--transition),color var(--transition);
}
.tab-plain:hover{background:#eef1f8;color:var(--text);}
.tab-plain em{font-style:normal;color:var(--accent);}

/* Sub-links panel */
.mega-panel{
  flex:1;padding:16px 20px;min-width:200px;display:none;
}
.mega-panel.active{display:block;}
.mega-panel-title{
  font-size:0.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;color:var(--muted);margin-bottom:10px;
  display: none;
}
.mega-panel ul{
    list-style:none;
    display: flex;
    flex-wrap: wrap;
}
.mega-panel li{
    margin-bottom:2px;
    width: 50%;
}
.mega-panel a{
  display:flex;align-items:center;gap:8px;
  padding:0.45rem 0.6rem;
  font-size:0.775rem;color:var(--text);text-decoration:none;
  border-radius:8px;
  transition:background var(--transition),color var(--transition);
}
.mega-panel a:hover{background:var(--sub-hover);color:var(--accent);}
.mega-panel a::before{
    display: none;
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--accent);opacity:0.35;flex-shrink:0;
}

/* ── CTA BUTTON ── */
.cta-btn{
  display:flex;align-items:center;gap:7px;
  padding:0.5rem 1.1rem;
  background:linear-gradient(90deg, rgb(15, 61, 104) 0%, rgb(91, 38, 76) 100%);
  color:var(--cta-text);
  font-size:0.85rem;
  font-weight:500;
  border-radius:999px;
  text-decoration:none;
  border:none;cursor:pointer;
  white-space:nowrap;
}
.cta-btn:hover{

  animation: wobble .7s ease-in-out both;
}

.cta-btn svg{width:14px;height:14px;fill:currentColor;}

/* ── HAMBURGER ── */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:6px;
}
.hamburger span{
  display:block;width:22px;height:2px;background:var(--text);
  border-radius:2px;transition:transform 0.25s,opacity 0.25s;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── MOBILE MENU ── */
.mob-menu{
  display:none;
  background:var(--mob-bg);border-top:1px solid var(--nav-border);
  padding:12px 16px 20px;max-height:80vh;overflow-y:auto;
}
.mob-menu.open{display:block;}

.mob-section{border-bottom:1px solid var(--nav-border);padding-bottom:4px;margin-bottom:4px;}
.mob-trigger{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:0.65rem 0.5rem;
  font-size:0.9rem;font-weight:600;color:var(--text);
  background:none;border:none;cursor:pointer;border-radius:8px;
  transition:background var(--transition);
}
.mob-trigger:hover{background:var(--sub-hover);}
.mob-trigger .chevron{
  width:14px;height:14px;
  stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform 0.2s;
}
.mob-trigger.open .chevron{transform:rotate(180deg);}
.mob-sub{display:none;padding:4px 0 8px 12px;}
.mob-sub.open{display:block;}
.mob-sub a{
  display:block;padding:0.45rem 0.6rem;
  font-size:0.875rem;color:var(--muted);text-decoration:none;
  border-radius:6px;
}
.mob-sub a:hover{background:var(--sub-hover);color:var(--accent);}
.mob-plain-link{
  display:block;padding:0.65rem 0.5rem;
  font-size:0.9rem;font-weight:600;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--nav-border);
}
.mob-plain-link em{font-style:normal;color:var(--accent);}
.mob-cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding:0.75rem;
  background:var(--cta-bg);color:var(--cta-text);
  font-size:0.9rem;font-weight:600;border-radius:12px;text-decoration:none;
}

.mob-menu.open{

    padding: 12px 16px 20px;
    max-height: 80vh;
    width: 100vh;
        right: -11px;
    box-shadow: 0px 0px 5px -2px #000;

}


 .main:has(.mob-sub){
    position: relative;
 }
 .main::after:has(.mob-sub) {
    content: '';
    display: block;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
      width: 100%;
    height: 100%;
    z-index: -1;
}


/* Active nav item (current page) */
.nav-item.active > .nav-link,
.nav-item.active > a.nav-link {
  color: var(--your-primary-color);        /* e.g. #1a4fd6 */
  font-weight: 500;
}

/* Active child link inside dropdown/mega */
.dropdown-wrap a.active,
.mega-panel a.active,
a.tab-plain.active {
  color: var(--your-primary-color);
  font-weight: 500;
}

/* Optional: underline indicator */
.nav-item.active > .nav-link::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--your-primary-color);
  border-radius: 2px;
  margin-top: 2px;
}


/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav-list,.nav-cta-wrap{display:none!important;}
  .hamburger{display:flex;}
}
@media(min-width:901px){
  .mob-menu{display:none!important;}
}