/* navbar.css  */
:root{
  --accent-1: #0f172a;
  --accent-2: #6b7280;
  --highlight: #7c3aed;
  --muted: rgba(255,255,255,0.85);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%; 
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

.hero{
  min-height:10vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
background: linear-gradient(to right, rgba(255,255,255,1), rgba(128,128,128,0.7));
  background-size:cover;
  background-position:center;
  padding:20px 28px;
  border-bottom:1px solid rgba(15,23,42,0.06);
  position:relative;
  overflow:hidden;
}

.navbar{
  width:100%;
  max-width:1200px;
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:6px;
}
.brand img{width:200px;height:50px;object-fit:contain}

.nav-links{
  list-style:none;
  display:flex;
  gap:12px;
  margin-left:auto;
  align-items:right;
}
.nav-links li a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--accent-1);font-weight:600}
.nav-links li a:hover{background:linear-gradient(90deg, rgba(124,58,237,0.08), rgba(124,58,237,0.04));color:var(--highlight)}

/* Hamburger button */
.nav-toggle{
  display:none;
  background:linear-gradient(90deg, rgb(194, 6, 6), grey);
  border:0;
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer;
}


/* Close button hidden by default (desktop) */
.close-menu {
  display: none;
  background:none;
  border:none;
  font-size:24px;
  margin-left:auto;
  cursor:pointer;
}

/* Mobile view */
@media (max-width:900px){
  .nav-toggle{display:block;margin-left:auto}

  .nav-links{
    position:fixed;
    top:0;left:0;bottom:0;
    width:260px;
    

    /* same hero background */
    background-image:linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), 
      url('https://images.unsplash.com/photo-1503264116251-35a269479413?q=80&w=1600&auto=format&fit=crop&ixlib=rb-4.0.3&s=');
    background-size:cover;
    background-position:center;
    backdrop-filter: blur(6px);

    flex-direction:column;
    padding:20px;
    gap:12px;
    align-items:flex-start;

    transform:translateX(-100%);
    transition:transform 0.3s ease-in-out;
    box-shadow:4px 0 12px rgba(0,0,0,0.15);
    opacity:1;
    visibility:visible;
    z-index:1000; /* higher than snow, lower than nav-toggle */
    overflow:hidden; /* keep snow inside */
  }

  .nav-links.nav-open{transform:translateX(0)}

  /* Show close button inside mobile sidebar */
  .close-menu {
    display: block;
    align-self: flex-end;
    margin-bottom: 10px;
    font-size:28px;
    color:rgb(179, 3, 3);
    z-index:1100;
  }

  /* snow inside sidebar */
  .nav-links .snow {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:-1; /* behind menu links */
  }
  .nav-links .snowflake {
    position:absolute;
    top:-10px;
    color:white;
    user-select:none;
    animation:snowfall linear forwards;
    opacity:0.9;
  }
}

@media (max-width:900px){
  .nav-links li {
    width: 80%;
    margin-bottom: 3px; /* add gap between links */
  }
  .nav-links li:last-child {
    margin-bottom: 0; /* remove gap after last item */
  }
  .nav-links li a {
    display: block;   /* makes the link take full width */
    width: 80%;
  }
}


/* Snow animation */
.snow{pointer-events:none;position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0}
.snowflake{position:absolute;top:-10px;color:white;user-select:none;animation:snowfall linear forwards}
@keyframes snowfall{to{transform:translateY(100vh)}}



/* Sticky Contact Icons */
.sticky-icons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 2000;
}

.sticky-icons a {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s, box-shadow 0.3s;
}

.sticky-icons a:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}