/* ================================================== normal header start ================================================ */
.site-header{padding:30px 0 ;  z-index: 100;position: fixed; top: 0; left: 0; width: 100%;transition: 0.3s ease-in-out;border-bottom: 1px solid var( --gray-01);}
.site-header .container{display: flex; align-items: center; justify-content: space-between; }
.relative-header{background: linear-gradient(90deg, #293239 73.33588181880482%, #556F73 100%);}

/* sticky */
.site-header.sticky{padding: 22px 0; box-shadow: 0 2px 10px rgb(0 0 0 / .1);}
.site-header:after{opacity: 0;content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg, #293239c0 73.33588181880482%, #556f73df 100%);backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);z-index: -1;}
.site-header.sticky:after{opacity: 1;}

body:has(.toggled),html:has(.toggled) { overflow: hidden; }

/* nav */
.site-header .main-navigation {display: flex; align-items: center; gap: 44px;}
.site-header #primary-menu{display: flex; align-items: center; gap: 16px;}
.site-header #primary-menu li {position: relative;margin-inline:10px;}
.site-header #primary-menu li a{color: var(--off-white);font-family: var(--NeuzeitSbook);font-weight: 400;font-size: 18px;line-height: 22px;transition: 0.3s ease-in-out;}
.site-header #primary-menu li.current-menu-item a,
.site-header #primary-menu .current-menu-parent > a{color: var(--gray) !important;}
.site-header #primary-menu li a:hover{color: var(--gray);}
/* .site-header #primary-menu li.current-menu-item a img,
.site-header #primary-menu li a:hover img{filter: brightness(0) saturate(100%) invert(70%) sepia(38%) saturate(481%) hue-rotate(130deg) brightness(86%) contrast(88%);} */
.site-header #primary-menu > .green-fill-btn,
.site-header #primary-menu > .outline-green-btn {margin-inline:0px !important;}
/* .site-header #primary-menu li.menu-item-has-children{pointer-events: none;} */

/* logo */
.site-header .custom-logo-link{max-width: 154px;height: auto;width:154px;}
.site-header .custom-logo-link img{max-width: 100%;height: 100%;margin-bottom: 3px;}

/* btn */
.site-header #primary-menu li.header-btn a{padding: 12px 14px;font-family: var(--NeuzeitSbook);font-weight: 500;font-size: 18px;line-height: 22px;text-transform: capitalize;transition: all 0.3s ease-in-out;border-radius: 30px;border: 2px solid;}
.site-header #primary-menu li.green-fill-btn a{background-color: var(--green);color: var(--white) !important;border-color: var(--green);}
.site-header #primary-menu li.green-fill-btn a:hover{background-color: var(--off-white);color: var(--gray-02) !important;border-color: var(--off-white);}
.site-header #primary-menu li.outline-green-btn a{background-color: var(--f0);color: var(--white) !important;border-color: var(--gray-01);}
.site-header #primary-menu li.outline-green-btn a:hover{background-color: var(--green);color: var(--white) !important;border-color: var(--green);}


/* submenu */
/* .site-header .sub-menu{padding: 10px; min-width: 200px;border-radius: 14px; position: absolute;left: 50%;
    transform: translateX(-50%);top: calc(100% + 11px); width: auto; opacity: 0; visibility: hidden; transition: all .5s ease-in 0s; -webkit-transition: all .5s ease-in 0s; border: none; display: block !important; z-index: 111;box-shadow: 0 0 10px rgb(0 0 0 / .17); -webkit-box-shadow: 0 0 10px rgb(0 0 0 / .17);} */
.site-header .sub-menu { padding: 10px; min-width: 200px; border-radius: 14px; position: absolute; left: 50%; top: calc(100% + 11px); transform: translateX(-50%); opacity:0; visibility: hidden; border: 1px solid rgba(255, 255, 255, 0.08); display: block !important; z-index: 9999; background: rgba(85, 111, 115, 0.28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); }
    /* .site-header .sub-menu:after{content: '';position: absolute;top: 0px;left: 0;width: 100%;height: 100%;backdrop-filter: blur(20px);z-index: -1;
    -webkit-backdrop-filter: blur(20px);background-color: #556f7391;} */
.site-header #primary-menu li.focus .sub-menu{opacity: 1;visibility: visible;}
.site-header #primary-menu li .sub-menu li{text-align:center;margin-block: 6px;}
.site-header #primary-menu li .sub-menu li a{color: var(--white);padding:0;border:none;}
.site-header #primary-menu li .sub-menu li a:hover{color: var(--gray);background-color:var(--f0);}
.menu-item-has-children:hover .sub-menu{opacity: 1;visibility: visible;}

/* toggle button */
.main-navigation .menu-toggle                           {position: relative; width: 40px; height: 40px; cursor: pointer; display: -webkit-box; display: -ms-flexbox;display: none;  justify-content: center; align-items: center; flex-direction: column; background: none; border: 0;}
.main-navigation.toggled .menu-toggle span:nth-child(1) { width: 23px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.main-navigation.toggled .menu-toggle span:nth-child(2) { opacity: 0; }
.main-navigation.toggled .menu-toggle span:nth-child(3) { width: 23px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.main-navigation .menu-toggle span                      {height: 2px; margin: 3px 5px; width: 28px; display: block; background: #fff; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; transform-origin: right center;}
.main-navigation .menu-toggle span:nth-child(2)         {width: 22px; }


.site-header.nav-up{transform: translateY(-100%);}
.site-header.nav-down{transform: translateY(0);}




/* ================================================== media query start ================================================ */
@media screen and (max-width:1199px){
    /* ================================================== header start ================================================ */
    .site-header{padding:22px 0;}
    /* sticky */
    .site-header.sticky{padding: 20px 0;}
    /* nav */
    .site-header .main-navigation {gap: 20px;}
    .site-header #primary-menu{gap: 8px;}
    .site-header #primary-menu li { position: relative; margin-inline: 6px; }
    .site-header #primary-menu li a{font-size: 15px;line-height: 20px;}
    .site-header #primary-menu > li:first-child a{margin-right: 7px;}

    /* logo */
    .site-header .custom-logo-link{max-width: 138px;width: 138px;}

    /* btn */
    #primary-menu li.green-fill-btn a,
    #primary-menu li.outline-green-btn a{padding: 8px 12px;font-size: 16px;line-height: 20px;}

    /* submenu */
    /* .site-header .sub-menu{padding: 16px; min-width: 199px;} */
    
   

    
}
@media screen and (max-width:991px){
    /* ================================================== normal header start ================================================ */
    .site-header{padding: 15px 0;}
    /* sticky */
    .site-header.sticky{padding: 13px 0;}
    .site-header #primary-menu > li:first-child a img { height: 18px; width: 18px;}
    /* toggle menu */
    .site-header .main-navigation {flex-direction: row-reverse;gap:15px;}
    .site-header .main-navigation .menu-toggle {display: flex;}
    .site-header .toggled .menu-primary-menu-container {transform: translateX(0); }
    /* menu nav */
    .site-header .menu-primary-menu-container {padding-top: 80px;position: fixed; z-index: -1; top: 0; right: 0; height: 100dvh; width: 100%;transform: translateX(100%); background-color: #293239eb;backdrop-filter: blur(20px); overflow: hidden; transition: all 0.2s ease-in-out; display: flex ; flex-direction: column; justify-content: center;align-items: center;}
    .site-header #primary-menu {padding-inline: 20px; gap: 26px;flex-direction: column; height: fit-content; align-items: center;max-height: 600px; overflow-y: auto;overflow-x: hidden;}
    /* nav menu */
    .site-header #primary-menu li {text-align: center;width: 100%;position: relative;}     
    .site-header #primary-menu li > a {font-size: 22px; line-height: 26px;display: inline-flex;width:100%; justify-content: center; align-items: center;} 
    .site-header #primary-menu > li:first-child a {margin-right: 0px;}
    
    .site-header #primary-menu li.menu-item-has-children>a:after{margin-left: 0;height: 16px; width: 16px;}
    /* submenu */
    .site-header .sub-menu{left: 0; transform: translate(0); padding: 0; border: none; background: transparent; box-shadow: none; backdrop-filter: unset;}
    #primary-menu li:nth-last-child(-n+2) a, #primary-menu li:last-child a{font-size: 16px; line-height: 20px;}
    .site-header .sub-menu{display: none !important; padding: 14px 0 0px; min-width: auto; position: relative;left: 0;top: 0; width: auto; opacity: 1; visibility: visible;box-shadow: none;background-color: transparent;}
    .site-header #primary-menu li.focus .sub-menu{display: block !important;}
    .site-header #primary-menu li .sub-menu li a{color: var(--white);font-size: 18px; line-height: 24px;}
    /* submenu arrow */
    .site-header #primary-menu li.menu-item-has-children > a:after{margin-left: 7px;display:inline-block; top: 1px; right: 0;height: 12px; width: 12px; content: ""; background: url(../images/arrow.svg) no-repeat center center / cover; position: relative; transform: rotate(90deg); transform-origin: center center;cursor: pointer;}
    .site-header #primary-menu li.menu-item-has-children > a:hover:after,
    .site-header #primary-menu li.current-menu-parent > a:after{background-image: url(../images/gray-arrow.svg);}
    .site-header #primary-menu li.focus > a:after{transform: rotate(-90deg);}
  
}   
@media screen and (max-width:767px){
    /* ================================================== normal header start ================================================ */
    .site-header .custom-logo-link { max-width: 128px; width:128px;}
    .site-header { padding: 11px 0; }
    
    /* button */
    .header-filled-btn a { padding: 7px 22px; font-size: 14px; line-height: 18px; }
    .site-header .main-navigation{gap: 9px;}
    .site-header #primary-menu li > a { font-size: 20px; line-height: 24px;}
    .site-header #primary-menu li .sub-menu li a { font-size: 16px; line-height: 22px; }
    
}
@media screen and (max-width:576px){
    /* ================================================== normal header start ================================================ */
    .site-header.sticky { padding: 11px 0; }
    .header-buttons { gap: 8px; }
    .header-buttons a{padding: 5px 8px;border-radius: 16px;font-size: 14px;}
    .site-header .custom-logo-link { max-width: 110px; width: 110px; }
    .site-header #primary-menu li.menu-item-has-children>a:after { height: 18px; width: 18px;}
    #primary-menu li.green-fill-btn a, #primary-menu li.outline-green-btn a{font-size: 16px; line-height: 20px;}
    
}