.navbar {
  background-color: transparent;
  transition: background-color 0.3s;
}

.navbar-toggler-icon {
  border: none;
}

.navbar-toggler {
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  background-color: rgba(0, 0, 0, 0.7);
}

.navbar-nav .nav-link {
  color: white;
  font-weight: bold;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #a2b3f7;
}

/* Change navigation bar background on scroll */
.navbar.scrolled {
  background-color: #333 !important;
}

.navbar-hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease-out;
}

.navbar-visible {
  transform: translateY(0);
  transition: transform 0.3s ease-in;
}