<style>
.menu-area {
    /* background: #d61a5e */
}

.dropdown-menu {
    padding: 0;
    margin: 0;
    border: 0 solid transition !important;
    border: 0 solid rgba(0, 0, 0, .15);
    border-radius: 0;
    /* -webkit-box-shadow: none !important; */
    /* box-shadow: none !important; */
    border-top: rgba(0, 0, 0, .15);

}

/* .mainmenu a,
.navbar-default .navbar-nav>li>a,
.mainmenu ul li a,
.navbar-expand-lg .navbar-nav .nav-link {
    color: #000;
    font-size: 20px;
    text-transform: capitalize;
    padding: 16px 15px;
    font-family: 'Roboto',
        sans-serif;
    display: block !important;
} */

/* .mainmenu .active a,
.mainmenu .active a:focus,
.mainmenu .active a:hover,
.mainmenu li a:hover,
.mainmenu li a:focus,
.navbar-default .navbar-nav>.show>a,
.navbar-default .navbar-nav>.show>a:focus,
.navbar-default .navbar-nav>.show>a:hover {
    color: #4CAF50;
    background: #4CAF50;
    outline: 0;
} */

/*==========Sub Menu=v==========*/
.mainmenu ul>li:hover>a {
    /* background: #4CAF50; */
}

.mainmenu ul ul>li:hover>a,
.navbar-default .navbar-nav .show .dropdown-menu>li>a:focus,
.navbar-default .navbar-nav .show .dropdown-menu>li>a:hover {
    /* background: #4CAF50; */
}

.mainmenu ul ul ul>li:hover>a {
    /* background: #4CAF50; */
}

.mainmenu ul ul,
.mainmenu ul ul.dropdown-menu {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/******************************Drop-down menu work on hover**********************************/
.mainmenu {
    background: none;
    border: 0 solid;
    margin: 0;
    padding: 0;
    min-height: 20px;
    width: max-content;
}

@media only screen and (min-width: 767px) {
    .mainmenu ul li:hover>ul {
        display: block
    }

    .mainmenu ul ul {
        position: absolute;
        top: 100%;
        left: 15px;
        display: none;
        width: max-content;
        padding: 10px;
    }

    /*******/
    .mainmenu ul ul li {
        position: relative
    }

    .mainmenu ul ul li:hover>ul {
        display: block
    }

    .mainmenu ul ul ul {
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 250px;
        display: none
    }

    /*******/
    .mainmenu ul ul ul li {
        position: relative
    }

    .mainmenu ul ul ul li:hover ul {
        display: block
    }

    .mainmenu ul ul ul ul {
        position: absolute;
        top: 0;
        left: -100%;
        min-width: 250px;
        display: none;
        z-index: 1
    }

}

@media only screen and (max-width: 767px) {
    .navbar-nav .show .dropdown-menu .dropdown-menu>li>a {
        padding: 16px 15px 16px 35px
    }

    .navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu>li>a {
        padding: 16px 15px 16px 45px
    }

    .dropdown-menu li a {
        color: #5c768d !important;
    }
}
</style>
