body::before{content: ''; position: fixed; inset: 0; background: #212121bb;  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 4; opacity: 0; display: none;}
body.show-overlay::before{ display: block; opacity: 0; animation-name: fadeInLine; animation-fill-mode: both; animation-duration: .5s;}
@keyframes fadeInLine {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
header{position: fixed;z-index: 999;left: 0;top: 0;width: 100%;--tborder: 3px;transition: .2s;}
header::before{position: absolute;content: '';inset: 0;height: 0;/* background-color: var(--color-dark); */transition: .6s all;-webkit-transition: .6s all;-moz-transition: .6s all;-ms-transition: .6s all;-o-transition: .6s all;z-index: -1;}
header.header-sticky{border-color: transparent;background: var(--color-dark);transition: .2s;}
header.header-sticky::before{height: 100%;}
header::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--tborder);
    background-color: linear-gradient(to right, var(--color-blue), var(--color-prime));
    z-index: 2;
}
header.inner-header.header-sticky a.menu-link {
    color: #fff;
    padding-block:1.5rem;
}
header nav{--padding-block: 2.5rem; --column-gap: 10rem; display: flex; padding-inline: 4.6rem 6.5rem; }
header.header-sticky nav{--padding-block:1rem 0.5rem;}

header .nav-left{border-top: var(--tborder) solid var(--color-blue); height: auto; padding-block: var(--padding-block); padding-right: calc(var(--column-gap) * .5); transition: .6s all; -webkit-transition: .6s all; -moz-transition: .6s all; -ms-transition: .6s all; -o-transition: .6s all; position: relative; }

header .nav-right{  padding-left: calc((var(--column-gap) * .5) - 1.2rem); display: flex; align-items: center; justify-content: end;gap: 2.5rem; flex-grow: 1; border-top: var(--tborder) solid var(--color-prime); padding-block: var(--padding-block); transition: .6s all; -webkit-transition: .6s all; -moz-transition: .6s all; -ms-transition: .6s all; -o-transition: .6s all; position: relative;}
.header-sticky .menubar .menu-link {
    padding-block: 1.5rem;
}

