.navbar{

  width:100%;

  padding:
  25px 60px;

  position:fixed;

  top:0;
  left:0;

  display:flex;

  justify-content:space-between;

  align-items:center;

  z-index:1000;

  transition:0.4s;

}

/* NAVBAR ACTIVA */

.navbar.active{

  background:
  rgba(0,0,0,0.7);

  backdrop-filter:blur(10px);

  box-shadow:
  0 5px 20px rgba(0,0,0,0.2);

}

/* LOGO */

.logo{

  color:white;

  font-size:28px;

  font-weight:bold;

}

/* MENU */

.nav-links{

  display:flex;

  gap:40px;

  list-style:none;

}

/* LINKS */

.nav-links a{

  color:white;

  text-decoration:none;

  font-size:18px;

  transition:0.3s;

}

/* HOVER */

.nav-links a:hover{

  opacity:0.7;

}

/* MENU TOGGLE */

.menu-toggle{

  display:none;

  font-size:32px;

  color:white;

  cursor:pointer;

  z-index:1001;

}


/* RESPONSIVE */

@media(max-width:768px){

  .navbar{

    padding:20px;

  }

  /* BOTON */

  .menu-toggle{

    display:block;

  }

  /* MENU */

  .nav-links{

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    height:100vh;

    background:#111;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:40px;

    transition:0.5s ease;

  }

  /* ACTIVO */

  .nav-links.active{

    right:0;

  }

}