.hidden {
    display: none;
}
.background {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    z-index: 1000;

    background-color: rgba(0,0,0,0.4);
}

@charset "UTF-8";
@font-face {
    font-family: Montserrat;
    font-display: swap;
    src: url(../fonts/Montserrat-Bold.woff2) format("woff2"), url(../fonts/Montserrat-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    font-display: swap;
    src: url(../fonts/Montserrat-Light.woff2) format("woff2"), url(../fonts/Montserrat-Light.woff) format("woff");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    font-display: swap;
    src: url(../fonts/Montserrat-ExtraBold.woff2) format("woff2"), url(../fonts/Montserrat-ExtraBold.woff) format("woff");
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    font-display: swap;
    src: url(../fonts/Montserrat-Regular.woff2) format("woff2"), url(../fonts/Montserrat-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    font-display: swap;
    src: url(../fonts/Montserrat-Medium.woff2) format("woff2"), url(../fonts/Montserrat-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    font-display: swap;
    src: url(../fonts/Montserrat-SemiBold.woff2) format("woff2"), url(../fonts/Montserrat-SemiBold.woff) format("woff");
    font-weight: 600;
    font-style: normal
}

:root {
    --font-family: "Montserrat", sans-serif;
    --transition-duration: 0.3s;
    --transition-timing-function: ease;
    --mainColor: #000;
    --menuColor: #232323;
    --whiteColor: #fff;
    --greenColor: #8eb73f;
    --greenColorLight: #ecfad0;
    --greenColorBtn: #7c9b3f
}

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

:where(ul,ol):where([class]) {
    padding-left: 0
}

button {
    padding: 0;
    border: none;
    background-color: inherit;
    cursor: pointer
}

:where(blockquote,figure):where([class]), body {
    margin: 0
}

:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl):where([class]) {
    margin-block: 0
}

:where(dd[class]) {
    margin-left: 0
}

:where(fieldset[class]) {
    margin-left: 0;
    padding: 0;
    border: none
}

:where(ul[class]) {
    list-style: none
}

p {
    margin-block: 0
}

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

button, input, select, textarea {
    font: inherit
}

html {
    height: 100%;
    scroll-behavior: smooth
}

body {
    min-height: 100%;
    line-height: 1.5
}

svg * {
    -webkit-transition-property: fill, stroke;
    -o-transition-property: fill, stroke;
    transition-property: fill, stroke
}

body, html {
    height: 100%;
    min-width: 320px
}

body {
    color: #000;
    line-height: 1;
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

input, textarea {
    font-family: Montserrat, sans-serif;
    font-size: inherit
}

a {
    text-decoration: none;
    color: inherit
}

.input-reset {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
    background-color: #fff
}

.input-reset::-webkit-search-cancel-button, .input-reset::-webkit-search-decoration, .input-reset::-webkit-search-results-button, .input-reset::-webkit-search-results-decoration {
    display: none
}

.js-focus-visible :focus:not(.focus-visible) {
    outline: 0
}

.dis-scroll {
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    -ms-scroll-chaining: none;
    overscroll-behavior: none
}

.page--ios .dis-scroll {
    position: relative
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.lock body {
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none
}

.wrapper {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: hidden
}

.wrapper > main {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.wrapper > * {
    min-width: 0
}

[class*=__container] {
    max-width: 90rem;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    margin: 0 auto;
    padding: 0 .9375rem
}

[class*=-ibg] {
    position: relative
}

[class*=-ibg] img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover
}

[class*=-ibg_contain] img {
    -o-object-fit: contain;
    object-fit: contain
}

a, button, input, svg *, textarea {
    -webkit-transition-duration: var(--transition-duration);
    -o-transition-duration: var(--transition-duration);
    transition-duration: var(--transition-duration)
}

@supports (font-size:clamp(1.625rem ,1.0178571429rem + 3.0357142857vw ,3.75rem)) {
    .main-title {
        font-size: clamp(1.625rem, 1.0178571429rem + 3.0357142857vw, 3.75rem)
    }
}

@supports not (font-size:clamp(1.625rem ,1.0178571429rem + 3.0357142857vw ,3.75rem)) {
    .main-title {
        font-size: calc(1.625rem + 2.125 * (100vw - 20rem) / 70)
    }
}

@supports (font-size:clamp(0.875rem ,0.7678571429rem + 0.5357142857vw ,1.25rem)) {
    .main-subtitle {
        font-size: clamp(.875rem, .7678571429rem + .5357142857vw, 1.25rem)
    }
}

@supports not (font-size:clamp(0.875rem ,0.7678571429rem + 0.5357142857vw ,1.25rem)) {
    .main-subtitle {
        font-size: calc(.875rem + .375 * (100vw - 20rem) / 70)
    }
}

.banner__container-wide {
    max-width: 93.75rem
}

.btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700
}

.btn-main {
    font-weight: 700;
    font-size: 1.25rem;
    text-align: center;
    border-radius: .3125rem;
    background-color: var(--greenColorBtn);
    -webkit-transition: background-color .3s ease 0s, color .3s ease 0s, border-color .3s ease 0s;
    -o-transition: background-color .3s ease 0s, color .3s ease 0s, border-color .3s ease 0s;
    transition: background-color .3s ease 0s, color .3s ease 0s, border-color .3s ease 0s;
    border: .0625rem solid transparent
}

.btn-secondary {
    font-size: 1rem;
    border: .0625rem solid rgba(255, 255, 255, .2);
    border-radius: .625rem;
    color: var(--greenColor);
    background-color: var(--whiteColor);
    border: .0625rem solid transparent;
    -webkit-transition: background-color .3s ease 0s, color .3s ease 0s, border-color .3s ease 0s, -webkit-box-shadow .3s ease 0s;
    transition: background-color .3s ease 0s, color .3s ease 0s, border-color .3s ease 0s, -webkit-box-shadow .3s ease 0s;
    -o-transition: background-color .3s ease 0s, color .3s ease 0s, border-color .3s ease 0s, box-shadow .3s ease 0s;
    transition: background-color .3s ease 0s, color .3s ease 0s, border-color .3s ease 0s, box-shadow .3s ease 0s;
    transition: background-color .3s ease 0s, color .3s ease 0s, border-color .3s ease 0s, box-shadow .3s ease 0s, -webkit-box-shadow .3s ease 0s
}

.link {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    text-align: center;
    white-space: nowrap
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    border: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    -webkit-clip-path: inset(100%) !important;
    clip-path: inset(100%) !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important
}

.header {
    position: absolute;
    width: 100%;
    background-color: var(--whiteColor);
    z-index: 6
}

.header__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 7.5rem;
    -moz-column-gap: 7.5rem;
    column-gap: 7.5rem;
    padding: .75rem 0
}

.header__logo {
    position: relative;
    z-index: 3;
    min-width: 5.75rem
}

.header__menu {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.header__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2.5rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.header__btns {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: .3125rem;
    -moz-column-gap: .3125rem;
    column-gap: .3125rem
}

.header-btns__btn {
    -webkit-transition: stroke .3s ease 0s;
    -o-transition: stroke .3s ease 0s;
    transition: stroke .3s ease 0s
}

.menu__body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1.5625rem
}

.menu__list {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 5rem;
    -moz-column-gap: 5rem;
    column-gap: 5rem;
    gap: 1.5625rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.menu__link {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--menuColor);
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    position: relative
}

.menu__link::after {
    background: none repeat scroll 0 0 transparent;
    bottom: -5px;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background-color: var(--greenColor);
    -webkit-transition: width .3s ease 0s, left .3s ease 0s;
    -o-transition: width .3s ease 0s, left .3s ease 0s;
    transition: width .3s ease 0s, left .3s ease 0s;
    width: 0
}

.icon-menu {
    display: none
}

.no-webp .banner {
    background-image: url(../img/preview.png)
}

.banner {
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--whiteColor)
}

.banner__content {
    padding: 3.625rem 5rem;
    max-width: 40.625rem
}

.banner__title {
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .8125rem
}

@supports (font-size:clamp(1.875rem ,1.5178571429rem + 1.7857142857vw ,3.125rem)) {
    .banner__title {
        font-size: clamp(1.875rem, 1.5178571429rem + 1.7857142857vw, 3.125rem)
    }
}

@supports not (font-size:clamp(1.875rem ,1.5178571429rem + 1.7857142857vw ,3.125rem)) {
    .banner__title {
        font-size: calc(1.875rem + 1.25 * (100vw - 20rem) / 70)
    }
}

.banner__subtitle {
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 2.1875rem
}

@supports (font-size:clamp(1rem ,0.8392857143rem + 0.8035714286vw ,1.5625rem)) {
    .banner__subtitle {
        font-size: clamp(1rem, .8392857143rem + .8035714286vw, 1.5625rem)
    }
}

@supports not (font-size:clamp(1rem ,0.8392857143rem + 0.8035714286vw ,1.5625rem)) {
    .banner__subtitle {
        font-size: calc(1rem + .5625 * (100vw - 20rem) / 70)
    }
}

.banner__btn {
    -webkit-box-shadow: 6px 6px 16px 6px rgba(0, 0, 0, .16), -6px -6px 16px 0 rgba(255, 255, 255, .5);
    box-shadow: 6px 6px 16px 6px rgba(0, 0, 0, .16), -6px -6px 16px 0 rgba(255, 255, 255, .5);
    padding: 1.8125rem 3.0625rem
}

.preview__content {
    padding-top: 3.8125rem
}

.preview__cards {
    padding: 5.75rem 0 8.75rem 0
}

.cards__list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns:(1fr) [ 4 ];
    grid-template-columns:repeat(4, 1fr);
    -webkit-column-gap: .8125rem;
    -moz-column-gap: .8125rem;
    column-gap: .8125rem;
    row-gap: 3.125rem
}

