.hamburger-menu-icon-container {
  display: inline-block;
  cursor: pointer;
  position: relative;
  z-index: 12; /* Ensure the hamburger icon is above other elements */
}

.hamburger-menu-icon-container .bar1, .hamburger-menu-icon-container .bar2, .hamburger-menu-icon-container .bar3 {
  width: 35px;
  height: 5px;
  background-color: var(--color-content-primary);
  margin: 6px 0;
  transition: 0.4s;
  display: block;
}

.hamburger-menu-icon-container.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.hamburger-menu-icon-container.change .bar2 {opacity: 0;}

.hamburger-menu-icon-container.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}