.navbar{

position:fixed;
top:0;
width:100%;
z-index:1000;

display:flex;
align-items:center;

transition:0.35s;
padding:18px 0;

background: rgba(0,0,0,0.3);
}

.navbar.scrolled{

background:rgba(255,255,255,0.9);
backdrop-filter: blur(8px);
box-shadow:0 2px 10px rgba(0,0,0,0.1);

}

.nav-container{

max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
padding:0 20px;

}

.logo{

font-size:20px;
font-weight:600;
color:white;
transition:0.3s;

}

.nav-links{

list-style:none;
display:flex;
gap:30px;

}

.nav-links a{

text-decoration:none;
font-weight:500;
color:white;
transition:0.3s;

}

/* color change when scrolling */

.navbar.scrolled .logo{

color:#0b3c5d;

}

.navbar.scrolled .nav-links a{

color:#333;

}