@property --oak-menu-bg-color-1 {
    syntax: "<color>";
    initial-value: white;
    inherits: false;
}

@property --oak-menu-bg-color-2 {
    syntax: "<color>";
    initial-value: white;
    inherits: false;
}

body {
    --oak-menu-logo-height: 115px;
    --oak-menu-search-height: 65px;
    --oak-menu-height: calc(var(--oak-menu-logo-height) + var(--oak-spacing-xl) * 2);

    background: linear-gradient(180deg, var(--oak-white) var(--oak-menu-height), var(--oak-olive-100) 768px);
    transition: padding-top var(--oak-duration-m) var(--oak-ease);
}

body .site-container {
    padding-top: var(--oak-menu-height);
}



body.oak-scroll {
    --oak-menu-logo-height: 80px;
    --oak-menu-search-height: 50px;
    --oak-menu-height: calc(var(--oak-menu-logo-height) + var(--oak-spacing-m) * 2);
}

.oak-menu {
    --oak-menu-bg-color-1: transparent;
    --oak-menu-bg-color-2: transparent;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    background: linear-gradient(180deg, var(--oak-menu-bg-color-1) 0%, var(--oak-menu-bg-color-2) 100%);
    transition: background-color var(--oak-duration-m) var(--oak-ease),
        --oak-menu-bg-color-1 var(--oak-duration-m) var(--oak-ease),
        --oak-menu-bg-color-2 var(--oak-duration-m) var(--oak-ease);
}

:where(body.oak-scroll) .oak-menu {
    --oak-menu-bg-color-1: var(--oak-white);
    --oak-menu-bg-color-2: var(--oak-white);

    background-color: var(--oak-white);
}

.oak-menu.oak-active {
    --oak-menu-bg-color-1: var(--oak-olive-800);
    --oak-menu-bg-color-2: var(--oak-black);

    background-color: var(--oak-olive-800);
}

.oak-menu-header {
    width: 100%;
    max-width: calc(var(--oak-site-width) - var(--oak-spacing-xl) * 2);
    height: var(--oak-menu-height);
    display: flex;
    align-items: center;
    gap: var(--oak-spacing-2xl);
    padding: var(--oak-spacing-xl) 0;
    transition: height var(--oak-duration-m) var(--oak-ease);
}

body.oak-scroll .oak-menu-header {
    padding: var(--oak-spacing-m) 0;
}

.oak-menu .oak-logo {
    height: var(--oak-menu-logo-height);
    fill: var(--oak-olive-800);
    transition: all var(--oak-duration-m) var(--oak-ease);
}

.oak-menu.oak-active .oak-logo {
    fill: var(--oak-white);
}

.oak-apply-button {    
    margin-left: auto;
    position:relative;
    align-self:center;
    white-space: pre;
}
.oak-apply-button--mobile {
    display:none;
    visibility:hidden;
}
@media(max-width:570px){
    .oak-apply-button {    
        transition:all 0.2s;
        transition-behavior: allow-discrete;
        visibility:visible;
	    margin-left: 19px;
	    margin-right: auto;
        align-content: center;
        opacity:0;
        transform:translatex(100%);
    }
    .oak-apply-button--desktop {
        display:none;
    }
    .oak-apply-button--mobile {
        display:none;
    }
    .oak-active .oak-apply-button--mobile {
        display:block;
        opacity:1;
        transform:translatex(0%);

        @starting-style {
            opacity:0;
            transform:translatex(100%);
        }
    }
}

.oak-menu-search {
    position: relative;
    width: 25px;
    height: var(--oak-menu-search-height);
    transition: all var(--oak-duration-m) var(--oak-ease);
    border-radius: var(--oak-radius-l);
    overflow: hidden;
}

.oak-menu-search:focus-within {
    background-color: var(--oak-olive-100);
}

.oak-menu.oak-active .oak-menu-search,
.oak-menu.oak-active .oak-menu-search:focus-within {
    background-color: var(--oak-white);
}

.oak-menu.oak-active .oak-menu-search,
.oak-menu-search:focus-within {
    width: 100%;
    padding: 0 calc(var(--oak-spacing-m) * 2 + 30px) 0 var(--oak-spacing-m);
}

.oak-menu-search-input {
    width: 100%;
    height: 100% !important;
    border: none;
    background: none !important;
    outline: none !important;
    padding: 0 !important;
    opacity: 0;
    transition: all var(--oak-duration-m) var(--oak-ease);
}

