body,
input {
    color: var(--color-dark)
}

.common_title,
.decorator,
.faq_win_title {
    font-weight: 600;
    font-family: var(--font-family-1)
}

.btn_accent_filled:disabled,
input:disabled {
    background: var(--color-neutral-5)
}

.burger_wrap,
.m {
    translate: -50% -50%
}

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

.cta_text,
.how_desc {
    line-height: 1.5
}

.pay_bold,
button {
    white-space: nowrap
}

.about_img > img,
.hero_img > img,
.how_item_img > img,
.services_item_img > img {
    object-position: center
}

.about_img,
.how_stroke,
.pay_img,
.pay_number,
.selected::after,
.slider__arrow {
    aspect-ratio: 1/1
}

.copy_wrap,
.faq_window,
.form_add_title,
.form_title_wrap,
.how_item,
.pay_desc,
.services_item {
    text-align: center
}

:root {
    --color-accent: #e65100;
    --color-primary: #0056b3;
    --color-light: #f7f7f7;
    --color-dark: #1d1d1d;
    --color-neutral-1: #E1F1FF;
    --color-neutral-2: #E9EEF4;
    --color-neutral-3: #E5E7EB;
    --color-neutral-4: #C4C4C4;
    --color-neutral-5: #ABABAB;
    --font-size-1: 12px;
    --font-size-2: 14px;
    --font-size-3: clamp(16px, 4vw, 20px);
    --font-size-4: clamp(18px, 5vw, 24px);
    --font-size-5: clamp(20px, 6vw, 28px);
    --font-size-6: clamp(22px, 7vw, 32px);
    --font-size-7: clamp(24px, 8vw, 36px);
    --font-size-8: clamp(28px, 10vw, 48px);
    --font-size-9: clamp(32px, 12vw, 64px);
    --font-family-1: "Lexend", sans-serif;
    --font-family-2: "Inter", sans-serif;
    --transition: 0.3s;
    --radius-1: 8px;
    --radius-2: 15px;
    --radius-3: 30px;
    --radius-i: calc(infinity * 1px)
}

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

::placeholder {
    color: #666
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-family-2);
    background: var(--color-light)
}

a {
    text-decoration: none;
    color: inherit;
    display: inline-block
}

input {
    border: 1px solid var(--color-neutral-4);
    border-radius: var(--radius-1);
    padding: 10px;
    font-weight: 400;
    font-size: var(--font-size-2);
    outline: 0
}

input[type=radio]:checked {
    color: #f0f
}

button {
    border: none
}

.container {
    height: 100%;
    padding: 0 120px;
    margin: 0 auto;
    max-width: 1440px
}

.faq_win_phone > svg,
.highlighted {
    color: var(--color-primary)
}

.decorator,
.faq_win_title {
    font-size: var(--font-size-6)
}

.common_title {
    font-size: var(--font-size-8)
}

.common_overtitle {
    font-size: var(--font-size-4);
    font-weight: 400;
    display: flex;
    align-items: end;
    gap: 4px
}

.common_hgroup,
.footer_item_box {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.next,
.prev {
    font-size: .7em
}

.btn_accent_filled,
.btn_accent_outlined {
    font-size: var(--font-size-3);
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer
}

.btn_accent_filled {
    color: #fff;
    background: var(--color-accent);
    border-radius: var(--radius-i);
    padding: 16px 40px;
    border: 1px solid var(--color-accent)
}

.btn_accent_filled:active,
.btn_accent_filled:hover {
    opacity: .8;
    transition: var(--transition)
}

.btn_accent_filled:disabled {
    border: 1px solid var(--color-neutral-5)
}

.btn_accent_outlined {
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: 0 0;
    border: 1px solid transparent
}

.btn_primary_outlined,
.header_contacts_item {
    align-items: center;
    font-size: var(--font-size-3);
    display: flex
}

.btn_accent_outlined:hover {
    transition: var(--transition);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-i)
}

.hero_stats,
.services_item {
    border-radius: var(--radius-3)
}

.btn_primary_filled {
    color: #fff;
    background: var(--color-primary)
}