.navbar-brand{ width: 16.5rem;  display: block;transition: .6s all; -webkit-transition: .6s all; -moz-transition: .6s all; -ms-transition: .6s all; -o-transition: .6s all; position: relative;}
.navbar-brand::after{content: ''; position: absolute;  right: calc(var(--column-gap) * -.5); top: calc(var(--padding-block) * -1); height: calc(100% + (var(--padding-block) * 2)); width: 2px; background: #fff5}
header .navbar-brand img{ width: 100%; transition: .6s all; -webkit-transition: .6s all; -moz-transition: .6s all; -ms-transition: .6s all; -o-transition: .6s all; }
header.header-sticky .navbar-brand img{scale: .8;}


.menubar{display: flex; margin-bottom: 0; position: relative; padding-inline: .5rem;z-index: 99; column-gap: 2.5rem;}
.menubar .menu-item{ padding-inline: 0rem; }
.menubar .menu-link{ font: var(--text-18); color: var(--color-white); display: block; border-bottom: 4px solid transparent; cursor: pointer; position: relative; z-index: 1; transition: .4s all; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; -o-transition: .4s all; }
.menubar .menu-link:hover{color: var(--color-prime);}
.menubar .has-submenu .menu-link:hover{color: var(--color-white);transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all; }
.menubar .menu-item.has-submenu:hover{transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all; }
.menubar .menu-item.has-submenu:where(:not(:first-child)):hover{transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; -ms-transition: .3s all; -o-transition: .3s all; }

.menubar .submenu{
    position: absolute;
    top: 100%;
    padding:2.5rem 2rem;
    background: #D82727aa;
    backdrop-filter: blur(5px);
    left: 0;
    transition: 1.2s all;
    -webkit-transition: 1.2s all;
    -moz-transition: 1.2s all;
    -ms-transition: 1.2s all;
    -o-transition: 1.2s all;
    overflow-x: clip;
    display: none;
    transition: left .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 25rem;
}
/* .menubar .menu-item:nth-child(1) .submenu{left: calc(var(--column-gap) * -.3);} */
/* .menubar .submenu::before{position: absolute; content: ''; height: 20vh; background: #D82727aa; backdrop-filter: blur(5px); bottom: 100%; width: 100%; left: 0; z-index: -1;}
.menubar .submenu::after{position: absolute; content: ''; height: 80vh; background: #D82727aa; backdrop-filter: blur(5px); top: 100%; width: 100%; left: 0; z-index: -1; margin-top: 0px;} */
.menubar.side_menu .submenu::before{position: absolute; content: ''; height: 20vh; background: #D82727aa; backdrop-filter: blur(5px); bottom: 100%; width: 100%; left: 0; z-index: -1;}
.menubar.side_menu .submenu::after{position: absolute; content: ''; height: 80vh; background: #D82727aa; backdrop-filter: blur(5px); top: 100%; width: 100%; left: 0; z-index: -1; margin-top: 0px;}
.menubar .submenu a{ display: block; color: var(--color-white); white-space: nowrap; padding-block: 1rem; font: var(--text-16); min-width: 14.5rem; transition: .4s all; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; -o-transition: .4s all; }
.menubar .submenu a:hover{translate: .8rem 0}
.menubar .submenu li{border-bottom: 1px solid #fff3;}

header .bars{ width: 2rem; height: 1.8rem; position: relative; isolation: isolate; background: transparent; display: flex; flex-direction: column; justify-content: space-between; z-index: 999; transition:.4s all ; -webkit-transition:.4s all ; -moz-transition:.4s all ; -ms-transition:.4s all ; -o-transition:.4s all ; }
header .bars span{ width: 100%; height: 2px; display: block; background-color: #fff; transition: .4s all; -webkit-transition: .4s all; -moz-transition: .4s all; -ms-transition: .4s all; -o-transition: .4s all; }
header .bars span:nth-child(2){width: 80%;}
header .bars.active{rotate: 45deg}
header .bars.active span{position: absolute; top: 50%; left: 0; width: 100%; translate: 0 -50%;}
header .bars.active span:last-child{rotate: 90deg;}
header .bars::before{ content: ''; position: absolute; width: 220%; aspect-ratio: 1/1; top: 50%; left: 50%; z-index: -1; translate: -50% -50%; background: #D82727aa; backdrop-filter: blur(5px); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
header.header-sticky .bars::before{ background: inherit;}
 /* .menubar .menu-item.has-submenu:nth-child(3):hover {
        padding-right: 9.5rem;
    }
    .menubar .menu-item.has-submenu:nth-child(4):hover {
        padding-right: 9.5rem;
    } */
.menubar .menu-link{border:0px;padding-block:3rem 2.5rem;}

@media (min-width: 1600px){
    header nav{padding-inline: 7rem 9rem;--padding-block: 3.5rem;--column-gap: 15rem;}
    .navbar-brand{ width: 24rem;}
    /* header.header-sticky .navbar-brand{width: 23rem;} */
    header .bars{ width: 2.3rem; height: 1.8rem;}
    header.header-sticky nav{--padding-block: 1rem 0.5rem;}
    .menubar{column-gap: 4rem;}
    header::after{height: 5px;}
    .navbar-brand::before{height: 5px;}
    .inner-header nav{--padding-block: 2.2rem;  }
    header .nav-right {
        gap: 4rem;
    }
    header .bars::before {
        width: 200%;
    }
}

@media (min-width: 2200px){
     header nav{padding-inline: 10rem 12.5rem; --column-gap: 20rem;}
    .menubar{column-gap: 7rem;}
    .navbar-brand{ width: 40rem;}
    header .bars{width: 3rem;
        height: 2.5rem;}
    header .bars span{height: 2px;}

    

header.inner-header.header-sticky a.menu-link {
    padding-block: 5rem;
}

    /* .menubar .menu-item.has-submenu:where(:not(:first-child)):hover {
        padding-left: calc((var(--column-gap) * .5) - 4.1rem);
    } */

}

@media (min-width: 2500px){
    header nav{padding-inline: 10rem 12.5rem; --column-gap: 20rem;}
    .menubar{column-gap: 7rem;}
    .navbar-brand{ width: 40rem;}
    header .bars{width: 3rem;height: 2.5rem;}
    header .bars span{height: 2px;}
   .inner-header .navbar-brand{width: 40rem;}
.menubar .menu-link { font: var(--text-13);padding-block: 5rem;}
    /* .menubar .menu-link {font: var(--text-11);} */
}
@media (min-width: 3500px){
    header nav{padding-inline: 10rem 12.5rem; --column-gap: 20rem;}
    .menubar{column-gap: 7rem;}
    .navbar-brand{width: 40rem;}
    header .bars{width: 3rem;height: 2.5rem;}
    header .bars span{height: 2px;}

    .menubar .menu-link {font: var(--text-10);}
   .inner-header .menubar .menu-link {font: var(--text-13);}
    .menubar .menu-item.has-submenu:hover{width: 100%;}
    .menubar .submenu a {
        padding-block: 2.5rem;
        min-width: 40rem;
    }
    .inner-header .navbar-brand{width: 40rem;}
    
    .side_menu.menubar .submenu {
    max-width: 55rem;
}
}


/* inner menu css start here*/

.inner-header .menubar .menu-link {
    color: var(--body-color);
    font-weight: bold;
    white-space: nowrap;
}
/* .inner-header .navbar-brand::after {
    width: 1px;
    background: var(--body-color);
    opacity: 35%;
} */

.inner-header nav{--padding-block: 3.2rem;  }


@media (min-width: 1600px){
    .inner-header nav{--padding-block: 1.8rem;  }
   .inner-header .menubar .submenu a {font: var(--text-13);}
    .menubar .submenu {
        width: 28rem;
    }
    header.inner-header.header-sticky a.menu-link {
        padding-block: 3.5rem 3rem;
    }
}
@media (min-width: 2500px){
    .menubar .submenu {
        width: 32rem;
    }
    .inner-header .menubar .submenu a {font-size: 21px;}
}


@media (min-width: 3500px){
    .inner-header .menubar .submenu a {font-size: 23px;}
}
@media (min-width: 3000px){
    .inner-header nav{--padding-block:3.2rem;  }
    .menubar .submenu {
        width: 38rem;
    }
}

@media(max-width: 1499px) and (min-width: 1299px) {
 .inner-header nav{--padding-block: 1.2rem;  }
}
@media(max-width: 1600px) and (min-width: 1500px) {
.inner-header nav{--padding-block: 2.2rem;  }
}

img.for-sticky {opacity: 0;}
a.navbar-brand{display: grid;}
header.inner-header .navbar-brand img {grid-area: 1/1;}
header.inner-header.header-sticky .navbar-brand img.img-fluid.for-sticky { opacity: 1;}
header.inner-header.header-sticky .navbar-brand img.img-fluid.for-wsticky {opacity: 0;}
header.inner-header.header-sticky .navbar-brand::after {background: #fff;}
.show-overlay li.menu-item.has-submenu a {color: #fff}


body.show-overlay li.menu-item a {
    color: #fff !important;
}