.oak-menu.oak-active .oak-menu-search-input,
.oak-menu-search:focus-within .oak-menu-search-input {
    opacity: 1;
}

.oak-go-btn,
.oak-search-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    transition: all var(--oak-duration-m) var(--oak-ease);
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

.oak-menu.oak-active .oak-search-btn,
.oak-menu.oak-active .oak-go-btn,
.oak-menu-search:focus-within .oak-search-btn,
.oak-menu-search:focus-within .oak-go-btn {
    right: var(--oak-spacing-m);
}

.oak-menu.oak-active .oak-search-btn,
.oak-menu-search:focus-within .oak-search-btn {
    opacity: 0;
    pointer-events: none;
}

.oak-go-btn {
    opacity: 0;
    pointer-events: none;
}

.oak-menu.oak-active .oak-go-btn,
.oak-menu-search:focus-within .oak-go-btn {
    opacity: 1;
    pointer-events: all;
}

.oak-hamburger-btn {
    position: relative;
    width: 50px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: var(--oak-spacing-xl);
}



.oak-hamburger-btn span {
    position: absolute;
    left: 0;
    background-color: var(--oak-black);
    width: 100%;
    height: 4px;
    transition: all var(--oak-duration-m) var(--oak-ease);
}

.oak-menu.oak-active .oak-hamburger-btn span {
    background-color: var(--oak-white);
}

.oak-hamburger-btn span:nth-child(1) {
    top: 0px;
}

.oak-hamburger-btn span:nth-child(2),
.oak-hamburger-btn span:nth-child(3) {
    top: 9px;
}

.oak-hamburger-btn span:nth-child(4) {
    top: 18px;
}

.oak-menu.oak-active .oak-hamburger-btn span:nth-child(1),
.oak-menu.oak-active .oak-hamburger-btn span:nth-child(4) {
    top: 9px;
    width: 0%;
    left: 50%;
}

.oak-menu.oak-active .oak-hamburger-btn span:nth-child(2) {
    transform: rotate(45deg);
}

.oak-menu.oak-active .oak-hamburger-btn span:nth-child(3) {
    transform: rotate(-45deg);
}

.oak-menu-content {
    position: relative;
    width: 100%;
    max-width: calc(var(--oak-site-width) - var(--oak-spacing-xl) * 6);
    height: 0;
    transition: all var(--oak-duration-m) var(--oak-ease);
    color: var(--oak-white);
}

.oak-menu.oak-active .oak-menu-content {
    height: calc(100vh - var(--oak-menu-height));
}
@media(max-width:570px){    
    .oak-menu.oak-active .oak-menu-content {
        margin-top:21px;
        height:calc(100vh - 53px - var(--oak-menu-height));
    }
}

.oak-menu-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--oak-spacing-xl);
    padding-bottom: var(--oak-spacing-xl);
    opacity: 0;
    pointer-events: none;
    transition: all var(--oak-duration-m) var(--oak-ease);
}

.oak-menu-section.oak-active {
    opacity: 1;
    pointer-events: all;
}

.oak-menu-col {
    width: 100%;
    max-width: calc(100% / 3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--oak-spacing-m);
    opacity: 1;
    border-right: 1px solid transparent;
    overflow-y: auto;
    transition: all var(--oak-duration-m) var(--oak-ease);
    padding-right: var(--oak-spacing-s);
}

.oak-menu-section-2 .oak-menu-col {
    max-width: calc(100% / 2);
}

.oak-menu-section-3 .oak-menu-col {
    max-width: 100%;
}

.oak-menu-section-title {
    display: none;
    color: var(--oak-green-500);
    text-decoration: underline;
}

.oak-menu-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--oak-spacing-xs);
    width: 100%;
    height: 100%;
}

.oak-menu-btn {
    background: none;
    border: none;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    max-width: 100%;
    flex-shrink: 0;
    line-height: 32px;
    display: flex;
    align-items: flex-start;
    gap: var(--oak-spacing-xs);
}

.oak-menu-btn:hover,
.oak-menu-btn.oak-active {
    color: var(--oak-green-500);
}

.oak-menu-btn .oak-icon-link {
    margin-top: 6px;
    stroke: var(--oak-white);
}

.oak-menu-btn:hover .oak-icon-link,
.oak-menu-btn.oak-active .oak-icon-link {
    stroke: var(--oak-green-500);
}

.oak-menu-btn.oak-active {
    text-decoration: underline;
}

.oak-menu-link {
    display: flex;
    flex-direction: column;
    gap: var(--oak-spacing-xl);
    align-items: center;
    text-align: center;
    color: var(--oak-white);
    text-decoration: none;
    outline: none;
}

