body {
    font-family: 'HelveticaNeueCyr', sans-serif;
    /*background: linear-gradient(#81BFD0, #81BFD0);*/
    background: #81BFD0;
}

/*fonts*/
.geologica {
    font-family: "Geologica", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings: "slnt" 0,
    "CRSV" 0,
    "SHRP" 0;
    z-index: 1;
}

.background, .background-2 {
    position: relative;
}

/*header*/
#header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    background-color: #00B4CA;
}

#header .title {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 4rem;
    text-align: center;
}


/*info*/
/* #steps {*/
/*    background-image: url(../img/shine.gif);*/
/*    background-size: 36.688rem 20.625rem;*/
/*    background-repeat: repeat;*/
/*    position: relative;*/
/*}*/

#sparkle-container, #sparkle-container-bottom {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 0;
    margin-top: -25px;
}

.sparkle {
    position: absolute;
    width: 40px;
    height: 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}


#info .title {
    display: flex;
    align-items: center;
    justify-content: center;
}

#info .title span {
    color: #C100B2;
    font-weight: 700;
    font-size: 3.5rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 5%), rgba(255, 255, 255, 40%));
    height: 100%;
    display: flex;
    align-items: center;
    padding: 2.47rem 0.9rem;
    width: 100%;
    text-align: center;
    justify-content: center;
}

#info .product_info {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    padding-top: 2.5rem;
}

.diamond-container {
    position: relative;
    width: 6.25rem;
    height: 8.938rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 5%), rgba(255, 255, 255, 40%));
    overflow: hidden;
    border: none;
}

.diamond-left {
    margin-left: 0.063rem;
    clip-path: polygon(63% 0%, 100% 0%, 100% 100%, 63% 100%, 0% 55%, 0% 45%);
}
.diamond-right {
    clip-path: polygon(37% 0%, 0% 0%, 0% 100%, 37% 100%, 100% 55%, 100% 45%);
}

.diamond-icon {
    position: absolute;
    top: 50%;
    z-index: 1;
}

.icon-right {
    left: 55%;
    transform: translate(-50%, -50%) scaleX(-1);
}

.icon-left {
    left: 45%;
    transform: translate(-50%, -50%);
}

#info .image {
    max-width: 92.313rem;
    display: block;
    margin: -1.875rem auto 0;
}

#footer .image {
    max-width: 80.688rem;
    display: block;
    margin: -1.875rem auto 0;
}

#info .image img, #footer .image img {
    display: block;
    max-width: 100%;
    height: auto;
    z-index: 1;
    position: relative;
}
.image-block {
    position: relative;
}

