body.is-open{
    overflow: hidden;
}

.header-section{
    padding: var(--sp-s) var(--sp-xl);
    position: sticky;
    top: 0;
    background-color: var(--base-transparent);
    z-index: 9999;
    transition: 0.1s ease;
}

.header-section.header-scroll{
    border-bottom: 0.5px solid var(--border-soft);
}

.header{
    display: flex;
    gap: var(--sp-lg);
    justify-content: center;
    align-items: center;
    max-width: var(--br-xl);
    height: 62px;
    margin: 0 auto;
}

.header-group{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-md);
    width: 100%;
    position: relative;
}

.header-group .header-logo{
    height: 40px;
    flex-shrink: 0;
}

.header-group .header-support{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
}

.header-group .header-logo .media-thumbnail .img,
.header-group .header-logo .media-thumbnail{
    border-radius: 0;
}

.header-nav .header-support{
    display: none;
}

.header-support .header-cta{
    width: 100%;
}

@media (max-width: 991px){
    .header-section{
        padding: var(--sp-s) var(--sp-sm);
    }

    .header-nav .header-support{
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: var(--sp-md);
        border-top: var(--width-1) solid var(--border-primary);
    }
}

@media (max-width: 640px){
    .header-support .cta-group{
        flex-direction: row;
    }

    .header-support .cta-group .button.btn-secondary{
        display: none;
    }

    .header-nav .header-support .cta-group .button.btn-secondary{
        display: flex;
    }

    .header-nav .header-support .cta-group{
        flex-direction: column;
    }

    .header-nav .header-support{
        flex-direction: column;
        align-items: end;
    }
}

@media (max-width: 445px){
    .header-support .cta-group .button.btn-primary{
        display: none;
    }

    .header-nav .header-support .cta-group .button.button.btn-primary{
        display: flex;
    }
}

/* Menu Nav */

.header-nav .menu-list{
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
}

.menu-list .menu-parent a{
    text-decoration: none;
}

.header-nav .menu-list .menu-parent{
    cursor: pointer;
    padding: var(--sp-sm) var(--sp-s);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    border-bottom: var(--width-2) solid var(--base-transparent);
    transition: 0.1s ease;
}

.header-nav .menu-list .menu-parent.hovering{
    background-color: var(--surface-brand-soft);
}

.header-nav .menu-list .menu-parent .menu-caret{
    color: var(--text-ghost);
    transition: 0.2s ease;
}

.header-nav .menu-list .menu-parent.hovering .menu-caret{
    color: var(--text-primary);
    rotate: 180deg;
}

.menu-parent.hovering .menu-title.text{
    color: var(--text-primary);
    font-weight: 600;
}

.header-nav .menu-list .menu-parent .menu-children .menu-children-list-group{
    display: flex;
    gap: var(--sp-md);
    align-items: stretch;
    flex-wrap: wrap;
}

.header-nav .menu-list .menu-parent .menu-children{
    width: 100%;
    max-width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--base-white);
    border: 0.5px solid var(--border-soft);
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    border-radius: var(--radius-lg);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: var(--sp-lg);
    transition:
        opacity 0.1s ease,
        transform 0.1s cubic-bezier(.22,1,.36,1),
        visibility 0s linear 0.25s;
}

.header-nav .menu-list .menu-parent.hovering .menu-children{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 0.1s ease,
        transform 0.1s cubic-bezier(.22,1,.36,1),
        visibility 0s;
}

.menu-children .menu-children-group{
    flex: 0 0 calc(33.33% - var(--sp-md));
    flex-grow: 1;
    width: 100%;
    align-self: stretch;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.menu-children .menu-children-list-group .menu-children-group:not(:last-child){
    border-right: var(--width-1) solid var(--border-soft);
    padding-right: var(--sp-md);
}

.menu-children-list{
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
	height: 100%;
}

.menu-children-list .menu-item{
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
    width: 100%;
    padding: var(--sp-s) var(--sp-sm);
    /* max-width: fit-content; */
    border-radius: var(--radius-md);
}

.menu-children-list .menu-item:hover{
    background-color: var(--surface-brand);
}

.menu-children-list .menu-item:hover .text{
    color: var(--base-white);
}

.menu-item .menu-icon{
    background-color: var(--surface-brand-soft);
    color: var(--icon-primary);
    fill: var(--icon-primary);
    padding: var(--sp-s);
    font-weight: var(--font-weight-semi-bold);
    border-radius: var(--radius-md);
    max-width: fit-content;
}

.menu-children-anchor{
    border-top: var(--width-1) solid var(--border-soft);
    padding: var(--sp-sm) 0;
    display: flex;
    align-items: start;
	flex-direction: column;
    gap: var(--sp-s);
	margin-top: auto;
}

.header-support .header-hamburger{
    display: none;
}

@media (max-width: 991px){
    .header-support .header-hamburger{
        display: block;
    }
 
    .header-nav{
        position: fixed;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--base-white);
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: 
        opacity 0.2s ease,
        transform 0.25s cubic-bezier(.22,1,.36,1);
        overflow: scroll;
        padding-bottom: var(--sp-lg);
    }

    .header-nav.is-open{
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .header-nav .menu-list{
        flex-direction: column;
        align-items: flex-start;
        padding: var(--sp-lg);
    }

    .header-nav .menu-parent{
        width: 100%;
    }

    .header-nav .menu-list .menu-parent .menu-children .menu-children-list-group{
        flex-direction: column;
    }

    .menu-children .menu-children-list-group .menu-children-group:not(:last-child){
        border-right: none;
    }

    .menu-children .menu-children-list-group .menu-children-group{
        width: 100%;
    }
    
    .menu-parent > .menu-title,
    .menu-parent > .menu-caret{
        display: none;
    }

    .header-nav .menu-list .menu-parent .menu-children{
        all: unset;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--sp-lg);
    }
}

@media (max-width: 320px){
	.menu-children-anchor{
		flex-direction: column;
		align-items: start;
		gap: 0;
	}
}


/* Menu Nav */