/* HEADER */

header{
position:fixed;
top:0;
left:0;
width:100%;
background:rgba(255,255,255,0.96);
backdrop-filter:blur(10px);
z-index:9999;
padding:18px 0;
box-shadow:0 2px 20px rgba(0,0,0,0.06);
}

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

.logo{
font-size:30px;
font-weight:800;
text-decoration:none;
color:#111;
letter-spacing:2px;
}

/* DESKTOP MENU */

nav ul{
display:flex;
gap:35px;
list-style:none;
}

nav a{
text-decoration:none;
color:#111;
font-weight:600;
transition:0.3s;
}

nav a:hover{
color:#d60000;
}

/* MOBILE MENU BUTTON */

.menu-toggle{
display:none;
font-size:34px;
cursor:pointer;
font-weight:bold;
color:#111;
}

/* MOBILE */

@media(max-width:900px){

.menu-toggle{
display:block;
}

/* HIDE MENU */

nav{
position:absolute;
top:80px;
right:0;
width:100%;
background:#fff;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.12);
overflow:hidden;

max-height:0;
opacity:0;
transition:0.4s;
}

/* SHOW MENU */

nav.active{
max-height:600px;
opacity:1;
padding:10px 0;
}

/* MOBILE LINKS */

nav ul{
flex-direction:column;
gap:0;
}

nav li{
border-bottom:1px solid #eee;
}

nav a{
display:block;
padding:18px 25px;
font-size:18px;
}

}