.card {
    position: relative;
    border-radius: .625rem .625rem 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 2.625rem;
    margin-left: 2.625rem
}

.card img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%
}

.card__content {
    max-width: 19.0625rem;
    position: relative
}

.card__content::after, .card__content::before {
    content: "";
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: .625rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

.card__content::before {
    background-color: rgba(248, 177, 125, .5);
    -webkit-transform: translate(-21px, -21px);
    -ms-transform: translate(-21px, -21px);
    transform: translate(-21px, -21px)
}

.card__content::after {
    border: .0625rem solid #f8b17d;
    -webkit-transform: translate(-42px, -42px);
    -ms-transform: translate(-42px, -42px);
    transform: translate(-42px, -42px)
}

.card__description {
    display: block;
    padding: 1rem 2.1875rem;
    background-color: var(--greenColor);
    border-radius: 0 0 10px 10px;
    font-size: 1.25rem;
    line-height: 135%;
    text-align: center;
    color: var(--whiteColor)
}

.section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    position: relative;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 31.25rem;
    padding-bottom: 3.125rem;
    padding-top: 7.1875rem
}

.section__container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.section__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.section__logo {
    position: absolute;
    top: 7.5rem;
    right: 3.75rem
}

.no-webp .error {
    background-image: url(../img/404bg.png)
}

