:root {
    --font-dm-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
    --font-manrope: "Manrope", ui-sans-serif, system-ui, sans-serif;

    /* Primitive */
    --color-white: #ffffff;

    --color-neutral-100: #eeeeef;
    --color-neutral-200: #e5e6e7;
    --color-neutral-300: #c2c2c2;
    --color-neutral-400: #cfdfda;

    --color-brand-900: #173042;
    --color-brand-700: #236477;
    --color-brand-500: #3dbeb1;

    --color-mint-100: #ecf8f4;
    --color-lime-300: #b7f1ad;
    --color-lime-400: #88f175;

    --color-red-300: #ffcacb;
    --color-red-400: #f99c9e;

    /* Semantic */
    --color-bg-body: var(--color-mint-100);
    --color-text: var(--color-brand-900);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

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

button {
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, outline 0.2s ease;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, outline 0.2s ease;
}

p {
    margin-bottom: 5px;
}

body {
    color: var(--color-text);
    background-color: var(--color-bg-body);
    font-family: var(--font-dm-sans);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    overflow-x: clip;
}

input,
select,
textarea {
    font-family: var(--font-dm-sans);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
    font-family: var(--font-manrope);
}
h1, .h1 {
    font-size: 60px;
    font-weight: 600;
}

h2, .h2 {
    font-size: 30px;
    font-weight: 700;
}

h3, .h3 {
    font-size: 22px;
    font-weight: 700;
}

h4, .h4 {
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 767px) {
    h1, .h1 {
        font-size: 36px;
        font-weight: 600;
    }
    h2, .h2 {
        font-size: 30px;
        font-weight: 600;
    }
    h3, .h3 {
        font-size: 16px;
        font-weight: 600;
    }
    h4, .h4 {
        font-size: 16px;
        font-weight: 600;
    }
}

.btn {
    display: inline-flex;
    justify-content: center;
    border: none;
    padding: 23px 66px;
    margin: 0;
    border-radius: 60px;
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .btn {
        padding: 19px 66px;
        font-size: 16px;
    }
}

@media (max-width: 430px) {
    .btn {
        width: 100%;
    }
}

a.btn {
    text-decoration: none;
}

.btn-dark {
    color: var(--color-white);
    background-color: var(--color-brand-900);
}

.btn-dark:hover {
    color: var(--color-text);
    background-color: var(--color-brand-500);
}

.btn-green {
    color: var(--color-text);
    background-color: var(--color-lime-300);
}

.wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 144px;
}

@media screen and (max-width: 1200px) {
    .wrapper {
        padding: 0 64px;
    }
}

@media screen and (max-width: 767px) {
    .wrapper {
        padding: 0 16px;
    }
}

.content-link {
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: underline;
}

.content-link:hover {
    color: var(--color-brand-700);
}

/* Header */
.site-header {
    --indent-factor: 1;
    padding-top: 62px;
}

@media (max-width: 1300px) {
    .site-header {
        --indent-factor: .7;
    }
}

@media (max-width: 1100px) {
    .site-header {
        --indent-factor: .5;
    }
}

@media (max-width: 767px) {
    .site-header {
        padding-top: 25px;
    }
}

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

@media (max-width: 1000px) {
    .site-header__row {
        justify-content: center;
    }
}

.site-header.is-form-page .site-header__row {
    justify-content: center;
}

.site-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
}

.site-logo img {
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .site-logo img {
        max-width: 113px;
    }
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(40px * var(--indent-factor));
    list-style: none;
}

@media (max-width: 1000px) {
    .site-nav {
        display: none;
    }
}

.site-nav a:not(.site-header__cta):hover {
    color: var(--color-brand-500);
    text-decoration: underline;
}

.site-header__cta {
    padding: calc(23px * var(--indent-factor)) calc(39px * var(--indent-factor));
    border: 1px solid var(--color-brand-900);
    background-color: var(--color-white);
}

