/*Responsive Screens*/
@media screen and (min-width: 992px){
    .container{
        padding: 0 2em;
    }

    .desktop-hide{
        display: none;
    }

    .mobile-hide{
        display: block;
    }

    .logo a img{
        margin-right: 2em;
    }

    .header-nav{
        padding: 0;
        margin: 0;
        border-bottom: 0;
    }

    .header-nav .right li > a{
        margin-left: 1em;
    }

    /*Mega Menu*/
    nav .mega {
        position: absolute;
        width: var(--percent-100);
        height: auto;
        top: auto;
        left: 0;
        right: 0;
        padding: 2.5em;
        line-height: 2em;
        background: var(--light-bg);
        box-shadow: rgb(0 0 0 / 20%) 0 30px 20px -30px;
        z-index: 100;

        display: none;
    }

    /*Display mega menu*/
    nav li.has-child:hover .mega{
        display: block;
    }

    nav .mega .wrapper{
        display: flex;
    }

    nav .mega h4{
        font-size: 0.8em;
        text-transform: uppercase;
    }

    nav .mega ul{
        font-size: var(--font-small);
    }
    nav .mega .herbs-hsg{
        display: flex;
        flex-wrap: wrap;
        max-width: 180px;
    }

    nav .mega .herbs-hsg li{
        min-width: 80px;
    }

    nav .mega .view-all{
        margin-top: 1em;
    }

    nav .mega .products{
        flex: 2;
        padding: 0;
        align-items: center;
        position: relative;
    }

    nav .mega .products .row{
        width: var(--percent-100);
    }

    nav .mega .products .media{
        height: 400px;
    }

    nav .mega .products .text-content{
        line-height: initial;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        margin-top: 0.5em;
        position: absolute;
        bottom: 1em;
        width: var(--percent-100);
    }

    nav .mega .products .text-content h4{
        margin-left: 0.7em;
        font-size: 2em;
        font-weight: var(--fw8);
        color: var(--primary-color);
    }
    /*End Mega Menu*/

    /*Mobile menu for Depts & Categorys*/
    .header-main .right{
        max-width: 600px;
        margin-left: auto;
    }

    /*Dept Menu*/
    .dpt-menu{
        position: absolute;
        top: var(--percent-100);
        width: 300px;
        background: var(--white-color);
        border: 1px solid var(--border-color);
        border-top: 0;
        border-bottom: 0;
    }

    .dpt-menu > ul > li > a{
        font-weight: var(--fw5);
        padding: 0 1.5em;
        border-bottom: 1px solid var(--border-color);
    }

    .dpt-menu .has-child > ul, .dpt-menu .mega{
        position: absolute;
        top: 0;
        left: var(--percent-100);
        width: var(--percent-100);
        height: auto;
        min-height: var(--percent-100);
        padding: 1.5em;
        font-size: var(--font-small);
        line-height: 2.5em;
        border: 1px solid var(--border-color);
        border-top: 0;
        display: none;
    }

    /*Showing the first sub menu*/
    
   
    .dpt-menu .prd-1 ul{
        background: var(--light-bg);
    }

    .dpt-menu .prd-2 ul{
        background: var(--light-bg);
    }

    .dpt-menu .prd-3 ul{
        background: var(--light-bg);
    }

    .dpt-menu .prd-4 .mega{
        width: auto;
        min-width: var(--percent-100);
        background: var(--light-bg);
    }

    .dpt-menu .has-child > :where(ul, .mega)::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--primary-color);
    }

    .dpt-menu .mega{
        width: auto;
        min-width: var(--percent-100);
    }

    .dpt-menu .has-child:hover .mega{
        display: flex;
    }


}