.error {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.error__content {
    margin: 0 auto;
    color: var(--whiteColor);
    letter-spacing: .05em;
    max-width: 26.25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 1.25rem;
    position: relative;
    z-index: 3
}

.error__title {
    font-family: var(--font-family);
    font-weight: 800;
    text-transform: uppercase
}

.error__subtitle {
    margin-bottom: 2.75rem
}

.error__btn {
    padding: 1.4375rem 0;
    color: inherit
}

@supports (font-size:clamp(0.875rem ,0.7678571429rem + 0.5357142857vw ,1.25rem)) {
    .error__btn {
        font-size: clamp(.875rem, .7678571429rem + .5357142857vw, 1.25rem)
    }
}

@supports not (font-size:clamp(0.875rem ,0.7678571429rem + 0.5357142857vw ,1.25rem)) {
    .error__btn {
        font-size: calc(.875rem + .375 * (100vw - 20rem) / 70)
    }
}

.error__human {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    margin: 0 auto
}

.no-webp .registration {
    background-image: url(../img/form-bg.png)
}

.registration {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.form__wrapper {
    min-width: 17.0625rem
}

.form__content {
    margin: 0 auto;
    max-width: 28.625rem;
    padding: 4.5rem 5.8125rem;
    background-color: var(--whiteColor);
    border-radius: 1.875rem;
    -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25)
}

.form__item {
    position: relative
}

.form__item-email input {
    padding-right: 2rem
}

.form__item-email::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 1rem;
    width: .5rem;
    height: .6875rem;
    background-image: url(../img/icons/login.svg);
    background-repeat: no-repeat;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3
}

.form__item-password input {
    padding-right: 2rem
}

.form__item-password::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    right: 1rem;
    width: .75rem;
    height: .5rem;
    background-image: url(../img/icons/password.svg);
    background-repeat: no-repeat;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 3
}

.form__btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .4375rem;
    margin-bottom: 2.375rem
}

.form__btn {
    width: 100%;
    padding: .8125rem .9375rem;
    color: var(--whiteColor);
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    text-align: center
}

.form__btn-choice {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: .875rem;
    text-transform: uppercase;
    text-align: center;
    -webkit-transition: color .3s ease 0s;
    -o-transition: color .3s ease 0s;
    transition: color .3s ease 0s
}

