.mega-menu {
  --transition-duration: 0.2s;
  --transition-delay: 0.2s;
  --menu-item-hover-color: #fff;
}
.mega-menu:not(.visible) {
  overflow: hidden;
}

.mega-menu .dropdown-menu {
  display: block;
  opacity: 0;
  transition: opacity var(--transition-duration) ease-in-out var(--transition-delay),
              visibility var(--transition-duration) ease-in-out var(--transition-delay);
  visibility: hidden;
}

.mega-menu .menu-item.dropdown .wrap::before {
  background-color: transparent;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  transition: all var(--transition-duration) ease-in var(--transition-delay);
  z-index: 4;
}
.mega-menu .menu-item.wide_menu:hover .dropdown-menu,
.mega-menu .menu-item:hover .wrap > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
  visibility: visible;
  opacity: 1;
}
.mega-menu .wrap > a,
.wrapper1.long_banner .centered .left_border,
.wrapper1.long_banner .centered .right_border {
  z-index: 3;
}

.mega-menu .menu-item.dropdown .wrap,
.mega-menu .menu-item.dropdown .wrap > a {
  background-color: inherit;
}
.mega-menu .menu-item.dropdown .wrap > a,
.mega-menu .menu-item.dropdown .wrap > a path {
  transition: all var(--transition-duration, 0.25s) ease-in-out
    var(--transition-delay);
}
.mega-menu .menu-item.dropdown:hover .wrap > a {
  color: var(--menu-item-hover-color) !important;
}
.mega-menu .menu-item.dropdown:hover .wrap > a path {
  fill: var(--menu-item-hover-color) !important;
}

.mega-menu .menu-item.dropdown:hover .wrap,
.mega-menu .menu-item.dropdown:hover .wrap > a {
  z-index: 4;
}

.mega-menu .menu-item.dropdown:hover .wrap::before {
  background-color: rgba(0, 0, 0, 0.6);
}