/* Container */
.navbar {
  background: linear-gradient(to bottom, #0095e6, #0077cc);
  padding: 8px 6vw;
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  position: sticky; 
  top: 0; 
  z-index: 1000;

  /* darker, tighter shadow */
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(0,0,0,.15);
}

/* Hero sits right under nav with a hairline gap */
.navbar + .hero {
  margin-top: 4px;
}

/* Logo + brand */
.logo {
  display: flex; 
  align-items: center; 
  gap: 10px; 
  color: #fff; 
  text-decoration: none;
}
.logo-wrap {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  background: #fff; 
  border-radius: 8px; 
  padding: 4px;
}
.logo-img {
  height: clamp(28px, 5vw, 40px); 
  width: auto;
}
.brand-text {
  font-weight: 900;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Links (desktop) */
.nav-links {
  display: flex; 
  align-items: center; 
  gap: 22px;
}
.nav-links a {
  color: #fff; 
  text-decoration: none; 
  font-weight: 600;
}
.nav-links a:hover {
  opacity: .9; 
  text-decoration: underline;
}
.nav-links a.active {opacity: .95}

/* Toggle button (hamburger) */
.nav-toggle {
  display: none;
  width: 44px; height: 40px; 
  border: 0; background: transparent; 
  cursor: pointer;
}
.nav-toggle .bar {
  display: block; 
  height: 2px; width: 24px; 
  margin: 5px auto; 
  background: #fff; 
  transition: transform .2s ease, opacity .2s ease;
}

/* ----- Mobile menu (slide-out left) ----- */
@media (max-width: 820px) {
  .nav-toggle {display: block}

  .nav-links {
    position: fixed;
    top: 0;
    left: -260px;        /* start hidden off-canvas */
    width: 240px;
    height: 100vh;
    background: rgba(15, 23, 42, 0.85); /* semi-transparent dark */
    backdrop-filter: blur(6px);
    flex-direction: column;
    padding: 80px 20px 20px;
    gap: 16px;
    transition: left 0.3s ease;
    z-index: 999;
  }
  .nav-links.open {left: 0}

  .nav-links a {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav-links a:hover {color:#00a6ff}
}