.wrapper .main-navigation-area {
    height: 1.5rem;
}

.wrapper .main-navigation {
    margin: 1rem 0;
    position: relative;
    padding: 0.2rem 1rem;
    font-size: 1.2rem;
    /* height: 1.6rem; */
    line-height: 1.6rem;
    /* font-weight: 600; */
    background-color: var(--main-navigation-menu-level-0-background-color) !important;
    color: var(--main-navigation-menu-level-0-link-color) !important;
}

/* .main-navigation . */
menu-item-published a span,
/* .main-navigation  */
.menu-item-published label {
    text-decoration: unset;
}
/* .main-navigation */
.menu-item-unpublished a span,
/* .main-navigation  */
.menu-item-unpublished label {
    text-decoration: line-through;
}

/* .main-navigation .menu, */
/* .main-navigation > .drop-menu-1, */
/* .main-navigation > .drop-menu-2, */
.main-navigation>ul {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    list-style: none;
    /* justify-content: space-evenly; */
    flex-wrap: wrap;
    /* align-items: center; */
    /* color: blue; */
    /* text-transform: uppercase; */
}


/* .main-navigation li a  */
.main-navigation .menu-item,
.main-navigation .submenu-item {
    padding: 0px 0.8rem;
    /* padding: 0px 0rem; */
    display: block;
    white-space: nowrap;
    /* text-align: center; */
}

.main-navigation > li span {
    color: var(--main-navigation-menu-level-0-link-color) !important;
}

/* .main-navigation li:hover { */
/* color: #000000; */
/* } */
/* @media screen and (min-width: 880px) { */
    
    .main-navigation li:hover {
        /* color: rgba(0, 0, 0, 0.664); */
        /* text-decoration: underline; */
        color: var(--main-navigation-menu-level-0-hover-text-color) !important;
        /* font-weight: 800; */
        background-color: var(--main-navigation-menu-level-0-hover-background-color) !important;
        cursor: pointer;
    }
/* } */
    
/* .main-navigation .submenu-item li {
    margin: 0 0.3rem;
} */


.main-navigation .drop-menu-1 {
    background-color: var(--main-navigation-menu-level-1-background-color) !important;
    color: var(--main-navigation-menu-level-1-link-color) !important;

    position: absolute;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    line-height: 1.8rem;
    padding: 5px 3px;

    min-width: 8rem;

    opacity: 0;
    visibility: hidden;

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    /* transform: translateX( -25%  ); */
}

.main-navigation ul li:hover .drop-menu-1 {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
    /* transform: translateX( -50% );  */
}

.main-navigation .drop-menu-1 > li {
    /* flex-grow: 1; */
    /* color: var(--main-navigation-menu-level-1-link-color) !important; */
}

.main-navigation .drop-menu-1 > li > a span {
    /* padding: 0px 4px; */
    color: var(--main-navigation-menu-level-1-link-color) !important;
    /* display: block; */        
}

.main-navigation .drop-menu-1 > li:hover {
    background-color: var(--main-navigation-menu-level-1-hover-background-color) !important;
}
.main-navigation .drop-menu-1 > li:hover > a span {
    color: var(--main-navigation-menu-level-1-hover-text-color) !important;
}

/* .drop-menu-1 li a {
    display: block;
    font-weight: 400;
    width: 100%;
} */


.main-navigation .submenu-item-level-2::after {
    font-family: 'boxicons';
    /* content: '\00bb' */

    /* font-family: 'fontawesome'; */
    /* content: ' \f107'; */
}

.main-navigation .drop-menu-2 {
    background-color: var(--main-navigation-menu-level-2-background-color);
    /* color: var(--main-navigation-menu-level-2-link-color); */
    
    /* width: 250px; */
    position: absolute;
    /* left: 50px; */
    /* top: 100px; */
    /* transform: translateX( -50% ); */
    display: flex;
    flex-direction: column;
    line-height: 1.8rem;
    padding: 5px 3px;

    opacity: 0;
    visibility: hidden;

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}


.main-navigation .drop-menu-2 > li {
    background-color: var(--main-navigation-menu-level-2-background-color) !important;
}

