body {
  margin: 0;
  padding: 0;
}

.menu-hamburger {
  cursor: pointer;
  z-index: 100;
}

.menu-line {
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

.menu-active .line-1 {
  transform: translateY(8px) rotate(45deg);
}

.menu-active .line-2 {
  opacity: 0;
}

.menu-active .line-3 {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu {
  max-height: 0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  border-top: 1px solid #ffff;
}

.mobile-menu.open {
  max-height: 500px;
  opacity: 1;
}

.menu-overlay {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.menu-item {
  display: block;
  padding: 1rem;
  text-decoration: none;
  transition: background-color 0.2s;
}