.btn_primary_outlined {
    color: var(--color-primary);
    gap: 12px;
    font-weight: 600;
    background: 0 0;
    cursor: pointer;
    transition: var(--transition);
    padding: 16px 40px
}

.header,
.hero_stats {
    background: var(--color-light)
}

.btn_primary_outlined:active,
.btn_primary_outlined:hover {
    color: var(--color-light);
    background: var(--color-primary);
    border-radius: var(--radius-i);
    transition: color, background var(--transition)
}

.header_nav_item,
.header_nav_item:hover {
    transition: font-weight var(--transition)
}

.btn_primary_outlined:disabled {
    color: var(--color-neutral-5)
}

.header {
    position: sticky;
    top: 0;
    z-index: 999
}

.copyright,
.header_contacts {
    padding: 36px 0
}

.header_contacts_wrap {
    display: flex;
    height: 100%;
    gap: 30px
}

.header_contacts_item {
    gap: 15px;
    font-weight: 400
}

.header_contacts_item > svg {
    height: 24px;
    color: var(--color-primary)
}

.header_menu_wrap {
    border-top: 1px solid var(--color-neutral-4);
    height: 100%;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative
}

.header_logo {
    font-size: var(--font-size-4);
    font-weight: 600;
    color: var(--color-primary)
}

.header_nav,
.modal.active {
    display: flex
}

.header_navlist {
    list-style: none;
    display: flex;
    gap: 40px
}

#burger_checkbox,
.burger_box,
.faq_acc_item > input,
.header_hidden {
    display: none
}

.header_nav_item {
    font-weight: 400;
    font-size: var(--font-size-3)
}

.header_nav_item:hover {
    font-weight: 600
}

.burger_box {
    width: 36px;
    height: 36px;
    position: relative;
    cursor: pointer;
    color: var(--color-dark)
}

.burger_wrap {
    height: 18px;
    width: 27px;
    position: absolute;
    top: 50%;
    left: 50%
}

.burger_line {
    position: absolute;
    width: 100%;
    border-top: 3px solid currentColor;
    transition: top, left, translate, rotate var(--transition)
}

.t {
    top: 0;
    left: 0
}

.m {
    top: 50%;
    left: 50%
}

.b {
    top: 100%;
    translate: 0 -100%
}

.hero {
    position: relative;
    padding: 40px 0
}

.hero_img,
.hero_img:after {
    position: absolute;
    top: 0;
    left: 0
}

.hero_img:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #f7f7f7 0, #f7f7f740 30%, #f7f7f7e0 100%)
}

.hero_img > img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero_wrap {
    display: grid;
    perspective: 1000px;
    gap: 50px
}

.hero_titles {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 500px
}

.hero_title {
    font-size: var(--font-size-9);
    font-weight: 600
}

.hero_subtitle {
    font-size: var(--font-size-4);
    font-weight: 600
}

.hero_stats {
    grid-column: 1/3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 24px #1d1d1d1a;
    padding: 24px 60px
}

.hero_stat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative
}

.hero_sep {
    border: 1px solid var(--color-neutral-4);
    height: 90%
}

.form_back,
.form_front {
    transition: var(--transition);
    gap: 40px;
    backface-visibility: hidden;
    max-width: 550px;
    background: var(--color-light);
    box-shadow: 0 4px 24px #1d1d1d33;
    border-radius: var(--radius-2);
    padding: 40px
}

.hero_stat_number {
    font-weight: 600;
    font-size: var(--font-size-8)
}

.hero_stat_text,
.pay_text {
    font-size: var(--font-size-3);
    font-weight: 400
}

.form_container {
    position: relative;
    transform-style: preserve-3d;
    min-height: 650px
}

