/* ===========================
   NAVBAR
=========================== */

#navbar {
  background: transparent;
  transition: all 0.3s ease;
}

#navbar.scrolled {
  background: rgba(248, 243, 234, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Logo */

.logo {
  height: 70px;
  width: auto;
  display: block;
  transform: translateX(-20px);
}
/* Menu */

.nav-link {
  position: relative;

  color: #000000;

  font-weight: 500;

  transition: 0.3s;
}

.nav-link:hover {
  color: #693f0c;
}

.nav-link::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -8px;

  width: 0;

  height: 2px;

  background: #693f0c;

  transition: 0.3s;
}

.nav-link:hover::after {
  width: 100%;
}

.active {
  color: #693f0c;
}

.active::after {
  width: 100%;
}

/* Button */

.btn-register {
  background: #b92d28;

  color: white;

  padding: 12px 26px;

  border-radius: 999px;

  transition: 0.3s;

  font-weight: 600;
}

.btn-register:hover {
  background: #6e1d12;
}

/* Hamburger */

#menu-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Desktop */

@media (min-width: 1024px) {
  #menu-btn {
    display: none;
  }
}

#menu-btn span {
  width: 28px;

  height: 3px;

  background: #b86b2f;

  border-radius: 10px;

  transition: 0.3s;
}

/* Mobile */

#mobile-menu {
  max-height: 0;

  overflow: hidden;

  transition: 0.35s ease;

  background: white;
}

#mobile-menu.show {
  max-height: 500px;
}

#mobile-menu a {
  display: block;

  padding: 18px;

  text-align: center;

  color: #51311b;

  border-top: 1px solid #eee;
}

.mobile-register {
  background: #b86b2f;

  color: white !important;

  margin: 20px;

  border-radius: 999px;
}