:root {
    --color-white: #FFFFFF;
    --color-primary: #071827;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Avenir', 'Arial', sans-serif;
}

.page {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.page__text {
    font-size: 0.93vw;
    line-height: 1.6;
    letter-spacing: -0.007vw;
}

.wrapper {
    width: 100%;
    max-width: 85.4vw;
    margin: 0 auto;
    box-sizing: border-box;
}

.page img {
    display: block;
    height: auto;
}

.screen-1 {
    padding: 8.3vw 0 4vw;
}

.screen-1__wrapper {
    display: grid;
    grid-template-columns: 817fr 672fr;
    gap: 5.5vw 7.8vw;
}

.screen-1__logo {
    width: 27.7vw;
    grid-column: 1 / 3;
}

.screen-1__main-text {
    font-size: 2.5vw;
    line-height: 1.2;
    margin: 0;
}

.screen-1__line {
    grid-column: 1 / 3;
}

.screen-1__line-image {
    width: 100%;
}

.screen-1__text {
    margin: 0;
}

.screen-2 {
    position: relative;
    padding: 4.4vw 0 8.3vw;
    margin-bottom: 4vw;
}

.screen-2__wrapper {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 6.25vw;
}

.screen-2__article {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw 12vw;
}

.screen-2__article-title {
    font-size: 1.56vw;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.018vw;
    margin: 0;
    grid-column: 1 / 3;
}

.screen-2__article p {
    margin: 0;
}

.screen-2__map {
    position: absolute;
    right: 0;
    opacity: 0.1;
    width: 58.5vw;
    top: 0;
}

.colors {
    padding: 16.6vw 2vw 8.3vw 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7.3vw 6.3vw;
}

.colors__item {
    position: relative;
    width: 13.75vw;
    height: 13.75vw;
}

.color {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.14vw;
    line-height: 0.9;
    padding: 1.25vw;
    box-sizing: border-box;
}

.color:nth-child(1) {
    position: relative;
    z-index: 5;
}

.color:nth-child(2) {
    position: absolute;
    z-index: 4;
    top: -2vw;
    right: -2vw;
}

.color:nth-child(3) {
    position: absolute;
    z-index: 3;
    top: -4vw;
    right: -4vw;
}

.color:nth-child(4) {
    position: absolute;
    z-index: 2;
    top: -6vw;
    right: -6vw;
}

.colors__item:nth-child(3) .color {
    border: 1px solid rgba(51, 51, 51, 0.6);
    box-sizing: border-box;
    color: #333333;
}

.color_gradient {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.color__bottom {
    margin-left: auto;
}

.colors__item:nth-child(6) .color {
    border: 1px solid var(--color-white);
}

.typography {
    overflow: hidden;
    position: relative;
}

.career__font-bg {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
}

.typography__header {
    display: grid;
    grid-template-columns: 13vw auto;
    gap: 3.9vw 1.5vw;
    align-items: end;
    margin: 35vw 0;
    position: relative;
}

.typography__element-1 {
    width: 16.9vw;
    grid-column: 1 / 3;
}

.typography__element-2 {
    width: 13vw;
}

.typography__element-3 {
    width: 4vw;
}

.screen-3__image {
    width: 100%;
    margin: 8.3vw auto;
}

.career {
    margin: 8.3vw 0;
    padding: 7.1vw 0 13.1vw;
    position: relative;
    overflow: hidden;
}

.career__wave {
    position: absolute;
    left: 0;
    top: -1vw;
    width: 65vw;
}

.career__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.2vw;
}

.career__pic {
    width: 63.8vw;
}

.career__tube {
    width: 28.1vw;
    position: absolute;
    right: 0;
    bottom: 0;
}

.career__pic-2 {
    z-index: 2;
    position: relative;
}

.screen-4__image {
    width: 100%;
}

.screen-5__image {
    width: 100%;
    margin: 8.3vw 0;
}

.screen-6__image {
    width: 100%;
    margin: 8.3vw 0;
}

.screen-7 {
    padding: 11.1vw 0;
    margin-top: 8.3vw;
    position: relative;
}

.screen-7__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4.1vw;
}

.screen-7__pic {
    width: 63.8vw;
}

.screen-7__pic-2 {
    margin-left: auto;
}

.screen-7__element-1 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20.1vw;
}

.screen-7__element-2 {
    position: absolute;
    right: 0;
    top: 1vw;
    width: 61.8vw;
}

.screen-8__pic {
    width: 100%;
    margin-bottom: 8.3vw;
}

.screen-9 {
    margin: 8.3vw 0;
}

.screen-9__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.screen-9__pic-1 {
    width: 72vw;
}

.screen-9__pic-2 {
    width: 65.8vw;
    margin: -1.4vw 0 0 auto;
}

.screen-10 {
    position: relative;
    background-color: var(--color-primary);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 0.8vw;
    margin: 8.3vw 0;
    gap: 0.8vw;
    overflow: hidden;
}

.screen-10__pic {
    max-width: 100%;
}

.screen-11__pic {
    margin-top: 8.3vw;
}

.screen-12 {
    padding: 13.3vw 0 9.5vw;
    background-color: #07275f;
    position: relative;
    overflow: hidden;
}

.screen-12__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.screen-12__slides {
    position: relative;
    display: flex;
    flex-direction: column;
}

.screen-12__pic-1 {
    width: 72vw;
}

.screen-12__pic-2 {
    width: 65.8vw;
    margin: -1.4vw 0 0 auto;
}

.screen-12__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3.6vw 0.8vw;
    overflow: hidden;
    width: 100%;
    margin-top: 8.5vw;
}

