/* Google Font Import Link */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  text-decoration:none;
  font-family:'Ubuntu',sans-serif;
}

/* ---------- NAVBAR ---------- */
nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:20px;
  transition:all .4s ease;
  z-index:1000;
}
nav.sticky{
  padding:15px 20px;
  background:#4070f4;
  box-shadow:0 5px 10px rgba(0,0,0,.1);
}
nav .nav-content{
  height:100%;
  max-width:1200px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
nav .logo a{
  font-weight:500;
  font-size:35px;
  color:#4070f4;
}
nav.sticky .logo a{ color:#fff; }

/* ---------- LINKS (desktop) ---------- */
.nav-content .nav-links{
  display:flex;
}
.nav-content .nav-links li{
  list-style:none;
  margin:0 8px;
}
.nav-links li a{
  color:#0E2431;
  font-size:18px;
  font-weight:500;
  padding:10px 4px;
  transition:all .3s ease;
}
.nav-links li a:hover{ color:#4070f4; }
nav.sticky .nav-links li a{
  color:#fff; transition:all .4s ease;
}
nav.sticky .nav-links li a:hover{ color:#0E2431; }

.menu-btn{
  width:32px;
  height:24px;
  display:none;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
  transition:transform .3s ease;
  z-index: 3;
}
.menu-btn span{
  height:4px;
  background:#000000;
  border-radius:2px;
  transition:all .3s ease;
}
nav.sticky .menu-btn span{ background:#fff; }

@media(max-width:768px){

  .menu-btn{ display:flex; }

  .nav-content .nav-links{
    position:fixed;
    top:0;
    right:-100%;
    width:60%;
    height:100vh;
    background:#4070f4;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition:right .4s ease;
  }
  nav.nav-open .nav-links{ right:0; }


  .nav-links li{ margin:20px 0; }
  .nav-links li a{
    color:#fff;
    font-size:24px;
  }
  .nav-links li a:hover{ color:#0E2431; }

  nav.nav-open .menu-btn span:nth-child(1){
    transform:translateY(10px) rotate(45deg);
  }
  nav.nav-open .menu-btn span:nth-child(2){
    opacity:0;
  }
  nav.nav-open .menu-btn span:nth-child(3){
    transform:translateY(-10px) rotate(-45deg);
  }
}