.form__login-google {
    margin-top: 1.3125rem;
    padding-top: 1.3125rem;
    position: relative;
    border-top: .03125rem solid var(--mainColor)
}

.form-registration {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    row-gap: .625rem
}

.input {
    width: 100%;
    border: none;
    background-color: var(--greenColorLight);
    min-height: 2.5rem;
    border-radius: .4375rem;
    padding: 0 1rem;
    font-weight: 500;
    font-size: .75rem;
    color: #403a4b;
    min-width: 15rem
}

.input:focus {
    outline: .0625rem solid var(--greenColor)
}

.input::-webkit-input-placeholder {
    font-weight: 500;
    font-size: .75rem;
    color: #908a9b
}

.input::-moz-placeholder {
    font-weight: 500;
    font-size: .75rem;
    color: #908a9b
}

.input:-ms-input-placeholder {
    font-weight: 500;
    font-size: .75rem;
    color: #908a9b
}

.input::-ms-input-placeholder {
    font-weight: 500;
    font-size: .75rem;
    color: #908a9b
}

.input::placeholder {
    font-weight: 500;
    font-size: .75rem;
    color: #908a9b
}

.label {
    position: absolute;
    top: .1875rem;
    left: 1rem;
    font-size: .625rem;
    color: rgba(64, 58, 75, .6)
}

.login-google__btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-column-gap: .625rem;
    -moz-column-gap: .625rem;
    column-gap: .625rem;
    border: .0625rem solid var(--greenColor);
    border-radius: .4375rem;
    padding: .625rem 1.875rem;
    width: 100%;
    font-weight: 500;
    font-size: .75rem;
    -webkit-transition: color .3s ease 0s, background-color .3s ease 0s;
    -o-transition: color .3s ease 0s, background-color .3s ease 0s;
    transition: color .3s ease 0s, background-color .3s ease 0s
}

.no-webp .login {
    background-image: url(../img/form-bg.png)
}

.login {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.form-login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .625rem
}

.form-login__forgot-btn {
    display: block;
    width: 100%;
    font-weight: 500;
    padding: .625rem 0;
    border-radius: .625rem;
    font-size: .875rem;
    text-align: center;
    color: #000;
    margin: 0 auto;
    margin-bottom: 1.25rem;
    border: .0625rem solid transparent;
    -webkit-transition: border-color .3s ease 0s, color .3s ease 0s;
    -o-transition: border-color .3s ease 0s, color .3s ease 0s;
    transition: border-color .3s ease 0s, color .3s ease 0s
}

.form-login__checkbox {
    font-weight: 600;
    font-size: .75rem;
    color: var(--mainColor)
}

.checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.checkbox__input {
    cursor: pointer
}

.checkbox__label {
    cursor: pointer
}

