.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  background: rgba(17, 17, 17, 0.45);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.navbar.hide {
  transform: translateY(-100%);
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  margin-left: 5%;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
}

.logo-img {
  height: 72px;
  align-items: center;
}

.logo-text {
  font-size: 20px; 
  color: white;
}

/* Menu */
.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2rem;
  margin-right: 5%;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-size: 18px; 
  transition: 0.2s;
}

.nav-links a:hover {
  opacity: 0.7;
}

.nav-links a {
  position: relative;
  outline: none;
}
.nav-links a:focus {
  outline: none;
}
.nav-links a.active {
  color: var(--primary);
}
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  bottom: -8px;
  border-radius: 3px;
}

.hamburger{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}
.hamburger span{
  width:28px; height:3px;
  background:white; border-radius:3px;
  transition:.3s;
}
.hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* resposive */

@media(max-width:768px){

  .navbar {
    justify-content: space-between;
    padding: 0 20px;
  }

  .logo {
    margin-left: 0;
    order: 1;
  }

  .hamburger{
    display:flex;
    margin-right: 0;
    order: 2;
  }

  .nav-links{
    position:fixed;
    top:0; right:-100%;
    width:60%;
    height:100vh;
    background:rgba(17,17,17,0.92);
    backdrop-filter:blur(8px);
    flex-direction:column;
    margin:0;
    padding-top:120px;
    gap:2rem;
    transition:.4s;
  }
  .nav-links.open{ right:0; }

  .nav-links a{
    font-size:20px;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s ease, color 0.3s ease;
    display: block;
  }

  .nav-links a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .nav-links a.active {
    color: var(--primary);
  }

  .nav-links a.active::after {
    display: none;
  }
}

@media(max-width:480px){
  .nav-links{ width:75%; }
  .logo-img{ height:50px; }
}