.form_front {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.form_front .btn_accent_filled,
.review_text {
    flex-grow: 1
}

.form_back,
.form_title_wrap {
    display: flex;
    flex-direction: column
}

.form_back {
    transform: rotateY(-180deg);
    justify-content: space-between;
    position: absolute;
    top: 0;
    z-index: -1
}

.option,
.option:hover {
    transition: background, color var(--transition)
}

.cta,
.input_wrap,
.select_wrap,
.selected {
    position: relative
}

.form_title_wrap {
    gap: 6px
}

.form_title,
.how_number {
    font-size: var(--font-size-6);
    font-weight: 600
}

.form_subtitle {
    font-size: var(--font-size-4);
    font-weight: 400
}

.form_label,
.selected {
    font-size: var(--font-size-2)
}

.form_wrap {
    display: grid;
    gap: 24px 12px
}

.form_group {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.form_label {
    font-weight: 600
}

.input_wrap > svg:not(.valid_check) {
    position: absolute;
    left: 14px;
    top: 50%;
    translate: 0 -50%;
    height: 20px;
    color: var(--color-neutral-4);
    pointer-events: none;
    transition: color var(--transition)
}

.select_wrap {
    width: 200px;
    font-family: sans-serif
}

.selected {
    padding: 10px;
    border: 1px solid var(--color-neutral-4);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    color: var(--color-dark)
}

.option,
.options {
    padding: 10px;
    background: var(--color-light)
}

.cta_abs,
.options,
.selected::after,
.valid_check {
    position: absolute
}

.selected.error {
    border-color: #e53935
}

.selected::after {
    content: '›';
    rotate: 90deg;
    transform-origin: center;
    display: block;
    height: 100%;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-4);
    color: var(--color-dark);
    pointer-events: none
}

.options {
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-2);
    max-height: 150px;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    gap: 10px;
    z-index: 99
}

.option {
    border-radius: var(--radius-2);
    cursor: pointer
}

.cta_wrap,
.how_item_img,
.pay {
    background: #f0f0f0
}

.option:hover {
    background: var(--color-neutral-1);
    color: var(--color-primary)
}

.pay::after,
.pay::before {
    content: "";
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-primary) 0 80px, transparent 80px 160px)
}

.form_input,
.form_input:hover {
    transition: border-color var(--transition)
}

.error_text {
    position: absolute;
    color: red;
    font-size: var(--font-size-1);
    top: calc(100% + 3px);
}

.form_input.valid,
.form_input.valid:hover,
.selected.valid,
.selected.valid:hover {
    border-color: #00b67a
}

.valid_check {
    display: none;
    top: 50%;
    right: 10px;
    translate: 0 -50%
}

.form_input.valid ~ .valid_check {
    display: block
}

.with_icon {
    padding-left: 36px
}

.form_input.error,
.form_input.error:hover {
    border: 1px solid #e53935
}

.form_input {
    width: 100%
}

.form_input:hover {
    border-color: var(--color-dark)
}

.input_wrap:hover svg {
    color: var(--color-dark);
    transition: color var(--transition)
}

.year_select {
    width: 100%;
    font-size: 16px;
    padding: 10px;
    border: 1px solid var(--color-neutral-4);
    border-radius: var(--radius-1)
}

.radio_wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0
}

.radio_label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-2);
    font-weight: 400;
    cursor: pointer
}

.radio_label input {
    width: 16px;
    height: 16px
}

.form_btn_group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px
}

.form_add_title {
    font-weight: 600;
    font-family: var(--font-family-1);
    grid-column: 1/-1
}

.how,
.services {
    padding: 100px 0
}

.services_wrap {
    display: flex;
    flex-direction: column;
    gap: 60px
}

.services_group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px
}

.services_item {
    padding: 24px;
    border: 1px solid var(--color-neutral-4);
    box-shadow: 0 4px 14px #1d1d1d1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    cursor: pointer
}

.services_item_img {
    height: 40px;
    width: 80px
}

.services_item_img > img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.how_item_img > img,
.pay_img > img {
    width: 50%;
    height: 50%;
    object-fit: contain
}

.footer_item_title,
.services_item_title {
    font-weight: 600;
    font-size: var(--font-size-4)
}

.services_item_text {
    font-weight: 400;
    font-size: var(--font-size-3);
    flex-grow: 1;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

.cta_abs {
    width: 100%;
    translate: 0 -50%
}

.cta_wrap {
    padding: 60px;
    box-shadow: 0 4px 24px #1d1d1d1a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-3)
}

.cta_text {
    font-size: var(--font-size-6);
    font-weight: 600;
    max-width: 600px
}

.how_desc,
.how_item_title,
.how_text {
    font-size: var(--font-size-3)
}

.how_text {
    font-weight: 400;
    padding: 24px 0
}

.how_group {
    padding: 40px 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr)
}

