:root {
    --font-family: "FS Emeric Trial", sans-serif;
    --second-family: "Gotham Narrow", sans-serif;
    --third-family: "Averta", sans-serif;
    --font3: "Montagu Slab", sans-serif;
    --font4: "Montserrat", sans-serif;
}

@font-face {
    font-family: "Gotham Narrow";
    src: url("fonts/GothamNarrow-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

/* top */
.ci-top {
    position: relative;
}

.ci-top .container {
    min-height: 34.3056vw;
}

.ci-top::before {
    content: none;
    display: block;
    width: 31.9444vw;
    height: 15.9722vw;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    background-image: url("./img/ci-top-img-left.svg");
}

.ci-top__bg-block {
    background-size: 100%;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ci-top__content {
    position: relative;
    margin-top: 20.2778vw;
}

.ci-top__img img {
    position: absolute;
    right: 0;
    top: -20.2778vw;
    width: 54.25vw;
}

.ci-top__title {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 3.8889vw;
    line-height: 116%;
    color: #fff;
    margin-top: 3.0556vw;
}

.ci-top__text {
    font-family: var(--font-family);
    font-weight: 250;
    font-size: 1.7361vw;
    color: #fff;
    margin-top: 0.9722vw;
}

.ci-top__button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.6389vw;
    margin-left: -0.2778vw;
    padding: 0.6944vw 1.3889vw;
    border-radius: 2.0833vw;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    width: 13.0556vw;
    height: 4.1667vw;
    background: #00eeff;
}

.ci-top__button:hover {
    text-decoration: none;
    background-color: #5a3eff;
}

.ci-top__button a {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 1.3889vw;
    line-height: 140%;
    text-align: center;
    color: #000;
}

.ci-top__button a:hover {
    text-decoration: none;
}

@media screen and (max-width: 750px) {
    .ci-top::before,
    .ci-top__bg-block {
        display: none;
    }

    .ci-top .container {
        min-height: 107.5367vw;
    }
    .ci-top__content {
        margin-top: 44.8598vw;
    }

    .ci-top__img img {
        top: 0;
        width: 81vw;
    }

    .ci-top__title {
        font-weight: 500;
        font-size: 6.9426vw;
        line-height: 104%;
        width: 73.1642vw;
        margin-top: 27.7704vw;
    }

    .ci-top__text {
        font-weight: 250;
        font-size: 3.3378vw;
        line-height: 128%;
        margin-top: 2.0027vw;
        width: 45.7944vw;
        margin-bottom: 4.3vw;
    }

    .ci-top__button {
        width: 20.8278vw;
        height: 5.6075vw;
        margin: 0;
        border-radius: 2.9372vw;
    }

    .ci-top__button a {
        font-weight: 400;
        font-size: 2.6702vw;
        line-height: 140%;
    }
}
/* second */

.ci-second {
    position: relative;
}

.ci-second .container {
    padding-bottom: 5.7639vw;
}

.ci-second::before {
    content: "";
    display: block;
    width: 15.9722vw;
    height: 15.9722vw;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background-image: url("./img/ci-second-left.svg");
}

.ci-second::after {
    content: "";
    display: block;
    width: 16.1111vw;
    height: 16.1111vw;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-image: url("./img/ci-second-right.svg");
}

.ci-second__title {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 3.125vw;
    line-height: 111%;
    text-align: center;
    color: #fcfcfc;
}

.ci-second__text {
    font-family: var(--font-family);
    font-weight: 250;
    font-size: 1.7361vw;
    line-height: 130%;
    text-align: center;
    color: #fcfcfc;
    width: 67.0833vw;
    margin: 0.4167vw auto 0;
}

.ci-second__icon {
    margin-top: 1.9444vw;
    text-align: center;
}

.ci-second__icon img {
    width: 18.3333vw;
}

.ci-second__content {
    padding-top: 5.2778vw;
}

.ci-second__numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0.7vw 0 0 0;
}
.ci-second__percent {
    margin-right: 8vw;
}

.ci-second__percent,
.ci-second__number {
    flex: none;
}

.ci-second__numbers h5 {
    font-family: var(--second-family);
    font-weight: 900;
    font-size: 7.7778vw;
    line-height: 134%;
    text-align: center;
    color: #5a3eff;
}

.ci-second__numbers p {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.7361vw;
    line-height: 122%;
    text-align: center;
    color: #fcfcfc;
    margin: -0.85vw auto 0;
}

.ci-second__percent p {
    width: 16.5278vw;
}

.ci-second__number p {
    width: 11.75vw;
}

.ci-second__bottom-text {
    font-family: var(--font-family);
    font-weight: 250;
    font-size: 1.7361vw;
    line-height: 130%;
    text-align: center;
    color: #fcfcfc;
    width: 60.4167vw;
    margin: 3.0556vw auto 0;
}

.ci-second__numbers .more-char {
    position: relative;
    width: 3.4722vw;
    top: -0.9722vw;
    left: 0.1389vw;
}

@media screen and (max-width: 750px) {
    .ci-second {
        height: auto;
    }

    .ci-second .container {
        padding-bottom: 9.0788vw;
    }

    .ci-second__title {
        font-weight: 500;
        font-size: 6.008vw;
        line-height: 120%;
        text-align: center;
        width: 62.4833vw;
        margin: 0 auto;
    }

    .ci-second__text {
        font-weight: 350;
        font-size: 3.3378vw;
        line-height: 140%;
        width: 66.7557vw;
        margin-top: 1.3351vw;
    }

    .ci-second__icon img {
        width: 35.247vw;
        margin-top: 1.4686vw;
    }

    .ci-second::before {
        width: 34.0454vw;
        height: 34.5794vw;
        top: -34.98vw;
    }

    .ci-second::after {
        display: none;
    }

    .ci-second__numbers {
        width: 100%;
        margin: 5.3405vw 0 0;
    }
    .ci-second__percent, .ci-second__number {
        flex: none;
    }

    .ci-second__percent {
        margin-right: 11vw;
    }

    .ci-second__percent h5,
    .ci-second__number h5 {
        font-size: 14.9533vw;
        line-height: 134%;
    }

    .ci-second__percent p,
    .ci-second__number p {
        font-weight: 500;
        font-size: 3.3378vw;
        line-height: 126%;
    }

    .ci-second__percent p {
        width: 31.7757vw;
    }

    .ci-second__number p {
        width: 22.1682vw;
    }

    .ci-second__bottom-text {
        font-weight: 350;
        font-size: 3.3378vw;
        line-height: 140%;
        width: 71.5621vw;
        margin: 6.4085vw auto 0;
    }
}
/* third */

.ci-third {
    position: relative;
    height: 38.1944vw;
}

.ci-third::before {
    content: "";
    display: block;
    width: 16.1111vw;
    height: 16.1111vw;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    background-image: url("./img/ci-third-top.svg");
}

.ci-third::after {
    content: none;
    display: block;
    width: 17.9722vw;
    height: 17.9722vw;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-image: url("./img/ci-third-bottom.svg");
}

.ci-third__bg-block {
    background-size: 100%;
    background-position: center;
    position: absolute;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.ci-third .container {
    position: relative;
    padding-top: 3.75vw;
}

.ci-third__icon {
    text-align: center;
}

.ci-third__icon img {
    width: 23.8194vw;
}

.ci-third__title {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 3.125vw;
    line-height: 111%;
    text-align: center;
    color: #f3f3f3;
    width: 51.3889vw;
    margin: 2.2222vw auto 0;
}

.ci-third__options {
    display: flex;
    justify-content: center;
    height: 5.5556vw;
    margin-top: 3.8889vw;
}

.ci-third__options .option:nth-child(2) {
    border-left: 0.0694vw solid #fff;
    border-right: 0.0694vw solid #fff;
}

.ci-third__options .option {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 1.7361vw;
    line-height: 134%;
    text-align: center;
    color: #f3f3f3;
    width: 21.1111vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.9444vw;
}

@media screen and (max-width: 750px) {
    .ci-third::before,
    .ci-third::after {
        display: none;
    }

    .ci-third .container {
        min-height: 79.0387vw;
        padding-top: 5.3405vw;
    }

    .ci-third {
        height: auto;
    }

    .ci-third__icon img {
        width: 38.5848vw;
    }

    .ci-third__title {
        font-weight: 500;
        font-size: 6.008vw;
        line-height: 111%;
        width: 74.0988vw;
        margin-top: 1.7356vw;
    }

    .ci-third__options {
        flex-direction: column;
        align-items: center;
        height: auto;
        margin-top: 0.8889vw;
    }

    .ci-third__options .option {
        font-weight: 400;
        font-size: 3.3378vw;
        line-height: 134%;
        width: 41.6555vw;
        padding: 3.7383vw 0;
    }

    .ci-third__options .option:nth-child(2) {
        border: none;
        position: relative;
    }

    .ci-third__options .option:nth-child(2)::before,
    .ci-third__options .option:nth-child(2)::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 50%;
        height: 0;
        border-top: 0.1335vw solid #fff;
        transform: translateX(-50%);
        top: 0;
    }

    .ci-third__options .option:nth-child(2)::after {
        top: auto;
        bottom: 0;
        border-top: none;
        border-bottom: 0.1335vw solid #fff;
    }
}
/* fourth */

.ci-fourth {
    position: relative;
    height: 55.5556vw;
}

.ci-fourth .container {
    padding-top: 4.3056vw;
}
.ci-fourth__icon {
    text-align: center;
}

.ci-fourth__title {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 3.125vw;
    line-height: 111%;
    color: #f3f3f3;
    text-align: center;
    max-width: 41.6667vw;
    margin: 0 auto;
}

.ci-fourth__top-text,
.ci-fourth__bottom-text {
    font-family: var(--font-family);
    font-weight: 250;
    font-size: 1.7361vw;
    line-height: 130%;
    color: #f3f3f3;
    text-align: center;
}

.ci-fourth__top-text {
    margin: 1.1111vw auto 0;
    max-width: 51.5972vw;
}

.ci-fourth__bottom-text {
    margin-top: 2.7361vw;
    margin-left: -0.2778vw;
    display: flex;
    flex-direction: column;
}

.ci-fourth__bottom-text p {
    position: relative;
    padding-left: 0;
    display: inline-block;
    margin: 0 auto;
}

.ci-fourth__bottom-text p::before {
    content: "•";
    position: relative;
    left: -5px;
    top: 0;
    font-size: 1.7361vw;
    color: #fff;
}

.ci-fourth__bottom-text p a {
    color: #F3F3F3;
    text-decoration: underline;
}

.ci-fourth__bottom-text p a:hover {
    text-decoration: none;
    color: inherit;
}

.ci-fourth__icon img {
    width: 9.7917vw;
}

.ci-fourth__stages {
    width: 65.9722vw;
    display: flex;
    margin: 3.1944vw auto 0;
}

.ci-fourth__stages .item:last-child .arrow-text {
    display: none;
}

.ci-fourth__stages .item {
    position: relative;
    width: 17.6389vw;
    display: flex;
    align-items: start;
    justify-content: center;
}

.ci-fourth__stages .title {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 1.3889vw;
    line-height: 130%;
    text-align: center;
    color: #f3f3f3;
}

.ci-fourth__stages .description {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.25vw;
    line-height: 120%;
    text-align: center;
    color: #a1a1a1;
}

.ci-fourth__stages .arrow-text {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.25vw;
    line-height: 120%;
    text-align: center;
    color: #a1a1a1;
    width: 5.5556vw;
    padding-top: 1.3889vw;
}

.ci-fourth__stages .arrow-text::after {
    content: "";
    display: block;
    width: 2.7778vw;
    height: 1.0417vw;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 0.6944vw;
    top: 4.8611vw;
    z-index: 2;
    background-image: url("./img/ci-arrow.svg");
}

.ci-fourth__stages .round {
    width: 4.1667vw;
    height: 4.1667vw;
    border-radius: 50%;
    background-color: #00eeff;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--second-family);
    font-weight: 400;
    font-size: 2.0833vw;
    line-height: 111%;
    text-align: center;
    color: #fcfcfc;
}

.ci-fourth__stages .item:nth-child(1) .round {
    background-color: #3e1fba;
}
.ci-fourth__stages .item:nth-child(2) .round {
    background-color: #5a3eff;
}
.ci-fourth__stages .item:nth-child(3) .round {
    background-color: #8874ff;
}
.ci-fourth__stages .item:nth-child(4) .round {
    background-color: #a699f7;
}

.ci-fourth__stages .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6944vw;
}

