header .container{display: flex;justify-content: space-between; align-items: center; padding: 24px 48px;}
header .icon-menu,header .icon-search{cursor: pointer;position: relative;z-index: 1;}
header .icon-menu:before {font-size: 28px;font-weight: 600;}
header .icon-search:before{font-size: 28px;font-weight: 100;}
.header-menu ul{display: flex;gap: 24px;align-items: center;}
.header-menu ul li{display: flex;gap: 24px;align-items: center;font-size: 14px;padding: 0px;}
.header-menu ul li a{z-index: 1;}







/* Hamburger Button */
.menu-toggle {
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-menu {
    width: 25px;
    height: 2px;
    background: #000;
    position: relative;
    display: inline-block;
    transition: 0.3s ease;
}

.icon-menu:before,
.icon-menu:after {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background: #000;
    left: 0;
    transition: 0.3s ease;
}

.icon-menu:before {
    top: -8px;
}

.icon-menu:after {
    top: 8px;
}

/* Animate to X */
.menu-toggle.active .icon-menu {
    background: transparent;
}
.menu-toggle.active .icon-menu:before {
    top: 0;
    transform: rotate(45deg);
}
.menu-toggle.active .icon-menu:after {
    top: 0;
    transform: rotate(-45deg);
}

/* Lock body scroll when mega menu is open */
body {
    scrollbar-gutter: stable;
}
body.mega-menu-open {
    overflow: hidden;
}

/* Wrapper covers full screen */
.mega-menu-wrapper {
    position: fixed;
    top: 91px;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0);
    transition: opacity 0.4s ease, visibility 0.4s ease, background 0.4s ease;
}
.mega-menu-wrapper::after{ content: "";
    width: 100%;
    position: absolute;
    left: 0px;
    height: 100%;
    top: 0px;
    display: block;
    background: rgba(0, 0, 0, 0.2); /* Shading on right side */
    z-index: -1;}
/* Active overlay */
.mega-menu-wrapper.open {
    opacity: 1;
    visibility: visible;
    background: rgba(0, 0, 0, 0.2);
}

/* Left panel */
.mega-menu {
    width: 910px;
    max-height: calc(100vh - 91px);
    /* Create a permanent beige background on the left column */
    background: linear-gradient(to right, var(--beige) 0%, var(--beige) 440px, transparent 440px);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    overflow-y: auto;
    /* margin-top: 91px; */
    overflow-x: hidden;
}
/* Slide in */
.mega-menu-wrapper.open .mega-menu {
    transform: translateX(0);
}
header{position: fixed;left: 0px;top: 0px;z-index:99;width: 100%;background-color: var(--beige);box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);height: 91px;transition: all 0.6s ease;}
header.home-header-scrolled{background-color: transparent; box-shadow: none;}
.mega-menu-open header.home-header-scrolled{background-color: var(--beige);}
header.header-hidden { transform: translateY(-100%); }
/* .mega-menu-open{overflow: hidden;height: 100vh;} */
.mega-menu{position: relative;}
/* .mega-menu::after{content: "";display: block; position: absolute;background: var(--beige); height: 100vh; left: 0px;top: 0px;    z-index: -1;} */

/* Use CSS Grid on the LI elements to stack them together */
.mega-menu > .menu-item {
    display: grid;
    grid-template-columns: 440px 470px;
    grid-template-rows: min-content 1fr;
    grid-template-areas: 
        "link   submenu"
        "custom submenu";
    padding: 0;
}

.sub-menu {
    grid-area: submenu;
    background: var(--asha-grey);
    padding: 24px 32px 24px 12px; 
    width: 100%; 
    box-sizing: border-box; 
    border-top: 1px solid rgba(0, 0, 0, 0.2); 
    border-left: 1px solid rgba(0, 0, 0, 0.2); 
}
.mega-menu.active>.menu-item{padding-bottom: 0px;}

.mega-menu a{font-weight: 600;}
.menu-item-has-children li{ margin-left:20px;}
.menu-item-has-children li a{ font-weight: 400;}

/* Menu Links */
.mega-menu>.menu-item>a{grid-area: link; display: inline-block;border-top: 1px solid rgba(0,0,0,0.2); padding-top: 18px;padding-bottom: 18px; background: var(--beige); width: 440px;}
.mega-menu>.menu-item>a::before{content: "\e94d";font-family:'mmkicons' !important;color: #3e3552;width: 30px;height: 30px;display: inline-flex;border: 1px solid var(--primary);border-radius: 30px;padding-left: 2px;margin-right: 12px;margin-left: 12px;transition: .3s all;text-align: center;justify-content: center;line-height: 28px;font-size: 16px; font-weight: 100;}
.mega-menu>.menu-item.active>a::before{background-color: var(--secondary);transform: rotate(90deg);}

.menu-item-has-children li a::before{content: "";width: 12px;height: 12px;border-radius: 12px;border: 3.5px solid var(--secondary);display: inline-block;margin-right: 10px;}
.menu-item-has-children li.current-menu-item > a::before, 
.menu-item-has-children li.current_page_item > a::before {
    background-color: var(--secondary);
}

.mega-menu .current-menu-item > a, 
.mega-menu .current_page_item > a, .mega-menu li > a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.mega-menu .menu-item-388 .sub-menu li > a{text-decoration: none;}
.menu-item-388.current-menu-item .custom-level-1-ul li a{text-decoration: underline;}
.mega-menu .menu-item-388 .sub-menu li > a:hover{ text-decoration: underline;}
.menu-item-388.current-menu-item .sub-menu li > a::before{background-color:transparent;}

/* Ensure parent links never get the underline, even if active */
.mega-menu > .menu-item-has-children > a {
    text-decoration: none !important;
}

/* .mega-menu{overflow-y: auto; overflow-x: hidden;}
.mega-menu::-webkit-scrollbar-track{background-color:transparent;}
.mega-menu::-webkit-scrollbar-thumb{background:transparent;} */
.mega-menu::-webkit-scrollbar { width: 6px; }
.mega-menu::-webkit-scrollbar-track { background-color: transparent; }
.mega-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
@media (min-width:1200px){
    .mega-menu>.menu-item>a:hover::before{background-color: var(--secondary);transform: rotate(90deg);}
.mega-menu>.menu-item.active>a:hover:before{transform: rotate(0deg);}
}
@media (max-width:767px){
header .container{padding: 24px;}
.mega-menu{width: 100%; background: var(--beige);}    
.mega-menu > .menu-item{display: block; width: 100%; padding:0;}
.logo svg{width: 195px;}
.sub-menu{position: static; min-width: 100%; width: 100%; margin-top: 0px; border-top: 0px; border-left: 0px; padding-left: 20px; padding-right: 20px;}
.mega-menu-open::after{display: none;}
}

/* Custom level-1 sublink styles */
.custom-level-1-ul {
    grid-area: custom;
    list-style: none;
    padding: 0 0 18px 0;
    margin: 0;
    width: 440px;
    background: var(--beige);
    align-self: start;
}

.custom-level-1-ul li a {
    padding-left: 54px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width:767px){
    .custom-level-1-ul { width: 100%; }
}