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: 0;
    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
}
/* Default (white logo) */
.navbar-brand img {
    filter: brightness(0) invert(1); /* makes SVG white */
    transition: all 0.3s ease;
    padding: 8px;
}

/* On scroll (original color) */
.navbar.scrolled .navbar-brand img {
    filter: none;
}

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: 0;
    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(/public/assets/images/down-arrow.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%
}

.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: 0
}

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: 0 solid transparent
}

header.header-sticky .nav-right {
    margin-bottom: 0
}

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: 0
}

.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
}

.has-submenu>a {
    position: relative
}

.megamenu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    max-height: calc(90vh - 100px);
    padding: 0 0 0;
    padding-inline: 0;
    display: none
}

header.header-sticky .megamenu {
    top: 100%;
    z-index: 999
}

header.header-sticky .megamenu {
    padding: 0 0 0
}

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: transparent linear-gradient(294deg, #fff 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-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: 0;
    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 {
        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: .1em
    }
    .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 .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
    }
}