*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Montserrat, sans-serif;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

ul {
    margin: 0;
}

.h1_white {
    color: #fff;
    font-size: 4.375rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 2.375rem;
    margin-top: 0
}

.h1_white {
    text-align: center
}

@media(max-width:1250px) {
    .h1_white {
        font-size: 3.125rem
    }
}

@media(max-width:767px) {
    .h1_white {
        font-size: 2.75rem
    }
}

@media(max-width:639px) {
    .h1_white {
        font-size: 1.875rem
    }
}

.header {
    border-bottom: .0625rem solid rgba(0, 0, 0, .051);
    line-height: 1;
    padding-bottom: 1.25rem;
    padding-top: 1.25rem
}

.header:before {
    background: linear-gradient(180deg, #f9f6f1, #fff);
    content: "";
    height: 17.5rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: -1
}

.header_clear {
    border-bottom: none;
    padding-bottom: 4.6875rem;
    padding-top: 3.3125rem
}

.header_clear:before {
    display: none
}

.header__logo {
    display: inline-block;
    line-height: 1
}

.header__logo_mobile img {
    max-width: 100%
}

.header__row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    justify-content: space-between
}

.header__home {
    background: rgba(42, 119, 115, .161);
    border: .0625rem solid #fff;
    border-radius: .9375rem;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .875rem 1.25rem;
    text-decoration: none;
    transition: box-shadow .3s;
    display: inline-flex;
    align-items: center
}

.header__home:hover {
    box-shadow: 0 1.3125rem 1.25rem -.6875rem hsla(0, 0%, 100%, .251)
}

.header__home img {
    margin-right: .625rem
}

@media(max-width:1250px) {
    .header__home {
        font-size: 1.25rem
    }
}

@media(max-width:639px) {
    .header_clear {
        padding-bottom: 3.125rem;
        padding-top: 3.125rem
    }

    .header__home {
        font-size: 1rem;
        padding: .625rem .875rem
    }

    .header__logo_mobile {
        width: 6.875rem
    }
}

.footer {
    background: #152549;
    font-family: Montserrat, sans-serif;
    padding-bottom: 1.75rem;
    padding-top: 4.375rem
}

.footer__top {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem
}

.footer__title {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
    margin-bottom: .5625rem
}

.footer__nav {
    list-style: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0
}

.footer__link {
    color: #fff;
    display: inline-block;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.4;
    margin-bottom: .25rem;
    text-decoration: none;
    transition: color .3s
}

.footer__link:hover {
    color: #b8b8b8
}

.footer__soc {
    display: flex;
    gap: 1.125rem
}

.footer__soc-item {
    transition: opacity .3s;
    display: inline-block
}

.footer__soc-item:hover {
    opacity: .6
}

.footer__soc-item img {
    max-width: 100%
}

.footer__bottom {
    border-top: .0625rem solid #5d6a88;
    display: flex;
    margin-top: 3.4375rem;
    padding-top: 1.4375rem;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between
}

.footer__copy,
.footer__policy {
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.4
}

.footer__policy {
    text-decoration: none;
    transition: color .3s;
    margin-left: 1.25rem
}

.footer__policy:hover {
    color: #b8b8b8
}

@media(max-width:1210px) {
    .footer__top {
        gap: 1.875rem 3.125rem;
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:767px) {
    .footer__top {
        gap: 1.875rem
    }

    .footer__link {
        margin-bottom: .6875rem
    }
}

@media(max-width:639px) {
    .footer {
        padding-top: 3.125rem
    }

    .footer__top {
        grid-template-columns: repeat(2, 1fr)
    }

    .footer__soc {
        flex-wrap: wrap;
        gap: .625rem 1.125rem
    }

    .footer__soc-item {
        max-width: 1.875rem
    }

    .footer__bottom {
        margin-top: 1.875rem
    }

    .footer__logo {
        width: 6.875rem
    }
}

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 98.125rem;
    padding-left: .9375rem;
    padding-right: .9375rem;
    width: 100%
}

.back {
    background-image: url(../img/feedback-back.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Montserrat, sans-serif;
    position: relative
}

.sub {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: .02em;
    margin-bottom: 5.0625rem;
    text-align: center
}

@media(max-width:1250px) {
    .sub {
        font-size: 1.25rem
    }
}

@media(max-width:639px) {
    .sub {
        font-size: 1.125rem;
        margin-bottom: 2.5rem
    }
}

.grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 6.25rem
}

