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

.site-header {

position: sticky;

top: 0;

z-index: 999;

background: rgba(255,255,255,0.75);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border-bottom: 1px solid #105070;

padding: 16px 0;

transition: all 0.3s ease;

}


/* Solid when scrolling */

.site-header.scrolled {

background: rgba(255,255,255,0.95);

box-shadow: 0 4px 12px rgba(0,0,0,0.08);

}


/* Container */

.header-container {

max-width: 1200px;

margin: auto;

padding: 0 20px;

display: flex;

align-items: center;

justify-content: space-between;

position: relative;

}


/* Logo */

.logo-link {

display: flex;

align-items: center;

gap: 10px;

text-decoration: none;

}

.logo img {

height: 42px;

width: auto;

display: block;

}

.logo-text {

font-size: 1.3rem;

font-weight: 700;

color: #105070;

white-space: nowrap;

}


/* ===============================
   NAVIGATION
================================ */

.main-nav {

display: flex;

align-items: center;

}

.main-nav a {

margin-left: 20px;

text-decoration: none;

color: #105070;

font-weight: 500;

transition: 0.2s;

}

.main-nav a:hover {

color: #105070;

}


/* ===============================
   HAMBURGER
================================ */

.hamburger {

display: none;

font-size: 22px;

background: none;

border: none;

cursor: pointer;

color: #105070;

}


/* ===============================
   MOBILE VIEW
================================ */

@media (max-width: 768px) {

/* Keep logo left, hamburger right */

.header-container {

flex-direction: row;

}


/* Show hamburger */

.hamburger {

display: block;

}


/* Hide desktop menu */

.main-nav {

position: absolute;

top: 70px;

right: 0;

background: white;

width: 100%;

flex-direction: column;

align-items: center;

display: none;

border-top: 1px solid #105070;

padding: 15px 0;

box-shadow: 0 6px 20px rgba(0,0,0,0.06);

}


/* Show mobile menu */

.main-nav.active {

display: flex;

}


/* Mobile links */

.main-nav a {

margin: 10px 0;

font-size: 16px;

}

}