/* HEADER WRAPPER */

.ayaz-header{
background:#111;
padding:04px 10px;
border-radius:14px;
max-width:1200px;
width:calc(100% - 40px);
margin-top:20px;
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
z-index:9999;
transition:all 0.3s ease;
}

/* HEADER CONTAINER */

.header-container{
display:flex;
align-items:center;
justify-content:space-between;
}

/* LOGO */

.logo img{
height:36px;
}

/* DESKTOP MENU */

.desktop-menu ul{
display:flex;
gap:28px;
list-style:none;
margin:0;
background:black;
padding:5px 30px;
border-radius:5px;
}

.desktop-menu a{
color:#fff;
text-decoration:none !important;
font-weight:500;
font-size:16px;
transition:0.3s;
}

.desktop-menu a:hover






/* CTA BUTTON */

.ayaz-header .header-container a.header-btn{
display:inline-flex;
align-items:center;
justify-content:center;

padding:08px 20px;
border-radius:999px;

font-size:16px;
font-weight:600;

color:#fff !important;
text-decoration:none !important;

background:linear-gradient(90deg,#0556E5,#32C9FF) !important;
background-color:transparent !important;

border:none !important;

box-shadow:
0 10px 20px rgba(5,86,229,0.35),
0 0 20px rgba(50,201,255,0.35);

transition:all .25s ease;
}

.ayaz-header .header-container a.header-btn:hover{
transform:translateY(-2px);

box-shadow:
0 14px 30px rgba(5,86,229,0.45),
0 0 30px rgba(50,201,255,0.55);
}






/* MOBILE TOGGLE */

.mobile-toggle{
display:none;
flex-direction:column;
gap:4px;
cursor:pointer;
}

.mobile-toggle span{
width:24px;
height:2px;
background:#fff;
display:block;
}

/* MOBILE MENU */

.mobile-menu{
position:absolute;
top:calc(100% + 10px);
left:0;
width:100%;
background:#111;
padding:25px;
display:none;
border-radius:12px;
z-index:99999;
}

.mobile-menu.active{
display:block;
}

.mobile-menu ul{
list-style:none;
display:flex;
flex-direction:column;
gap:16px;
margin:0;
padding:0;
}

.mobile-menu a{
color:#fff;
text-decoration:none !important;
font-size:16px;
}

/* TABLET */

@media (max-width:1024px){

.ayaz-header .header-container a.header-btn{
    display: none;
}

.ayaz-header{
margin-top: 15px;
}

.desktop-menu{
display:none;
}

.header-btn{
display:none;
}

.mobile-toggle{
display:flex;
}

}

/* MOBILE */

@media (max-width:768px){
    

.ayaz-header .header-container a.header-btn{
    display: none;
}

.ayaz-header{
width:calc(100% - 24px);
margin-top: 15px;
}

.mobile-menu{
backdrop-filter:blur(12px);
background:rgba(17,17,17,0.95);
}

}



/* =========================
   BASE
========================= */

.menu-list li {
  position: relative;
}

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

.ayaz-mega-dropdown {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  width: 1200px;
  max-width: 95vw;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: all 0.3s ease;

  /* PREMIUM UI */
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius: 16px;
  padding: 30px;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 0 30px rgba(50,201,255,0.08);

  z-index: 99999;
}

/* SHOW DROPDOWN (JS CONTROLLED) */
.menu-list li.open .ayaz-mega-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* =========================
   HEADER FIX
========================= */

.ayaz-header {
  overflow: visible !important;
}

/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {
  .ayaz-mega-dropdown {
    width: 92vw;
    top: 95px;
    padding: 25px;
  }
}

/* =========================
   MOBILE MENU (FINAL FIX)
========================= */

@media (max-width: 768px) {

  /* lock background scroll */
  body.menu-open {
    overflow: hidden;
  }

  /* allow dropdown to expand */
  .mobile-menu {
    overflow: visible !important;
  }

  /* dropdown base */
  .ayaz-mega-dropdown {
    position: static;
    transform: none;

    width: 100%;
    max-width: 100%;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);

    border-radius: 12px;
    padding: 15px;

    max-height: 0;
    overflow: hidden;

    transition: max-height 0.35s ease;
    margin-top: 10px;
  }

  /* OPEN STATE */
  .mobile-list li.open .ayaz-mega-dropdown {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  /* smooth scroll */
  .ayaz-mega-dropdown {
    -webkit-overflow-scrolling: touch;
  }

  /* menu items */
  .mobile-list li {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 12px 0;
  }

  /* plus/minus icon */
  .mobile-list li > a::after {
    content: '+';
    float: right;
    font-size: 18px;
    color: #32C9FF;
    transition: 0.3s;
  }

  .mobile-list li.open > a::after {
    content: '-';
  }

}

/* =========================
   SCROLLBAR (PREMIUM)
========================= */

.ayaz-mega-dropdown::-webkit-scrollbar {
  width: 5px;
}

.ayaz-mega-dropdown::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0556E5, #32C9FF);
  border-radius: 10px;
}

/* =========================
   HOVER LINK EFFECT
========================= */

.menu-list > li > a {
  position: relative;
}

.menu-list > li > a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg,#0556E5,#32C9FF);
  transition: 0.3s;
}

.menu-list > li:hover > a::after {
  width: 100%;
}

/* =========================
   SAFETY FIX
========================= */

/* hide empty dropdowns */
.ayaz-mega-dropdown:empty {
  display: none !important;
}