@charset "UTF-8";

.main-slider__desc,
.menu__body,
.popup__inner,
.video-popup__inner {
    overflow: auto
}

.main-slider__desc::-webkit-scrollbar,
.menu__body::-webkit-scrollbar,
.popup__inner::-webkit-scrollbar,
.video-popup__inner::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

.main-slider__desc::-webkit-scrollbar-track,
.menu__body::-webkit-scrollbar-track,
.popup__inner::-webkit-scrollbar-track,
.video-popup__inner::-webkit-scrollbar-track {
    background-color: var(--color-border)
}

.main-slider__desc::-webkit-scrollbar-thumb,
.menu__body::-webkit-scrollbar-thumb,
.popup__inner::-webkit-scrollbar-thumb,
.video-popup__inner::-webkit-scrollbar-thumb {
    background-color: var(--color-accent)
}

@-moz-document url-prefix() {

    .main-slider__desc,
    .menu__body,
    .popup__inner,
    .video-popup__inner {
        scrollbar-color: var(--color-accent) var(--color-border);
        scrollbar-width: thin
    }
}

.about,
.footer,
.section_dark,
.team {
    --color-border: var(--color-white-10);
    color: var(--color-white);
    background-image: var(--gradient)
}

.file-upload__input,
.filters__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden
}

.geo__text+.geo__text::before,
.heading-box__text+.heading-box__text::before {
    content: " ";
    display: block;
    line-height: 1
}

@font-face {
    font-family: icons;
    font-display: swap;
    src: url(icons.woff2) format("woff2"), url(icons.woff) format("woff");
    font-weight: 400;
    font-style: normal
}


