/* DROPDOWN */
.dropdown{
  position:relative;
}

.dropdown-menu{
  position:absolute;
  top:120%;
  left:0;
  background:rgba(10,30,40,.95);
  backdrop-filter:blur(20px);
  border-radius:12px;
  padding:15px 0;
  min-width:240px;
  display:none;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}

.dropdown-menu li{
  list-style:none;
}

.dropdown-menu a{
  display:block;
  padding:10px 20px;
  font-size:14px;
  color:#e5faff;
}

.dropdown-menu a:hover{
  background:rgba(0,255,255,.12);
  color:#00f7ff;
}

/* SHOW ON HOVER (DESKTOP) */
.dropdown:hover .dropdown-menu{
  display:block;
}

/* MOBILE FIX */
@media(max-width:1100px){
  .dropdown-menu{
    position:static;
    display:none;
    box-shadow:none;
    background:transparent;
  }

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

:root{
  --bg-dark: linear-gradient(135deg,#020617,#020617,#031a2b);
  --glass: rgba(10,20,30,.85);
  --accent: #00f7ff;
  --text: #eafcff;
  --muted: #9fb8c5;
}

/* NAVBAR */
.navbar{
  background: var(--bg-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 14px 40px;
  border-bottom: 1px solid rgba(0,247,255,.15);
  box-shadow: 0 20px 60px rgba(0,0,0,.9);
}

/* LOGO */
.nav-logo img{
  height:46px;
  filter:
    drop-shadow(0 0 12px rgba(0,247,255,.8));
}

/* MENU */
.nav-menu{
  display:flex;
  align-items:center;
  gap:26px;
}

.nav-menu a{
  color: var(--muted);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  position:relative;
  padding:8px 10px;
  transition:.3s ease;
}

/* HOVER */
.nav-menu a:hover{
  color: var(--accent);
}

/* UNDERLINE */
.nav-menu a::after{
  content:'';
  position:absolute;
  left:10%;
  bottom:0;
  width:0;
  height:2px;
  background: linear-gradient(90deg,#00f7ff,#00ffa6);
  transition:.35s;
}

.nav-menu a:hover::after{
  width:80%;
}

/* ACTIVE */
.nav-menu a.active{
  color: var(--accent);
  background: rgba(0,247,255,.15);
  border-radius:12px;
  box-shadow:
    inset 0 0 15px rgba(0,247,255,.35),
    0 0 20px rgba(0,247,255,.25);
}

.nav-menu a.active::after{
  width:80%;
}

/* DROPDOWN */
.dropdown-menu{
  background: var(--glass);
  border: 1px solid rgba(0,247,255,.25);
  border-radius:14px;
  padding:14px 0;
  box-shadow:
    0 40px 90px rgba(0,0,0,.85),
    inset 0 0 20px rgba(0,247,255,.15);
}

.dropdown-menu a{
  color: var(--text);
  padding:10px 22px;
}

.dropdown-menu a:hover{
  background: rgba(0,247,255,.18);
  color: var(--accent);
}
/* Basic dropdown CSS */
.dropdown { position: relative; }
.dropdown-menu { 
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
}
.dropdown:hover .dropdown-menu { display: block; }

/* HAMBURGER */
.hamburger span{
  background: var(--accent);
  height:2px;
  box-shadow: 0 0 8px rgba(0,247,255,.8);
}