.header{
 width:100%;
 padding: 30px 0;
 /* height: 116px; */
 border-bottom: 1px solid rgba(223, 223, 223, 1);
}
.header.sticky{
 transition: all 1ms ease-in;
 backdrop-filter: blur(5px);
 background-color: #ffffffbc;
}
ul.header-menu{display: flex; align-items: center; gap:40px;}
ul.header-menu li a{color: var(--grey);}
ul.header-menu li a:hover{color: var(--orange);}
ul.header-menu li a:is(:visited, :link, :active).active{color: var(--orange);}
select.language-selection{border: 0; background-color: transparent; color: var(--grey); outline: none;}
.header-end-group{gap: 30px; background-color: transparent;}
.header-navigation button { background: none; border: none; padding: 0;}
.topnav__open[aria-expanded=true] + .topnav__menu {translate: 0;}
.topnav__close { display: block; margin-inline-start: auto; margin-block-end: 8rem;}
.topnav__close img { width: 2.5rem;}

/* media query */
@media (max-width:1199px){
 ul.header-menu{gap: 20px;}
}
@media (max-width:991px){
.header-navigation {flex-direction:row-reverse; justify-content: space-between !important;}
.header-end-group {display:none !important;}
.navigation-menu-content{display: flex; align-items: center; justify-content: end;}
.navigation-brand-content{display: flex; align-items: center; justify-content: start;}
}

@media (width >= 992px) {
 .header-navigation button { display: none;}
}
@media (prefers-reduced-motion) {
 .topnav__open[aria-expanded=true] + .topnav__menu { opacity: 1; }
}
@media (width < 992px) {
 .topnav__menu { position: fixed; inset: 0; padding: 1.5rem; background-color: var(--orange); 
  translate: 100vw 0; transition: translate 0.5s ease-in-out; width: 50%; height: 100lvh; z-index:999; overscroll-behavior:none; margin-left: auto;}
 .topnav__menu::-webkit-scrollbar{display: none;}
 .header-menu li a{color: #fff !important;}
 .header-menu{flex-direction: column;}
 ul.header-menu li a:hover{color: black;}
 ul.header-menu li a:is(:link, :active, :visited).active{color: black;}
}
@media (width < 992px) and (prefers-reduced-motion) {
 .topnav__menu { translate: 0; opacity: 0; transition: opacity 500ms ease-in-out;}
}

@media (width < 576px){
 .topnav__menu{width: 75%;}
}