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: 2em; 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: 5em; padding-top: 2rem;}
header nav .menubar{display: flex; column-gap: 2.7em; margin-bottom: 0;}
.menu-link{display: flex; padding-block: .5em; column-gap: .69em; align-items: center; font-size: var(--text-16); color: #fff; position: relative;}
.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: 80%; 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: 1rem;}
header.header-sticky .menu-link, .inner-header .menu-link{color: var(--color-black);}
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: 35px; left: -1em; display: none;}
header.header-sticky .submenu{padding-top: 12px;}
.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: 88px; width: 100%; max-height: calc(90vh - 100px); padding: 4em 0 0rem; padding-inline: 0; display: none;}
header.header-sticky .megamenu{top: 44px;}
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-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;}
.product-megamenu .megamenu-left .btn{width: 100%; text-align: left; padding: .5em 1.4em; 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); }
.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: 70vh;  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: 1em; font-size: var(--text-16); font-weight: 700; color: var(--color-accent); align-items: center; padding-block: 2.5em;}
.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: 9.5em;}


@media (max-width: 1700px){
    header .navbar-brand{ max-width: 160px;}
    .product-megamenu .megamenu-inner{background-size: 220px}
    .product-megamenu .megamenu-inner{padding: 2em 2em 2em 4em;}
    .product-megamenu .megamenu-left p{padding-right: 6rem;}
    .product-megamenu .megamenu-left{padding-right: 3.5em;}
}
@media (max-width: 1399px){
    header .navbar-brand{ max-width: 145px;}
    .megamenu{padding-top: 3em;}
    .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;}
    
}


@media (max-width: 991.98px){
    header nav {justify-content: center;}
    header nav .nav-right{display: none;}
}