html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block
}

*[hidden] {
    display: none
}

body {
    line-height: 1
}

menu,
ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

@font-face {
    font-family: Gilroy;
    src: url(/src/assets/fonts/Gilroy-Regular.eot);
    src: local("Gilroy Regular"), local("Gilroy-Regular"), url(/src/assets/fonts/Gilroy-Regular.eot?#iefix) format("embedded-opentype"), url(/src/assets/fonts/Gilroy-Regular.woff) format("woff"), url(/src/assets/fonts/Gilroy-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Gilroy;
    src: url(/src/assets/fonts/Gilroy-Bold.eot);
    src: local("Gilroy Bold"), local("Gilroy-Bold"), url(/src/assets/fonts/Gilroy-Bold.eot?#iefix) format("embedded-opentype"), url(/src/assets/fonts/Gilroy-Bold.woff) format("woff"), url(/src/assets/fonts/Gilroy-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

:root {
    font-size: 2.7777777778vw
}

@media (width >=1200px) {
    :root {
        font-size: .6944444444vw
    }
}

p {
    color: #202020;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: .08rem
}

.h2 {
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: .15rem;
    text-transform: uppercase
}

@media (min-width: 1200px) {
    .h2 {
        font-size: 5rem;
        letter-spacing: .25rem
    }
}

* {
    box-sizing: border-box
}

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

body {
    font-family: Onest, sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    background: var(--white, linear-gradient(0deg, #e9ebe8 0%, #e9ebe8 100%), #fff)
}

body.active {
    overflow: hidden
}

a {
    text-decoration: none
}

.wrapper {
    overflow: hidden;
    background-image: url(/src/assets/images/webp/main-bg.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

.container {
    padding: 0 1.6rem;
    width: 100%
}

@media (min-width: 1200px) {
    .container {
        padding: 0 8rem
    }
}

.line {
    overflow: hidden
}

.d-none {
    display: none !important
}

.hidden {
    opacity: 0;
    pointer-events: none
}

.main {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: var(--white, linear-gradient(0deg, #e9ebe8 0%, #e9ebe8 100%), #fff);
    padding: 1.6rem 0
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.header__logo {
    width: 10.9rem;
    display: block
}

.header__logo img {
    width: 100%;
    height: auto
}

.header__right {
    display: grid;
    gap: .4rem
}

.header__adress {
    position: relative;
    color: var(--text, #00050d);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.header__adress img {
    position: absolute;
    top: 0;
    right: calc(100% + .8rem);
    width: 1rem;
    height: auto
}

.header__phone {
    color: var(--text, #00050d);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    transition: .3s
}

.header__phone:hover {
    color: #ab9668
}

@media (max-width: 1199px) {
    .header__left {
        display: none
    }
}

@media (min-width: 1200px) {
    .header__right .header__adress {
        display: none
    }

    .header__phone {
        font-size: 2.4rem
    }

    .header__logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 14.2rem
    }

    .header__adress {
        font-size: 1.4rem;
        padding-left: 1.8rem
    }

    .header__adress span {
        color: var(--Style, rgba(127, 135, 141, .7));
        display: block
    }

    .header__adress img {
        left: 0;
        right: auto
    }
}

.footer {
    background: var(--text, #131330);
    padding: 1.9rem 0;
    display: flex;
    justify-content: center
}

.footer__button {
    padding: .8rem 2.4rem .8rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem
}

.footer__button-icon {
    width: 3.2rem;
    flex-shrink: 0
}

.footer__button-icon img {
    width: 100%;
    height: auto
}

.footer__button-content {
    display: flex;
    flex-direction: column
}

.footer__button-number {
    color: var(--white, #fff);
    font-family: Sofia Sans;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.4rem;
    text-transform: uppercase
}

.footer__button-title {
    color: #fff6;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center
}

@media (min-width: 1200px) {
    .footer {
        padding: 1.3rem 0
    }

    .footer__button-icon {
        width: 4.4rem
    }
}

.images {
    display: grid;
    gap: .8rem
}

.images--four-col {
    grid-template-columns: repeat(2, 1fr)
}

.images--four-col .images__option:after {
    display: none
}

.images--four-col .images__option-marker {
    background: var(--white, linear-gradient(0deg, #e9ebe8 0%, #e9ebe8 100%), #fff)
}

.images--four-col .images__option-img {
    height: 22.4rem
}

.images__option {
    overflow: hidden;
    position: relative;
    cursor: pointer
}

.images__option:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0000, #0006), #0003;
    transition: .4s
}

.images__option:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #826a36;
    opacity: 0;
    transition: .3s;
    z-index: 1
}

.images__option.active:after {
    opacity: 0
}

.images__option.active:before {
    opacity: .7
}

.images__option.active .images__option-marker {
    background-color: #fff;
    color: #c5b584
}

.images__option:hover .images__option-marker {
    color: #c5b584
}

.images__option-img {
    display: block;
    height: 18rem;
    transition: .4s
}

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

.images__option-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2.4rem;
    display: grid;
    gap: 1rem;
    z-index: 1
}

.images__option-title {
    color: #fff;
    font-size: 1.9rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.4rem;
    z-index: 1
}

.images__option-text {
    color: #fff9;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.images__option-text strong {
    font-weight: 700;
    display: block
}

.images__option-marker {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #fff9;
    width: 4rem;
    height: 4rem;
    z-index: 1;
    transition: .4s
}

.images__option-marker svg {
    width: 1.5rem;
    height: auto
}

@media (min-width: 1200px) {
    .images--two {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem
    }

    .images--three {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.6rem
    }

    .images--four,
    .images--four-col {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.6rem
    }

    .images--four-col .images__option-img {
        height: 43rem
    }

    .images__option:hover .images__option-img {
        transform: scale(1.12)
    }

    .images__option-img {
        height: 43rem
    }

    .images__option-title {
        font-size: 2.4rem;
        line-height: 2.4rem
    }

    .images__option-text {
        font-size: 1.6rem
    }

    .images__option-marker {
        top: .8rem;
        right: .8rem
    }
}

.variants {
    display: grid;
    gap: .8rem
}

.variant {
    background-color: #fff;
    padding: .8rem .8rem .8rem 2.4rem;
    flex-wrap: wrap;
    cursor: pointer;
    transition: .4s;
    position: relative
}

.variant.active {
    background-color: #ab9668
}

.variant.active .variant__text,
.variant.active .variant__body ul {
    color: #fff
}

.variant.active .variant__marker {
    opacity: 1;
    background-color: #fff;
    color: #ab9668
}

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

.variant__text {
    color: var(--text, #131330);
    font-size: 1.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
    height: 5.6rem;
    display: flex;
    align-items: center
}

.variant__body {
    display: grid;
    gap: 2.4rem;
    padding-bottom: 1.6rem
}

.variant__body ul {
    display: grid;
    gap: .8rem;
    grid-template-columns: 5.4rem 17.8rem;
    color: var(--Style, rgba(127, 135, 141, .7));
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.012rem
}

.variant__body ul strong {
    font-weight: 600
}

.variant__marker {
    flex-shrink: 0;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ebe8;
    border-radius: 50%;
    transition: .4s;
    color: #fff;
    opacity: .4
}

.variant__marker svg {
    width: 1.2rem;
    height: auto
}

@media (min-width: 1200px) {
    .variants {
        grid-template-columns: repeat(2, 1fr);
        grid-row: auto;
        gap: 1.6rem;
        overflow-y: auto;
        max-height: calc(100vh - 38rem);
        padding-right: 4rem
    }

    .variants::-webkit-scrollbar {
        width: .8rem
    }

    .variants::-webkit-scrollbar-thumb {
        background-color: #c5b584;
        border-radius: .4rem
    }

    .variants::-webkit-scrollbar-track {
        background: #c5b58433
    }

    .variant {
        min-height: auto;
        gap: 1.6rem;
        padding: .5rem .8rem .5rem 2.4rem;
        display: grid
    }

    .variant:nth-child(1) {
        grid-column: 1/-1
    }

    .variant__text {
        font-size: 2rem;
        line-height: 1rem
    }

    .variant__body {
        gap: 1rem;
        padding-right: 5.6rem
    }

    .variant__body ul {
        grid-template-columns: 5.4rem 1fr
    }

    .variant:hover:not(.active) .variant__marker {
        background-color: #ab9668;
        color: #fff;
        opacity: .5
    }
}

.textarea__label {
    color: var(--text, #131330);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: .8rem
}

.textarea__input {
    border-radius: 1.6rem;
    background: #fff;
    padding: 1.2rem 1.6rem;
    height: 4.8rem;
    width: 100%;
    color: var(--text, #131330);
    font-family: Inter;
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6rem;
    border: none;
    margin-bottom: .8rem;
    resize: none
}

.textarea__input:focus {
    outline: none
}

.textarea__counter {
    color: var(--text, #131330);
    text-align: right;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -.012rem
}

@media (min-width: 1200px) {
    .textarea__input {
        margin-bottom: 0;
        height: 7.3rem
    }
}

.area__row {
    display: grid;
    gap: 2.4rem;
    margin-bottom: 2.4rem
}

.area__label {
    color: var(--text, #131330);
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6rem;
    margin-bottom: .8rem
}

.area__field {
    position: relative
}

.area__size {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.6rem;
    color: var(--Color, #c6c6c6);
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.4rem
}

.area__input {
    border-radius: 1.6rem;
    background: #fff;
    width: 100%;
    padding: 1.2rem 1.6rem;
    border: none;
    height: 4.6rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

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

.area__input:focus {
    outline: none
}

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

.upload-file {
    display: flex;
    align-items: center;
    gap: .8rem;
    position: relative
}

.upload-file__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

.upload-file__icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: #ec4a05;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.upload-file__icon svg {
    width: 1.2rem;
    height: auto
}

.upload-file__text {
    color: var(--text, #131330);
    font-size: 1.7rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem
}

@media (min-width: 1200px) {
    .area__row {
        grid-template-columns: 38rem 1fr;
        gap: 4rem;
        margin-bottom: 4.8rem
    }

    .area__label {
        font-size: 1.6rem
    }

    .area__input {
        height: 6.4rem;
        color: var(--text, #131330);
        font-size: 1.6rem;
        font-style: normal;
        font-weight: 500;
        line-height: 2.4rem
    }

    .area .variants {
        grid-template-columns: repeat(4, 1fr)
    }

    .upload-file {
        gap: 2.4rem
    }

    .upload-file__icon {
        width: 4rem;
        height: 4rem
    }

    .upload-file__icon svg {
        width: 2rem;
        height: auto
    }

    .upload-file__text {
        font-size: 2rem
    }
}

.messangers {
    display: grid;
    gap: .8rem
}

.messanger {
    border-radius: 2.4rem;
    background: var(--white, #fff);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    padding: 4.8rem 0 1.6rem;
    position: relative;
    overflow: hidden;
    cursor: pointer
}

.messanger:nth-child(1) .messanger__icon-bg {
    background-color: #675da9
}

.messanger:nth-child(1) .messanger__icon svg {
    width: 4rem;
    height: auto
}

.messanger:nth-child(1) .messanger__title {
    color: #675da9
}

.messanger:nth-child(2) .messanger__icon-bg {
    background-color: #229eda
}

.messanger:nth-child(2) .messanger__icon svg {
    width: 4rem;
    height: auto
}

.messanger:nth-child(2) .messanger__title {
    color: #229eda
}

.messanger:nth-child(3) .messanger__icon-bg {
    background-color: #0dc143
}

.messanger:nth-child(3) .messanger__icon svg {
    width: 4rem;
    height: auto
}

.messanger:nth-child(3) .messanger__title {
    color: #0dc143
}

.messanger__marker {
    background-color: #e9e9e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
    position: absolute;
    top: .8rem;
    right: .8rem;
    width: 4rem;
    height: 4rem;
    color: #fff;
    opacity: .4;
    z-index: 1
}

.messanger__marker svg {
    width: 1.2rem;
    height: auto
}

.messanger__icon {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 1.6rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem
}

.messanger__icon svg {
    position: relative;
    z-index: 1
}

.messanger__icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 1.6rem;
    transform-origin: center;
    transition: 2s
}

.messanger__title {
    position: relative;
    z-index: 2;
    text-align: center;
    font-family: Sofia Sans;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.4rem;
    text-transform: uppercase
}

.messanger.active .messanger__marker {
    opacity: 1;
    background-color: #fff
}

.messanger.active .messanger__icon-bg {
    transform: scale(10)
}

.messanger.active .messanger__title {
    color: #fff
}

.messanger.active:nth-child(1) .messanger__marker {
    color: #675da9
}

.messanger.active:nth-child(2) .messanger__marker {
    color: #229eda
}

.messanger.active:nth-child(3) .messanger__marker {
    color: #0dc143
}

@media (min-width: 1200px) {
    .messangers {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem
    }

    .messanger {
        min-height: 28rem;
        border-radius: 2.4rem;
        padding: 9rem 0 3.2rem
    }

    .messanger__marker {
        width: 4rem;
        height: 4rem
    }

    .messanger__marker svg {
        width: 1.5rem
    }

    .messanger__icon {
        width: 10rem;
        height: 10rem;
        border-radius: 2.4rem;
        margin-bottom: 4.2rem
    }

    .messanger__icon-bg {
        border-radius: 2.4rem
    }

    .messanger__title {
        font-size: 2.4rem;
        line-height: 2.4rem
    }

    .messanger:nth-child(1) .messanger__icon svg {
        width: 6.3rem
    }

    .messanger:nth-child(2) .messanger__icon svg {
        width: 5.4rem
    }

    .messanger:nth-child(3) .messanger__icon svg {
        width: 5.8rem
    }

    .messanger:hover .messanger__icon-bg {
        transform: scale(10)
    }

    .messanger:hover .messanger__title {
        color: #fff
    }

    .messanger:hover .messanger__marker {
        opacity: 1;
        background-color: #fff9
    }
}

.hero-section {
    min-height: 100svh;
    background: var(--text, #00050d);
    padding: 7.6rem 0 3.2rem
}

.hero-section__title {
    margin-bottom: 2rem
}

.hero-section__title-row-top {
    color: var(--white, #fff);
    font-size: 2.7rem;
    font-style: normal;
    font-weight: 600;
    line-height: 4.724rem;
    letter-spacing: -.1221rem;
    text-transform: uppercase;
    display: block
}

.hero-section__title-row-bottom {
    color: #c5b584;
    font-size: 7.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 6.793rem;
    letter-spacing: -.2396rem;
    text-transform: uppercase;
    margin-left: -.45rem
}

.hero-section__title-row-bottom span {
    font-size: 9.4rem;
    line-height: 0.8;
    letter-spacing: -.2744rem;
    margin-left: -.45rem
}

.hero-section__subtitle {
    color: var(--white, #fff);
    font-size: 1.7rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 3.2rem
}

.hero-section__video {
    position: relative;
    width: 22rem;
    height: 41.3rem;
    object-fit: cover;
    display: block;
    margin: 0 auto 3.2rem
}

.hero-section__video video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-section__text {
    display: grid;
    gap: 2.5rem;
    margin-bottom: 3.2rem
}

.hero-section__text h3 {
    color: var(--accent, #c5b584);
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.4rem
}

.hero-section__text ul {
    display: grid;
    gap: 1.6rem;
    color: var(--white, #fff);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7rem
}

.hero-section__text ul li {
    position: relative;
    padding-left: 3.2rem
}

.hero-section__text ul li:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -.4rem;
    width: 2.4rem;
    height: 2.4rem;
    background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='25'%20viewBox='0%200%2024%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11.4794%205.46582C11.4266%205.47196%2011.2663%205.49034%2011.1231%205.50669C10.98%205.52302%2010.7184%205.5666%2010.5418%205.6035C10.3652%205.6404%2010.0641%205.72067%209.87276%205.78184C9.68135%205.84301%209.39424%205.94873%209.2347%206.01675C9.0752%206.0848%208.80904%206.21509%208.64326%206.30634C8.47748%206.39756%208.23404%206.54445%208.10229%206.63275C7.97057%206.72101%207.74105%206.89113%207.59228%207.01076C7.44352%207.1304%207.1963%207.35374%207.04293%207.5071C6.88953%207.66043%206.66612%207.90758%206.54646%208.0563C6.42679%208.20503%206.25663%208.43449%206.16834%208.56617C6.08002%208.69788%205.93309%208.94126%205.84184%209.107C5.75057%209.27273%205.62024%209.53882%205.55218%209.69828C5.48414%209.85777%205.37839%2010.1448%205.31721%2010.3362C5.25602%2010.5275%205.17581%2010.8285%205.13901%2011.005C5.10221%2011.1815%205.05587%2011.4431%205.03603%2011.5862C5.01504%2011.7379%205%2012.1036%205%2012.4628C5%2012.822%205.01504%2013.1878%205.03603%2013.3395C5.05587%2013.4826%205.10221%2013.7441%205.13901%2013.9207C5.17581%2014.0972%205.25602%2014.3982%205.31721%2014.5895C5.37839%2014.7808%205.48414%2015.0679%205.55218%2015.2274C5.62024%2015.3868%205.75057%2015.6529%205.84184%2015.8187C5.93309%2015.9844%206.08002%2016.2278%206.16834%2016.3595C6.25663%2016.4912%206.42679%2016.7206%206.54646%2016.8694C6.66612%2017.0181%206.88953%2017.2652%207.04293%2017.4186C7.1963%2017.5719%207.44352%2017.7953%207.59228%2017.9149C7.74105%2018.0345%207.97057%2018.2047%208.10229%2018.2929C8.23404%2018.3812%208.47748%2018.5281%208.64326%2018.6193C8.80904%2018.7106%209.0752%2018.8409%209.2347%2018.9089C9.39424%2018.9769%209.68135%2019.0826%209.87276%2019.1438C10.0641%2019.205%2010.3652%2019.2852%2010.5418%2019.322C10.7184%2019.3588%2010.98%2019.4051%2011.1231%2019.4249C11.2748%2019.4459%2011.6407%2019.4609%2012%2019.4609C12.3593%2019.4609%2012.7252%2019.4459%2012.8769%2019.4249C13.02%2019.4051%2013.2816%2019.3588%2013.4582%2019.322C13.6348%2019.2852%2013.9359%2019.205%2014.1272%2019.1438C14.3186%2019.0826%2014.6058%2018.9769%2014.7653%2018.9089C14.9248%2018.8409%2015.191%2018.7106%2015.3567%2018.6193C15.5225%2018.5281%2015.766%2018.3812%2015.8977%2018.2929C16.0294%2018.2047%2016.259%2018.0345%2016.4077%2017.9149C16.5565%2017.7953%2016.8037%2017.5719%2016.9571%2017.4186C17.1105%2017.2652%2017.3339%2017.0181%2017.4535%2016.8694C17.5732%2016.7206%2017.7434%2016.4912%2017.8317%2016.3595C17.92%2016.2278%2018.0669%2015.9844%2018.1582%2015.8187C18.2494%2015.6529%2018.3798%2015.3868%2018.4478%2015.2274C18.5159%2015.0679%2018.6216%2014.7808%2018.6828%2014.5895C18.744%2014.3982%2018.8242%2014.0972%2018.861%2013.9207C18.8978%2013.7441%2018.9441%2013.4826%2018.964%2013.3395C18.985%2013.1878%2019%2012.822%2019%2012.4628C19%2012.1036%2018.985%2011.7379%2018.964%2011.5862C18.9441%2011.4431%2018.8978%2011.1815%2018.861%2011.005C18.8242%2010.8285%2018.744%2010.5275%2018.6828%2010.3362C18.6216%2010.1448%2018.5159%209.85777%2018.4478%209.69828C18.3798%209.53882%2018.2494%209.27273%2018.1582%209.107C18.0669%208.94126%2017.92%208.69788%2017.8317%208.56617C17.7434%208.43449%2017.5732%208.20503%2017.4535%208.0563C17.3339%207.90758%2017.1105%207.66043%2016.9571%207.5071C16.8037%207.35374%2016.5565%207.1304%2016.4077%207.01076C16.259%206.89113%2016.0294%206.72101%2015.8977%206.63275C15.766%206.54445%2015.5225%206.39756%2015.3567%206.30634C15.191%206.21509%2014.9248%206.0848%2014.7653%206.01675C14.6058%205.94873%2014.3207%205.84367%2014.1318%205.78329C13.943%205.72294%2013.6666%205.64714%2013.5176%205.61487C13.3687%205.58257%2013.1235%205.53792%2012.9728%205.51562C12.8221%205.4933%2012.446%205.47048%2012.137%205.46486C11.8281%205.45927%2011.5321%205.45971%2011.4794%205.46582ZM15.2746%2010.2166L15.7948%2010.7372L13.3974%2013.1341L10.9999%2015.531L9.47921%2014.0108L7.95851%2012.4905L8.47874%2011.9698C8.76484%2011.6835%209.01132%2011.4492%209.02647%2011.4492C9.04163%2011.4492%209.49187%2011.8868%2010.027%2012.4217L11%2013.3942L12.8495%2011.5451C13.8667%2010.5281%2014.7114%209.69598%2014.7267%209.69598C14.742%209.69598%2014.9885%209.93026%2015.2746%2010.2166Z'%20fill='%23AB9668'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.hero-section__button {
    border-radius: .8rem;
    background: var(--accent, #c5b584);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 4.3rem;
    padding: 0 2.4rem;
    color: var(--ffffff, #fff);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.6rem;
    text-transform: uppercase
}

.hero-section__button svg {
    width: 1.1rem;
    height: auto;
    flex-shrink: 0
}

.hero-section__play-button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 1;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    border: none;
    padding: 0
}

.hero-section__play-button svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: auto;
    transition: .3s
}

.hero-section__play-button svg:nth-child(2) {
    opacity: 0
}

.hero-section__play-button.pause-icon svg:first-child {
    opacity: 0
}

.hero-section__play-button.pause-icon svg:nth-child(2) {
    opacity: 1
}

@media (min-width: 1200px) {
    .hero-section {
        padding-top: 12rem;
        padding-bottom: 3.5rem;
        position: relative
    }

    .hero-section__video {
        position: absolute;
        top: 11rem;
        right: 17.3rem;
        width: 36.8rem;
        height: 65.4rem
    }

    .hero-section__title {
        margin-bottom: 2rem
    }

    .hero-section__title-row-top {
        font-size: 9.4rem;
        line-height: 9.2rem;
        letter-spacing: -.328rem
    }

    .hero-section__title-row-top span {
        display: block;
        font-size: 13.5rem;
        line-height: 9.2rem;
        letter-spacing: 0rem;
        margin: 3.2rem 0 3.2rem -.7rem
    }

    .hero-section__title-row-bottom {
        font-size: 5.7rem;
        line-height: 1rem;
        letter-spacing: -.224rem;
        margin-left: 0
    }

    .hero-section__title-row-bottom span {
        font-size: 5.7rem
    }

    .hero-section__subtitle {
        font-size: 1.8rem;
        margin-bottom: 4rem
    }

    .hero-section__text {
        gap: 1.6rem;
        margin-bottom: 3.5rem
    }

    .hero-section__text h3 {
        font-size: 2rem
    }

    .hero-section__text ul {
        font-size: 1.6rem
    }

    .hero-section__button {
        padding: 0 3.2rem;
        height: 5.6rem;
        font-size: 1.4rem
    }
}

.quiz__title {
    color: #fff;
    text-align: center;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.4rem;
    margin-bottom: 2.4rem
}

.quiz__title strong {
    font-weight: 700
}

.quiz__body {
    padding-top: 7.6rem;
    padding-bottom: 3.2rem
}

.quiz__step {
    display: grid;
    gap: 2.4rem
}

.quiz__step-header {
    display: grid;
    gap: .8rem
}

.quiz__step-title {
    color: var(--text, #00050d);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.064rem;
    text-transform: uppercase
}

.quiz__step-subtitle {
    color: var(--Style, rgba(127, 135, 141, .7));
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1
}

.quiz__step-footer {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: 8.2rem 1fr 8.2rem
}

.quiz__step-counter {
    display: flex;
    align-items: baseline;
    color: var(--Style, rgba(127, 135, 141, .7));
    justify-content: center;
    gap: .4rem;
    text-align: center;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.quiz__step-counter span {
    font-size: 1.3rem
}

.quiz__step-counter strong {
    font-weight: 500;
    font-size: 2.4rem
}

.quiz__control-button {
    border-radius: .8rem;
    background: var(--accent, #c5b584);
    height: 3.1rem;
    padding: 0 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    color: var(--ffffff, #fff);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.6rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: .3s
}

.quiz__control-button svg {
    flex-shrink: 0
}

.quiz__control-button:hover {
    background-color: #ab9668
}

@media (min-width: 1200px) {
    .quiz__title {
        font-size: 4.8rem;
        line-height: 5.6rem;
        margin-bottom: 6.4rem
    }

    .quiz__body {
        padding-top: 12.8rem
    }

    .quiz__step {
        gap: 3.2rem
    }

    .quiz__step-header {
        margin-bottom: .8rem
    }

    .quiz__step-title {
        font-size: 6.2rem;
        line-height: 1
    }

    .quiz__step-subtitle {
        font-size: 1.6rem
    }

    .quiz__step-footer {
        grid-template-columns: 10.2rem 1fr 10.2rem
    }

    .quiz__control-button {
        height: 4.1rem;
        padding: 0 1.9rem;
        font-size: 1.4rem
    }

    .quiz__step-counter {
        font-size: 1.6rem
    }

    .quiz__step-counter strong {
        font-size: 2.4rem
    }
}

.form {
    padding-top: 8rem;
    padding-bottom: 3.2rem;
    position: relative
}

.form__bg-title {
    display: none;
    position: absolute;
    top: 0;
    color: var(--ffffff, #fff);
    text-align: center;
    font-size: 9.2376rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.2969rem;
    letter-spacing: -.3695rem;
    text-transform: uppercase
}

.form__container {
    background: #fff;
    padding: 3.2rem 1.6rem
}

.form__header {
    padding-bottom: 3.75rem;
    margin-bottom: 3.75rem;
    position: relative
}

.form__header:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -1.6rem;
    width: calc(100% + 3.2rem);
    border-bottom: .1rem solid rgba(127, 135, 141, .7)
}

.form__title {
    color: var(--text, #00050d);
    font-size: 3.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.152rem;
    text-transform: uppercase;
    margin-bottom: 3.2rem
}

.form__text {
    color: var(--text, #00050d);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.form__row {
    display: grid;
    gap: 3.2rem
}

.form__label {
    color: var(--text, #00050d);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: .24rem
}

.form__input {
    border-radius: .8rem;
    background: #e9ebe8;
    width: 100%;
    height: 4.8rem;
    padding: 0 1.6rem;
    border: none;
    border: .1rem solid #e9ebe8;
    color: var(--hover, #00050d);
    font-family: Onest;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.4rem
}

.form__input:focus {
    outline: none;
    border: .1rem solid #ab9668
}

.form__footer {
    position: relative
}

.form__footer img {
    position: absolute;
    width: 7.3rem;
    top: 50%;
    transform: translateY(-50%);
    left: -.9rem
}

.form__button {
    border-radius: .8rem;
    background: var(--accent, #c5b584);
    height: 4.8rem;
    padding: 0 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    color: var(--ffffff, #fff);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 3.2rem;
    border: none;
    width: 100%
}

.form__button svg {
    width: .8rem;
    height: auto
}

@media (min-width: 1200px) {
    .form {
        padding-top: 15.7rem
    }

    .form__bg-title {
        display: block;
        font-size: 36rem;
        top: 20rem;
        left: 50%;
        transform: translate(-50%);
        opacity: .3
    }

    .form__container {
        max-width: 58rem;
        margin: 0 auto;
        padding: 4.8rem 4.8rem 5.6rem
    }

    .form__header {
        padding-bottom: 4.8rem;
        margin-bottom: 4.8rem
    }

    .form__header:after {
        left: -4.8rem;
        width: calc(100% + 9.6rem)
    }

    .form__title {
        font-size: 6rem;
        line-height: 1;
        margin-bottom: 2rem
    }

    .form__text {
        font-size: 1.4rem
    }

    .form__row {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
        padding-bottom: 4.8rem;
        margin-bottom: 4.8rem;
        position: relative
    }

    .form__row:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -4.8rem;
        width: calc(100% + 9.6rem);
        border-bottom: .1rem solid rgba(127, 135, 141, .7)
    }

    .form__input {
        height: 5.6rem
    }

    .form__footer img {
        width: 12.5rem;
        left: .8rem
    }

    .form__button {
        font-size: 1.4rem;
        transition: .4s;
        height: 5.6rem;
        cursor: pointer
    }

    .form__button:hover {
        background-color: #ab9668
    }
}

.thank {
    text-align: center;
    display: flex;
    align-items: center;
    min-height: 100vh;
    background: var(--text, #00050d);
    padding-top: 10rem
}

.thank__title {
    color: var(--ffffff, #fff);
    font-size: 3.6rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.144rem;
    text-transform: uppercase;
    margin-bottom: 3.2rem
}

.thank__title span {
    display: block;
    font-size: 3.8rem
}

.thank__text {
    color: var(--ffffff, #fff);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 17rem;
    margin: 0 auto 3.2rem
}

.thank__button {
    border: none
}

.thank__logo {
    position: relative;
    width: 28.4rem;
    display: block;
    margin: 0 auto 5.6rem
}

.thank__logo img {
    width: 100%
}

.thank__button {
    border-radius: .8rem;
    background: var(--accent, #c5b584);
    height: 4.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 0 2.4rem;
    color: var(--ffffff, #fff);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.6rem;
    text-transform: uppercase
}

.thank__button svg {
    width: 1.1rem;
    height: auto
}

@media (min-width: 1200px) {
    .thank__title {
        font-size: 8.6rem;
        line-height: 9.2rem;
        letter-spacing: -.344rem;
        margin-bottom: 1rem;
        margin-bottom: 3rem
    }

    .thank__title span {
        font-size: 9rem;
        line-height: 9.2rem;
        letter-spacing: -.36rem
    }

    .thank__text {
        max-width: 45rem;
        font-size: 1.4rem;
        margin-bottom: 3rem
    }

    .thank__logo {
        width: 28.4rem;
        margin-bottom: 8.8rem
    }

    .thank__button {
        height: 5.6rem;
        padding: 0 3.2rem;
        font-size: 1.4rem;
        cursor: pointer;
        transition: .4s
    }

    .thank__button:hover {
        background: var(--accent-hover, #ab9668)
    }
}

@-webkit-keyframes notyf-fadeinup {
    0% {
        opacity: 0;
        transform: translateY(25%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes notyf-fadeinup {
    0% {
        opacity: 0;
        transform: translateY(25%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@-webkit-keyframes notyf-fadeinleft {
    0% {
        opacity: 0;
        transform: translate(25%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes notyf-fadeinleft {
    0% {
        opacity: 0;
        transform: translate(25%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@-webkit-keyframes notyf-fadeoutright {
    0% {
        opacity: 1;
        transform: translate(0)
    }

    to {
        opacity: 0;
        transform: translate(25%)
    }
}

@keyframes notyf-fadeoutright {
    0% {
        opacity: 1;
        transform: translate(0)
    }

    to {
        opacity: 0;
        transform: translate(25%)
    }
}

@-webkit-keyframes notyf-fadeoutdown {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(25%)
    }
}

@keyframes notyf-fadeoutdown {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(25%)
    }
}

@-webkit-keyframes ripple {
    0% {
        transform: scale(0) translateY(-45%) translate(13%)
    }

    to {
        transform: scale(1) translateY(-45%) translate(13%)
    }
}

@keyframes ripple {
    0% {
        transform: scale(0) translateY(-45%) translate(13%)
    }

    to {
        transform: scale(1) translateY(-45%) translate(13%)
    }
}

.notyf {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
    box-sizing: border-box;
    padding: 20px
}

.notyf__icon--error,
.notyf__icon--success {
    height: 21px;
    width: 21px;
    background: #fff;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
    position: relative
}

.notyf__icon--error:after,
.notyf__icon--error:before {
    content: "";
    background: currentColor;
    display: block;
    position: absolute;
    width: 3px;
    border-radius: 3px;
    left: 9px;
    height: 12px;
    top: 5px
}

.notyf__icon--error:after {
    transform: rotate(-45deg)
}

.notyf__icon--error:before {
    transform: rotate(45deg)
}

.notyf__icon--success:after,
.notyf__icon--success:before {
    content: "";
    background: currentColor;
    display: block;
    position: absolute;
    width: 3px;
    border-radius: 3px
}

.notyf__icon--success:after {
    height: 6px;
    transform: rotate(-45deg);
    top: 9px;
    left: 6px
}

.notyf__icon--success:before {
    height: 11px;
    transform: rotate(45deg);
    top: 5px;
    left: 10px
}

.notyf__toast {
    display: block;
    overflow: hidden;
    pointer-events: auto;
    -webkit-animation: notyf-fadeinup .3s ease-in forwards;
    animation: notyf-fadeinup .3s ease-in forwards;
    box-shadow: 0 3px 7px #00000040;
    position: relative;
    padding: 0 15px;
    border-radius: 2px;
    max-width: 300px;
    transform: translateY(25%);
    box-sizing: border-box;
    flex-shrink: 0
}

.notyf__toast--disappear {
    transform: translateY(0);
    -webkit-animation: notyf-fadeoutdown .3s forwards;
    animation: notyf-fadeoutdown .3s forwards;
    -webkit-animation-delay: .25s;
    animation-delay: .25s
}

.notyf__toast--disappear .notyf__icon,
.notyf__toast--disappear .notyf__message {
    -webkit-animation: notyf-fadeoutdown .3s forwards;
    animation: notyf-fadeoutdown .3s forwards;
    opacity: 1;
    transform: translateY(0)
}

.notyf__toast--disappear .notyf__dismiss {
    -webkit-animation: notyf-fadeoutright .3s forwards;
    animation: notyf-fadeoutright .3s forwards;
    opacity: 1;
    transform: translate(0)
}

.notyf__toast--disappear .notyf__message {
    -webkit-animation-delay: .05s;
    animation-delay: .05s
}

.notyf__toast--upper {
    margin-bottom: 20px
}

.notyf__toast--lower {
    margin-top: 20px
}

.notyf__toast--dismissible .notyf__wrapper {
    padding-right: 30px
}

.notyf__ripple {
    height: 400px;
    width: 400px;
    position: absolute;
    transform-origin: bottom right;
    right: 0;
    top: 0;
    border-radius: 50%;
    transform: scale(0) translateY(-51%) translate(13%);
    z-index: 5;
    -webkit-animation: ripple .4s ease-out forwards;
    animation: ripple .4s ease-out forwards
}

.notyf__wrapper {
    display: flex;
    align-items: center;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-right: 15px;
    border-radius: 3px;
    position: relative;
    z-index: 10
}

.notyf__icon {
    width: 22px;
    text-align: center;
    font-size: 1.3em;
    opacity: 0;
    -webkit-animation: notyf-fadeinup .3s forwards;
    animation: notyf-fadeinup .3s forwards;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    margin-right: 13px
}

.notyf__dismiss {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 26px;
    margin-right: -15px;
    -webkit-animation: notyf-fadeinleft .3s forwards;
    animation: notyf-fadeinleft .3s forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
    opacity: 0
}

.notyf__dismiss-btn {
    background-color: #00000040;
    border: none;
    cursor: pointer;
    transition: opacity .2s ease, background-color .2s ease;
    outline: none;
    opacity: .35;
    height: 100%;
    width: 100%
}

.notyf__dismiss-btn:after,
.notyf__dismiss-btn:before {
    content: "";
    background: #fff;
    height: 12px;
    width: 2px;
    border-radius: 3px;
    position: absolute;
    left: calc(50% - 1px);
    top: calc(50% - 5px)
}

.notyf__dismiss-btn:after {
    transform: rotate(-45deg)
}

.notyf__dismiss-btn:before {
    transform: rotate(45deg)
}

.notyf__dismiss-btn:hover {
    opacity: .7;
    background-color: #00000026
}

.notyf__dismiss-btn:active {
    opacity: .8
}

.notyf__message {
    vertical-align: middle;
    position: relative;
    opacity: 0;
    -webkit-animation: notyf-fadeinup .3s forwards;
    animation: notyf-fadeinup .3s forwards;
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
    line-height: 1.5em
}

@media only screen and (max-width:480px) {
    .notyf {
        padding: 0
    }

    .notyf__ripple {
        height: 600px;
        width: 600px;
        -webkit-animation-duration: .5s;
        animation-duration: .5s
    }

    .notyf__toast {
        max-width: none;
        border-radius: 0;
        box-shadow: 0 -2px 7px #00000021;
        width: 100%
    }

    .notyf__dismiss {
        width: 56px
    }
}