header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 99; isolation: isolate; transition: .4s all; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; -o-transition: .4s all; }
header nav{ padding-block: 0em; justify-content: space-between; position: relative; align-items: center; transition: .4s all; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; -o-transition: .4s all; }
header .navbar-brand{ max-width: 180px;}
header .floating{ position: absolute; right: 0; top: 0; border-radius: 0 0 .6em .6em; -webkit-border-radius: 0 0 .6em .6em; -moz-border-radius: 0 0 .6em .6em; -ms-border-radius: 0 0 .6em .6em; -o-border-radius: 0 0 .6em .6em; }
header nav .nav-right{display: flex; align-items: center; column-gap: 2em; padding-top: 2rem;}
header nav .menubar{display: flex; column-gap: 2.7em; margin-bottom: 0; align-items: center;}
.menu-link{display: flex; padding-block: 0em; column-gap: .69em; align-items: center; font-size: var(--text-16); color: #fff; position: relative;}

.has-submenu>a {
    padding-block: 2.1em;
}


.has-submenu .menu-link::after{ content: ''; display: block; width: .73em; height: .45em; background: url('../images/down-angle.svg') no-repeat center; background-size: contain; filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); transition: .4s all; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; -o-transition: .4s all;}
header.buiness-header nav .nav-right{padding-top: 3rem;}
.menu-item:hover .menu-link{color: var(--color-accent);}
.menu-item:hover .menu-link::after{ filter: none; -webkit-filter: none; }