.wrapper-bg {
    margin-top: 1.438rem;
    position: absolute;
    background-image: url(../img/background.png);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position-x: center;
    z-index: 1;
}
.wrapper-bg-2 {
    margin-top: -12.5rem;
    position: absolute;
    background-image: url(../img/background-2.png);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position-x: left;
    z-index: 1;
}
.button-wrapper {
    margin-top: -4.688rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buy_button {
    font-size: 2.438rem;
    line-height: 1.375rem;
    letter-spacing: 0.013rem;
    font-weight: 700;
    text-decoration: none;
    color: #C000B2;
    background-color: #FFFFFF;
    display: flex;
    height: 5.813rem;
    width: 21.625rem;
    border-radius: 6.25rem;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.mt-55 {
    margin-top: 3.438rem;
}

.text-block {
    display: block;
    max-width: 92.313rem;
    margin: 0 auto;
}
.text-block-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.text-01 {
    font-size: 6.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #C000B2;
    line-height: 3.25rem;
    margin-bottom: 2.188rem;
}
.text-02 {
    font-size: 5rem;
    font-weight: 700;
    color: #C000B2;
    line-height: 3.25rem;
    margin-bottom: 2.188rem;
}
.text-03 {
    font-size: 3.563rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 3.25rem;
    margin-bottom: 2.625rem;
}
.text-04 {
    font-size: 3.438rem;
    font-weight: 700;
    color: #C000B2;
    line-height: 3.25rem;
    letter-spacing: 0;
    margin-bottom: 0.625rem;
}
.text-05 {
    font-size: 3.438rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 127%;
    letter-spacing: 0;
    margin-bottom: 0.625rem;
}
.text-06 {
    font-size: 3.438rem;
    font-weight: 700;
    color: #C000B2;
    line-height: 3.25rem;
    letter-spacing: 0;
}

.anim_diamond {
    width: 38.25rem;
    height: 38.25rem;
}


.text-info {
    margin-top: 14.063rem;
    margin-right: -12.813rem;
    z-index: 1;
}

.diamond-list {
    column-gap: 1.875rem;
    margin-top: 11.875rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.diamond-img {
    margin-top: 0.313rem;
    transform: rotate(-90deg);
    width: 2.125rem;
    height: 2.875rem;
}
.diamond-img.big {
    margin-top: 0;
    transform: rotate(-90deg);
    width: 3.813rem;
    height: 5.125rem;
}
section#main {
    padding-bottom: 6.25rem;
}
.simple {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 11.563rem;
}
.simple-title {
    color: #FFFFFF;
    font-size: 4rem;
    line-height: 100%;
    font-weight: 700;
    margin-bottom: 4rem;
    text-align: center;
}
.step-wrapper {
    max-width: 54.313rem;
    display: flex;
    align-items: center;
    margin-left: 0.313rem;
    margin-right: 0.313rem;
}
.step {
    height: 11.563rem;
    width: 100%;
    background: linear-gradient(to right,#005263, #009BAE);
    border-radius: 8.188rem;
    display: flex;
    align-items: center;
    z-index: 1;
}
.step-icon {
    margin-left: 2.5rem;
    margin-right: 2.813rem;
    flex-shrink: 1;
    position: relative;
    display: flex;
    justify-content: center;
    width: 9.188rem;
    height: 6.563rem;
}
.step-icon span {
    color: #FFFFFF;
    font-size: 4rem;
    font-weight: 700;
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 4.3rem;
}
.step-text {
    color: #FFFFFF;
    font-size: 3.125rem;
    line-height: 3.75rem;
    font-weight: 700;
}
.step-info {
    margin-top: 3.563rem;
    margin-bottom: 4.063rem;
    display: flex;
    column-gap: 2.813rem;
}
.step-info-text {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3.125rem;
    color: #C000B2;
}
.footer_title {
    font-size: 5.625rem;
    color: #FFFFFF;
    line-height: 100%;
    font-weight: 700;
    display: block;
    max-width: 54.313rem;
    text-align: center;
    margin: 0 auto 1.563rem;
}
#footer {
    background: linear-gradient(to bottom, rgba(136, 0, 126, 0%), rgba(136, 0, 126, 100%));
}
.special {
    max-width: 100%;
    display: block;
    margin: 5rem 2rem 2rem;
    color: #FFFFFF;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 2rem;
    z-index: 5;
    position: relative;
}
.copyright {
    max-width: 100%;
    display: block;
    color: #FFFFFF;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 2rem;
    text-align: justify;
    margin: 0 2rem;
    padding-bottom: 6.25rem;
}
.special a {
    color: #4EAAFF;
}


@media (max-width: 1200px) {
    #header .title {
        font-size: 2.5rem;
    }
    .diamond-container {
        display: none;
    }
    /*#info .product_info {*/
    /*    padding-top: 0;*/
    /*}*/
    #info .image, #footer .image {
        margin-top: 0.625rem;
    }
    .button-wrapper {
        margin-top: 0;
    }
    .buy_button {
        font-size: 1.75rem;
        line-height: 10.313rem;
        letter-spacing: 0.009rem;
        height: 4.188rem;
        width: 15.563rem;
        border-radius: 4.5rem;
    }
    .text-info {
        margin-top: 8rem;
        margin-right: 0;
        margin-left: 1rem;
    }
    .text-01 {
        font-size: 4.75rem;
        line-height: 2.188rem;
    }
    .text-02 {
        font-size: 3.5rem;
        line-height: 2.188rem;
    }
    .text-03 {
        font-size: 2.438rem;
        line-height: 2.188rem;
    }
    .text-04 {
        font-size: 2.375rem;
        line-height: 2.188rem;
    }
    .text-05 {
        font-size: 2.375rem;
        line-height: 2.188rem;
    }
    .text-06 {
        font-size: 2.375rem;
        line-height: 2.188rem;
    }
    .anim_diamond {
        width: 100%;
        height: auto;
        display: block;
        margin: auto;
    }
    .diamond-list {
     margin-top: 0;
    }
    .simple-title {
        font-size: 2.938rem;
        font-weight: 700;
    }
    .step-text {
        font-size: 2.313rem;
        line-height: 2.75rem;
        font-weight: 700;
        padding-right: 0.625rem;
    }
    .step-icon span {
        font-size: 2.938rem;
        height: 2.5rem;
    }

    .step-icon {
        margin-left: 1.875rem;
        margin-right: 2.188rem;
        flex-shrink: 1;
        position: relative;
        display: flex;
        justify-content: center;
        width: 6.813rem;
        height: 4.875rem;
    }
    .step-info {
        column-gap: 1.875rem;
        margin: 2rem;
    }
    .step-info img {
        width: 6.813rem;
    }
    .text-block-wrapper {
        justify-content: center;
    }

    .footer_title {
        font-size: 4.125rem;
        text-align: center;
    }
    .step {
        height: 8.563rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .copyright {
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .special {
        margin: 5rem 2rem 5rem;
    }
}

@media (max-width: 768px) {
    .step {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    .step-icon {
        margin-left: 0.625rem;
        margin-right: 0.625rem;
        width: 3.438rem;
        height: 2.438rem;
    }
    .step-icon span {
        font-size: 1.5rem;
        height: 1.5rem;
    }
    .step-text {
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 700;
        padding-right: 0.625rem;
    }
    .step-info {
        column-gap: 1rem;
        margin: 2rem 1rem;
    }
    .step-info-text {
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.5rem;
        color: #C000B2;
    }
    .simple {
        margin-bottom: 10.625rem;
    }
    .footer_title {
        font-size: 3rem;
        margin: 0 1rem;
    }
    .special {
        font-size: 1.1rem;
        margin: 5rem 2rem 2rem 2rem;
    }
}

@media (min-width: 1199px) and (max-width: 1400px) {
    html {
        font-size: 12px;
    }
}
@media (min-resolution: 120dpi) {
    html {
        font-size: 12px;
    }
}
@media (max-width: 576px) {
    html {
        font-size: 10px;
    }
}

.back-button {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
    color: #FFFFFF;
    font-size: 1rem;
    text-decoration: none;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    flex-direction: row;
}
.back-button a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    flex-direction: row;
    line-height: 1rem;
    text-box: cap alphabetic;
}

.back-button a span {
    margin-top: 0.3rem;
}

.back-button a:hover {
    opacity: 0.6;
}

