/* Reset and Base Styles */
#cssmenu {
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    background: transparent;
}

#cssmenu ul,
#cssmenu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#cssmenu ul {
    position: relative;
    z-index: 597;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#cssmenu ul li {
    min-height: 1px;
    vertical-align: middle;
}

#cssmenu ul li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
}

#cssmenu a {
    display: block;
    line-height: 1em;
    text-decoration: none;
    padding: 0 20px;
    line-height: 48px;
}
#cssmenu a:hover, #cssmenu .current-menu-item>a {
    color: #f4a300;
}

/* Dropdown Styles */
#cssmenu ul ul {
    display: none;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    min-width: 220px;
    text-transform: none;
}

#cssmenu ul ul li {
    float: none;
}

#cssmenu ul ul ul {
    top: -2px;
    left: auto;
    right: -99.5%;
    border-top: 0 none;
}

#cssmenu ul li:hover>ul {
    visibility: visible;
}

#cssmenu ul a {
    background: transparent;
    border: none;
    line-height: 1.3;
    padding: 10px 10px;
    transition: all 0.3s;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
}

#cssmenu ul ul li:first-child>a {
    border-top: none;
}

#cssmenu ul ul li:hover>a {
    background: transparent;
}

#cssmenu ul ul li.last>a,
#cssmenu ul ul li:last-child>a {
    box-shadow: none;
}

#cssmenu ul ul li.has-sub>a .sub-toggle {
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -8px;
}

/* Top Level Hover and Active States */
#cssmenu>ul>li:hover>a:last-child {
    background: transparent;
    opacity: 0.8;
}

#cssmenu ul li.has-sub>a .sub-toggle {
    margin-left: 5px;
}

#cssmenu ul li:hover>ul {
    display: block;
    visibility: visible;
    background: var(--bg);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px;
}

/*#cssmenu ul li.last>ul {
    left: auto;
    right: 0;
}*/

/*#cssmenu ul li.last ul ul {
    left: auto;
    right: 99.5%;
}*/

/* Mobile Menu Styles */
@media (max-width: 768px) {
    div#cssmenu .sub-toggle {
            display: none;
        }

    #cssmenu {
        display: none;
    }

    #cssmenu.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: var(--bg1);
        padding: 40px;
    }

    #cssmenu ul {
        width: 100%;
        float: none;
        display: block;
    }

    #cssmenu ul li {
        float: none;
        width: 100%;
    }

    #cssmenu ul ul {
        position: static;
        visibility: visible;
        /*display: none;*/
        width: 100%;
    }

    #cssmenu ul li:hover>ul,
    #cssmenu ul li.active>ul {
        display: block;
    }

    #cssmenu ul ul li {
        width: 100%;
    }

    #cssmenu ul ul ul {
        position: static;
        right: auto;
    }

    #cssmenu a {
        width: 100%;
        box-sizing: border-box;
    }

    .main-navigation {
        position: relative;
    }

    .mobile-menu-toggle {
        display: block;
        background: #333;
        border: none;
        cursor: pointer;
        width: 50px;
        height: 50px;
        position: relative;
        z-index: 1001;
        float: right;
    }

    .mobile-menu-toggle .menu-toggle-bar {
        display: block;
        width: 25px;
        height: 3px;
        background: #CBCBCB;
        margin: 5px auto;
        transition: all 0.3s;
    }

    .mobile-menu-toggle.active .menu-toggle-bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-toggle.active .menu-toggle-bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.active .menu-toggle-bar:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }
}

/* Desktop Menu Toggle */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none;
    }

    #cssmenu {
        display: block !important;
    }
}

/* Clearfix */
#cssmenu:after,
#cssmenu ul:after {
    content: '';
    display: block;
    clear: both;
}