@media screen and (max-width: 750px) {
    .ci-fourth__bottom-text p::before {
        left: -5px;
        top: 0;
        font-size: 3.7361vw;
    }
    .ci-fourth {
        height: auto;
        overflow: hidden;
    }

    .ci-fourth .container {
        padding-top: 13.3511vw;
        min-height: 118.117vw;
    }

    .ci-fourth__icon img {
        width: 17.223vw;
    }

    .ci-fourth__title {
        font-weight: 500;
        font-size: 6.008vw;
        line-height: 120%;
        width: 78.5047vw;
        max-width: 100%;
    }

    .ci-fourth__top-text {
        font-weight: 350;
        font-size: 3.3378vw;
        line-height: 140%;
        width: 57.9439vw;
    }

    .ci-fourth__stages {
        margin: 5.741vw auto 0;
        width: 100%;
        justify-content: center;
    }

    .ci-fourth__stages .item {
        width: 18.6389vw;
    }

    .ci-fourth__stages .title {
        font-weight: 700;
        font-size: 1.8692vw;
        line-height: 130%;
    }

    .ci-fourth__stages .round {
        width: 9.6128vw;
        height: 9.6128vw;
        font-size: 3.7383vw;
    }

    .ci-fourth__stages .description {
        font-weight: 500;
        font-size: 1.4686vw;
        line-height: 120%;
    }

    .ci-fourth__bottom-text {
        font-weight: 400;
        font-size: 3.25vw;
        line-height: 130%;
        width: 100%;
        margin-top: 4.0734vw;
    }

    .ci-fourth__stages .arrow-text {
        font-size: 1.6021vw;
        padding-top: 3.6048vw;
    }

    .ci-fourth__stages .arrow-text::after {
        top: 7.8611vw;
    }
}
/* slider */

