.header-footer-group nav {background: #8908d4 !important;}
body.menu-open .NavMenu {max-height:1000px;opacity:1; transform:translateY(0);}
header{box-shadow:0 10px 20px rgb(0,0,0,5%),0 6px 6px rgb(0,0,0,6%)}
header nav{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;background:linear-gradient(178deg, #b93fff -2.17%, #6c00ab 100%); }
.menu-wrapper {margin: auto;}
#menubrop,.bartoggle{display:none}
.NavMenu{flex:10;list-style:none;position:relative;display:flex;justify-content:center}
.NavMenu li{list-style: none;}
.NavMenu>li {margin: 0;}
.NavMenu li input{display:none}
.NavMenu li a{display:block;padding:12px 22px;font-size:16px;text-decoration:none;text-transform:capitalize;color:#fff;position:relative}
.NavMenu li a label{cursor:pointer;appearance:none;display:block;position:relative}
.NavMenu li ul a label::after{transform:rotate(-90deg);right:-4px;top:6px;border-top:4px solid;border-right:4px solid transparent;border-bottom:0;border-left:4px solid transparent}
.NavMenu li a label::after{position:absolute;font-size:20px;display:inline-block;margin-left:10px;vertical-align:3px;content:"";border-top:6px solid;border-right:6px solid transparent;border-bottom:0;border-left:6px solid transparent;transition:transform .2s ease}
.NavMenu>li>a label::after{right:-19px;top:10px}
.NavMenu li ul{position:absolute;display:flex;flex-direction:column;background-color:#fff;min-width:210px;border-bottom:2px solid #bf51ff;top:100%;box-shadow:0 3px 5px rgb(0 0 0/20%);transition:all .5s;transform:translateY(10px);-webkit-transform:translateY(10px);-moz-transform:translateY(10px);-ms-transform:translateY(10px);-o-transform:translateY(10px);visibility:hidden;opacity:0}
.NavMenu li ul li{position:relative;border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; margin-left: 0; margin-top: 0;}
.NavMenu li ul li:last-child {border-bottom: 0;}
.NavMenu li ul li a{ font-size: 14px; color:#000;padding:8px 10px;display:block;transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s}
.NavMenu li ul li ul li a{padding:7px;font-size:13px}
.NavMenu li ul li ul{max-height:450px;overflow:hidden;overflow-y:auto;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#A249ED #f0f0f0}
.NavMenu li ul li ul{position:absolute;left:100%;top:0}
.header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:#fff}
.bartoggle{width:32px;left:10px;height:8px;position:relative;display:inline-block;cursor:pointer;top: 9px;z-index:999}
.bartoggle .line{position:absolute;left:0;right:0;height:3px;background:#000;border-radius:2px;transition:transform .35s cubic-bezier(.25,1,.5,1),top .35s cubic-bezier(.25,1,.5,1),opacity .25s ease}
.bartoggle .line:first-child{top:0}
.bartoggle .line:nth-child(2){top:10px}
.bartoggle .line:nth-child(3){top:20px}
#menubrop{display:none}
.NavMenu{list-style:none;margin:0;padding:0;display:flex;gap:20px}

@media (max-width: 991px) {
#menubrop:checked ~ .NavMenu,
#menubrop:checked ~ .NavMenu ~ .bartoggle .line:nth-child(1) { /* fallback */ }
body:has(#menubrop:checked) .bartoggle .line:nth-child(1) { top: 10px; transform: rotate(45deg); }
body:has(#menubrop:checked) .bartoggle .line:nth-child(2) { opacity: 0; }
body:has(#menubrop:checked) .bartoggle .line:nth-child(3) { top: 10px; transform: rotate(-45deg); }
}
@media(min-width:992px){
.NavMenu li ul li a:hover{background:#bf51ff;color:#fff;padding-left:14px}
.bartoggle{display: none;}
.NavMenu li ul li:hover>ul,.NavMenu li:hover>ul{visibility:visible;opacity:1;transform:translateY(0);}
}
@media(max-width:991.98px){
.NavMenu>li{margin:0}
header{background:#fff;box-shadow:none}
.NavMenu{flex:12;position:fixed;flex-direction:column;background-color:#8908d4;left:0;top:auto;height:100vh;z-index:-1;padding:0;justify-content:start;overflow-y:scroll;transition:all .5s;transform:translateX(-100%)}
.NavMenu li ul,.NavMenu li ul li ul{position:initial;left:0;visibility:visible;opacity:1;top:0;display:none}
.NavMenu li a{padding:8px 8px 8px 15px; border-bottom:1px solid #bf51ff;}
.NavMenu li ul li ul{background:#6c189d;position:inherit;}
.NavMenu li ul li ul li a{font-size:14px;color:#fff;font-weight:400;text-transform:initial;padding:7px 15px 7px 30px}
.NavMenu li a label::after{right:10px;}
.NavMenu li input:checked+ul,.NavMenu li ul li input:checked+ul{display:flex;flex-direction:column;margin-bottom:15px}
input:checked+.NavMenu{transform:translateY(15px)}
header nav {height: 44px;}
.NavMenu {gap: 8px;}
.NavMenu li ul{position:initial;display:none;opacity:1;visibility:visible;transform:none;background:#bf51ff}
.NavMenu li input:checked+ul{display:block}
.NavMenu li a{border-bottom:1px solid #bf51ff}
.NavMenu li ul li a{color:#fff;padding-left:30px}
}
@media(max-width:991px){
.NavMenu{width:60%}
}
@media(max-width:767px){
.NavMenu{width:90%}
}
@media (min-width: 992px) {
.NavMenu li:hover>ul{opacity:1;transform:translateY(0);visibility:visible}
.NavMenu li ul.two-column-menu{display:grid!important;grid-template-columns:repeat(2,minmax(210px,1fr));max-height:500px;gap:0;opacity:0;transform:translateY(10px);visibility:hidden;transition:all .35s ease}
.NavMenu li:hover>ul.two-column-menu{opacity:1;transform:translateY(0);visibility:visible}
.NavMenu li:hover>ul{opacity:1;transform:translateY(0);visibility:visible;}
.NavMenu li:hover>a>label::after{transform:rotate(180deg)}
}
@media (max-width: 991.98px) {
.NavMenu li ul.two-column-menu{display:none;grid-template-columns:1fr}
.menu-wrapper {margin: inherit;}
}