@charset "UTF-8";
.element-animation {
    opacity: 0;
    transform: translateY(10rem); }

.element-animation.element-show {
    opacity: 1;
    transition: all 0.5s;
    transform: translateY(0%); }

#mob-svg, #desk-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-size: cover;
}

.cursor-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 46.3rem;
    height: 46.3rem;
    border-radius: 100%;
    background: radial-gradient(at center, #65FFAE 0, rgba(95, 33, 220, 0) 20rem);
    transition: 0s cubic-bezier(0, 0, 1, 1);
    opacity: 0;
}
body .one, body .two, body .three {
    position: relative;
    float: left;
    width: 100%; }

body .title {
    font-family: "HeliosExtC-Bold";
    color: #fff; }

body .title::after {
    display: block;
    position: absolute;
    content: ""; }

body .subtitle {
    position: relative;
    float: right;
    font-family: "HeliosExtC";
    color: #fff; }

body .one-wrapper {
    position: relative;
    float: left; }

body .one-wrapper--title::after {
    background-color: #5F21DC; }

body .one-wrapper--block {
    position: relative;
    float: left;
    display: grid; }

body .one-wrapper--block .item {
    position: relative;
    float: left; }

body .one-wrapper--block .item-pic {
    position: relative;
    float: left; }

body .one-wrapper--block .item-infos {
    position: relative;
    float: left;
    font-family: "HeliosExtC";
    color: #fff; }

body .one-container {
    position: relative;
    float: left; }

body .one-container--map { position: absolute; }

body .one-container--pic {
    position: absolute; }

body .one-container--title.element-show {
    transition-delay: 0.25s; }

body .one-container--title::after {
    background-color: #9CECE6; }

body .one-container--text.element-show {
    transition-delay: 0.5s; }

body .two-title {
    color: #000; }

body .two-title::after { background-color: #5F21DC; }

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

body .two-wrapper {
    position: relative;
    float: left;
    display: grid; }

body .two-wrapper--item {
    display: grid;
    align-items: center;
    justify-content: center; }

body .two-wrapper--item .text {
    font-family: "HeliosExtC";
    color: #000;
    text-align: center; }

body .three-block {
    position: relative;
    float: left; }

body .three-block--title {
    position: relative;
    float: left; }

body .three-block--title::after {
    background-color: #fff; }

body .three-container {
    position: relative;
    float: left; }

body .three-container--title::after {
    background-color: #fff; }
.item-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
body .three-container--wrapper {
    position: relative;
    float: left;
    width: 100%;
    display: grid; }

body .three-container--wrapper .item {
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none; }

body .three-container--wrapper .item-info {
    position: relative;
    float: left;
    display: flex;
    flex-direction: column;
    overflow: hidden; }

body .three-container--wrapper .item-info--name {
    position: relative;
    float: left;
    font-family: "HeliosExtC";
    color: #fff; }

body .three-container--wrapper .item-info--name::after {
    display: block;
    position: absolute;
    content: "";
    background-color: #fff;
    width: 100%; }

body .three-container--wrapper .item-info--text {
    position: relative;
    float: left;
    font-family: "HeliosExtC";
    color: #fff;
    transition: all 0.75s ease;
}

/******************************************ДЕСКТОП************************************************/
@media (min-width: 600px) {
    body .title {
        font-size: 5.4rem; }

    body .title::after {
        content: "";
        width: 15rem;
        height: .5rem;
        top: 9rem; }

    body .subtitle {
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 4rem; }

    body .one {
        height: 228rem;
        box-sizing: border-box;
        background: linear-gradient(180deg, #000000 25%, #5F21DC 65.1%, #7789E8 78.13%, #FFFFFF 100%);
    }

    #mob-svg { display: none; }

    #desk-svg {
        background-image: url('../images/svg/map_fon.svg');
        height: 230rem;
    }

    .cursor-gradient {
        width: 46.3rem;
        height: 46.3rem;
    }

    body .one-wrapper {
        width: 144rem;
        margin-left: calc((100% - 144rem) / 2);
        margin-top: 19.7rem;
    }

    body .one-wrapper--block {
        margin-top: 10.5rem;
        grid-template-columns: repeat(2, 65rem);
        grid-template-rows: repeat(2, 25rem);
        gap: 10.5rem 10.5rem;
    }

    body .one-wrapper--block .item .pic1 {
        width: 7.783rem;
        height: 10.48rem; }

    body .one-wrapper--block .item .pic2 {
        width: 8.296rem;
        height: 7.681rem; }

    body .one-wrapper--block .item .pic3 {
        width: 5.993rem;
        height: 7.6rem; }

    body .one-wrapper--block .item .pic4 {
        width: 5.576rem;
        height: 7.004rem; }

    body .one-wrapper--block .item-infos {
        margin-top: 3rem;
        font-size: 2.3rem;
        line-height: 4rem; }
    body .one-wrapper--block .item:nth-child(2) .item-infos { margin-top: 5.7rem;}
    body .one-wrapper--block .item:nth-child(1) .item-info {
        margin-top: 0.5rem; }

    body .one-container {
        width: 144rem;
        margin-left: calc((100% - 144rem) / 2);
        margin-top: 20.4rem; }
    body .one-container--map {
        top: 25rem;
        left: -30rem;
        width: 160rem;
        height: 80rem;
        opacity: 0;
    }
    body .one-container--pic {
        width: 174.7rem;
        height: 81.8rem;
        left: -36rem;
        top: 8rem;
    }

    body .one-container--text {
        margin-top: 37.2rem; }

    body .two {
        height: 68.5rem;
        background-color: #fff;
        margin-top: -0.1rem;
    }

    body .two-title {
        width: 144rem;
        margin-left: calc((100% - 144rem) / 2); }

    body .two-title::after {
        background-color: #5F21DC; }

    body .two-wrapper {
        width: 144rem;
        margin-left: calc((100% - 144rem) / 2);
        margin-top: 10rem;
        grid-template-columns: repeat(auto-fill, 10rem);
        gap: 12rem 23rem;
    }

    body .two-wrapper--item .icon {
        width: 12.5rem;
        height: 12.5rem; }

    body .two-wrapper--item .text {
        margin-top: 2.2rem;
        font-size: 2rem;
        font-weight: 700;
        line-height: 2rem; }

    body .three {
        margin-top: -0.1rem;
        padding-bottom: 20.3rem;
    }

    body .three-bg {
        height: 174.8rem;
        background: linear-gradient(0deg, #000000 0%, #5F21DC 58.33%, #9AD0EF 87.85%, #FFFFFF 100%);
    }

    body .three-block {
        width: 144rem;
        margin-left: calc((100% - 144rem) / 2);
        margin-top: 20rem; }

    body .three-block--title::after {
        top: 9rem; }

    body .three-block--text {
        margin-top: 2rem; }

    body .three-container {
        width: 144rem;
        margin-left: calc((100% - 144rem) / 2);
        margin-top: 20rem; }

    body .three-container--title::after {
        background-color: #fff; }

    body .three-container--wrapper {
        width: 100%;
        margin-top: 8.5rem;
        grid-template-columns: repeat(3, 45rem);
        gap: 5rem 5rem;
    }

    body .three-container--wrapper .item {
        width: 44rem;
        height: 61rem;
    }

    body .three-container--wrapper .item-info {
        width: 35rem;
        margin-left: calc((100% - 35rem) / 2);
        transform: translateY(50rem);
    }

    body .three-container--wrapper .item-info--name {
        font-size: 2.3rem;
        font-weight: 700;
        line-height: 2.7rem; }

    body .three-container--wrapper .item-info--name::after {
        width: 100%;
        height: 0.1rem;
        bottom: -2rem; }

    body .three-container--wrapper .item-info--text {
        padding: 4rem 0rem;
        font-size: 1.8rem;
        line-height: 2.2rem;
        opacity: 0;
        transform: translateY(-10rem); }

    body .three-container--wrapper .item:hover .item-info--text {
        opacity: 1;
        transform: translateY(0rem);}

    body .three .russian {
        margin-top: 8.5rem; }
}

/*********************************МОБИЛЬНАЯ ВЕРСИЯ************************************************/
@media (max-width: 599px) {
    body .title {
        font-size: 1.8rem; }

    body .title::after {
        content: "";
        width: 13.1rem;
        height: .2rem;
        top: 3.5rem; }

    body .subtitle {
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.54rem; }

    #desk-svg { display: none; }

    body .one, #mob-svg { height: 122.3rem; }

    body .one { background: linear-gradient(180deg, #000000 29.27%, #5F21DC 75.32%, #7789E8 84.53%, #FFFFFF 100%); }

    #mob-svg { background-image: url('../images/svg/fon_telefonmap.svg'); }
    .cursor-gradient {
        width: 16.3rem;
        height: 16.3rem;
    }
    body .one-wrapper {
        width: 26.4rem;
        margin-left: calc((100% - 26.4rem) / 2);
        margin-top: 11.2rem; }

    body .one-wrapper--block {
        margin-top: 4.079rem;
        grid-row-gap: 2.8rem; }

    body .one-wrapper--block .item .pic1 {
        width: 4.546rem;
        height: 6.122rem; }

    body .one-wrapper--block .item .pic2 {
        width: 4.748rem;
        height: 4.396rem;
        margin-bottom: 1rem; }

    body .one-wrapper--block .item .pic3 {
        width: 3.7rem;
        height: 4.739rem;
        margin-bottom: 1rem; }

    body .one-wrapper--block .item .pic4 {
        width: 3.742rem;
        height: 4.7rem;
        margin-bottom: 1rem; }

    body .one-wrapper--block .item-infos {
        font-size: 1rem;
        line-height: 1.4rem; }

    body .one-container {
        width: 27.2rem;
        margin-left: calc((100% - 27.2rem) / 2);
        margin-top: 5.837rem; }
    body .one-container--map {
        top: 5rem;
        left: -2.5rem;
        width: 32.2rem;
        height: 25rem;
    }
    body .one-container--pic {
        width: 36rem;
        height: 20rem;
        left: 1rem;
        top: 6rem;
        transform: scale(1.1);
        background-image: url("../images/svg/map.svg"); }

    body .one-container--text {
        float: left;
        margin-top: 18rem; }

    .two {
        margin-top: -1rem;
        padding-bottom: 1rem;
        background-color: #fff;
    }

    body .two-title {
        margin-left: 2.3rem; }

    body .two-title::after {
        background-color: #5F21DC; }

    body .two-wrapper {
        width: 29rem;
        margin-left: calc((100% - 29rem) / 2);
        margin-top: 2.7rem;
        grid-template-columns: repeat(auto-fill, 6.005rem);
        gap: 1.3rem 4rem;
        justify-content: center; }

    body .two-wrapper--item .icon {
        width: 6rem;
        height: 4.5rem; }

    body .two-wrapper--item .text {
        margin-top: 1.4rem;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.54rem; }

    body .three {
        padding-bottom: 20.3rem;}
    body .three-bg {
        margin-top: -1rem;
        height: 105.3rem;
        background: linear-gradient(0deg, #000000 0%, #5F21DC 58.33%, #9AD0EF 83.85%, #FFFFFF 100%);
    }
    body .three-block {
        width: 26.91rem;
        margin-left: calc((100% - 26.91rem) / 2);
        margin-top: 7.4rem; }

    body .three-block--title {
        color: #000; }

    body .three-block--title::after {
        background-color: #5F21DC; }

    body .three-block--text {
        float: left;
        margin-top: 3.7rem; }

    body .three-container {
        width: 27rem;
        margin-left: calc((100% - 27rem) / 2);
        margin-top: 6rem; }

    body .three-container--wrapper {
        width: 100%;
        margin-top: 4.2rem;
        grid-template-columns: repeat(auto-fill, 12.7rem);
        gap: 1.3rem 1.3rem; }

    body .three-container--wrapper .item {
        width: 12.681rem;
        height: 18.3rem;
        display: flex;
        align-items: center;
        justify-content: center; }

    body .three-container--wrapper .item-info {
        width: 9.747rem;
        word-wrap: break-word;
        text-overflow: ellipsis; }

    body .three-container--wrapper .item-info--name {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.4rem; }

    body .three-container--wrapper .item-info--name::after {
        width: 100%;
        height: 0.1rem;
        bottom: -1rem; }

    body .three-container--wrapper .item-info--text {
        padding: 2rem 0rem;
        font-size: 0.6rem;
        line-height: 0.84rem; }


    body .three-container--wrapper .item.active .item-info--text {
        opacity: 1;
        transform: translateY(0rem);}

    body .three .russian {
        margin-top: 3.556rem; }
}