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}
header::before{ position: absolute; content: ''; inset: 0; height: 0;background-color: var(--color-black);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;}
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 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;  overflow-x: clip; 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; overflow-x: clip; position: relative; }


.navbar-brand{ width: 17.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} */
@media(max-width: 991px){
    .navbar-brand::after{display:none;}
}
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: .7;}


.menubar{display: flex; margin-bottom: 0; position: relative; padding-inline: .5rem;z-index: 99; column-gap: 3.5rem;}
.menubar .menu-item{ padding-inline: 0rem; position: relative;}
.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; padding-block: 3rem 2.5rem;}
.header-sticky .menubar .menu-link { padding-block: 2rem 1.5rem; }
.menubar .menu-link:hover{color: var(--color-prime);}
.menubar .has-submenu .menu-link:hover{color: var(--color-white);}
.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(5); 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(5); bottom: 100%; width: 100%; left: 0; z-index: -1;}
.menubar .submenu::after{position: absolute; content: ''; height: 80vh; background: #D82727aa; backdrop-filter: blur(5); top: 100%; width: 100%; left: 0; z-index: -1;} */
.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; 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;}
 /* .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;
    } */


@media (min-width: 1600px){
    header nav{padding-inline: 7rem 9rem;--padding-block: 4.5rem;--column-gap: 15rem;}
    .navbar-brand{ width: 27rem;}
    /* header.header-sticky .navbar-brand{width: 23rem;} */
    /* header .bars{ width: 2.5rem; height: 2.2rem;} */
    /* header.header-sticky nav{--padding-block: 0rem;} */
    .menubar{column-gap: 4rem;}
    header::after{height: 5px;}
    .navbar-brand::before{height: 5px;}
        .menubar .submenu a {
    font: var(--text-13);
}
    .menubar .submenu {
        width: 28rem;
    }
    .header-sticky .menubar .menu-link {
        padding-block: 3.5rem 3rem;
    }
  
}


@media (min-width: 2500px){
    header nav{padding-inline: 10rem 12.5rem; --column-gap: 20rem;}
    .menubar{column-gap: 6rem;}
    .navbar-brand{ width: 40rem;}
header .bars {
    width: 4rem;
    height: 3rem;
}
.menubar .submenu {
        width: 32rem;
    }
            .menubar .submenu a {
    font-size: 21px;
}
    header .bars span{height: 2px;}

    .menubar .menu-link { font: var(--text-13);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: 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);} */
    .menubar .menu-item.has-submenu:hover{width: 100%;}
    .menubar .submenu a {
        padding-block: 2.5rem;
        min-width: 40rem;
    }
    .menubar .submenu {
        width: 38rem;
    }
                .menubar .submenu a {
    font-size: 23px;
}

    .side_menu.menubar .submenu {
    max-width: 55rem;
}
}
@media (max-width: 1400px){
    .header-sticky .menubar .menu-link {
        padding-block: 1.5rem 1rem;
    }
}