.how_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer
}

.how_item_img,
.pay_img {
    justify-content: center;
    border-radius: 50%
}

.how_item_img {
    width: 120px;
    height: 120px;
    box-shadow: 0 4px 8px #1d1d1d33;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 40px
}

.how_stroke,
.pay::after,
.pay::before {
    position: absolute;
    display: block
}

.how_stroke {
    overflow: visible;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 120%;
    border-radius: 50%;
    stroke: var(--color-neutral-4);
    transition: stroke var(--transition)
}

.pay,
.pay_img {
    position: relative
}

.pay_group,
.pay_img,
.pay_item,
.pay_number,
.pay_wrap {
    display: flex
}

.how_item:hover .how_stroke {
    stroke: var(--color-primary);
    transition: stroke var(--transition)
}

.faq_acc_item:hover .faq_acc_main,
.faq_acc_item > input:checked ~ .faq_acc_main,
.how_item:hover .how_item_title {
    color: var(--color-primary);
    transition: color var(--transition)
}

.how_item_title {
    transition: color var(--transition)
}

.how_text {
    max-width: 200px
}

.pay_number,
.pay_title {
    font-size: var(--font-size-6)
}

.pay {
    padding: 100px 0
}

.pay_img,
.pay_number,
.slider__dots button.active {
    background: var(--color-primary)
}

.pay::before {
    top: 0;
    width: 100%
}

.pay::after {
    bottom: 0;
    width: 100%
}

.pay_wrap {
    flex-direction: column;
    align-items: center
}

.pay_title {
    padding: 24px 0;
    color: var(--color-primary);
    font-weight: 600
}

.pay_group {
    padding: 70px 0;
    justify-content: space-evenly;
    align-items: center;
    gap: 24px;
    width: 100%
}

.pay_item {
    flex-direction: column;
    align-items: center;
    gap: 24px
}

.pay_img {
    align-items: center;
    width: 144px;
    translate: -15%
}

.pay_img > img {
    translate: -10%
}

.pay_number {
    position: absolute;
    right: 0;
    translate: 60%;
    color: #f0f0f0;
    width: 80px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 10px solid #f0f0f0
}

.pay_desc {
    font-size: var(--font-size-3);
    line-height: 1.4;
    position: absolute;
    left: 50%;
    top: calc(100% + 24px);
    translate: -50%;
    width: max-content;
    max-width: 240px
}

.pay_bold {
    font-size: var(--font-size-6);
    font-weight: 600
}

.pay_arrow {
    padding: 0 24px
}

.pay_arrow > img {
    width: 100%
}

.about {
    padding: 100px 0 300px
}

.about_wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 100px
}

.about_tags,
.about_typography {
    gap: 40px;
    display: flex
}

.about_typography {
    flex-direction: column;
    max-width: 600px
}

.about_desc {
    font-size: var(--font-size-3);
    line-height: 1.4
}

.faq_acc_item > input:checked ~ .faq_item_text,
.faq_item_title {
    line-height: 1.5
}

.about_tag {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px
}

.about_tag_code {
    font-size: var(--font-size-6);
    color: var(--color-primary);
    background: url("./img/dashed_shell.svg") center center/contain no-repeat;
    padding: 40px
}

.about_tag_id,
.faq_text,
.faq_win_text,
.reviews_desc,
.slide {
    font-size: var(--font-size-3)
}

.about_images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    grid-row: span 2
}

.about_img {
    border-radius: var(--radius-3);
    overflow: hidden
}

.about_img:nth-child(2n-1) {
    translate: 0 40%
}

.about_img > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.reviews {
    background: #f0f0f0;
    padding: 200px 0
}