.hamburger{width: 1.5em; height: 1.3em; position: relative;}
.hamburger span{ position: absolute; display: block; right: 0; width: 100%; height: .1em; background-color: #fff; transition: .4s all; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; -o-transition: .4s all; }
.hamburger span:first-child{top: 0%;}
.hamburger span:nth-child(2){width: 70%; top: 50%; 
    /* translate: 0 -30% */
}
.hamburger span:last-child{bottom: 0%;}
.hamburger.active{rotate: 45deg;}
.hamburger.active span{top: 50%; translate: 0 -30%;}
.hamburger.active span:nth-child(2){scale: 0 1;}
.hamburger.active span:nth-child(3){rotate: 90deg;}

.sidebaToggler::after{content: ''; position: absolute; top: 50%; right: calc(100% + 2.5em); height: 120%; translate: -50% -50%; width: .1em; background: #fff; opacity: .39;}


header.header-sticky, .inner-header{background: #fff;}
header.header-sticky nav{padding-block: 0rem;}
header.header-sticky nav .has-submenu>a{
    padding-block: 1.5em;
}
header.header-sticky .menu-link, .inner-header .menu-link{color: var(--color-black); }
header .menu-link{
    border-bottom: 0rem solid transparent;
}
header.header-sticky .nav-right{
    margin-bottom: 0rem;
}
/* header.header-sticky .menu-link{
    border-bottom: 2rem solid transparent;
} */
header.header-sticky .menu-link::after,  .inner-header .menu-link::after{ filter: brightness(0); -webkit-filter: brightness(0); }
header.header-sticky .hamburger span, .inner-header .hamburger span{background: var(--color-black);}
.buiness-header .shop-now-btn{font-size: var(--text-12);}

header.header-sticky .sidebaToggler::after{background: #000;}

.has-submenu:has(>.submenu){
    position: relative;
}
.submenu{position: absolute; top: 100%; padding-top: 0; left: -1em; display: none;}
header.header-sticky .submenu{padding-top: 0px;}
.submenu .inner{ background: #fff; filter: drop-shadow(0 0 7px rgba(0,0,0,.15)); -webkit-filter: drop-shadow(0 0 7px rgba(0,0,0,.15)); padding: 1rem .5rem; border-radius: 1em; -webkit-border-radius: 1em; -moz-border-radius: 1em; -ms-border-radius: 1em; -o-border-radius: 1em; }
.submenu a{white-space: nowrap; display: block; padding: .5em 1em; color: var(--color-dark);}
.submenu a:hover{color: var(--color-accent);}
.has-submenu:hover> .submenu{display: block;}
/* Megamenu */
/* .has-submenu:hover{position: relative; z-index: 5;} */
.has-submenu>a{position: relative;}

.megamenu{position: absolute; left: 0; top:100%; width: 100%; max-height: calc(90vh - 100px); padding: 0em 0 0rem; padding-inline: 0; display: none;}
header.header-sticky .megamenu{top: 100%; z-index: 999;}
header.header-sticky .megamenu{padding:0em 0 0rem;}
body.show-overlay::before{content: ''; position: fixed; inset: 0; background: #000b; z-index: 5;}
.has-submenu:hover .megamenu{display: block;}
.product-megamenu .container{padding-inline: 2em;}
/* .product-megamenu .megamenu-inner{ background-color: #fff; border-radius: 1.9em; padding: 2em 2em 2em 5em; background-image: url('../images/megamenu-decorator.png'); background-position: left bottom; background-repeat: no-repeat; display: flex; -webkit-border-radius: 1.9em; -moz-border-radius: 1.9em; -ms-border-radius: 1.9em; -o-border-radius: 1.9em; } */
.product-megamenu .megamenu-inner{
    background: transparent linear-gradient(294deg, #FFFFFF 0%, #E3E9E9 100%) 0% 0% no-repeat padding-box;
    border-radius: 1.9em; padding: 1em 1em 1em 5em;
    display: flex; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; -ms-border-radius: 1.6em; -o-border-radius: 1.6em;
    position: relative;
    overflow: hidden;
}
.product-megamenu .megamenu-inner .megamenu-left:after{
    background-image: url('../images/megamenu-decorator.png');
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 20rem;
    height: 13rem;
    background-size: cover;
    mix-blend-mode: multiply;
    z-index: 0;

}
.product-megamenu .megamenu-left{max-width: 30%; border-right: 1px solid #e6e6e6; display: flex; flex-direction: column;  padding-top: 2.5em; padding-right: 5.5em;}
.product-megamenu .megamenu-left p{font-size: var(--text-28); font-weight: 300; line-height: 1.1; color: var(--color-dark); padding-right: 8rem; margin-bottom: 1.1em; }
.product-megamenu .megamenu-left ul{display: flex; flex-direction: column; position: relative;
    z-index: 99;}
.product-megamenu .megamenu-left .btn{width: 100%; text-align: left; padding:0; font-size: var(--text-16); font-weight: 400; border: none; margin-bottom: .2em;}
.product-megamenu .megamenu-left .btn.active, .product-megamenu .megamenu-left .btn:hover{background: var(--color-accent); border: none; font-weight: 600;}
.product-megamenu .megamenu-left a{color: var(--color-dark); display: block; padding: .5em 1.4em;}
.product-megamenu .megamenu-left a span{
    display: block;
}
.product-megamenu .megamenu-left a:hover, .product-megamenu .megamenu-left .btn.active a, .product-megamenu .megamenu-left .btn:hover a{color: #fff;}
.product-megamenu .megamenu-right{flex-grow: 1; height: 60vh;  max-height: 800px; overflow-y: auto;}
.product-megamenu .megamenu-right::-webkit-scrollbar{ width: 5px; height: 5px; background: var(--color-secondary); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px;}
.product-megamenu .megamenu-right::-webkit-scrollbar-thumb{ background: var(--color-accent); border-radius:5px ; -webkit-border-radius:5px ; -moz-border-radius:5px ; -ms-border-radius:5px ; -o-border-radius:5px ; }
.product-megamenu ul.d-grid{grid-template-columns: repeat(2, 1fr);}
.product-megamenu ul.d-grid a{display: flex; flex-direction: column;  row-gap: 0em; font-size: var(--text-16); font-weight: 700; color: var(--color-accent); align-items: center; padding-block: 2em;}
.product-megamenu ul.d-grid li:not(:nth-child(2n)){border-right: .1em solid #E6E6E6;}
.product-megamenu ul.d-grid li:not(:nth-child(-n + 2)){border-top: .1em solid #E6E6E6;}
.megamenu-right .right-menu{display: none;}
.megamenu-right .right-menu.show{display: block;}
.megamenu-right .right-menu img{max-width: 15em; max-height: 8em; object-fit: contain;}

.inner-header ~ main{margin-top: 7.8em;}




@media screen and (max-width:2400px){
    .product-megamenu .megamenu-right {
        height: 48vh;
    }
}
@media screen and (max-width:2200px){
    .product-megamenu .megamenu-right {
        height: 57rem;
    }
}

@media (max-width: 2000px){
    .product-megamenu .megamenu-right{height: 57rem; }
}

@media (max-width: 1800px){
    header .navbar-brand{ max-width: 160px;}
    /* .product-megamenu .megamenu-inner{background-size: 220px} */
    .product-megamenu .megamenu-inner{padding: 2em 2em 2em 6em;}
    .product-megamenu .megamenu-left p{padding-right: 6rem;}
    .product-megamenu .megamenu-left{padding-right: 3.5em;}
    .product-megamenu .megamenu-right{height: 50rem; }

}
@media (max-width: 1650px) {
    .product-megamenu .megamenu-right {
        height: 49rem;
    }
}

@media (max-width: 1550px) {
    .product-megamenu .megamenu-right {
        height: 45rem;
    }
}

@media (max-width: 1450px) {
    .product-megamenu .megamenu-right {
        height: 44rem;
    }
}
@media (max-width: 1399px){
    header .navbar-brand{ max-width: 145px;}
    .megamenu{padding-top: 0.1em;}
    /* .product-megamenu .megamenu-inner{background-size: 187px} */
    .product-megamenu ul.d-grid a{padding-block: 2em; row-gap: .73em;}
    .product-megamenu .megamenu-inner {padding: 1em 1em 1em 4em;}
    .product-megamenu .megamenu-right {
        height: 46rem;
    }
    .product-megamenu .megamenu-inner .megamenu-left:after{
        height: 12rem;
    }

}



@media (max-width: 1300px) {
    .product-megamenu .megamenu-right {
        height: 41rem;
    }
}

@media (max-width: 991.98px){
    header nav {justify-content: center;}
    header nav .nav-right ul{display: none;}
    /* header, .inner-header {
        padding: 2rem 0;
    } */
    header .nav {
        margin-top: 1rem;
    }
    header.header-sticky, .inner-header {
        padding: 0 0 1rem;
    }
    header nav{
        justify-content: space-between;
        align-items: center;
    }
    header .floating{
        position: static;
        border-radius: 5px;
    }
    header nav .nav-right{
        padding-top: 0;
    }
    header.buiness-header nav .nav-right {
        padding-top: 0;
    }
    .inner-header ~ main {
        margin-top: 6.4em;
    }
    button.navbar-toggler{
        display: none;
    }

}



@media screen and (min-width:2400px){
    .product-megamenu .megamenu-right {
        height: 57rem;
    }
}


/* Notification bar */

/* 
@media (max-width: 1799px){
    header{
        top: 39px;
    }
    header.header-sticky {
        top: 33px;
    }
    header.buiness-header{
        top: 43px;
    }
    header.buiness-header.header-sticky {
        top: 37px;
    }
}
@media (max-width: 1599px){
    header {
        top: 36px;
    }
    header.header-sticky {
        top: 30px;
    }
}
@media (max-width: 575px){
    header {
        top: 36px;
    }
}
@media (max-width: 422px){
    header {
        top: 58px;
    }
    header.header-sticky {
        top: 52px;
    }
}
@media (max-width: 400px){
    header.header-sticky {
        top: 26px;
    }
    header.inner-header.header-sticky {
        top: 49px;
    }
} */