.ci-slider {
    position: relative;
    min-height: 37.2222vw;
    background-color: #5a3eff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 3.4722vw;
    display: none;
}

.ci-slider__slider {
    width: 48.6111vw;
}

.ci-slider .quotes {
    position: absolute;
    top: 8.1944vw;
    left: 17.4306vw;
    width: 65.2083vw;
}

.ci-slider__slider .item {
    width: 48.6111vw;
    padding: 0.6944vw;
    display: flex;
    flex-direction: column;
    gap: 1.5278vw;
}

.ci-slider__slider .item p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 1.7361vw;
    line-height: 136%;
    text-align: center;
    color: #fff;
}

.ci-slider__slider .item h5 {
    font-family: var(--font4);
    font-weight: 700;
    font-size: 1.3889vw;
    line-height: 200%;
    text-align: center;
    color: #fff;
}

.ci-slider__slider .owl-dots {
    display: flex;
    justify-content: center;
    margin-top: 5.5556vw;
}

.ci-slider__slider.owl-carousel button.owl-dot {
    width: 0.9028vw;
    height: 0.9028vw;
    background: #d9d9d9;
    border-radius: 50%;
    margin: 5px;
    transition: background 0.3s;
}

.ci-slider__slider.owl-carousel button.owl-dot.active {
    background: #00eeff;
}

@media screen and (max-width: 750px) {
    .ci-slider {
        min-height: 83.1776vw;
    }

    .ci-slider__slider {
        width: 60.6142vw;
    }

    .ci-slider__slider .item {
        padding: 1.3351vw;
        gap: 4.2724vw;
        width: 60.6111vw;
    }

    .ci-slider .quotes {
        top: 17.1944vw;
        left: 10.4306vw;
        width: 78.7717vw;
    }

    .ci-slider__slider .item p {
        font-weight: 350;
        font-size: 3.3378vw;
        line-height: 136%;
    }

    .ci-slider__slider .item h5 {
        font-weight: 700;
        font-size: 2.6702vw;
        line-height: 200%;
    }

    .ci-slider__slider.owl-carousel button.owl-dot {
        width: 1.7356vw;
        height: 1.7356vw;
    }

    .ci-slider__slider .owl-dots {
        margin-top: 3.4713vw;
    }
}