.screen-13 {
    position: relative;
    padding: 9.1vw 0 11vw;
    background-color: #00030c;
    overflow: hidden;
}

.screen-13__bg-1 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.screen-13__bg-2 {
    width: 64.2vw;
    position: absolute;
    left: 4.9vw;
    bottom: 0;
}

.screen-13__rocket {
    position: absolute;
    width: 26vw;
    bottom: 8.4vw;
    right: 1.5vw;
}

.screen-13__pic {
    width: 53.8vw;
    position: relative;
}

.screen-14 {
    position: relative;
    padding: 9.8vw 0 2.6vw;
    overflow: hidden;
}

img.screen-14__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.screen-14__logo {
    width: 27.7vw;
    margin: 0 auto 10.7vw;
}

.screen-14__wrapper {
    position: relative;
}

.screen-14__artw {
    width: 5vw;
}

.screen-14__menu {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 2vw;
}

.screen-14__menu-item {
    font-size: 0.73vw;
    text-transform: uppercase;
}

.screen-14__menu-item:nth-child(3),
.screen-14__menu-item:nth-child(5) {
    text-align: right;
}

@media (max-width: 767px) {
    .wrapper {
        max-width: 100%;
        padding: 0 4.2vw;
    }

    .page__text {
        font-size: 4.2vw;
        line-height: 1.5;
        letter-spacing: -0.037vw;
    }

    .screen-1 {
        margin: 0 0 12.8vw;
    }

    .screen-1__wrapper {
        display: flex;
        flex-direction: column;
        gap: 10.6vw;
    }

    .screen-1__logo {
        width: 70.9vw;
        margin-bottom: 2.1vw;
    }

    .screen-1__main-text {
        font-size: 6.4vw;
    }

    .screen-1__text {
        font-size: 4.8vw;
    }

    .screen-1__line-image {
        margin-top: 2.1vw;
        width: 67vw;
        margin-left: -4.6vw;
    }

    .screen-2 {
        gap: 12.8vw;
        padding: 0;
        margin: 12.8vw 0;
    }

    .screen-2__map {
        top: auto;
        bottom: 2vw;
        width: 90vw;
    }

    .screen-2__wrapper {
        gap: 12.8vw;
    }

    .screen-2__article {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5.3vw;
    }

    .screen-2__article-title {
        grid-column: auto;
        font-size: 5.3vw;
    }

    .colors {
        padding: 8vw 0 0;
        grid-template-columns: repeat(2, 1fr);
        gap: 7.4vw 15.4vw;
    }

    .colors__item {
        width: 32.2vw;
        height: 32.2vw;
    }

    .colors__item:nth-child(3),
    .colors__item:nth-child(4) {
        margin-top: 10.9vw;
    }

    .color {
        font-size: 3.7vw;
        padding: 2.6vw;
    }

    .color:nth-child(2) {
        position: absolute;
        z-index: 4;
        top: -3.7vw;
        right: -3.7vw;
    }

    .color:nth-child(3) {
        position: absolute;
        z-index: 4;
        top: -7.4vw;
        right: -7.4vw;
    }

    .color:nth-child(4) {
        position: absolute;
        z-index: 4;
        top: -11.1vw;
        right: -11.1vw;
    }

    .screen-3__image {
        margin: 12.8vw auto;
        max-width: 750px;
    }

    .career {
        margin: 12.8vw 0;
        padding: 0 0 24vw;
    }

    .career__wrapper {
        gap: 10.6vw;
    }

    .career__wave {
        display: none;
    }

    .career__pic {
        width: 91vw;
        max-width: 686px;
    }

    .career__tube {
        width: 38.5vw;
    }

    .typography {
        margin: 12.8vw 0;
    }

    .career__font-bg {
        display: none;
    }

    .typography__header {
        margin: 0 0 19.2vw;
        grid-template-columns: 33.3vw auto;
        gap: 10vw 4.8vw;
    }

    .typography__element-1 {
        width: 66.6vw;
    }

    .typography__element-2 {
        width: 33.3vw;
    }

    .typography__element-3 {
        width: 20.8vw;
    }

    .screen-5__image {
        margin: 12.8vw 0;
    }

    .screen-6__image {
        margin: 12.8vw auto;
        max-width: 750px;
    }

    .screen-7 {
        padding: 0;
        margin: 0 0 12.8vw;
    }

    .screen-7__wrapper {
        gap: 5.3vw;
    }

    .screen-7__pic {
        width: 80vw;
        max-width: 600px;
    }

    .screen-7__element-1 {
        width: 21vw;
    }

    .screen-7__element-2 {
        top: 12vw;
    }

    .screen-8__pic {
        margin-bottom: 12.8vw;
    }

    .screen-9 {
        margin: 12.8vw 0;
    }

    .screen-9__pic {
        width: 80vw;
        max-width: 600px;
    }

    .screen-10 {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 4.2vw;
        margin: 12.8vw 0;
        gap: 4.2vw;
    }

    .screen-11__pic {
        margin-top: 12.8vw;
    }

    .screen-12 {
        padding: 8.5vw 0;
        position: relative;
        overflow: hidden;
    }

    .screen-12__slides {
        gap: 5.3vw;
    }

    .screen-12__pic {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .screen-12__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4.2vw 0;
        margin-top: 16vw;
    }

    .screen-13 {
        padding: 8.5vw 0;
    }

    img.screen-13__bg-2,
    img.screen-13__rocket {
        display: none;
    }

    .screen-13__pic {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    .screen-14 {
        display: none;
    }
}