.main-navigation .drop-menu-2 > li span {
    /* background-color: var(--main-navigation-menu-level-2-background-color) !important; */
    color: var(--main-navigation-menu-level-2-link-color) !important;
}

.main-navigation .drop-menu-2 > li:hover {
    background-color: var(--main-navigation-menu-level-2-hover-background-color) !important;
}
.main-navigation .drop-menu-2 > li:hover span {
    color: var(--main-navigation-menu-level-2-hover-text-color) !important;
}





.main-navigation .drop-menu-1  li:hover .drop-menu-2 {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
}

.drop-menu-2-align-left {
    right: 0;
}


/* .main-navigation .drop-menu-2 li:hover, */
/* .main-navigation .drop-menu-2 li:hover a span {
    background-color: var(--main-navigation-menu-level-2-hover-background-color) !important;
    color: var(--main-navigation-menu-level-2-hover-text-color) !important;
} */



/* .drop-menu-2 li a { */
/* width: 100%; */
/* display: block; */
/* font-weight: 400; */
/* } */

.menu-icon {
    font-size: 32px;
    color: rgb(255, 0, 0);
    cursor: pointer;
}

label[for="menu-open"] {
    display: none;
    /* display:inline-flex; */
    align-items: center;
    justify-content: end;
    font-size: 2rem;
    line-height: 2rem;
    ;
    width: 100%;
    vertical-align: middle;
    /* outline: 1px solid black; */
    background-color: var(--main-navigation-menu-level-0-background-color);
    color: var(--main-navigation-menu-level-0-link-color);
}


#menu-check+label {
    display: none;
}


#menu-open:checked+label {
    color: red;
}

#menu-open {
    display: none;
}

.main-navigation ul li i.bx {
    display: none;
    /* background-color: blue; */
}

.main-navigation ul.drop-menu-1 li i.bx {
    display: inline-block;
    /* background-color: blue; */
}


#menu-check {
    display: none;
}



/* 
label #menu-open,
label #menu-close {
    color: rgb(255, 255, 255);
    float: right;
    cursor: pointer;
    display: none;
    margin-top: auto;
    margin-bottom: auto;
} */

/* 
label #menu-open {
    float: unset;
    display: block;
    text-align: center;
}
 */
.main-navigation .titlename {
    display: none;
}


.responsive-navigation {
    display: none;
}


/* .main-navigation .show, */
.main-navigation ul li>input,
ul li>input {
display: none;
}

.main-navigation .menu-item > span,
.main-navigation .submenu-item > label {
    display: block;
    width: 100%;
    /* padding: 0.5rem; */
    font-size: 1rem;
}

.main-navigation ul li.submenu-item input {
    display: none;
}