.error-secondary {
    background-color: #e9e9e9;
    background-image: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.error-secondary__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.error-secondary__human {
    display: block;
    position: relative;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
}

.error-secondary__human img {
    -o-object-fit: contain;
    object-fit: contain
}

.error-secondary__title {
    color: var(--menuColor)
}

.error-secondary__subtitle {
    color: var(--mainColor)
}

.no-webp .success {
    background-image: url(../img/form-bg.png)
}

.success {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.success__container {
    height: 100%
}

.success__btns {
    min-width: 17.0625rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.8125rem
}

.success__btn {
    border-radius: .4375rem;
    font-size: .875rem;
    padding: .8125rem 1rem
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.no-webp .loading {
    background-image: url(../img/404bg.png)
}

.loading {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.loading__icon {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite
}

@media (max-width: 75em) {
    .header__content {
        -webkit-column-gap: 1.25rem;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem
    }
}

@media (max-width: 93.75em) {
    .cards__list {
        -ms-grid-columns:(1fr) [ 2 ];
        grid-template-columns:repeat(2, 1fr);
        place-items: center
    }
}

@media (max-width: 61.99875em) {
    .btn-secondary {
        font-size: .875rem
    }

    .header__info {
        gap: .9375rem
    }

    .menu__body {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: -100%;
        -webkit-transition: left .3s ease 0s;
        -o-transition: left .3s ease 0s;
        transition: left .3s ease 0s;
        overflow: auto;
        padding: 7.5rem 1.875rem 1.875rem 1.875rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        z-index: 2
    }

    .menu__body::before {
        content: "";
        position: fixed;
        width: 100%;
        height: 5rem;
        top: 0;
        background-color: var(--whiteColor);
        left: -100%;
        -webkit-transition: all .3s ease 0s;
        -o-transition: all .3s ease 0s;
        transition: all .3s ease 0s;
        z-index: 2
    }

    .menu-open .menu__body {
        background-color: var(--whiteColor);
        left: 0
    }

    .menu-open .menu__body::before {
        left: 0
    }

    .menu__list {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .menu__link {
        padding: 1.5625rem
    }

    .icon-menu {
        display: block;
        position: relative;
        width: 1.875rem;
        height: 1.125rem;
        cursor: pointer;
        z-index: 5
    }

    .icon-menu span, .icon-menu::after, .icon-menu::before {
        content: "";
        -webkit-transition: all .3s ease 0s;
        -o-transition: all .3s ease 0s;
        transition: all .3s ease 0s;
        right: 0;
        position: absolute;
        width: 100%;
        height: .125rem;
        background-color: var(--mainColor)
    }

    .icon-menu::before {
        top: 0
    }

    .icon-menu::after {
        bottom: 0
    }

    .icon-menu span {
        top: calc(50% - .0625rem)
    }

    .menu-open .icon-menu span {
        width: 0
    }

    .menu-open .icon-menu::before {
        top: calc(50% - .0625rem);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

    .menu-open .icon-menu::after {
        bottom: calc(50% - .0625rem);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .banner__content {
        padding: 3rem 1.25rem
    }

    .banner__btn {
        padding: .875rem 1.5rem
    }
}

@media (max-width: 47.99875em) {
    .header__logo {
        min-width: 8.8125rem
    }

    .header__info {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .menu__link {
        padding: .625rem 1.25rem
    }

    .banner {
        background-position: center
    }

    .banner__content {
        max-width: 26.25rem
    }

    .cards__list {
        -ms-grid-columns: 1fr;
        grid-template-columns:1fr
    }

    .section__logo {
        top: 5rem;
        right: 1.25rem
    }

    .error__subtitle {
        margin-bottom: .9375rem
    }

    .form__content {
        max-width: none;
        width: 100%;
        padding: 3.125rem 3.125rem
    }

    .form__btns {
        margin-bottom: 1.875rem
    }
}

@media (max-width: 29.99875em) {
    .btn-secondary {
        width: 100%;
        font-size: .75rem
    }

    .preview__cards {
        padding: 3.875rem 0
    }

    .card__description {
        font-size: 1rem
    }

    .section {
        padding-top: 12.5rem
    }

    .error__btn {
        width: 100%
    }

    .error__human {
        display: none
    }

    .form__wrapper {
        min-width: 0;
        width: 100%
    }

    .form__content {
        padding: 3.125rem 1.5625rem
    }

    .form__btn {
        font-size: .625rem
    }

    .form-registration {
        row-gap: 1.25rem
    }

    .form-login {
        gap: 1.25rem
    }
}

@media (max-width: 23.125em) {
    .card__content {
        max-width: 15rem
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        -webkit-animation-duration: 0s !important;
        animation-duration: 0s !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0s !important;
        -o-transition-duration: 0s !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important
    }
}

@media (any-hover: hover) {
    .btn-main:hover {
        color: var(--greenColor);
        background-color: var(--whiteColor);
        border-color: var(--greenColor)
    }

    .btn-secondary:hover {
        color: var(--whiteColor);
        background-color: var(--greenColorBtn);
        border-color: var(--greenColor);
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .header-btns__btn:hover svg path {
        stroke: var(--greenColor)
    }

    .menu__link:hover::after {
        width: 100%;
        left: 0
    }

    .menu__link:hover::before {
        -webkit-transition: all .3s ease 0s;
        -o-transition: all .3s ease 0s;
        transition: all .3s ease 0s;
        opacity: 0
    }

    .form__btn-choice:hover {
        color: var(--greenColor)
    }

    .login-google__btn:hover {
        color: var(--whiteColor);
        background-color: var(--greenColor)
    }

    .form-login__forgot-btn:hover {
        color: var(--greenColor);
        border-color: var(--greenColor)
    }
}

.webp .banner {
    background-image: url(../img/preview.webp)
}

.webp .error {
    background-image: url(../img/404bg.webp)
}

.webp .registration {
    background-image: url(../img/form-bg.webp)
}

.webp .login {
    background-image: url(../img/form-bg.webp)
}

.webp .success {
    background-image: url(../img/form-bg.webp)
}

.webp .loading {
    background-image: url(../img/404bg.webp)
}