.oak-menu-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--oak-radius-l);
}

.oak-menu-link .oak-icon-arrow-l {
    stroke: var(--oak-green-500);
}

.oak-menu-section-0-inner,
.oak-menu-section-1-inner,
.oak-menu-section-2-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: all var(--oak-duration-m) var(--oak-ease);
}

.oak-menu-section-0-inner.oak-active,
.oak-menu-section-1-inner.oak-active,
.oak-menu-section-2-inner.oak-active {
    opacity: 1;
    pointer-events: all;
}

.oak-menu-section-1-inner {
    left: calc(100% / 3 + var(--oak-spacing-xl) / 3);
    width: calc(2 * 100% / 3 - var(--oak-spacing-xl) / 3);
}

.oak-menu-section-2-inner {
    left: calc((2 * (100% + var(--oak-spacing-xl))) / 3);
    width: calc((100% - 2 * var(--oak-spacing-xl)) / 3);
}

.oak-menu-section-0-inner.oak-sub-active .oak-menu-col-1,
.oak-menu-section-1-inner.oak-sub-active .oak-menu-col-2 {
    border-right: 1px solid var(--oak-olive-50);
}

.oak-menu-section-0-inner.oak-sub-active .oak-menu-col-2,
.oak-menu-section-0-inner.oak-sub-active .oak-menu-col-3,
.oak-menu-section-1-inner.oak-sub-active .oak-menu-col-3 {
    opacity: 0;
    pointer-events: none;
}

.oak-menu-back-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--oak-spacing-xl);
    height: 100%;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: flex;
    justify-content: center;
    padding-top: 42px;
    opacity: 0;
    pointer-events: none;
}

.oak-menu-back-btn span {
    display: block;
    user-select: none;
    text-orientation: mixed;
    writing-mode: vertical-lr;
}

@media (max-width: 1920px) {
    .oak-menu-header {
        max-width: calc(100% - var(--oak-spacing-xl) * 2);
    }

    .oak-menu-content {
        max-width: calc(100% - var(--oak-spacing-xl) * 4);
    }
}

@media (max-width: 1440px) {
    .oak-menu-header {
        gap: var(--oak-spacing-xl);
    }

    .oak-menu-content {
        max-width: calc(100% - var(--oak-spacing-xl) * 2);
    }
}

