.site-logo .logo-white {
    display: block;
}

.site-logo .logo-black {
    display: none;
}

.header {
    width: 100%;
    position: relative;
    z-index: 1002;
    background-color: transparent;
    transition:
            background-color 0.4s ease,
            box-shadow 0.4s ease,
            transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header--is-fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FFF !important;
    box-shadow: 0 0.4166666666666667vw 1.6666666666666667vw rgba(46, 46, 46, 0.08);
    transform: translateY(-100%);
    transition:
            background-color 0.4s ease,
            box-shadow 0.4s ease,
            transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);

    will-change: transform;
}

.header--is-fixed.header--is-visible {
    transform: translateY(0);
}

.header--sticky-style .site-header {
    border-bottom: none;
}

.header--sticky-style .logo-white {
    display: none !important;
}

.header--sticky-style .logo-black {
    display: block !important;
}

.header--sticky-style .main-navigation a,
.header--sticky-style .header-button__text {
    color: #2E2E2E !important;
}

.header--sticky-style .menu a::after {
    background-color: #1E8F7F;
}

.header--sticky-style .menu a:hover,
.header--sticky-style .menu .current-menu-item > a {
    color: #1E8F7F !important;
}

.header--sticky-style .header__button .header-button {
    background-color: #1E8F7F !important;
    border-color: #1E8F7F !important;
    color: #FFF !important;
}

.header--sticky-style .header__button .header-button__text {
    color: #FFF !important;
}

.header--sticky-style .header__button .header-button__icon {
    background-color: #FFF !important;
}

.header--sticky-style .header__button .header-button__icon img {
    filter: brightness(0) !important;
}

.header--sticky-style .burger-menu {
    border-color: #B4B4B4 !important;
}

.header--sticky-style .burger-menu img {
    filter: brightness(0) !important;
}

@media (min-width: 1025px) {
    .desktop-services-list ul,
    .desktop-services-sub ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: block;
    }

    .header--services-hover .logo-white {
        display: none !important;
    }

    .header--services-hover .logo-black {
        display: block !important;
    }

    .header--services-hover {
        background-color: #FFF !important;
    }

    .header--services-hover .main-navigation a,
    .header--services-hover .header-button__text {
        color: #2E2E2E !important;
        transition: color 0.3s ease;
    }

    .menu {
        gap: 0.8333333333333334vw;
    }

    .menu a {
        height: 6.5625vw;
        padding: 2.864583333333333vw 1.6666666666666667vw;
        position: relative;
        transition: box-shadow 0.25s ease;
    }

    .menu a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0.20833333333333334vw;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .menu a:hover::after {
        opacity: 1;
    }

    .header--services-hover .menu .menu-services > a {
        color: #1E8F7F !important;
    }

    .header--services-hover .menu .menu-services > a::after {
        background-color: #1E8F7F;
        opacity: 1;
    }

    .header--services-hover .header__button .header-button {
        background-color: #1E8F7F !important;
        border-color: #1E8F7F !important;
    }

    .header--services-hover .header__button .header-button__text {
        color: #FFF !important;
    }

    .header--services-hover .header__button .header-button__icon {
        background-color: #FFF !important;
    }

    .header--services-hover .header__button .header-button__icon img {
        filter: brightness(0) !important;
    }

    .desktop-services-overlay {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #FFF;
        z-index: 1001;
        padding-bottom: 1.25vw;
        margin: 0;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        border-radius: 0 0 0.4166666666666667vw 0.4166666666666667vw;
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    }

    .header--services-hover .desktop-services-overlay {
        pointer-events: auto;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .desktop-services-columns {
        display: flex;
        width: 100%;
        padding: 0;
    }

    .desktop-services-main {
        flex: 0 0 auto;
        max-width: 30.312499999999996vw;
        width: 100%;
        position: relative;
        padding-top: 1.25vw;
    }

    .desktop-services-main .sub-menu {
        display: none !important;
    }

    .desktop-services-main > .desktop-services-list > ul.desktop-services-menu > .menu-item {
        margin-bottom: 0.8333333333333334vw;
        max-width: 25.624999999999996vw;
        position: relative;
        list-style: none;
    }

    .desktop-services-main > .desktop-services-list > ul.desktop-services-menu > .menu-item::before {
        content: '';
        position: absolute;
        left: 0.8854166666666666vw;
        top: 50%;
        transform: translateY(-50%);
        width: 0.8333333333333334vw;
        height: 0.8333333333333334vw;
        background: url('../img/icons/green-star.svg') no-repeat center;
        background-size: contain;
        flex-shrink: 0;
    }

    .desktop-services-main > .desktop-services-list > ul.desktop-services-menu > .menu-item > a {
        display: flex;
        align-items: center;
        padding: 1.1979166666666667vw 0 1.1979166666666667vw 2.5vw;
        text-decoration: none;
        color: #2E2E2E;
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 0.8333333333333334vw;
        line-height: 0.98;
        letter-spacing: -0.04em;
        text-transform: uppercase;
        border-radius: 0.625vw;
        transition: background-color 0.2s ease, color 0.2s ease;
        width: 100%;
    }

    .desktop-services-main > .desktop-services-list > ul.desktop-services-menu > .menu-item > a:hover,
    .desktop-services-main > .desktop-services-list > ul.desktop-services-menu > .menu-item > a.active-hover {
        background-color: #D2E9E5;
        color: #1E8F7F;
    }

    .desktop-services-sub {
        flex: 1;
        min-width: 0;
        padding-top: 1.25vw;
    }

    .desktop-services-sub .sub-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 1.6666666666666667vw;
        padding: 0;
        margin: 0;
        list-style: none;
        width: 100%;
    }

    .desktop-services-sub .menu-item {
        flex: 0 0 calc(50% - 16px);
        box-sizing: border-box;
        border: 0.052083333333333336vw solid #B4B4B4;
        border-radius: 0.4166666666666667vw;
        display: flex;
        align-items: center;
        gap: 1.6666666666666667vw;
        padding: 1.6666666666666667vw;
    }

    .desktop-services-sub .menu-item .menu-icon-block {
        width: 5vw;
        height: 5vw;
        min-width: 5vw;
        min-height: 5vw;
        border: 0.052083333333333336vw solid #B4B4B4;
        border-radius: 0.4166666666666667vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .desktop-services-sub .menu-item .menu-icon-block img {
        width: 1.25vw;
        height: 1.25vw;
    }

    .desktop-services-sub .menu-item a {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: #2E2E2E;
        height: 100%;
        flex: 1;
    }

    .desktop-services-sub .menu-title {
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: 900;
        font-size: 1.4583333333333333vw;
        line-height: 100%;
        letter-spacing: -0.03em;
        text-transform: uppercase;
        color: #2E2E2E;
        transition: color 0.2s ease;
    }

    .desktop-services-sub .menu-subtext {
        display: flex;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 1.0416666666666665vw;
        line-height: 1.4;
        letter-spacing: -0.04em;
        color: #2E2E2E;
        opacity: 0.7;
    }

    .desktop-services-sub .menu-item a:hover .menu-title {
        color: #1E8F7F;
    }

    .menu-text {
        display: flex;
        flex-direction: column;
        position: relative;
        gap: 8px;
    }
}

