.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px;

background:linear-gradient(110deg, #1d2f43 0%, #243b53 50%, #2d4a65 100%);

color:white;

border-bottom:1px solid rgba(255, 255, 255, 0.15);
box-shadow:0 8px 24px rgba(10, 22, 33, 0.25);
position:fixed;
top:0;
left:0;
right:0;
z-index:40;

}


.nav-left .site-title{

font-size:20px;

font-weight:bold;

letter-spacing:0.4px;
text-shadow:0 2px 10px rgba(0, 0, 0, 0.25);

}

.nav-left :hover {
    color:rgba(0, 245, 245, 0.873);
}


.nav-middle{

flex:1;

display:flex;

justify-content:center;

padding:0 20px;

}


.nav-image{

width:160px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

font-size:12px;

border-radius:999px;
backdrop-filter:blur(2px);
transition:transform 0.3s ease, background 0.3s ease;
overflow:hidden;

}

.nav-image img{
width:100%;
height:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
display:block;
border-radius:999px;
}

.nav-image:hover{
transform:translateY(-2px);
}


.nav-right{

display:flex;

gap:20px;

align-items:center;

}


.nav-right a{

color:white;

font-size:14px;

padding:8px 10px;
border-radius:8px;
position:relative;
font-weight:600;

}

.nav-right a::after{
content:"";
position:absolute;
left:10px;
bottom:4px;
width:0;
height:2px;
background:#b9d7eb;
transition:width 0.25s ease;
}

.nav-right a:hover{
background:rgba(255, 255, 255, 0.12);
}

.nav-right a:hover::after{
width:calc(100% - 20px);
}

@media (max-width:760px){
.navbar{
flex-wrap:wrap;
padding:16px;
gap:14px;
}

.nav-middle{
order:3;
flex-basis:100%;
padding:0;
justify-content:flex-start;
}

.nav-right{
gap:8px;
margin-left:auto;
}

.nav-right a{
font-size:13px;
padding:6px 8px;
}

.nav-image{
width:142px;
height:46px;
}

}