.faq_typography,
.footer_item,
.reviews_wrap {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.slider {
    position: relative;
    max-width: 100%;
    margin: 60px auto
}

.slider__viewport {
    overflow: hidden;
    width: 100%;
    padding: 14px
}

.slider__track {
    display: flex;
    gap: 30px;
    transition: transform .4s;
    will-change: transform
}

.slider__arrow,
.slider__arrow:hover {
    transition: background, border var(--transition)
}

.slide {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 0 0 calc((100% - 60px)/ 3);
    padding: 24px;
    box-shadow: 0 4px 14px #1d1d1d1a;
    box-sizing: border-box;
    border-radius: var(--radius-3) 0;
    border: 1px solid var(--color-neutral-4);
    background: var(--color-light)
}

.slider__arrow {
    position: absolute;
    top: 50%;
    border: 1px solid var(--color-neutral-4);
    cursor: pointer;
    z-index: 2;
    font-size: var(--font-size-2);
    color: var(--color-primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center
}

.slider__arrow:hover {
    background: var(--color-neutral-1);
    border: 1px solid var(--color-primary)
}

.slider__arrow:disabled {
    color: var(--color-neutral-5)
}

.faq_acc_main:after,
.faq_win_subtitle,
.faq_win_symbol,
.footer_medialink {
    color: var(--color-primary)
}

.slider__arrow--left {
    left: -24px;
    translate: -100% -50%
}

.slider__arrow--right {
    right: -24px;
    translate: 100% -50%
}

.review_head {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center
}

.stars {
    display: flex;
    gap: 5px
}

.review_hr {
    border: none;
    border-top: 1px solid var(--color-neutral-4)
}

.review_author {
    font-style: normal
}

.slider__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px
}

.slider__dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-neutral-4);
    border: none;
    cursor: pointer
}

.slider__dots button.active {
    width: 12px;
    height: 12px
}

.faq {
    padding: 200px 0
}

.faq_wrap {
    display: grid;
    grid-template-columns: minmax(auto, 500px) 1fr;
    grid-template-rows: auto 1fr;
    gap: 50px
}

.faq_window {
    background: #f0f0f0;
    border-radius: var(--radius-3);
    box-shadow: 0 4px 24px #1d1d1d1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    align-self: start
}

.faq_win_icon {
    width: 48px
}

.faq_win_subtitle {
    margin-top: 24px;
    font-size: var(--font-size-6);
    font-family: var(--font-family-1);
    font-weight: 600
}

.faq_win_phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

.faq_win_symbol {
    border: 1px solid #000
}

.faq_bold,
.faq_win_number {
    font-size: var(--font-size-4)
}

.faq_item_title,
.footer_wrap {
    font-size: var(--font-size-3);
    display: flex
}

.faq_accordeon {
    margin-top: 100px;
    grid-area: 1/2/3/3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 700px;
    justify-self: end
}

.faq_acc_item {
    border: 1px solid var(--color-neutral-4);
    padding: 20px;
    border-radius: var(--radius-2);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: color var(--transition)
}

.faq_acc_main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px
}

.faq_item_title {
    align-items: first baseline;
    gap: 5px;
    font-weight: 600
}

.faq_acc_item > input:checked ~ .faq_acc_main:after {
    content: "-"
}

.faq_acc_main:after {
    content: "+";
    font-size: var(--font-size-5);
    font-weight: 500
}

.faq_item_text {
    line-height: 0;
    overflow: hidden;
    transition: var(--transition)
}

.footer a:not(.footer_medialink):hover {
    text-decoration: underline;
    font-weight: 600
}

.footer_wrap {
    border: solid var(--color-neutral-4);
    border-width: 1px 0;
    padding: 60px 0;
    justify-content: space-between;
    gap: 40px
}

.how_item_modal img,
.modal {
    padding: 20px
}

.footer_info {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.footer_logo {
    font-size: var(--font-size-7)
}

.footer_text {
    max-width: 400px
}

.footer_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px
}

.footer_media_box {
    grid-column: -2
}

.footer_media_box .footer_item_box {
    flex-direction: row
}

.footer_medialink {
    transition: color, scale var(--transition)
}

.footer_medialink:hover {
    color: var(--color-accent);
    transition: color, scale var(--transition);
    scale: 1.1
}

.media_icon {
    height: 36px
}

.copy_wrap {
    display: flex;
    justify-content: center;
    align-items: center
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999999
}

