.navbar {
    width: 100%;
    position: relative;
    top: 0;
/*    left: 150px;
*/   
    /*background-color: steelblue;*/
    padding: 0 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*box-shadow: inset;*/
    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    /*-moz-box-shadow: 5px 5px 8px #777;
    -webkit-box-shadow: 5px 8px 16px #777;
    box-shadow: 5px 5px 8px #777;
    border-radius: 5px;*/
    margin-bottom: 10px;
    margin-top: 0px;
    text-align: center;
}

.logo {
    /*width: 5rem;*/
    float:right;
}

    .logo img {
        width: 100%;
    }

.menu2 {
    list-style: none;
    margin:0px;
    
}

    .menu2 li {
        position: relative;
        float: right;
        /* border: 1px solid #d6e0f9;*/
        /* border-left: 1px solid #d6e0f9;
        border-right: 1px solid #d6e0f9;*/
        padding-right: 5px;
        border-radius: 10px;
        align: center;
    }

        .menu2 li a {
            font-family: "vazir", sans-serif;
            font-size: 1.2rem;
            color: white;
            display: block;
            text-decoration: none;
            padding: 0.5rem 1.5rem;
            margin-top: 2px;
            margin-bottom: 2px;
            background-color: transparent;
            border: 1px groove;
            border-color: cadetblue;
            /*border-left: 1px solid #d6e0f9;
            border-right: 1px solid #d6e0f9;*/
            height: 100%;
            border-radius: 23px 81px 21px 81px;
            box-shadow: inset;
            /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
            -moz-box-shadow: 5px 5px 8px black;
            -webkit-box-shadow: 5px 8px 16px black;
            box-shadow: 5px 5px 8px black;
        }

            .menu2 li a:hover {
                background-color:brown;
            }

.submenu2 {
    position: absolute;
    left: 0;
    background-color: transparent;
    display: none;
    transition: all .3s ease-in-out;
    z-index: 99;
    padding: 0px;
    margin: 0px;
    width: 200px;
}

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

.submenu2 li {
    width: 100%;
    /*  border-top: .1rem solid #222f37;*/
    list-style: none;
   
}
    .submenu2 li a {
        background-color: steelblue;
        border-radius: 5px;
    }

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

.icon {
    position: relative;
    width: 2.5rem;
    height: 2.2rem;
    cursor: pointer;
    z-index: 100;
    background:url('../assets/navtog.png') no-repeat center;
    background-size:40px;
}

    .icon::before {
       
      
    }

    .icon::after {
   
    }

    /* 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: 991px) {
    .navbar {
        width: 100%;
        position: relative;
        top: 0;
        left: 20px;
        /*background-color: steelblue;*/
        padding: 0 5%;
        display: flex;
        align-items: center;
        justify-content: left;
        /*box-shadow: inset;*/
        /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
        /*-moz-box-shadow: 5px 5px 8px #777;
    -webkit-box-shadow: 5px 8px 16px #777;
    box-shadow: 5px 5px 8px #777;
    border-radius: 5px;*/
        margin-bottom: 10px;
        margin-top: 0px;
        text-align: center;
    }
    .toggle-btn {
        display: block;
    }

    .menu2 {
        width: 100%;
        position: relative;
        top: 100%;
        left: 0;
        background-color:steelblue ;
        border-top: .1rem solid #222f37;
        display: none;
    }

        .menu2.active {
            display: initial
        }

        .menu2 li {
            width: 100%;
          /*  border-top: .1rem solid #222f37;*/
         
           
        }

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

        .submenu2 li {
            background-color: steelblue;
           /* border-top: .1rem solid #101d23;*/

        }

            .submenu2 li a {
                padding-left: 2rem;
                border-radius: 5px;
            }
}