.hamburger-menu{
  position:absolute;
  top:2rem;
  left:2rem;
  z-index:1000;
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.hamburger-lines{
  width:30px;
  height:26px;
  position:relative;
  transition:transform 0.3s ease;
  display:block;
  cursor:pointer;
  z-index:1001;
}

.hamburger-line{
  width:100%;
  height:2px;
  background-color:#ffffff;
  position:absolute;
  transition:all 0.3s ease;
  border-radius:2px;
  left:0;
  transform-origin:center;
}

.hamburger-line:nth-child(1){
  top:0;
}

.hamburger-line:nth-child(2){
  top:10px;
  transition:opacity 0.3s ease;
}

.hamburger-line:nth-child(3){
  top:20px;
}
.hamburger-menu.active .hamburger-line:nth-child(1),
.hamburger-lines.active .hamburger-line:nth-child(1){
  top:10px;
  transform:rotate(45deg);
  transition:transform 0.3s ease, top 0.3s ease;
}

.hamburger-menu.active .hamburger-line:nth-child(2),
.hamburger-lines.active .hamburger-line:nth-child(2){
  opacity:0;
  transition:opacity 0.2s ease;
}

.hamburger-menu.active .hamburger-line:nth-child(3),
.hamburger-lines.active .hamburger-line:nth-child(3){
  top:10px;
  transform:rotate(-45deg);
  transition:transform 0.3s ease, top 0.3s ease;
}
.menu-items{
  position:absolute;
  top:50px;
  left:0;
  transform:translateY(-20px);
  list-style:none;
  padding:1rem;
  margin:0;
  visibility:hidden;
  opacity:0;
  transition:all 0.3s ease;
  min-width:180px;
  text-align:left;
  background:transparent;
  pointer-events:none;
}

.menu-items.open{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.hamburger-menu.active .menu-items,
.hamburger-lines.active ~ .menu-items{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.menu-items li{
  margin:12px 0;
  white-space:nowrap;
  width:100%;
  text-align:left;
}
@media (max-width: 768px){
  .hamburger-menu{
    top:1.5rem;
    left:1.5rem;
  }

  .menu-items{
    top:45px;
    left:0;
    transform:translateY(-20px);
    min-width:160px;
    padding:0.8rem;
  }

  .menu-items li{
    margin:10px 0;
  }
}

.menu-items a{
  color:#ffffff;
  text-decoration:none;
  font-size:18px;
  transition:all 0.3s ease;
  display:block;
  padding:5px 0;
}

.menu-items a:hover{
  opacity:0.8;
}
.menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0, 0, 0, 0.5);
  visibility:hidden;
  opacity:0;
  transition:opacity 0.5s ease, visibility 0.5s ease;
  z-index:998;
}

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