/********************************************
*
* PWS CSS
*
* 0. Body
* 1. Header
* 2. Footer
* X. TBC
********************************************/

:root {
        --main-bg-gray: #394450; /*rgb(57, 68, 80)*/
        --dark-text: #333;
        --dark-gray-green: #4d5d5b;
        --gray-highlight: #9CA2A7;
        --main-green: #77C045;
        --mid-green: #b8e29c;
        --light-green: #edfde3;
        --main-white: #fefffe;
    }
    
    .text-main-green-365{
        color: var(--main-green);
    }
    
    
    
    /********************************************
    *
    * 0. BODY (and other elements used everywhere)
    *
    ********************************************/
    body{
        background: var(--main-white);
    }
    
    .scroll-top{
        background: var(--main-bg-gray);
        border: 1px solid var(--mid-green);
    }
          
    .scroll-top:hover{
        background: var(--mid-green);
        border: 1px solid var(--main-bg-gray);
        color: var(--main-bg-gray);
    }
    
    .page-title:before{
        background: var(--main-bg-gray);
    }
    
    .sec-title .top-title:before, .sec-title .top-title:after{
        background: var(--main-green);
        opacity: 0.3;
    }
    
    .sec-title .top-title{
        color: var(--main-green) !important;
        font-weight: 800 !important;
    }
    
    .sec-title .top-title h2{
        background: red;
    }
          
    /********************************************
    *
    * 1. HEADER
    *
    ********************************************/
    .main-header, .sticky-header{
            background: var(--main-bg-gray);
    }
    
    .main-menu .navigation > li > a{
            color: #fff;
    }
    
    .main-menu .navigation > li > a:hover{
            color: var(--main-green) !important;
    }
    
    .main-menu .navigation > li.dropdown > a:before{
            color: var(--light-green-highlight);
    }
        
    .main-menu .navigation > li.current > a, .main-menu .navigation > li:hover > a{
            color: var(--main-green) !important;
    }
    
    .main-menu .navigation > li > ul, .main-menu .navigation > li > .megamenu{
            background: rgba(255, 255, 255, 0.8);
            border-radius: 0px;
            width: auto;
    }
    
    .main-menu .navigation > li.dropdown.current > a:before,
    .main-menu .navigation > li.dropdown:hover > a:before{
            color: var(--main-green) !important;
    }
    
    .main-menu .navigation > li > ul > li > a,
    .main-menu .navigation > li > .megamenu li a{
            color: var(--dark-text);
    }
    
    .main-menu .navigation > li > ul > li:hover{
            /* background: var(--main-bg-gray); */
            background: #fff;
    }
    
    .main-menu .navigation > li > ul > li > a:hover{
            color: var(--main-green);
    }
    
    .main-menu .navigation > li > ul > li > a:before{
            color: var(--main-green);
    }
    
    .main-menu .navigation > li > ul > li > a,
    .main-menu .navigation > li > .megamenu li > a{
            border-bottom: 1px solid var(--dark-text);
    }
    
    .mobile-menu .menu-backdrop{
            background: var(--main-bg-gray);
    }
    
    .mobile-menu .menu-box{
        background: var(--main-bg-gray);
    }
    
    .menu-area .mobile-nav-toggler {
        border: 2px solid #fff;
    }
    
    .menu-area .mobile-nav-toggler .icon-bar{
        background: var(--main-green);
    }
    
    .outer-box{
        justify-content: space-between;
        align-items: center;
        padding: 15px 30px 15px 30px;
    }
    
    /********************************************
    *
    * 2. FOOTER
    *
    ********************************************/
    
    .bg-color-1{
        background: var(--main-bg-gray);
    }
    
    .footer-top{
       padding-bottom: 15px;
    }
    
    .footer-top .links-widget .links-list li{
       float: none;
    }
    
    .footer-top .links-widget .links-list li a{
       font-size: 15px;
    }
    
    .footer-top .links-widget .links-list li a:hover,
    .footer-top .about-widget .social-links li a:hover{
        color: var(--main-green);
    }
    
    /********************************************
    *
    * X. TBC
    *
    ********************************************/
    #content_block_1 .content-box .tab-btns li.active-btn i.employ-icon,
    #content_block_1 .content-box .tab-btns li:hover i.employ-icon,
    #content_block_1 .content-box .tab-btns li.active-btn i.arrow-icon,
    #content_block_1 .content-box .tab-btns li:hover i.arrow-icon{
       color: var(--dark-text);
    }
    
    /* Active */
    #content_block_1 .content-box .tab-btns li.active-btn, #content_block_1 .content-box .tab-btns li:hover{
        /*background: var(--light-green-highlight);*/
    }
    
    /* Inactive*/
    #content_block_1 .content-box .tab-btns li{
        background: var(--main-white);
    }
    
    @media screen and (max-width: 991px){
   
       .sidebar-page-container{
           padding-top: 43px; /* To intentionally mirror the distance between the image and the title below */
       }
       
    }