[class*=" icon-"]::after,
[class^=icon-]::after {
    font-family: icons !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.sliders *, .sliders ::after, .sliders ::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

.sliders img {
    display: block;
    max-width: 100%;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}



:root {
    --height-header: 76px;
    --height-border: 2px;
    --height-btn: 48px;
    --gap: 12px;
    --color-dark: #14273b;
    --color-dark-5: rgba(20, 39, 59, 0.05);
    --color-dark-10: rgba(20, 39, 59, 0.1);
    --color-grey: #69717a;
    --color-accent: #00a8f2;
    --color-accent-10: rgba(0, 169, 242, 0.1);
    --color-accent-hover: #008ecd;
    --color-light: #f4fbff;
    --color-light-hover: #e6f6fe;
    --color-white: #ffffff;
    --color-white-5: rgba(255, 255, 255, 0.05);
    --color-white-10: rgba(255, 255, 255, 0.1);
    --color-border: var(--color-dark-10);
    --color-error: #c40c0c;
    --color-error-10: rgba(196, 12, 12, 0.1);
    --gradient: linear-gradient(135deg, #273f69 0%, #14273b 100%);
    --transition-duration: 0.3s
}


.page {
    flex: 1 1 auto
}

.page_small {
    display: flex;
    flex-direction: column
}

.page_small>:last-child {
    flex-grow: 1
}

.container {
    max-width: 100%;
    padding: 0;
    margin: 0 auto
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.section {
    position: relative
}

.section_overflow {
    overflow: hidden
}

._h2 {
    text-transform: uppercase;
    font-weight: 500;
    font-size: var(--title-2);
    line-height: 1.3
}

._h3 {
    font-family: "Proxima Nova", Sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2
}

._h2 b {
    font-weight: inherit;
    color: var(--color-accent)
}

._p2 {
    font-size: var(--text-normal);
    opacity: .6
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--height-btn);
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-align: center;
    line-height: 1;
    color: inherit;
    background-color: transparent;
    border: var(--height-border) solid transparent !important;
    border-radius: 100px !important;
    transition-duration: var(--transition-duration);
    transition-property: color, background-color, border-color;
    user-select: none;
    cursor: pointer;
}

.btn svg.btn-arrow {
    width: 15px;
}

.btn svg.btn-arrow path {
    fill: #fff;
}

.btn:not(.btn_round-icon) {
    padding: 0 15px
}

.btn:not(.btn_round-icon)::after {
    margin-right: -4px;
    margin-left: 8px
}

.btn:focus-visible {
    outline: 0
}

.btn_outline-light {
    border-color: var(--color-white-10)
}

.btn_outline-light:focus-visible {
    background-color: var(--color-white-10);
    border-color: transparent
}

.btn_outline-light:active {
    background-color: var(--color-white-5)
}

.btn_outline-dark {
    border-color: var(--color-dark-10)
}

.btn_outline-dark:focus-visible {
    background-color: var(--color-dark-10);
    border-color: transparent
}

.btn_outline-dark:active {
    background-color: rgba(20, 39, 59, .05) !important;
}

.btn_outline-accent {
    color: var(--color-accent);
    border-color: var(--color-accent-10)
}

.btn_outline-accent:focus-visible {
    background-color: var(--color-accent-10);
    border-color: transparent
}

.btn_outline-accent:active {
    background-color: rgba(0, 168, 242, .05)
}

.btn_accent {
    color: var(--color-white);
    background-color: var(--color-accent)
}

.btn_accent:focus-visible {
    background-color: var(--color-accent-hover)
}

.btn_white {
    color: var(--color-dark);
    background-color: var(--color-white)
}

.btn_white:focus-visible {
    color: var(--color-white);
    background-color: var(--color-accent-hover)
}

.btn_round-icon {
    aspect-ratio: 1/1;
    font-size: 1.2em;
    border-radius: 50%
}

.projects {
    overflow: hidden
}

.projects__body {
    display: flex;
    flex-direction: column-reverse;
    padding-top: 20px
}

.projects__text:not(:last-child) {
    margin-bottom: 24px
}

.sliders__action {
    display: none
}

.sliders__button {
    overflow: hidden
}

.projects__sliders .sliders__button {
    background-color: #066533 !important;
}

.projects__sliders .sliders__button:focus {
    background-color: #088342 !important;
}

.sliders__button+.sliders__button {
    margin-left: 15px;
}

.sliders__button_next {
    position: relative;
    border: none !important
}

.sliders__button_next:focus-visible .main-slider__progress circle:first-child {
    stroke: transparent
}

.sliders__progress {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
    width: var(--height-btn);
    height: var(--height-btn);
    border-radius: 50%;
    pointer-events: none;
    overflow: hidden
}

.sliders__progress circle {
    fill: none;
    stroke-width: calc(var(--height-border) * 2)
}

.sliders__progress circle:first-child {
    stroke: var(--color-border) !important;
    transition-duration: var(--transition-duration);
    transition-property: stroke
}

.sliders__progress circle:last-child {
    /* stroke: currentColor !important; */
    stroke-dasharray: calc(var(--height-btn) * 3.14159);
    stroke-dashoffset: calc(var(--height-btn) * 3.14159 * (1 - var(--progress)))
}

.thumb-slider {
    width: 100%
}

.thumb-slider__items {
    position: relative;
    display: flex;
    width: 100%;
    will-change: transform
}

.thumb-slider__item {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: 320px
}

.thumb-slider__img-box {
    width: 100%
}

.thumb-slider__img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.projects__sliders .thumb-slider__img {
    aspect-ratio: 58/46
}

.team__sliders .thumb-slider__img {
    aspect-ratio: 43/46
}

.thumb-slider__content {
    width: 80%;
    padding-top: 12px;
}

.thumb-slider__name {
    margin-bottom: 4px
}

.main-slider {
    display: none
}

.main-slider__items {
    position: relative;
    display: flex;
    width: 100%;
    will-change: transform
}

.main-slider__item {
    position: relative;
    flex-shrink: 0;
    display: flex;
    transition-duration: .1s;
    transition-property: opacity;
    opacity: 1 !important
}

.main-slider__img-mask {
    flex-shrink: 0;
    width: 58%;
    margin-right: var(--gap);
    overflow: hidden
}

.main-slider__img-box {
    transform: translateX(100%);
    width: 100%;
    height: 100%;
    transition-duration: .6s;
    transition-property: transform
}

.main-slider__img {
    aspect-ratio: 884/684;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.main-slider__content-mask {
    flex-grow: 1;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 24px;
}

.main-slider__content {
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);
    transition-duration: .5s;
    transition-property: opacity, transform;
    opacity: 0
}

.main-slider__name {
    margin-bottom: 4px
}

.main-slider__desc {
    padding-right: 10px;
    flex: 1 1
}





@media (min-width:479.98px) {}

@media (min-width:575.98px) {}

@media (min-width:767.98px) {
    .container {
        padding: 0;
    }

    ._h2 {
        line-height: 1.166
    }

    .btn:not(.btn_round-icon) {
        padding: 0 30px
    }

    .projects__body {
        padding-top: 20px
    }

    .projects__head {
        padding: 72px 0
    }

    .projects__text:not(:last-child) {
        margin-bottom: 36px
    }

}

@media (min-width:767.98px) {
    :root {
        --height-header: 110px;
        --height-border: 2px;
        --height-btn: 48px
    }

    .projects__head {
        display: flex;
        justify-content: space-between
    }

    .projects__info {
        flex-shrink: 0;
        width: 46.6%;
        margin-left: 3.9%
    }

    .projects-stats__body {
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        max-width: 100%;
        aspect-ratio: 43/46 auto;
        padding: 11.16%
    }

    .projects-stats__icon {
        width: 23.95%;
        margin: 0 0 24px 0
    }

    .projects-stats__name:not(:last-child) {
        margin-bottom: 8px
    }

    .thumb-slider__item {
        width: 450px
    }

    .main-slider__name {
        margin-bottom: 8px
    }

}

@media (min-width:1023.98px) {
    :root {
        --height-header: 168px;
        --height-btn: 48px;
        --gap: 24px
    }

    .btn:not(.btn_round-icon) {
        padding: 0 38px
    }

    .projects__body {
        padding-top: 20px
    }

    .projects__head {
        padding: 96px 0
    }

    .projects__text:not(:last-child) {
        margin-bottom: 48px
    }

    .sliders {
        position: relative
    }

    .sliders::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: -2px;
        right: 49.32%;
        bottom: -2px;
        width: 100vw;
        background-color: var(--color-white)
    }

    .sliders__action {
        position: absolute;
        z-index: 3;
        right: 0;
        bottom: 0;
        display: flex
    }

    .sliders_text .sliders__action {
        bottom: 100%;
        margin-bottom: 48px
    }

    .thumb-slider {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 32.36%;
        margin-left: 16.96%
    }

    .thumb-slider__item {
        width: 100%
    }

    .thumb-slider__content {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
        white-space: nowrap;
        clip-path: inset(100%);
        clip: rect(0 0 0 0);
        overflow: hidden
    }

    .main-slider {
        position: relative;
        z-index: 3;
        display: block;
        width: 85%
    }

    .sliders_text .main-slider {
        width: 100%
    }

    .main-slider__item_active {
        z-index: 2
    }

    .main-slider__item_active .main-slider__img-box {
        transform: translateX(0)
    }

    .main-slider__item_active .main-slider__content {
        transition-delay: .5s;
        transform: translateX(0);
        opacity: 1
    }

    .main-slider__item_next:not(:last-child) {
        z-index: 3
    }

    .main-slider__item_prev {
        z-index: 1
    }

    .main-slider__item_prev .main-slider__img-box {
        transform: translateX(0)
    }

    .main-slider__item_prev .main-slider__content {
        transform: translateY(50%);
        opacity: 0
    }

    .main-slider__item:last-child:not(.main-slider__item_active):not(.main-slider__item_next) .main-slider__img-box {
        transform: translateX(0)
    }

    .main-slider__item:last-child:not(.main-slider__item_active):not(.main-slider__item_next) .main-slider__content {
        transform: translateY(50%);
        opacity: 0
    }

    .sliders_text .main-slider__img-mask {
        width: 49.3%
    }

    .main-slider__desc {
        -webkit-hyphens: auto;
        hyphens: auto
    }
}

@media (min-width:1920.98px) {
    :root {
        --title-1: 64px
    }

    :root {
        --title-2: 48px
    }

    :root {
        --title-3: 32px
    }

    :root {
        --title-4: 22px
    }

    :root {
        --text-large: 22px
    }

    :root {
        --text-normal: 18px
    }

    :root {
        --text-small: 14px
    }

    .container {
        max-width: 1920px;
        padding: 0;
    }

    .main-slider__content {
        max-height: 212px
    }
}

@media (max-width:1023.98px) {

    .projects__title {
        margin-bottom: 24px
    }

    .projects-stats__item {
        flex-basis: 40%
    }
}

@media (max-width:767.98px) {
    :root {
        --title-1: 26px
    }

    :root {
        --title-2: 26px
    }

    :root {
        --title-3: 20px
    }

    :root {
        --title-4: 16px
    }

    :root {
        --text-large: 16px
    }

    :root {
        --text-normal: 14px
    }

    .projects__title {
        margin-bottom: 16px
    }

    .projects-stats__item {
        flex-basis: 90%
    }
}

@media (max-width:479.98px) {
    .btn:not(.btn_round-icon) {
        width: 100%
    }
}

@media (max-width:359.98px) {
    :root {
        --text-small: 12px
    }
}

@media (min-width:1439.98px) and (max-width:1920.98px) {
    :root {
        --title-1: clamp(46px, -7.886985447px + 3.7422037422vw, 64px)
    }

    :root {
        --title-2: clamp(36px, 0.0753430353px + 2.4948024948vw, 48px)
    }

    :root {
        --title-3: clamp(24px, 0.0502286902px + 1.6632016632vw, 32px)
    }

    :root {
        --title-4: clamp(18px, 6.0251143451px + 0.8316008316vw, 22px)
    }

    :root {
        --text-large: clamp(18px, 6.0251143451px + 0.8316008316vw, 22px)
    }

    :root {
        --text-normal: clamp(16px, 10.0125571726px + 0.4158004158vw, 18px)
    }

    .main-slider__content {
        max-height: clamp(166px, 28.2888149688px + 9.5634095634vw, 212px)
    }
}

@media (min-width:767.98px) and (max-width:1439.98px) {
    :root {
        --title-1: clamp(26px, 3.143452381px + 2.9761904762vw, 46px)
    }

    :root {
        --title-2: clamp(26px, 14.5717261905px + 1.4880952381vw, 36px)
    }

    :root {
        --title-3: clamp(20px, 15.4286904762px + 0.5952380952vw, 24px)
    }

    :root {
        --title-4: clamp(16px, 13.7143452381px + 0.2976190476vw, 18px)
    }

    :root {
        --text-large: clamp(16px, 13.7143452381px + 0.2976190476vw, 18px)
    }

    :root {
        --text-normal: clamp(14px, 11.7143452381px + 0.2976190476vw, 16px)
    }
}

@media (min-width:359.98px) and (max-width:1920.98px) {
    :root {
        --text-small: clamp(12px, 11.5387828315px + 0.1281229981vw, 14px)
    }
}

@media (any-hover:hover) {
    .btn_outline-light:not(:active):hover {
        background-color: var(--color-white-10);
        border-color: transparent
    }

    .btn_outline-dark:not(:active):hover {
        background-color: #088342;
        border-color: transparent
    }

    .btn_outline-accent:not(:active):hover {
        background-color: var(--color-accent-10);
        border-color: transparent
    }

    .btn_accent:not(:active):hover {
        background-color: var(--color-accent-hover)
    }

    .btn_white:not(:active):hover {
        color: var(--color-white);
        background-color: var(--color-accent-hover)
    }

    .sliders__button_next:not(:active):hover .main-slider__progress circle:first-child {
        stroke: transparent
    }
}