@media (max-width: 1200px) {
    .desktop-services-sub .menu-item {
        flex: 0 0 100%;
    }
}

@media (max-width: 1024px) {
    .desktop-services-overlay {
        display: none !important;
    }
}

.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2E2E2E;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 50;
}

.header--services-hover ~ .page-overlay {
    opacity: 0.4;
    pointer-events: auto;
}


.desktop-services-button-wrapper {
    display: flex;
    align-items: center;
    max-width: 25.624999999999996vw;
}

.desktop-services-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 3.229166666666667vw;
    background: #fff;
    color: #2e2e2e;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 0.8333333333333334vw;
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.625vw;
    gap: 0.8333333333333334vw;
    position: relative;
    overflow: hidden;
    padding: 0.4166666666666667vw 0.4166666666666667vw 0.4166666666666667vw 0;
    transition: background 0.3s ease;
    box-sizing: border-box;
    border: .052083333333333336vw solid #b4b4b4;
}

.desktop-services-button:hover {
    background: #1E8F7F;
    border: .052083333333333336vw solid #1E8F7F;
    color: #fff;
}

.desktop-services-button-header-button__text {
    position: absolute;
    left: 0.89vw;
    white-space: nowrap;
    transition: transform 0.3s ease;
}

.desktop-services-button-header-button__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3958333333333335vw;
    height: 2.3958333333333335vw;
    border-radius: 0.4166666666666667vw;
    transition: all 0.3s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.desktop-services-button-header-button__icon img {
    width: 1.25vw;
    height: 1.25vw;
}

.desktop-services-button-header-button__icon--right {
    opacity: 1;
    transform: translateX(0);
    background: #1E8F7F;
}

.desktop-services-button-header-button__icon--left {
    position: absolute;
    left: 0.4166666666666667vw;
    opacity: 0;
    transform: translateX(-8px);
    width: 0;
    height: 0;
    background: #FFF;
    border-radius: 0.4166666666666667vw;
}

.desktop-services-button:hover .desktop-services-button-header-button__icon--right {
    width: 0;
    height: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
}

.desktop-services-button:hover .desktop-services-button-header-button__icon--left {
    width: 2.3958333333333335vw;
    height: 2.3958333333333335vw;
    opacity: 1;
    transform: translateX(0);
}

.desktop-services-button:hover .desktop-services-button-header-button__text {
    transform: translateX(4.17vw);
}