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

/* .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;
    display: block;
    white-space: nowrap;
    /* text-align: center; */
    position: relative;
}

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

/* .main-navigation li:hover { */
/* color: #000000; */
/* } */
@media screen and (min-width: 450px) {
    
    .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 .submenu-item-level-1::after {
    /* font-family: 'fontawesome'; */
    /* font-family: "boxicons"; */
    /* content: '\f107'; */
    /* content: '\00bb'; */
}

.main-navigation .drop-menu {
    position: absolute;
    left: 0;
}

.main-navigation .drop-menu.right-flush {
    left: auto;
    right: 0;
}

.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 {
    /* padding: 0px 4px; */
    color: var(--main-navigation-menu-level-1-link-color) !important;
    /* display: block; */
    /* text-align: center; *main-navigation ul li input:checked ~ ul.drop-menu-1 {
            display: block;
            opacity: 1;
            visibility: visible;
            /* transition: all 1s ease; */
}

.main-navigation .drop-menu-1 li:hover a {
    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: 'fontawesome'; */
    font-family: 'boxicons';
    /* content: ' \f107'; */
    content: '\00bb'
}

.main-navigation .drop-menu-2 {
    /* background: #fff; */
    background-color: var(--main-navigation-menu-level-2-background-color) !important;
    color: var(--main-navigation-menu-level-2-link-color) !important;
    /* width: 250px; */
    position: absolute;
    left: 95%;
    top: 4px;
    /* 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-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 {
    background-color: var(--main-navigation-menu-level-2-background-color) !important;
}

.main-navigation .drop-menu-2 li:hover a {
    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; */
}


#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 {
    display: none;
}




@media screen and (max-width: 530px) {
    /* .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;
    }
    .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;
    }


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


    .wrapper .main-navigation {
        /* padding: 0px 50px 8px 50px; */
        /* position: fixed; */
        /* left: 0px; */
        /* top: 0; */
        width: 100%;
        /* background-color: rgb(0, 0, 0); */
        /* display: block; */
        line-height: 32px;
        /* height: 64px; */

        /* position: fixed; */
        /* display: block; */
        /* width: 100%; */
    }

    .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; */
    }

    /* 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;
    }

    /* 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: inherit !important;
    }


    .main-navigation ul li input:checked+label i {
        /* 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;

    }

}