/* responsive menu styling */
@media screen and (max-width: 890px) {
    /* .main-navigation {
        display: none;
    } */

    label[for="menu-open"] {
        display: block;
    }


    .main-navigation > ul {
        flex-direction: column;

    }

    .main-navigation .menu-item a,
    .main-navigation .submenu-item label {
        display: block;
        width: 100%;
        padding: 0.5rem;
        font-size: 1rem;
    }

    .main-navigation .menu-item  a:hover,
    .main-navigation .submenu-item  label:hover {
        /* color: rgba(0, 0, 0, 0.664).; */
        /* text-decoration: underline; */
        color: var(--main-navigation-menu-level-0-hover-text-color) !important;
        /* font-weight: 800; */
        background-color: var(--main-navigation-menu-level-0-hover-background-color) !important;
        cursor: pointer;
    }

    .main-navigation ul li .drop-menu-1 {
        display: block;
    }

    /* .main-navigation li:hover .drop-menu-1 { */
        /* opacity: unset; */
        /* visibility: unset; */
        /* transition: all 0.3s ease; */
        /* left: 65%; */
        /* transform: translateX( +50% ) translateY(-10%); */

    /* } */

    .main-navigation .titlename {
        position: relative;
        left: -32px;
        display: inline-block;
        color: white;
    }

    .main-navigation .titlename span {
        color: red;
    }

    /* take extra care for the last child */
    .main-navigation ul li:last-child .drop-menu-1 {
        /* transform: translateX(50%); */
        /* background: rgb(93, 151, 228); */
    }


    .wrapper .main-navigation {
        width: 100%;
        line-height: 32px;
        z-index: 99;
    }

    .main-navigation ul {
        /* background-color: aqua; */
        background-color: #939be4;
        /* display: none; */
        display: none;
        flex-direction: column;
        justify-items: center;
        list-style: none;
        margin: auto;
        text-align: left;
        width: 100%;
    }

    .main-navigation ul li {
        padding: 16px 16px 16px 16px;
    }

    .main-navigation .drop-down::after {
        font-family: 'fontawesome';
        content: ' \f054'
    }

    .main-navigation .menu-icon {
        display: block;
    }


    #menu-check:checked ~ ul {
        display: block;
        /* opacity: 1; */
    }

    #menu-check:checked ~ label #menu-open {
        display: none;
    }

    #menu-check:checked ~ label #menu-close {
        display: block;
    }


    .main-navigation ul li.submenu-item ul.drop-menu-1 {
        /* display: block; */
        display: none;
        /* background-color: red; */
    }

    .main-navigation ul li.submenu-item ul.drop-menu-2 {
        display: none;
    }

    /* do not show menu initially, wait for menu icon to be pressed */
    .main-navigation ul {
        display: none;
    }

    /* display menu when menu icon is pressed */
    #menu-open:checked ~ ul {
        display: inline-block;
    }

    #menu-open ~ label[for="menu-open"] > i {
        font-size: 1.5rem;
    }

    /* when menu is shown, hide menu icon... */
    #menu-open:checked+label[for="menu-open"] {
        display: none;
        
    }

    /* ... and display menu close icon */
    #menu-open:checked+label[for="menu-close"] {
        display: block;
    }

    /* ... menu close icon should be hidden by default */
    #menu-open:not(:checked)~label[name="menu-close"] {
        display: none;
        background-color: red;
    }



    .main-navigation ul li {
        display: block;
        margin: 0.5rem 1rem;
    }

    .main-navigation ul>li,
    .main-navigation ul>li>a {
        color: white !important;
    }

    .main-navigation ul>li>ul.drop-menu-1,
    .main-navigation ul>li>ul.drop-menu-2 {
        /* display: none; */
        position: unset;
        transition: all 0.3s ease;
        /* display: subgrid; */
    }

    /* .main-navigation .show, */
    .main-navigation ul li>input {
        /* display: none; */
    }

    .main-navigation>input[type="checkbox"] {
        display: none;
    }

    .main-navigation ul li {
        /* margin: 1rem; */
        padding: 1rem;
    }

    .main-navigation ul li input:checked ~ ul.drop-menu-1 {
        display: block;
        opacity: 1;
        visibility: visible;
        background-color: var(--main-navigation-menu-level-1-background-color);
        /* inherit !important; */
    }

    .main-navigation ul li  ul li  input:checked ~ ul.drop-menu-2 {
        display: block;
        opacity: 1;
        visibility: visible;
        background-color: var(--main-navigation-menu-level-1-background-color);
        /* inherit !important; */
    }

    .main-navigation ul li  ul li  ul li input:checked ~ ul.drop-menu-3 {
        display: block;
        opacity: 1;
        visibility: visible;
        background-color: var(--main-navigation-menu-level-1-background-color);
        /* inherit !important; */
    }


    .main-navigation ul li input:checked+label i.bx.bx-chevron-right {
        /* display: none; */
        transform: rotate(90deg);
    }

    .main-navigation ul li::after:has(ul.drop-menu-1) {
        background-color: cyan;
    }

    .main-navigation ul li i.bx {
        display: inline-block;
        /* background-color: blue; */
        height: 100%;
        font-size: 1.1rem;
        vertical-align: middle;

    }


    .main-navigation .menu-item,
    .main-navigation .submenu-item {
    /* padding: 0px 0.8rem; */
    padding: 0px 0rem;


}