/* =========================================
   WHITE ESIM HEADER.CSS
   FINAL STABLE VERSION
   ========================================= */

.wh{
  position:relative;
  z-index:9999;
}

/* =========================================
   NAVBAR
   ========================================= */

.wh-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;

  z-index:9999;

  overflow:visible;

  height:64px;

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  border-bottom:1px solid #E5E7EB;
}

.wh-inner{
  max-width:1100px;

  height:100%;

  margin:auto;

  padding:0 18px;

  display:flex;
  align-items:center;
  gap:12px;

  overflow:visible;
}

/* =========================================
   LOGO
   ========================================= */

.wh-logo{
  font-family:'Sora',sans-serif;

  font-size:20px;
  font-weight:800;

  color:#111111;

  letter-spacing:-0.04em;

  text-decoration:none;

  flex-shrink:0;
}

.wh-logo em{
  color:#2563EB;
  font-style:normal;
}

/* =========================================
   NAV LINKS
   ========================================= */

.wh-links{
  display:flex;
  align-items:center;
  gap:10px;

  list-style:none;

  margin:0;
  margin-left:auto;

  padding:0;
}

.wh-links > li{
  position:relative;
}

.wh-links > li > a,
.wh-links > li > button{

  display:flex;
  align-items:center;
  gap:6px;

  height:42px;

  padding:0 14px;

  border:none;
  background:none;

  cursor:pointer;

  border-radius:14px;

  font-family:'DM Sans',sans-serif;
  font-size:15px;
  font-weight:700;

  color:#4B5563;

  white-space:nowrap;

  transition:
    background .18s ease,
    color .18s ease;
}

.wh-links > li > a:hover,
.wh-links > li > button:hover{
  background:#F3F4F6;
  color:#111827;
}

.wh-links > li.wh-open > button{
  background:#EEF4FF;
  color:#2563EB;
}

/* =========================================
   ACTIVE LINK
   ========================================= */

.wh-active{
  color:#2563EB !important;
  font-weight:700 !important;
}

/* =========================================
   DROPDOWN ARROW
   ========================================= */

.wh-arrow{
  font-size:10px;
  opacity:.55;

  transition:transform .18s ease;
}

.wh-open .wh-arrow{
  transform:rotate(180deg);
}

/* =========================================
   CTA BUTTON
   ========================================= */

.wh-cta{
  background:#2563EB !important;
  color:#fff !important;

  font-weight:700 !important;

  padding:0 16px !important;

  height:42px;

  border-radius:14px;

  box-shadow:
    0 8px 24px rgba(37,99,235,.18);
}

.wh-cta:hover{
  background:#1D4ED8 !important;
}

/* =========================================
   DROPDOWNS
   ========================================= */

.wh-drop{
  position:absolute;

  top:58px;
  left:50%;

  transform:
    translateX(-50%)
    translateY(-8px);

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;

width:720px;
max-width:92vw;

  padding:20px;

  background:#ffffff;

  border:1px solid #E5E7EB;

  border-radius:18px;

  box-shadow:
    0 20px 50px rgba(0,0,0,.08);

  z-index:99999;
}

.wh-open .wh-drop{
  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:
    translateX(-50%)
    translateY(0);
}

/* =========================================
   SIMPLE DROPDOWN
   ========================================= */

.wh-drop-simple{
  min-width:240px;
  padding:10px;
}

.wh-drop-simple a{
  display:block;

  padding:11px 14px;

  border-radius:10px;

  font-family:'DM Sans',sans-serif;
  font-size:14px;
  font-weight:500;

  color:#374151;

  transition:
    background .15s ease,
    color .15s ease;
}

.wh-drop-simple a:hover{
  background:#F3F4F6;
  color:#111827;
}

/* =========================================
   MEGA MENU
   ========================================= */

.wh-mega{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:18px;
}

.wh-mega-col h5{
  padding:6px 12px 10px;

  font-size:11px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:#9CA3AF;
}

.wh-mega-col a{
  display:flex;
  align-items:flex-start;
  gap:12px;

  padding:14px;

  border-radius:12px;

  transition:background .15s ease;
}

.wh-mega-col a:hover{
  background:#F9FAFB;
}

.wh-mi{
  font-size:18px;
  line-height:1;

  flex-shrink:0;
}

.wh-mt strong{
  display:block;

  margin-bottom:2px;

  font-family:'Sora',sans-serif;
  font-size:14px;
  font-weight:700;

  color:#111827;
}

.wh-mt span{
  font-size:12px;
  line-height:1.5;

  color:#6B7280;
}

/* =========================================
   DROPDOWN FOOTER
   ========================================= */

.wh-drop-foot{
  margin-top:16px;
  padding-top:16px;

  border-top:1px solid #F3F4F6;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.wh-drop-foot p{
  font-size:12px;
  color:#6B7280;
}

.wh-drop-foot a{
  font-size:13px;
  font-weight:700;

  color:#2563EB;
}

.wh-drop-foot a:hover{
  text-decoration:underline;
}

/* =========================================
   MOBILE MENU BUTTON
   ========================================= */

.wh-ham{
  display:none;

  margin-left:auto;

  background:none;
  border:none;

  color:#111827;

  font-size:26px;

  cursor:pointer;
}

/* =========================================
   MOBILE DRAWER
   ========================================= */

.wh-drawer{
  display:none;
}

.wh-drawer.wh-open{
  display:flex;
  flex-direction:column;

  position:fixed;

  top:64px;
  left:0;
  right:0;
  bottom:0;

  z-index:9998;

  overflow-y:auto;

  background:#ffffff;

  padding:20px;
}

.wh-dlabel{
  font-size:11px;
  font-weight:800;

  letter-spacing:.08em;
  text-transform:uppercase;

  color:#9CA3AF;

  margin-bottom:8px;
  margin-top:12px;
}

.wh-drawer a{
  display:flex;
  align-items:center;
  gap:10px;

  padding:14px 0;

  border-bottom:1px solid #F3F4F6;

  font-family:'DM Sans',sans-serif;
  font-size:15px;
  font-weight:600;

  color:#374151;
}

.wh-drawer a:hover{
  color:#2563EB;
}

.wh-di{
  font-size:18px;
}

.wh-ddiv{
  border:none;
  border-top:1px solid #E5E7EB;

  margin:12px 0;
}

.wh-drawer-cta{
  margin-top:18px;

  justify-content:center;

  border:none !important;
  border-radius:14px;

  background:#2563EB;

  color:#fff !important;

  font-weight:700 !important;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media(max-width:980px){

  .wh-links{
    display:none;
  }

  .wh-ham{
    display:block;
  }

}

@media(max-width:640px){

  .wh-inner{
    padding:0 18px;
  }

  .wh-logo{
    font-size:18px;
  }

}