.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
}

.dark-hover-overlay .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
}

.dropdown-submenu:hover>.dropdown-menu,
.mega-menu .menu-item.wide_menu:hover .dropdown-menu,
.mega-menu .menu-item:hover .wrap>.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 {
    fill: white;
    transition: all var(--transition-duration, .25s) ease-in-out var(--transition-delay)
}


.dark-hover-overlay .mega-menu .menu-item.dropdown:hover .wrap>a {
    color: var(--menu-item-hover-color) !important
}

.dark-hover-overlay .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, .6)
}