@media(max-width:1250px) {
    .grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:639px) {
    .grid {
        grid-template-columns: 1fr;
        padding-bottom: 3.125rem
    }
}

.step {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.625rem
}

.step__top {
    display: flex;
    align-items: center;
    gap: .625rem;
    justify-content: space-between;
    margin-bottom: 1.6875rem
}

.step__img {
    max-width: 8.125rem;
    flex-shrink: 0
}

.step__number {
    background: linear-gradient(180deg, #a6d6ef, rgba(169, 214, 240, 0));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 7.75rem;
    font-weight: 600;
    line-height: 1
}

.step__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.1875rem
}

.step__text,
.step__title {
    color: #0c0e2b;
    letter-spacing: .02em
}

.step__link,
.step__text {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4
}

.step__link {
    color: #3393c7;
    display: inline-block;
    letter-spacing: .02em;
    margin-top: 1.25rem;
    text-decoration: none;
    transition: color .3s
}

.step__link:hover {
    color: #0c0e2b
}

@media(max-width:1450px) {
    .step {
        padding: 2.1875rem
    }

    .step__title {
        font-size: 1.25rem
    }

    .step__link,
    .step__text {
        font-size: 1rem
    }

    .step__img {
        max-width: 6.875rem
    }

    .step__number {
        font-size: 6.25rem
    }
}

@media(max-width:767px) {
    .step {
        padding: 1.875rem
    }
}

.gray {
    background: #f6f8fb;
    padding-bottom: 4.875rem;
    padding-top: 6.25rem
}

@media(max-width:639px) {
    .gray {
        padding-bottom: 3.125rem;
        padding-top: 3.125rem
    }
}

.feedback {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 1.5625rem 6.6875rem -2.1875rem rgba(150, 181, 183, .29);
    font-family: Montserrat, sans-serif;
    padding: 4rem 3.875rem 5.0625rem;
    max-width: 71.25rem;
    margin: 0 auto
}

.feedback__title {
    font-size: 2.375rem;
    font-weight: 600;
    margin-bottom: 1.375rem
}

.feedback__sub,
.feedback__title {
    color: #0c0e2b;
    letter-spacing: .02em
}

.feedback__sub {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 2.375rem
}

.feedback__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.75rem;
    align-items: center
}

.feedback__grid_3 {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 20px;
}

