.hidden {
  display: none; 
}

.navbar {
  display: flex;
  justify-content: flex-end; 
  align-items: center;
  background-color: black;
  color: white;
  padding: 0.625rem 1.25rem;
}

.navbar a {
  text-decoration: none;
  color: white;
  padding: 0.625rem;
}

.nav-container{
  display: flex;
  align-items: center;
  gap: 0.9375rem; 
}

.nav-menu a:hover,
.nav-menu li a.active {
  color: red;
}


.logo{
  margin-right: auto; 
}

.logo img {
  height: 2.5rem;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 0.9375rem; 
}

.nav-menu li {
  display: inline;
}

.login-btn {
  background-color: red;
  color: white;
  width: 7.5rem; 
  height: 2.5rem;  
  cursor: pointer;
  border-radius: 0.5rem;
  font-size: 1rem;
}

.login-btn:hover {
  background-color: darkred;
}

.hamburger {
  display: none;
  font-size: 1.5rem; 
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 5rem; 
  right: 0; 
  width: 336px;
  height: 350px;
  background-color: black;
  padding: 0.9rem;
  z-index: 2;
}

.dropdown-menu a {
  color: white;
}

.dropdown-menu a:hover {
  color: red;
}

@media screen and (max-width: 70rem) {
  .navbar{
    flex-wrap: wrap;
  }

  .nav-container{
    margin-right: 1rem;
  }
  .nav-menu {
    display: none;
  }

  .hamburger {
    display: block;
  }

  .dropdown-menu {
    display: flex;
  }

  .dropdown-menu a i {
   margin-right: 1.5rem;
  }

  .dropdown-menu.hidden {
    display: none; 
  }
}

@media screen and (max-width: 350px) {
  .dropdown-menu {
    position: absolute;
    top: 4.7rem; 
    right: 0; 
    padding: 0;
   }
}