*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'Segoe UI', sans-serif;
}

body{
background:#f1f5f9;
}

/* Header */
.header{
position:sticky;
top:0;
z-index:999;
padding:20px;
}

.nav-container{
max-width:1200px;
margin:auto;
background:rgba(255,255,255,.85);
backdrop-filter:blur(12px);
border-radius:18px;
padding:14px 22px;
display:flex;
align-items:center;
justify-content:space-between;
box-shadow:0 10px 40px rgba(0,0,0,.08);
}

/* Logo */
.brand{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
}

.logo-box{
width:40px;
height:40px;
border-radius:12px;
background:#0f172a;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}

/* Menu */
.nav-menu{
display:flex;
align-items:center;
list-style:none;
gap:28px;
}

.nav-menu li a{
text-decoration:none;
color:#000066;
font-weight:500;
transition:.3s;
}

.nav-menu li.active a,
.nav-menu li a:hover{
color:#69DFEF;
}

/* Button */
.btn{
background:#0f172a;
color:#fff;
padding:10px 22px;
border-radius:12px;
text-decoration:none;
transition:.3s;
}

.btn:hover{
background:#1e293b;
}

/* Dropdown */
.dropdown-parent{
position:relative;
}

.dropdown{
position:absolute;
top:45px;
left:0;
background:#fff;
border-radius:14px;
min-width:220px;
box-shadow:0 20px 40px rgba(0,0,0,.1);
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:.3s;
overflow:hidden;
}

.dropdown li{
padding:12px 18px;
}

.dropdown li a{
color:#0f172a;
}

.dropdown-parent:hover .dropdown{
opacity:1;
visibility:visible;
transform:translateY(0);
}

/* Toggle */
.toggle{
display:none;
font-size:26px;
cursor:pointer;
}

/* Mobile Button */
.mobile-btn{
display:none;
}

/* Responsive */
@media(max-width:900px){

.nav-container{
padding:14px 18px;
}

.toggle{
display:block;
}

.nav-menu{
position:absolute;
top:100px;
left:0;
width:100%;
background:#fff;
flex-direction:column;
gap:0;
border-radius:0 0 18px 18px;
box-shadow:0 20px 40px rgba(0,0,0,.1);
max-height:0;
overflow:hidden;
transition:.4s ease;
}

.nav-menu.show{
max-height:100vh;
}

.nav-menu li{
width:100%;
border-bottom:1px solid #eee;
}

.nav-menu li a{
display:block;
padding:16px 22px;
}

.desktop-btn{
display:none;

}

.mobile-btn{
display:block;
padding:20px;
}

/* Mobile dropdown */
.dropdown{
position:static;
box-shadow:none;
border-radius:0;
opacity:1;
visibility:visible;
transform:none;
display:none;
}

.dropdown-parent.open .dropdown{
display:block;
}
}