.feedback__submit {
    background: linear-gradient(90deg, #8a84ea, #4b9de4 32.52%, #72beaf 65.72%, #fbcf73);
    border: none;
    border-radius: .9375rem;
    color: #fff;
    cursor: pointer;
    font-family: Montserrat, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 1rem;
    transition: box-shadow .3s
}

.feedback__submit:hover {
    box-shadow: 0 .4375rem 2rem -.625rem #5faeca
}

.feedback__submit:disabled {
    opacity: .6;
    cursor: default
}

.feedback__info {
    display: flex;
    align-items: center;
    color: #909094;
    font-size: .875rem;
    font-weight: 500;
    gap: .1875rem;
    letter-spacing: .02em;
    line-height: 1.4
}

.feedback__info img {
    flex-shrink: 0
}

.feedback__item {
    position: relative
}

.feedback__error {
    color: #e5484d;
    font-size: .875rem;
    font-weight: 500;
    grid-column: 1/-1;
    margin: 0
}

@media(max-width:991px) {
    .feedback {
        padding: 3.125rem
    }

    .feedback__title {
        font-size: 2.125rem
    }

    .feedback__grid {
        gap: 1.5625rem 1.25rem
    }

    .feedback__submit {
        font-size: 1.125rem
    }
}

@media(max-width:767px) {
    .feedback__grid {
        grid-template-columns: 1fr
    }

    .feedback__title {
        font-size: 1.875rem
    }
}

@media(max-width:639px) {
    .feedback {
        padding: 1.875rem
    }

    .feedback__grid {
        gap: 1.25rem
    }

    .feedback__title {
        font-size: 1.5rem
    }

    .feedback__sub {
        font-size: 1rem
    }
}

.label {
    display: flex;
    flex-direction: column;
    font-family: Montserrat, sans-serif;
    gap: 1.125rem
}

.label__name {
    color: #0c0e2b;
    font-size: 1.125rem;
    font-weight: 700
}

.label__input,
.label__name {
    letter-spacing: .02em;
    line-height: 1.4
}

.label__input {
    border: .0625rem solid #bababa;
    border-radius: .9375rem;
    box-sizing: border-box;
    color: #308bc8;
    font-family: Montserrat, sans-serif;
    font-size: .875rem;
    font-weight: 600;
    height: 3.875rem;
    padding-left: 2.0625rem;
    padding-right: 2.0625rem;
    width: 100%
}

.label__input::placeholder {
    color: #909094;
    font-weight: 500
}

.label__input:focus {
    border-color: #308bc8;
    outline: none
}

.label__input_tel {
    padding-left: 7.1875rem
}

@media(max-width:991px) {
    .label {
        gap: .625rem
    }

    .label__name {
        font-size: 1rem
    }

    .label__input {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .label__input_tel {
        padding-left: 6.25rem
    }
}

@media(max-width:639px) {
    .label {
        gap: .375rem
    }

    .label__name {
        font-size: .875rem
    }
}

.check {
    display: flex;
    align-items: center;
    gap: .625rem;
    grid-column: 1/-1
}

.check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.check__label {
    background-image: url(../img/check1.svg);
    background-position: 0;
    background-repeat: no-repeat;
    color: #0c0e2b;
    cursor: pointer;
    display: block;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
    padding-bottom: .125rem;
    padding-left: 1.9375rem;
    padding-top: .125rem
}

.check__label a {
    color: #0978e7;
    text-decoration: none;
    transition: color .3s
}

.check__label a:hover {
    color: #0c0e2b
}

.check__input:checked+.check__label {
    background-image: url(../img/check2.svg)
}

@media(max-width:991px) {
    .check__label {
        font-size: .8125rem
    }
}

@media(max-width:639px) {
    .check__label {
        font-size: .75rem
    }
}

.js-phone {
    display: flex;
    align-items: center;
    bottom: 1.5rem;
    cursor: pointer;
    left: 2.125rem;
    position: absolute
}

.js-phone__flag {
    margin-right: .625rem;
    max-width: 1.1875rem
}

.js-phone__number {
    color: #444;
    font-size: .875rem;
    font-weight: 500;
    margin-right: .3125rem
}

@media(max-width:991px) {
    .js-phone {
        left: 1.25rem
    }
}

.js-list {
    background: #fff;
    border-radius: .3125rem;
    box-shadow: 0 .25rem 1rem 0 rgba(0, 0, 0, .149);
    box-sizing: border-box;
    display: none;
    max-height: 12.5rem;
    overflow-y: auto;
    left: 0;
    padding: .3125rem .75rem .3125rem .3125rem;
    position: absolute;
    top: calc(100% + 1rem);
    width: 18.375rem;
    z-index: 5
}

.js-list.open {
    display: block
}

.js-list__item {
    align-items: center;
    gap: .625rem;
    justify-content: space-between;
    border-radius: .3125rem;
    cursor: pointer;
    margin-bottom: .0625rem;
    padding: .625rem 3.8125rem .625rem .5rem;
    position: relative;
    transition: background .3s;
    display: flex
}

.js-list__item:hover,
.js-list__item_active {
    background: #f8f8f8
}

.js-list__item_active .js-list__check {
    display: block
}

.js-list__left {
    display: flex;
    align-items: center;
    gap: .625rem
}

.js-list__check {
    display: none;
    position: absolute;
    right: .625rem;
    top: 50%;
    transform: translateY(-50%)
}

.js-list__number,
.js-list__text {
    color: #444;
    font-size: .875rem;
    font-weight: 500
}

.js-list__flag {
    max-width: 1.1875rem
}

@media(max-width:639px) {
    .js-list {
        width: 16.875rem
    }

    .js-list__item {
        padding-right: 2.5rem
    }
}

.congrat {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 1.5625rem 6.6875rem -2.1875rem rgba(150, 181, 183, .29);
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
    margin-left: auto;
    margin-right: auto;
    max-width: 39.875rem;
    padding: 1.4375rem 3.125rem 4.5625rem;
    text-align: center
}

.congrat__img {
    margin-bottom: .3125rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}

.congrat__title {
    font-size: 2.375rem;
    font-weight: 600;
    margin-bottom: 1.375rem
}

.congrat__text,
.congrat__title {
    color: #0c0e2b;
    letter-spacing: .02em
}

.congrat__text {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4
}

@media(max-width:639px) {
    .congrat {
        padding-bottom: 2.5rem;
        padding-left: 1.875rem;
        padding-right: 1.875rem
    }

    .congrat__title {
        font-size: 1.875rem
    }

    .congrat__text {
        font-size: 1rem
    }
}