:root {
    --main-color: rgb(71, 70, 69);
    --white-color: rgb(255, 255, 255);
}
    
    /*****************nav container******************/
    .nav-container {
        display: flex;
        width: 100%;
        align-items: stretch;
    }

    .nav-flex {
        display: flex;
        width: 100%;
        height: 41px;
        flex-wrap: wrap;
        justify-content: center;
    }

    #hamburgerMenu {
        opacity: 0;
    }

    .close-menu {
        display: none;
    }

    .nav-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        width: 826px;
        font-size: 12px;
        word-spacing: 5px;
        color: var(--white-color);
        padding: 10px;
        background-color: rgb(163, 165, 165);
        border: 2px solid transparent;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
        list-style-type: none;
        text-align: center;
    }

    .glyphicon-chevron-down {
        font-size: 12px;
        font-weight: 100;
        margin-left: 5px;
        display: none;
    }

    .nav-title a {
        color: var(--white-color);
        text-decoration: none;
    }

    .nav-title a:nth-child(8) {
        border-right: 0px;
    }

    /*******************dropdown menu code*****************************/
    .nav-title li ul {
        display: block;
        position: absolute;
        top: 177px;
    }

    .nav-title li ul li {
        display: none;
        position: relative;
        top: 11px;
        left: -50px;
        width: 180px;
        list-style-type: none;
        margin: 0 auto;
        text-align: center;
        padding: 5px;
    }

    .nav-title li:hover ul li {
        display: block;
        background-color: #ccc;
        z-index: 50;
    }

    .nav-title li ul li a {
        text-decoration: none;
        color: var(--main-color);
    }