/* ==============================
   NAVBAR
============================== */
#homepage-navbar {
  padding: 0.5rem;
  background: var(--background-color-50) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#homepage-navbar .nav-link {
  margin-right: 0.5rem;
  transition: var(--transition);
  color: var(--text-white);
  font-size: .9rem;
  padding: var(--padding-10);
}
#homepage-navbar .nav-link:hover,
#homepage-navbar .nav-link.active  {
  background-color: var(--muted-primary-color);
  color: var(--primary-color);
  border-radius: var(--border-radius-15);
}
.navbar-toggler {
  box-shadow: none !important;
  border: none !important;
  font-weight: 600 !important;
  margin-right: 10px !important;
  color: var(--text-white) !important;  
}
.navbar-toggler, .toggle {
  padding: 0 !important;
}
.navbar-buttons {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
@media (max-width:840px) {
 .navbar-buttons .login {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .navbar-buttons {
    flex-direction: column;
    gap: 0.5rem;
  }
  .navbar-buttons .login {
    display: block !important;
  }
}
/* Animation on open (using the Bootstrap state attribute) */
.navbar-toggler[aria-expanded="true"] .bars:nth-child(1) {
  transform: translateY(9px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .bars:nth-child(2) {
  opacity: 0;
}
.navbar-toggler[aria-expanded="true"] .bars:nth-child(3) {
  transform: translateY(-9px) rotate(45deg);
}
.toggle {
  position: relative;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  transition: transform 0.3s ease;
}
.bars {
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 5px;
  transition: all 0.3s ease;
}