/* Header */
.site-header {
    position: fixed;
    z-index: 9995;
    transition: all 0.5s ease-in-out !important;
    width: 100%;
    /* transition-property: all !important;
    transition-delay: 0 */
}

.site-header .site-branding img {
    transition: all 0.4s ease-in-out;
    width: calc(var(--space-size) * 7);
    filter: grayscale(1) brightness(10);
}

.site-header>div {
    position: relative;
    transition: all 0.4s ease-in-out;
    padding-top: calc(var(--space-size) * 2/3);
    padding-bottom: calc(var(--space-size) * 2/3);
}

.site-header>div::after {
    width: 0;
    height: 1px;
    display: flex;
    background-color: var(--color-white);
    position: absolute;
    bottom: 0;
    left: calc(.5* var(--bs-gutter-x));
    content: "";
    transition: all 0.4s ease-in-out;
    transition-delay: 1s;
}

.site-header.aos-animate>div::after {
    width: calc(100% - var(--bs-gutter-x));
}

.site-header .menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.site-header .menu>li {
    padding: 0px 0px 0 calc(var(--space-size) * 4/3);
    height: 100%;
    display: flex;
    align-items: center;
}

.site-header .menu li a {
    color: var(--color-white);
    transition: all 0.4s ease-in-out;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}

.site-header .menu>li>a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    background-color: var(--color-white);
    transition: all 0.3s ease-in-out;
    left: 0;
}

/* .site-header .menu li.current-menu-item a, */
.site-header .menu>li:hover>a {
    color: var(--color-white);
}

/* .site-header .menu li.current-menu-item a::after, */
.site-header .menu>li:hover>a::after {
    width: 100%;
}

.site-header .hamburger {
    cursor: pointer;
    z-index: 2;
}

.search-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: calc(var(--space-size)* 4 / 3);
    color: var(--color-white);
    font-size: var(--font-size-h6);
    position: relative;
}

.search-btn::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    background-color: var(--color-white);
    transition: all 0.3s ease-in-out;
    left: 0;
}

.search-btn:hover::after {
    width: 100%;
}

.search-btn:hover svg path {
    stroke: var(--color-white);
}

.site-header .hamburger .line {
    width: calc(var(--space-size) * 1);
    height: 2px;
    background-color: var(--color-white);
    display: block;
    margin: 5px 0 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.site-header .hamburger .line:nth-child(3) {
    width: calc(var(--space-size) * 1/2);
}

.menu-header-mobile {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background-color: var(--color-white);
    display: none;
}

.menu-header-mobile .search-btn {
    color: var(--color-black);
    font-size: var(--font-size-h4);
}

.menu-header-mobile .container-box {
    padding: 0 calc(var(--space-size) * 1/2);
}

.menu-header-mobile ul.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-header-mobile ul.menu li {
    margin: 0;
    border-bottom: 1px solid var(--color-gray-2);
}

.menu-header-mobile ul.menu a {
    color: var(--color-black);
    padding: calc(var(--space-size) * 2/3) 0;
    display: block;
    font-size: var(--font-size-h4);
    white-space: nowrap;
}

.menu-header-mobile ul.menu .sub-menu {
    list-style: none;
    padding-bottom: calc(var(--space-size) * 2/3);
}

.menu-header-mobile ul.menu .sub-menu li {
    border-bottom: 0;
}

.menu-header-mobile ul.menu .sub-menu li a {
    padding: 0 0 calc(var(--space-size) * 1/3) 0;
    font-size: var(--font-size-h5);
}

.down .site-header {
    background: var(--color-white);
}

.down .site-header .menu li a {
    filter: invert(1);
}

.down .site-header .search-btn {
    filter: invert(1);
}

.down .site-header .site-branding img {
    filter: grayscale(1) brightness(0);
}

/* .down .site-header>div {
    padding-top: calc(var(--space-size) * 1/3);
    padding-bottom: calc(var(--space-size) * 1/3);
}

.down .site-header .site-branding img {
    width: calc(var(--space-size)* 6);
}

.down .site-header.aos-animate>div::after {
    opacity: 0;
    width: 0;
    transition-delay: 0s;
    transition-duration: 0s;
}
.up .site-header.aos-animate>div::after {
    transition-delay: 0s;
} */
.site-header .menu-item-has-children {
    position: relative;
}

.site-header .sub-menu {
    position: absolute;
    top: 100%;
    left: calc(var(--space-size) * 4/3);
    background: var(--color-pri);
    background: linear-gradient(180deg, transparent 0%, transparent calc(var(--space-size) * 2/3), var(--color-pri) calc(var(--space-size) * 2/3), var(--color-pri) 100%);
    padding: 0;
    padding-top: calc(var(--space-size) * 4/3);
    padding-bottom: calc(var(--space-size) * 2/3);
    list-style: none;
    pointer-events: none;
    width: 0;
    overflow: hidden;
    transition: all ease-in-out 0.5s;
    z-index: 1;
}

.site-header .sub-menu li {
    margin-bottom: calc(var(--space-size) * 1/3);
    padding: 0 calc(var(--space-size) * 2/3);
}

.site-header .sub-menu li a {
    opacity: 0.75;
    filter: invert(0) !important;
}

.site-header .sub-menu li a:hover {
    opacity: 1;
}

.site-header .menu-item-has-children:hover .sub-menu {
    width: 260px;
    pointer-events: all;
}