.droopmenu-navbar{
        box-shadow: rgba(10, 8, 8, 0.57) 0px 0px 20px 0px;
    }
    
    .droopmenu-navbar:after{
        content:"";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }   
        
    /* TOP LEVEL LINK COLORS | HOVER COLOR */
    .droopmenu > li > a,
    .droopmenu > li > span,
    .droopmenu li:hover > a{ color:var(--main-blue-color) !important; }
    
    .droopmenu li li:hover > a{ color:#782F8D; }
    .droopmenu li ul li a{ }
    
    .droopmenu-toggle i:after,
    .droopmenu-toggle i:before{ background: var(--main-white-color); }
    
    /* TOP HEADER + VERTICAL SIDEBAR SOCIAL ICONS  */
    .droopmenu-extra .droopmenu .droopmenu-social-icons a i,
    .droopmenu-vertical .droopmenu-social-icons a:not(.dms-icon) i,
    .droopmenu-extra .droopmenu .droopmenu-social-icons a:hover i,
    .droopmenu-vertical .droopmenu-social-icons a:not(.dms-icon):hover i{ color: hsla(0, 0%, 100%, 0.6); }
    .droopmenu-extra .droopmenu .droopmenu-social-icons a,
    .droopmenu-vertical .droopmenu-social-icons a:not(.dms-icon),
    .droopmenu-extra .droopmenu .droopmenu-social-icons a:hover,
    .droopmenu-vertical .droopmenu-social-icons a:not(.dms-icon):hover { border-color: hsla(0, 0%, 100%, 0.6); }                    
    
    @media only screen and (min-width: 768px) {
        /* VERTICAL SIDEBAR MENU STYLES */
        .dms-open span i::after,
        .dms-open span i::before,
        .dms-close span i::after,
        .dms-close span i::before  { background-color:var(--color-menu-span); }
                
        .dm-site-footer{ color: var(--main-blue-color); }  
        
        .droopmenu-vertical .droopmenu li:hover > a{ background:transparent;  }
        .droopmenu-vertical-wrapper .droopmenu-vertical .droopmenu li:hover > a{ background:#2C3E50; }
        .dm-site-sidebar .droopmenu > li > a:before { background:rgba(255, 255, 255, 0.1); }    
        .dm-site-overlay::before { background-color: rgba(0, 0, 0,0.5); }
        .dm-site-overlay::after { background-color: rgba(0, 0, 0,0.1); }
                        
    }
    
        
    @media screen and (max-width: 767px) {
        .droopmenu-navbar,
        .droopmenu-offcanvas .droopmenu-nav{ 
            box-shadow: rgba(10, 8, 8, 0.57) 0px 0px 20px 0px;     
        }

        .droopmenu-toggle i:after,
        .droopmenu-toggle i:before{ background: var(--main-blue-color); }

        .droopmenu-navbar:after,
        .droopmenu-offcanvas .droopmenu-nav:after{      
            content:"";
            width: 100%;
            height: 100%;
            position: absolute;
            z-index:-1; 
            left: 0;
            top: 0;     
        }
        
        .droopmenu-header{ background: none; }
        
        .droopmenu > li > a,
        .droopmenu > li > span{ color: var(--main-blue-color); }
        .droopmenu li:hover > a{ color: var(--main-tvn-blue-color); }
        .droopmenu li.dmtoggle-open > a{ color:hsla(0, 0%, 100%, 0.4);  }
        .droopmenu > li > a{ border-bottom-color:#eee; } 
        .droopmenu li ul li a{ border-bottom-color:#eee; }
        .droopmenu-nav{ border-top:0; }             
        .droopmenu-mclose { background:none; border-bottom:0; }
        .droopmenu-mclose span:before, 
        .droopmenu-mclose span:after { background-color: var(--main-blue-color); }
        
        .dm-site-content{ 
            top:-80px; 
            margin-bottom:-80px;
            position:relative; 
        }           
                    
    }