/* Hide Divi 5's default mobile bar icons */
span.mobile_menu_bar:before,
span.mobile_menu_bar:after {
  display: none !important;
}

/* Build our own hamburger bars */
span.mobile_menu_bar {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important;
  gap: 6px !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer !important;
  position: relative !important;
}

span.mobile_menu_bar span {
  display: block !important;
  height: 3px !important;
  background: #0a0a0a !important;
  border-radius: 1px !important;
  transition: transform 0.35s cubic-bezier(.77,0,.18,1),
              opacity 0.25s ease,
              width 0.35s ease !important;
}

span.mobile_menu_bar span:nth-child(1) { width: 32px !important; }
span.mobile_menu_bar span:nth-child(2) { width: 22px !important; }
span.mobile_menu_bar span:nth-child(3) { width: 32px !important; }

/* X state when nav is open */
.et_mobile_nav_menu .mobile_nav.opened ~ span.mobile_menu_bar span:nth-child(1) {
  transform: translateY(9px) rotate(45deg) !important;
}
.et_mobile_nav_menu .mobile_nav.opened ~ span.mobile_menu_bar span:nth-child(2) {
  opacity: 0 !important;
  width: 0 !important;
}
.et_mobile_nav_menu .mobile_nav.opened ~ span.mobile_menu_bar span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg) !important;
}