nav{
    position: fixed;
    z-index: 9999;
    width: 100%;
    background: rgb(253, 252, 252);
    box-shadow: 1px 1px 9px rgb(43, 43, 43);
    color: #2b2b2b;
    font-family: "Kanit-light", sans-serif;
}

.navbar{
    max-width: 100%;
    padding:0 5%;
    margin: auto;
    display:flex;
    align-items: center;
    justify-content: space-between;

}


.cerna{color:#000000}

.logo{
    margin-top: 15px;
    margin-bottom: 10px;
    height: 65px;
}



.logo:hover{
    transition: all 0.5s ease-out;
    filter: grayscale(100%);
    transform: scale(1.05);
}

.menu{
    display: inline-flex;
    list-style: none;
}

.menu li{
    position: relative;
    float:left;
}

.menu li a{
    font-size:1.1rem;
    color: #2b2b2b;
    display:block;
    text-decoration: none;
    padding:1rem 1.2rem;
}

.menu li a:hover{
    transition: transform 0.3s ease-in-out;
    filter: grayscale(100%);
    transform: scale(1.05);
    color: rgba(255, 0, 0, 0.57);
}

.menu li > .active
{
    background: none;
    color: red;
}


.active{
    background: rgb(191, 186, 186);
}
.submenu{
    position: absolute;
    left:0;
    background: rgb(243, 241, 241);
    display:none;
    transition: all .3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
    border-radius: 6px;

}

.submenu-wrapper:hover .submenu,
.submenu-wrapper:focus-within .submenu{
    display: initial;
}


.submenu li{
    width: 250px;
    list-style: none;
}
.submenu li a{
    padding:.5rem 1.3em;
}

.toggle-btn {
    display: none; /* Initially hide the toggle button */
    z-index:1000;
}

.icon {
    margin: 15px;
    position: relative;
    width: 1.5rem;
    height: .8rem;
    cursor: pointer;
    z-index:100;
}

.icon::before {
    top: 0;
    right:0;
    content: '';
    position: absolute;
    width: 2rem;
    height: .2rem;
    background-color: #2b2b2b;
    transition: all 0.3s ease-in-out;
}

.icon::after {
    bottom: 0;
    right:0;
    content: '';
    position: absolute;
    width: 1.5rem;
    height: .2rem;
    background-color: #2b2b2b;
    transition: transform 0.3s ease-in-out;
}

/* Rotate the before and after lines to create the close icon effect */
.icon.active::before {
    width:1.5rem;
    transform: rotate(-45deg) translate(-0.21rem, 0.21rem);
}

.icon.active::after {
    transform: rotate(45deg) translate(-0.21rem, -0.21rem);
}


@media (max-width: 1500px){
    .toggle-btn{
        display: block;
    }

    .menu{
        width:100%;
        position:absolute;
        top:100%;
        left:0;
        background: rgba(248, 245, 245);
        display:none;
    }

    .menu.active{
        display:initial
    }

    .menu li{
        width:100%;
        border-top: .1rem solid rgba(34, 47, 55, 0.19);
    }

    .submenu{
        position: relative;
        width:100%;
    }

    .submenu li{
        background: rgba(0, 0, 0, 0.09);
        border-top: .1rem solid rgba(16, 29, 35, 0.27);
    }

    .submenu li a{
        padding-left:2rem;
    }
}