.hamburger-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 90%;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  transition: right 0.5s ease;
  z-index: 2000;
}

.hamburger-icon {
  font-size: 50px;
  cursor: pointer;
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 3000;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.close {
  font-size: 70px;
  cursor: pointer;
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 4000;
  padding: 15px;
  margin-left: 45px;
}

.menu-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.menu-item {
  margin: 20px 0;
}
/* Visa den vanliga menyn endast på skärmar bredare än 768px */
@media (min-width: 768px) {
  .hamburger-icon,
  .close,
  .hamburger-menu {
    display: none;
  }

  .menu {
    display: flex !important;
  }
}

/* Stilar för att hantera visningen av hamburgermenyn och 'X' på mindre skärmar */
@media (max-width: 768px) {
  .menu {
    display: none; /* Gömmer den vanliga menyn när skärmen är mindre än 768px */
  }

  .hamburger-icon {
    display: block; /* Visar hamburgerikonen */
  }

  .hamburger-icon.active {
    display: none; /* Gömmer hamburgerikonen när menyn är aktiv */
  }

  .close {
    display: none; /* Standardinställning för 'X', visas endast när menyn är aktiv */
  }

  .hamburger-menu.active .close {
    display: block; /* Visar 'X' när menyn är öppen */
  }
}