/* Styling Mobile Offcanvas Menü */
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content {
    background-color: var(--gn-bg-main);
    width: 90%;
    min-width: 230px;
    max-width: 460px;
    box-shadow: none;
}

.off-canvas-left,
.off-canvas-cart {
    .mfp-close {
        right: 8px;
        top: 6px !important;
        opacity: 1;
    }
}

.off-canvas .sidebar-menu {
    padding: 65px 0;

    .toggle {
        rotate: -90deg;

        i {
            font-size: 16px;
            height: 15px;
        }
    }

    .active>.toggle {
        transform: rotate(90deg);
    }

    .nav-vertical>li+li {
        border: none;
    }

    .nav-sidebar.nav-vertical>li.menu-item.active, 
    .nav-sidebar.nav-vertical>li.menu-item:hover {
        background-color: var(--gn-bg-main);
    }

    .nav>li>a {
        font-size: 18px;
        line-height: 36px;
        color: var(--gn-text-color);
        padding-left: 25px !important;
        letter-spacing: 0;
    }

    .account-item {
        padding-top: 20px;

        .account-link {
            font-size: 14px;
            font-weight: 400;
        }
    }

    .sub-menu,
    .children {
        li>a {
            padding-left: 34px !important;
            font-size: 14px;
            line-height: 42px;
            color: var(--gn-text-color);
        }

    }
}

/* Styling Mega-Dropdown */
.nav-dropdown {
    background-color: var(--gn-bg-main);
}

.mega-dropdown {
    margin: 0 !important;

    .mega-dropdown-inner {
        padding: 0 2rem 5rem 2rem;
    }

    .large-3 {
        min-width: fit-content;
    }

    .ux-menu-title {
        text-transform: none;
        h3 {font-size: 22px;}

        &:hover {
            color: var(--gn-text-hover-color);
        }
    }

    .ux-menu-link {
        &:hover {
            .ux-menu-link__link {color: var(--gn-text-hover-color);}
        }
    }
    
    .ux-menu-link__link {
        min-height: 1.5em;
    }

    .box-image {
        margin-top: 30px;
    }

    .box-text {display: none;} 

    .box-custom-link h4{
        font-size: 16px;
        line-height: 44px;

        &:hover {
            color: var(--gn-text-hover-color);
        }
    }


}

@media only screen and (min-width: 550px) {
/*************** Tablet Landscape / Desktop Breakpoint ***************/
    


}



@media only screen and (min-width: 850px) {
/*************** Tablet Landscape Breakpoint ***************/
    

}



@media only screen and (min-width: 1110px) {
/*************** Desktop Breakpoint ***************/




}