.site-header {
  position: relative;
  background: var(--theme-dark);
  color: var(--theme-light);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo & Nav Styles */
.logo { font-weight: 800; font-size: 22px; display: flex; align-items: center; }
.logo-icon { color:var(--theme-red); margin-right: 5px; }

.nav-links { 
  display: flex; 
  align-items: center; 
  list-style: none; 
  color: var(--theme-light); 
  gap: 30px; 
  margin: 0; 
  padding: 0; 
}
.nav-links li{
  padding: 2rem 0;
}
.mega-menu li{
  padding: 0;
}
.nav-links li a { text-decoration: none; color: var(--theme-light); font-weight: 600; font-size: 15px; }

/* Dropdown Trigger Logic */
.has-dropdown { 
  display: flex; 
  align-items: center; 
  height: 100%; 
  position: static; 
}

.mega-menu {
  position: absolute;
  top: 99%;
  left: 0;
  width: 100%;
  background: var(--theme-light);
  box-shadow: 0 10px 30px var(--theme-dark);
  display: none; /* Hidden by default */
  z-index: 100;
  /* padding: 40px 0; */
  border-top: 1px solid var(--theme-light);
}
.mega-menu::before {
  content: "";
  position: absolute;
  top: -25px; /* Adjust this to match the gap size */
  left: 0;
  width: 100%;
  height: 25px;
  display: block;
}
.arr-dwn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.has-dropdown:hover .mega-menu {
  display: block; /* Show on hover */
}

/* Mega Menu Layout */
.mega-menu-container {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  padding: 1rem 0;
}

.sidebar-title { font-size: 12px; color: var(--theme-light-gray); letter-spacing: 1px; font-weight: 700; }
.menu-sidebar ul { list-style: none; padding: 0; margin-top: 20px; }
.menu-sidebar li { margin-bottom: 10px; border-radius: 4px; }
.menu-sidebar li.active { border-bottom: 2px solid var(--theme-red); background: var(--theme-light); }
.menu-sidebar li a { padding: 12px; display: block; font-size: 14px;color: var(--theme-dark); }

/* Content Box */
.menu-content {
  background: var(--theme-light-blue);
  padding: 40px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.menu-sidebar li.active { 
  border-bottom: 2px solid var(--theme-red); 
  background: var(--theme-light); 
  transition: all 0.2s ease;
}

.featured-badge {
  background: var(--theme-light-red);
  color: var(--theme-red);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.menu-content h2 { margin: 0 0 15px 0; font-size: 28px;color: var(--theme-dark); }
.menu-content p { color: var(--theme-gray); max-width: 400px; margin-bottom: 25px; }

/* Buttons */
.btn-live-chat {
  background: var(--theme-red);
  color: var(--theme-light);
  padding: 10px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 15px var(--theme-deep-red);
}

.btn-learn {
  background: var(--theme-red);
  color: var(--theme-light);
  padding: 12px 25px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

.nav-wrapper{
  display: flex;
  align-items: center;
  gap:2rem;
}



/* =========================
   BURGER MENU
========================= */
.burger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
}

.burger span {
    width: 26px;
    height: 3px;
    background: var(--theme-light);
    border-radius: 2px;
}
.menu-close {
  display: none;
}

/* =========================
   MOBILE / TABLET
========================= */
@media (max-width: 768px) {

    .main-nav{
      width: 20rem;
    }

    .burger {
        display: flex;
    }
    .menu-sidebar li.active a{
      color: var(--theme-dark);
    }

    .nav-wrapper {
      position: fixed;
      top: 0;
      right: 0;
      width: 85%;
      max-width: 360px;
      height: 100vh;
      background: var(--theme-dark);
      padding: 80px 25px 30px;

      /* ONLY transform — no right:-100% */
      transform: translateX(100%);
      transition: transform 0.3s ease;

      z-index: 999;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      will-change: transform;
    }

    .nav-wrapper.open {
        transform: translateX(0);
    }

    .nav-links {
        flex-direction: column;
        gap: 0;
        align-items: start;
    }

    .nav-links li {
        padding: 14px 0;
    }

    .nav-links li a {
        font-size: 16px;
        color: var(--theme-light);
    }

    /* Disable hover mega menu on mobile */
    .has-dropdown:hover .mega-menu {
        display: none;
    }

    /* Mobile dropdown behavior */
    .has-dropdown {
        flex-direction: column;
        align-items: flex-start;
    }

    .arr-dwn {
        width: 100%;
        justify-content: space-between;
    }

    .mega-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        border: none;
        background: transparent;
        display: none;
        padding: 0;
    }

    .has-dropdown.open .mega-menu {
        display: block;
    }

    .mega-menu-container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px 0;
    }

    .menu-content {
        padding: 20px;
    }

    .header-actions {
        margin-top: 25px;
    }
    .menu-close {
      display: block;
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      color: var(--theme-light);
      font-size: 28px;
      cursor: pointer;
    }
}



.icon-menu{
  display: flex;
  align-items: center;
}