.modal_content {
    max-height: 70vh;
    background: var(--color-light);
    max-width: 500px;
    width: 100%;
    border-radius: 10px;
    padding: 30px;
    position: relative;
    gap: 30px;
    overflow-y: auto
}

.modal_close {
    position: sticky;
    float: right;
    top: 0;
    font-size: 24px;
    border: none;
    background: 0 0;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: var(--color-primary);
    border-radius: 50%;
    color: var(--color-light);
    font-size: var(--font-size-5)
}

.modal_legal_text,
.modal_legal_title {
    font-weight: 400;
    font-size: var(--font-size-4)
}

.modal_img img {
    height: 50px
}

.modal_document {
    display: flex;
    flex-direction: column;
    gap: 50px
}

.how_item_modal,
.modal_legal_hgroup {
    flex-direction: column;
    text-align: center;
    display: flex
}

.modal_legal_hgroup {
    align-items: center;
    gap: 12px
}

.modal_legal_text,
.modal_legal_title {
    text-align: center
}

.how_item_modal {
    align-items: center;
    justify-content: center
}

.modal_service {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px
}

@media screen and (max-width:560px) {

    .header_nav,
    .header_navlist {
        flex-direction: column;
        gap: 20px
    }

    .cta_wrap,
    .hero_stat,
    .how_desc {
        text-align: center
    }

    .container {
        padding: 0 24px
    }

    .header {
        height: 80px
    }

    .about_img:nth-child(-n+3),
    .header_contacts,
    .slider__arrow {
        display: none
    }

    .header_menu_wrap {
        border-top: none
    }

    .burger_box {
        display: block
    }

    #burger_checkbox:checked + .burger_box > .burger_wrap {
        background: var(--color-primary);
        border-radius: 50%;
        width: 36px;
        height: 36px;
        color: var(--color-light)
    }

    #burger_checkbox:checked + .burger_box .t {
        rotate: 45deg;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 60%
    }

    #burger_checkbox:checked + .burger_box .m {
        opacity: 0
    }

    #burger_checkbox:checked + .burger_box .b {
        rotate: -45deg;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 60%
    }

    .header_nav {
        height: 0;
        overflow: hidden;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        border-top: 1px solid var(--color-neutral-4);
        z-index: 99;
        background: var(--color-light);
        transition: height var(--transition);
        display: flex
    }

    .header_navlist {
        padding: 20px
    }

    .header_hidden,
    .header_hidden_wrap {
        flex-direction: column;
        display: flex
    }

    #burger_checkbox:checked ~ .header_nav {
        transition: height var(--transition);
        height: 100%
    }

    .header_hidden {
        gap: 20px;
        padding: 0 20px 20px
    }

    .header_hidden_wrap {
        gap: 12px
    }

    .hero {
        background-image: linear-gradient(to right, #f7f7f7 0, #f7f7f740 30%, #f7f7f7e0 100%) no-repeat, url("./img/hero-400.webp") no-repeat top left/100%
    }

    .hero_wrap {
        display: flex;
        flex-direction: column;
        gap: 100px
    }

    .hero_titles {
        grid-column: 1/2
    }

    .about_images,
    .about_wrap,
    .form_wrap,
    .services_group {
        grid-template-columns: 1fr
    }

    .form_btn_group {
        flex-direction: column-reverse;
        align-items: stretch
    }

    .cta_wrap,
    .hero_stats {
        flex-direction: column;
        gap: 60px
    }

    .hero_stats {
        align-items: center
    }

    .hero_sep {
        width: 80px
    }

    .how_group,
    .pay_group {
        flex-direction: column
    }

    .how_group {
        display: flex;
        gap: 50px
    }

    .pay_group {
        gap: 150px
    }

    .pay_arrow {
        rotate: 90deg;
        translate: -20px 50px;
        scale: 0.7
    }

    .about_tags {
        flex-direction: column
    }

    .faq,
    .reviews {
        padding-top: 300px
    }

    .slide {
        flex: 0 0 100%
    }

    .faq_wrap,
    .footer_grid,
    .footer_wrap {
        display: flex;
        flex-direction: column
    }

    .faq_window {
        order: 1
    }
}