/* ================= HEADER ================= */

.header{

position:sticky;

top:0;

z-index:1000;

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 40px;

background:rgba(255,255,255,.95);

backdrop-filter:blur(10px);

box-shadow:0 4px 20px rgba(0,0,0,.08);

transition:.3s;

}

.logo-area{

display:flex;

align-items:center;

gap:12px;

}

.logo-area img{

width:55px;

height:55px;

object-fit:contain;

border-radius:50%;

}

.logo-area h2{

font-size:22px;

font-weight:700;

color:#e3ece7;

margin:0;

}

.header nav{

display:flex;

align-items:center;

gap:25px;

}

.header nav a{

text-decoration:none;

color:#333;

font-weight:600;

transition:.3s;

position:relative;

}

.header nav a:hover{

color:#0b8f45;

}

.header nav a::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:#0b8f45;

transition:.3s;

}

.header nav a:hover::after{

width:100%;

}

.hamburger{

display:none;

font-size:30px;

cursor:pointer;

color:#f0f7f3;

}

@media(max-width:768px){

.header{

padding:10px 15px;

}

.logo-area h2{

font-size:16px;

}

.header nav{

display:none;

position:absolute;

top:75px;

left:0;

width:100%;

background:rgb(252, 248, 248);

flex-direction:column;

padding:20px;

box-shadow:0 10px 20px rgba(0,0,0,.1);

}

.header nav.active{

display:flex;

}

.hamburger{

display:block;

}

}