.site-header__cta:hover {
    border-color: transparent;
}

/* Footer */
.site-footer {
    position: relative;
    z-index: 1;
    padding: 56px 0 30px;
    background: var(--color-brand-900);
}

.site-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
}

.site-footer__nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.site-footer__nav a {
    color: var(--color-white);
    font-family: "Onest", sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.site-footer__nav a.active,
.site-footer__nav a:hover {
    color: var(--color-lime-300);
}

.site-footer__nav a:hover {
    text-decoration: underline;
}

.site-footer .material {
    margin: 46px 0 0;
}

.site-footer .material h3,
.site-footer .material p {
    color: #fff;
}

.site-footer .material h3 {
    font-size: 24px;
}

.site-footer .material p {
    margin: 30px 0;
    font-size: 14px;
}

.site-footer strong.title {
    display: block;
}

.site-footer .material .table {
    width: 900px;
    font-size: 16px;
    color: #fff;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.site-footer .material .table .tr {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    border-top: 1px solid #fff;
}

.site-footer .material .table .tr .td {
    width: 20%;
    padding: 10px;
    border-right: 1px solid #fff;
}

.site-footer strong {
    font-weight: 600;
}

.copyright {
    margin-top: 35px;
    color: var(--color-white);
    font-size: 14px;
    text-align: center;
}

@media screen and (max-width: 1000px) {
    .site-footer .material .table {
        width: 100%;
    }
}

@media screen and (max-width: 980px) {
    .site-footer__top {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer__nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer .material .table {
        width: 100%;
    }
}

@media screen and (max-width: 700px) {
    .site-footer .material .table {
        font-size: 14px;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
        border: none;
        border-left: 1px solid #445254;
        border-bottom: 1px solid #445254;
    }

    .site-footer .material .table .tr {
        width: 20%;
        display: block;
        border: none;
        border-right: 1px solid #445254;
    }

    .site-footer .material .table .tr:first-child {
        width: 40%;
    }

    .site-footer .material .table .tr .td {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 60px;
        padding: 5px;
        border: none;
        border-top: 1px solid #445254;
        text-align: center;
    }
}

@media screen and (max-width: 400px) {
    .site-footer .material .table {
        font-size: 12px;
    }
}


/* Hero section */
.hero {
    padding: 50px 0;
    overflow-x: clip;
}

.hero__layout {
    display: flex;
    align-items: center;
}

@media (max-width: 1300px) {
    .hero__layout {
        padding-bottom: 100px;
    }
}

@media (max-width: 900px) {
    .hero__layout {
        flex-direction: column;
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .hero__layout {
        gap: 20px;
    }
}

.hero__content {
    position: relative;
    width: 650px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

@media (max-width: 900px) {
    .hero__content {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .hero__content {
        text-align: center;
        align-items: center;
    }
}

@media (max-width: 430px) {
    .hero__content {
        text-align: left;
        align-items: flex-start;
    }
}

.hero__content:before {
    content: '';
    position: absolute;
    width: 1311px;
    height: 1121px;
    right: -145px;
    bottom: -132px;
    background-image: url(../imgs/bg-hero.svg);
    background-repeat: no-repeat;
    filter: drop-shadow(24px 24px 42px rgba(207, 223, 218, 0.35));
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 900px) {
    .hero__content:before {
        right: -270px;
        bottom: -310px;
        transform: rotate(90deg);
    }
}

@media (max-width: 767px) {
    .hero__content:before {
        right: calc(50% - 90px);
        transform: rotate(90deg) translateY(-50%);
    }
}

@media (max-width: 375px) {
    .hero__content:before {
        bottom: -228px;
    }
}

.hero__image {
    margin-right: -128px;
}

@media (max-width: 1300px) {
    .hero__image {
        width: 50%;
        margin-bottom: -100px;
    }
}

@media (max-width: 1000px) {
    .hero__image {
        margin-bottom: -200px;
        transform: translateX(-35px);
    }
}

@media (max-width: 900px) {
    .hero__image {
        width: 80%;
        margin-bottom: 0;
        margin-top: -212px;
        transform: translateX(117px);
    }
}

@media (max-width: 767px) {
    .hero__image {
        transform: none;
        margin: 0;
    }
}

@media (max-width: 375px) {
    .hero__image {
        width: 120%;
        max-width: max-content;
    }
}

.text-highlight {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.text-highlight:before {
    content: '';
    position: absolute;
    inset: 13px -7px 3px;
    background-color: var(--color-lime-300);
    z-index: -1;
    clip-path: polygon(0% 6%, 50% 1%, 100% 0%, 100% 86%, 50% 90%, 0% 95%);
}

@media (max-width: 767px) {
    .text-highlight:before {
        inset: 5px -4px 0;
    }
}

.hero__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.hero__list-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero__list-icon {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    background-color: var(--color-mint-100);
    border-radius: 6px;
    transform: rotate(45deg);
}

.hero__list-icon:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../imgs/hero-checkmark-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45%;
    transform: rotate(-45deg);
    color: inherit;
}

.hero__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

@media (max-width: 900px) {
    .hero__cta {
        align-items: center;
    }
}

@media (max-width: 430px) {
    .hero__cta {
        width: 100%;
    }
}

/* Loan cards section */
.loan-cards {
    padding: 40px 0;
}

.loan-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 25px;
    padding: 46px;
    margin-left: -46px;
    margin-right: -46px;
    border-radius: 20px;
    background-color: var(--color-neutral-400);
}

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

@media (max-width: 767px) {
    .loan-cards__grid {
        grid-template-columns: 1fr;
        padding: 22px 26px 25px;
        margin: 0;
        border-radius: 30px;
    }
}

.loan-card {
    display: grid;
    grid-template-columns: 60px 1fr 15px;
    align-items: center;
    gap: 11px;
    padding-right: 22px;
    border-radius: 10px;
    background-color: var(--color-white);
}

.loan-card__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-radius: 10px;
    background-color: var(--color-brand-700);
    box-shadow: 406px 359px 152px 0 rgba(207, 223, 218, 0.00), 260px 230px 139px 0 rgba(207, 223, 218, 0.01), 146px 129px 117px 0 rgba(207, 223, 218, 0.05), 65px 57px 87px 0 rgba(207, 223, 218, 0.09), 16px 14px 48px 0 rgba(207, 223, 218, 0.10);
}

.loan-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.loan-card__arrow {
    height: 15px;
    background-image: url(../imgs/arrow-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: var(--color-text);
}

/* Steps section */
.steps {
    padding: 40px 0;
}

.steps__layout {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 60px;
}

@media (max-width: 767px) {
    .steps__layout {
        gap: 30px;
    }
}

.steps__title {
    text-align: center;
}

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

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

.step-card {
    border-radius: 20px;
    background-color: var(--color-white);
    overflow: clip;
    box-shadow: 260px 230px 139px 0 rgba(207, 223, 218, 0.01), 146px 129px 117px 0 rgba(207, 223, 218, 0.05), 65px 57px 87px 0 rgba(207, 223, 218, 0.09), 16px 14px 48px 0 rgba(207, 223, 218, 0.10);
}

.step-card__image {
    border-radius: 20px;
    overflow: clip;
    width: 100%;
}

.step-card__text {
    display: grid;
    grid-template-columns: 46px 1fr;
    justify-items: center;
    align-items: center;
    gap: 15px;
    padding: 26px 26px 26px 13px;
}

.step-card__text span {
    position: relative;
    color: var(--color-brand-700);
    z-index: 1;
}

.step-card__text span:before {
    content: '';
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    background-color: var(--color-mint-100);
    border-radius: 6px;
    z-index: -1;
}

/* Faq preview section */
.faq-preview {
    padding: 40px 0;
}

.faq-preview__layout {
    display: grid;
    grid-template-columns: 57% 38%;
    gap: 5%;
}

@media (max-width: 991px) {
    .faq-preview__layout {
        grid-template-columns: 1fr;
    }
}

.faq-preview-decor-effect {
    overflow-x: clip;
}

.faq-preview-decor {
    position: relative;
}

.faq-preview-decor:before,
.faq-preview-decor:after {
    content: '';
    position: absolute;
    display: block;
    border-radius: 51px;
    transform: rotate(-45deg);
    z-index: -1;
    pointer-events: none;
}

.faq-preview-decor:before {
    width: 400px;
    height: 400px;
    right: -277px;
    top: -117px;
    background-color: var(--color-white);
    box-shadow: 24px 24px 42px rgba(207, 223, 218, 0.35);
}

.faq-preview-decor:after {
    width: 180px;
    height: 180px;
    right: -153px;
    top: 426px;
    background-color: var(--color-neutral-400);
}

@media (max-width: 991px) {
    .faq-preview-decor:before,
    .faq-preview-decor:after {
        content: none;
    }
}

@media (max-width: 991px) {
    .faq-preview__image {
        display: none;
    }
}

.faq-preview__title {
    margin-bottom: 60px;
}

@media (max-width: 991px) {
    .faq-preview__title {
        margin-bottom: 30px;
        text-align: center;
    }
}

.faq-preview__link {
    display: block;
    margin-top: 24px;
    text-align: center;
}

/* Faq accordion */
.box-acc + .box-acc {
    margin-top: 12px;
}

.box-acc ol {
    list-style: auto;
}

.box-acc ol li {
    margin: 0 0 0 40px;
}

.ac-head {
    display: grid;
    grid-template-columns: 47px 1fr;
    gap: 15px;
    align-items: center;
    padding: 12px 19px;
    border-radius: 8px;
    background-color: var(--color-white);
    cursor: pointer;
}

.ac-head__icon {
    position: relative;
    display: inline-flex;
    width: 33px;
    height: 33px;
    background-color: var(--color-mint-100);
    border-radius: 6px;
    transform: rotate(45deg);

}

.ac-head__icon:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../imgs/arrow-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45%;
    transform: rotate(45deg);
    transition: transform .2s ease;
    color: var(--color-text);
}

.in .ac-head__icon:before {
    transform: rotate(-135deg);
}

.ac-body {
    padding: 24px;
    background: rgba(255, 255, 255, 0.20);
}

/* Trust section */
.trust-decor {
    position: relative;
    overflow-x: clip;
}

.trust-decor:before {
    content: '';
    position: absolute;
    display: block;
    border-radius: 51px;
    transform: rotate(-45deg);
    pointer-events: none;
    background-color: var(--color-neutral-400);
    width: 180px;
    height: 180px;
    left: calc(50% + 47px);
    top: 14px;
}

@media (max-width: 767px) {
    .trust-decor:before {
        left: calc(50% + 118px);
    }
}

.trust-decor-inner {
    position: relative;
}

.trust-decor-inner:before,
.trust-decor-inner:after {
    content: '';
    position: absolute;
    display: block;
    border-radius: 51px;
    transform: rotate(-45deg);
    z-index: -1;
    pointer-events: none;
}

.trust-decor-inner:before {
    width: 312px;
    height: 312px;
    left: -173px;
    top: -187px;
    background-color: var(--color-brand-900);
}

.trust-decor-inner:after {
    width: 180px;
    height: 180px;
    right: -235px;
    top: 117px;
    background-color: var(--color-white);
}

@media (max-width: 991px) {
    .trust-decor-inner:before,
    .trust-decor-inner:after {
        content: none;
    }
}

.trust {
    position: relative;
    background-image: url(../imgs/bg-trust.svg);
    background-position: top center;
    background-repeat: no-repeat;
    padding: 330px 0 80px;
}

@media (max-width: 991px) {
    .trust {
        padding-top: 280px;
    }
}

@media (max-width: 767px) {
    .trust {
        padding-top: 200px;
        padding-bottom: 40px;
    }
}

.trust__layout {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 60px;
}

.trust__title {
    color: var(--color-white);
}

@media (max-width: 767px) {
    .trust__title {
        max-width: 375px;
        text-align: center;
    }
}

.trust__grid {
    display: grid;
    grid-template-columns: 190px 250px 190px;
    gap: 40px;

}

@media (max-width: 767px) {
    .trust__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.trust-card {
    display: grid;
    justify-items: center;
    gap: 5px;
}

@media (max-width: 767px) {
    .trust-card {
        grid-template-columns: 46px 1fr;
        justify-items: left;
        align-items: center;
        gap: 10px;
    }
}

.trust-card__icon {
    position: relative;
    display: inline-flex;
    width: 33px;
    height: 33px;
    background-color: var(--color-mint-100);
    border-radius: 6px;
    transform: rotate(45deg);
}

.trust-card__icon:before {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 45%;
    transform: rotate(-45deg);
    color: var(--color-text);
}

.trust-card__icon_safe:before {
    background-image: url(../imgs/safe-icon.svg);
}

.trust-card__icon_millions:before {
    background-image: url(../imgs/millions-icon.svg);
}

.trust-card__icon_fees:before {
    background-image: url(../imgs/fees-icon.svg);
}

.trust-card__text {
    text-align: center;
    color: var(--color-white);
}

@media (max-width: 767px) {
    .trust-card__text {
        text-align: left;
    }
}

/* Loan summary section */
.loan-summary {
    padding: 60px 0;
    text-align: center;
}

@media (max-width: 767px) {
    .loan-summary {
        padding: 30px 0;
    }
}

.loan-summary h2 {
    margin-bottom: 10px;
}

/* Faq page */
.faq-page {
    padding: 110px 0 80px;
}

@media (max-width: 767px) {
    .faq-page {
        padding: 70px 0 40px;
    }
}

.faq-page__title {
    margin-bottom: 60px;
    text-align: center;
}

/* How it works page */
.page--how-it-works {
    padding-bottom: 40px;
}

@media (max-width: 767px) {
    .page--how-it-works {
        padding-bottom: 0;
    }
}

.how-it-works-hero-decor-effect {
    overflow-x: clip;
}

.how-it-works-hero-decor {
    position: relative;
}

.how-it-works-hero-decor:before {
    content: '';
    position: absolute;
    width: 1311px;
    height: 1121px;
    left: -327px;
    top: -302px;
    background-image: url(../imgs/bg-hero.svg);
    background-repeat: no-repeat;
    background-size: 60%;
    filter: drop-shadow(24px 24px 42px rgba(207, 223, 218, 0.35));
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 991px) {
    .how-it-works-hero-decor:before {
        background-size: 100%;
        left: -235px;
        top: -897px;
        transform: rotate(90deg) scaleY(3);
    }
}

@media (max-width: 767px) {
    .how-it-works-hero-decor:before {
        top: -827px;
        transform: rotate(90deg) scaleY(2);
    }
}

@media (max-width: 575px) {
    .how-it-works-hero-decor:before {
        width: 788px;
        height: 788px;
        top: -482px;
        left: -136px;
        background-image: none;
        transform: rotate(-45deg);
        border-radius: 51px;
        background-color: #fff;
    }
}

@media (max-width: 375px) {
    .how-it-works-hero-decor:before {
        top: -417px;
        left: -209px;
    }
}

.how-it-works-hero {
    padding: 110px 0 175px;
}

@media (max-width: 767px) {
    .how-it-works-hero {
        padding: 70px 0 210px;
    }
}

.how-it-works-hero__layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

@media (max-width: 991px) {
    .how-it-works-hero__layout {
        grid-template-columns: 1fr;
    }
}

.how-it-works-hero__content p + p {
    margin-top: 30px;
}

@media (max-width: 991px) {
    .how-it-works-hero__content p + p {
        margin-top: 18px;
    }
}

/* Legal pages */
.legal-hero {
    padding: 110px 0 20px;
}

@media (max-width: 767px) {
    .legal-hero {
        padding: 70px 0 20px;
    }
}

.legal-content {
    padding: 40px 0 80px;
}

@media (max-width: 767px) {
    .legal-content {
        padding: 40px 0;
    }
}

.legal-hero__title {
    text-align: center;
}

.legal-content h1 {
    display: none;
}

.legal-content a {
    color: var(--color-brand-500);
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-content a,
.legal-content h5 {
    font-size: 18px;
    text-transform: unset;
}

.legal-content strong {
    font-size: 18px;
}

.legal-content p {
    margin: 30px 0;
    font-size: 18px;
}

.legal-content ol {
    margin: 0 0 0 30px;
}

.legal-content ul {
    list-style: disc;
    margin: 0 0 0 30px;
}

.legal-content li {
    margin-top: 10px;
    font-size: 18px;
}

/* Form page */
.embedded-form {
    padding: 80px 0;
}

/* Contact page */
.contact-page a {
    text-decoration: underline;
}

.contact-page {
    padding: 110px 0 240px;
}

@media (max-width: 991px) {
    .contact-page {
        padding: 70px 0 40px;
    }
}

.contact-page__layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}

@media (max-width: 991px) {
    .contact-page__layout {
        grid-template-columns: 1fr;
    }
}

.contact-page__layout-bg {
    position: relative;
}

.contact-page__layout-bg:before {
    content: '';
    position: absolute;
    width: 1311px;
    height: 1121px;
    left: -490px;
    top: -501px;
    background-image: url(../imgs/bg-hero.svg);
    background-repeat: no-repeat;
    filter: drop-shadow(24px 24px 42px rgba(207, 223, 218, 0.35));
    z-index: -1;
    pointer-events: none;
}

@media (max-width: 991px) {
    .contact-page__layout-bg:before {
        content: none;
    }
}

.contact-page__aside {
    display: grid;
    gap: 24px;
}

@media (max-width: 767px) {
    .contact-page__aside {
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .contact-page__title {
        text-align: center;
    }
}

.contact-row {
    position: relative;
    padding-left: 42px;
    margin-top: 12px;
    font-size: 20px;
    line-height: 120%;
}

.contact-row:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.contact-row--phone:before {
    width: 30px;
    height: 30px;
    background-image: url(../imgs/phone-icon.svg);
}

.contact-row--location:before {
    width: 24px;
    height: 24px;
    background-image: url(../imgs/geo-icon.svg);
}

.contact-row--phone a {
    color: var(--color-brand-700);
}

.contact-form__grid {
    display: grid;
    gap: 16px;
}

.contact-form__field-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 575px) {
    .contact-form__field-group {
        grid-template-columns: 1fr;
    }
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid var(--color-neutral-300);
    border-radius: 8px;
    background-color: var(--color-white);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--color-brand-900);
}

.contact-form input.error,
.contact-form textarea.error {
    border-color: var(--color-red-300);
}

.contact-form input.valid,
.contact-form textarea.valid {
    border-color: var(--color-lime-300);
}

.contact-form textarea {
    height: 114px;
}

.contact-form__footer {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}

@media (max-width: 575px) {
    .contact-form__footer {
        flex-direction: column-reverse;
        align-items: center;
    }
}

.contact-form__footer span {
    margin-left: auto;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--color-neutral-300);
    order: 2;
}

.contact-form div.error {
    color: var(--color-red-400);
}

.contact-page__form-card .success-message {
    text-align: center;
}