@media (max-width: 1024px) {
    body,
    body.oak-scroll {
        --oak-menu-logo-height: 80px;
        --oak-menu-search-height: 50px;
        --oak-menu-height: calc(var(--oak-menu-logo-height) + var(--oak-spacing-m) * 2);
    }

    .oak-menu,
    .oak-menu .oak-text-body-m {
        font-size: 20px;
    }

    .oak-menu-header,
    body.oak-scroll .oak-menu-header {
        padding: var(--oak-spacing-m) 0;
    }

    .oak-menu-search {
        width: 20px;
    }

    .oak-menu.oak-active .oak-menu-search,
    .oak-menu-search:focus-within {
        padding: 0 calc(var(--oak-spacing-m) * 2 + 20px) 0 var(--oak-spacing-m);
    }

    .oak-hamburger-btn {
        width: 30px;
        height: 15px;
    }

    .oak-hamburger-btn span {
        height: 3px;
    }

    .oak-hamburger-btn span:nth-child(2),
    .oak-hamburger-btn span:nth-child(3) {
        top: 6px;
    }

    .oak-hamburger-btn span:nth-child(4) {
        top: 12px;
    }

    .oak-menu.oak-active .oak-hamburger-btn span:nth-child(1),
    .oak-menu.oak-active .oak-hamburger-btn span:nth-child(4) {
        top: 5px;
    }

    .oak-menu-content {
        max-width: calc(100% - var(--oak-spacing-xl));
        margin-left: var(--oak-spacing-xl);
    }

    .oak-menu-section-0-inner,
    .oak-menu-section-1-inner,
    .oak-menu-section-2-inner {
        left: unset;
        right: -100%;
        width: 100%;
    }

    .oak-menu-section-0-inner.oak-active,
    .oak-menu-section-1-inner.oak-active,
    .oak-menu-section-2-inner.oak-active {
        right: 0;
    }

    .oak-menu-section-0-inner.oak-sub-active,
    .oak-menu-section-1-inner.oak-sub-active,
    .oak-menu-section-2-inner.oak-sub-active {
        right: 100%;
    }

    .oak-menu-section-1,
    .oak-menu-section-2,
    .oak-menu-section-3 {
        padding: var(--oak-spacing-m);
    }

    .oak-menu-section-1 {
        padding-left: 0;
    }

    .oak-menu-section-2 {
        background-color: var(--oak-olive-800);
    }

    .oak-menu-section-title {
        display: block;
    }

    .oak-menu-col {
        max-width: 100% !important;
        overflow-y: unset;
        padding: 0;
    }

    .oak-menu-section-1 .oak-menu-col-2,
    .oak-menu-section-1 .oak-menu-col-3,
    .oak-menu-section-2 .oak-menu-col-3 {
        display: none;
    }

    .oak-menu-section-0-inner.oak-sub-active .oak-menu-col,
    .oak-menu-section-1-inner.oak-sub-active .oak-menu-col,
    .oak-menu-section-2-inner.oak-sub-active .oak-menu-col {
        opacity: 0;
        pointer-events: none;
    }

    .oak-menu-section-0-inner.oak-sub-active .oak-menu-col-1,
    .oak-menu-section-1-inner.oak-sub-active .oak-menu-col-2 {
        border-right: 1px solid transparent;
    }

    .oak-menu-items {
        overflow-y: auto;
    }

    .oak-menu-btn .oak-icon-link {
        margin-top: 9px;
    }

    .oak-menu-section-0-inner.oak-sub-active .oak-menu-back-btn,
    .oak-menu-section-1-inner.oak-sub-active .oak-menu-back-btn {
        opacity: 1;
        pointer-events: all;
    }
    .oak-menu-search {
        width: 100%;
        order: 2;
        opacity: 0;
        pointer-events: none;
        border-radius: var(--oak-radius-s);
        visibility:hidden;
    }

    .oak-menu.oak-active .oak-menu-search {
        visibility:visible;
        opacity: 1;
        pointer-events: all;
    }

    .oak-menu-header {
        max-width: calc(100% - var(--oak-spacing-m) * 2);
        flex-wrap: wrap;
        gap: var(--oak-spacing-m);
    }

    

    .oak-menu.oak-active {
        --oak-menu-height: calc(var(--oak-menu-logo-height) + var(--oak-menu-search-height) + var(--oak-spacing-m) * 3);
    }

}

@media (max-width: 768px) {
    body,
    body.oak-scroll {
        --oak-menu-logo-height: 65px;
        --oak-menu-search-height: 40px;
        --oak-menu-height: calc(var(--oak-menu-logo-height) + var(--oak-spacing-m) * 2);
    }


    .oak-menu.oak-active .oak-menu-header {
        flex-wrap: wrap;
    }

    .oak-hamburger-btn {
        margin-right: var(--oak-spacing-m);
        order: 1;
    }
}

@media (max-width: 570px) {
    body,
    body.oak-scroll {
        --oak-menu-logo-height: 50px;
        --oak-menu-height: calc(var(--oak-menu-logo-height) + var(--oak-spacing-s) * 2);
    }

    .oak-menu.oak-active {
        --oak-menu-height: calc(var(--oak-menu-logo-height) + var(--oak-menu-search-height) + var(--oak-spacing-s) * 3);
    }

    body.oak-scroll .oak-menu-header,
    .oak-menu-header {
        max-width: calc(100% - var(--oak-spacing-s) * 2);
        padding: var(--oak-spacing-s) 0;
        gap: var(--oak-spacing-m);
    }

    .oak-hamburger-btn {
        width: 22px;
        height: 12px;
        margin-right: var(--oak-spacing-s);
    }

    .oak-hamburger-btn span {
        height: 2px;
    }

    .oak-hamburger-btn span:nth-child(2),
    .oak-hamburger-btn span:nth-child(3) {
        top: 5px;
    }

    .oak-hamburger-btn span:nth-child(4) {
        top: 10px;
    }

    .oak-menu.oak-active .oak-hamburger-btn span:nth-child(1),
    .oak-menu.oak-active .oak-hamburger-btn span:nth-child(4) {
        top: 5px;
    }

    .oak-menu-section-1,
    .oak-menu-section-2,
    .oak-menu-section-3 {
        padding: 14px var(--oak-spacing-s);
    }

    .oak-menu-section-1 {
        padding-left: 0;
    }
}
@media(max-width:570px){
    .oak-hamburger-btn {
        margin-right: 5px;
    }
    body.oak-scroll .oak-menu-header, 
    .oak-menu-header{
        gap: 17px;
    }
}