:root {

  --text:#e9eef2;
    --muted:#a5acb5;
  --accent:#05D8E7;

}



/* Header (frosted, subtle gradient) */
.site-header{
  position: sticky;
  top:0;
  z-index:1000;
  width: 100%;  /* ✅ Added */
  height:72px;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(8,10,14,.55), rgba(8,10,14,.25) 60%, transparent);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  backdrop-filter: saturate(120%) blur(10px);
  display:block;
}

.site-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50px;
  right: 50px;
  height: 1px;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}

.site-header .container{
  max-width:1180px; 
  margin:0 auto;  /* ✅ Centering */
  height:100%;
  padding:0 16px; 
  display:flex; 
  align-items:center; 
  gap:14px;
}
.brand{ display:flex; align-items:center; gap:1px; text-decoration:none; color:var(--fg); margin-right:6px; }
.logo-img{ height: 100px; width:auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

.main-nav{ flex:1; display:flex; align-items:center; justify-content:flex-start; min-width:0; margin-left:26px; }
.main-nav ul{ 
  display:flex; 
  gap:26px;
  list-style:none;
  margin:0;
  padding:0; 
}
     
.main-nav a{
  text-decoration:none; 
  color:var(--muted); 
  font-weight:600; 
  padding:10px 0;
  border-bottom:2px solid transparent; 
  transition: color .18s ease, border-color .18s ease, text-shadow .18s ease;
}
.main-nav a:hover{ 
  color:var(--accent); 
  border-color:var(--accent); 
  text-shadow:0 6px 16px rgba(100,210,255,.35); 
}


/* ============================
   HEADER – RESPONSIVE STYLES
   ============================ */

/* Tablet View (768px and below) */
@media screen and (max-width: 768px) {
  /* Navigation */
  .main-nav ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: space-between;
    padding: 6px 4px;
  }

  .main-nav li {
    flex: 1 1 auto;
    min-width: 0;
  }

  .main-nav a {
    display: block;
    white-space: nowrap;
    padding: 5px 4px;
    font-size: clamp(10px, 2.2vw, 12px);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Mobile View (480px and below) */
@media screen and (max-width: 480px) {
  /* Navigation - Extra Small Screens */
  .main-nav a {
    padding: 4px 2px;
    font-size: clamp(9px, 2.5vw, 11px);
  }

  /* Header */
  .site-header .container {
    padding: 0 12px;
  }

  .logo-img {
    height: 70px;
  }
}