@import url("https://fonts.cdnfonts.com/css/nunito");

:root {
    --neutral-5: #f5f5f5;
    --neutral-10: #e6e6e6;
    --neutral-20: #cccccc;
    --neutral-30: #b3b3b3;
    --neutral-40: #999999;
    --neutral-50: #808080;
    --neutral-60: #666666;
    --neutral-70: #4d4d4d;
    --neutral-80: #333333;
    --neutral-90: #191919;
    --neutral-default: #000000;
    --primary-dark-10: #020707;
    --primary-dark-20: #050f0e;
    --primary-dark-30: #071614;
    --primary-dark-40: #0a1e1b;
    --primary-dark-50: #0c2622;
    --primary-dark-60: #0e2d29;
    --primary-dark-70: #113530;
    --primary-dark-80: #133c36;
    --primary-dark-90: #16443d;
    --primary-dark-100: #184b44;
    --primary-light-10: #e8edec;
    --primary-light-20: #d1dbda;
    --primary-light-30: #bac9c7;
    --primary-light-40: #a3b7b4;
    --primary-light-50: #8ca5a2;
    --primary-light-60: #74938f;
    --primary-light-70: #5d817c;
    --primary-light-80: #466f69;
    --primary-light-90: #2f5d57;
    --primary-light-100: #184b44;
    --secondary-dark-10: #000f11;
    --secondary-dark-20: #001e21;
    --secondary-dark-30: #002d32;
    --secondary-dark-40: #003c43;
    --secondary-dark-50: #004c54;
    --secondary-dark-60: #005b64;
    --secondary-dark-70: #006a75;
    --secondary-dark-80: #007986;
    --secondary-dark-90: #008896;
    --secondary-dark-100: #0097a7;
    --secondary-light-10: #e6f5f6;
    --secondary-light-20: #cceaed;
    --secondary-light-30: #b3e0e5;
    --secondary-light-40: #99d5dc;
    --secondary-light-50: #80cbd3;
    --secondary-light-60: #66c1ca;
    --secondary-light-70: #4db6c1;
    --secondary-light-80: #33acb9;
    --secondary-light-90: #1aa1b0;
    --secondary-light-100: #0097a7;
    --tertiary-10: #fff3f2;
    --tertiary-20: #ffe8e6;
    --tertiary-30: #ffdcd9;
    --tertiary-40: #ffd0cc;
    --tertiary-50: #ffc5c0;
    --tertiary-60: #ffb9b3;
    --tertiary-70: #ffada6;
    --tertiary-80: #ffa199;
    --tertiary-90: #ff968d;
    --tertiary-100: #ff8a80;
    --blue: #00b0ff;
    --pink: #f06292;
    --purple: #ba68c8;
    --green: #94bb96;
    --yellow: #ffec7b;
    --green-blue: #55efc4;
    --error: #ff1400;
    --alert: #fcb244
}

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

html {
    font-size: 62.5%
}

body {
    box-sizing: border-box;
    font-family: Nunito, sans-serif
}

body a {
    text-decoration: none;
    all: unset
}

html {
    scroll-behavior: smooth
}

.main-header {
    height: 5.4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem
}

@media only screen and (min-width: 48em) {
    .main-header {
        height: 8rem;
        padding: 2rem 4rem
    }
}

@media only screen and (min-width: 75em) {
    .main-header {
        padding: 2rem 4rem;
        width: 118rem;
        margin: 0 auto
    }
}

@media only screen and (min-width: 118em) {
    .main-header {
        padding: 2rem 5.6rem;
        width: 126rem
    }
}

.main-header__logo {
    height: 3.4rem
}

@media only screen and (min-width: 48em) {
    .main-header__logo {
        height: 4.2rem
    }
}

@media only screen and (min-width: 118em) {
    .main-header__logo {
        height: 4.8rem
    }
}

.main-header .dropdown {
    display: block
}

@media only screen and (min-width: 75em) {
    .main-header .dropdown {
        display: none
    }
}

.main-header .header-button {
    padding: 1.1rem 2.25rem !important;
    width: unset
}

.main-header .buttons-container {
    display: none
}

@media only screen and (min-width: 75em) {
    .main-header .buttons-container {
        display: flex;
        align-items: center;
        gap: 8rem
    }
}

@media only screen and (min-width: 118em) {
    .main-header .buttons-container {
        gap: 15.4rem
    }
}

.main-header .buttons-container .demo-btn {
    padding: 0.85rem 1.6rem;
    background: var(--primary-dark-100);
    border-radius: 0.5rem;
    color: white;
    font-size: 2rem;
    line-height: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.038rem;
    cursor: pointer
}
.signup-btn {
    /*padding: 0.85rem 1.6rem;*/
    background: var(--primary-dark-100);
    border-radius: 0.5rem;
    color: white;
    font-size: 2rem;
    line-height: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.038rem;
    cursor: pointer;
    width: 274px;
    height: 54px;
}

.main-header .buttons-container .buttons {
    display: flex;
    gap: 3.2rem
}

.btn {
    cursor: pointer;
    width: 27.5rem;
    border: 1px solid white;
    font-family: Nunito;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.5rem;
    letter-spacing: 0.01em;
    text-align: center;
    border-radius: 0.5rem;
    transition: all 0.3s;
    font-size: 2rem;
    line-height: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.038rem;
    padding: 0.85rem 1.2rem
}

@media only screen and (min-width: 48em) {
    .btn {
        width: unset
    }
}

.btn-primary {
    background: var(--primary-dark-100);
    color: white
}

.btn-primary:hover {
    border: 1px solid var(--primary-dark-100);
    background: white;
    color: var(--primary-dark-100)
}

.btn-light {
    background: white;
    color: var(--primary-dark-100);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s;
    gap: 1rem
}

.btn-light:hover {
    border: 1px solid var(--primary-dark-100);
    background: white;
    color: var(--primary-dark-100)
}

.text-btn {
    text-decoration: none;
    font-size: 1.8rem;
    line-height: 3rem;
    font-weight: 700;
    background: transparent;
    border: none;
    cursor: pointer
}

.text-btn:hover {
    border: none
}

.text-btn.btn-primary {
    color: var(--primary-dark-100) !important
}

.text-btn.btn-tertiary {
    color: var(--tertiary-100) !important
}

.dropbtn {
    background-color: transparent;
    border: none;
    cursor: pointer
}

.dropdown {
    position: relative;
    display: inline-block
}

.dropdown .icon {
    height: 2.4rem;
    width: 2.4rem
}

.dropdown-content {
    display: none;
    font-size: 1.8rem;
    line-height: 3rem;
    font-weight: 700;
    color: var(--primary-dark-100);
    position: absolute;
    right: 0;
    top: 2.8rem;
    border-radius: 1rem;
    padding: 0 1.6rem;
    background-color: #f1f1f1;
    min-width: 17rem;
    overflow: auto;
    box-shadow: 0px -0.1rem 1.6rem 0px #00000033;
    z-index: 10
}

.dropdown-content a {
    color: var(--primary-dark-100);
    padding: 1.6rem 1.2rem;
    text-decoration: none;
    display: block
}

.dropdown-content a:not(:last-child) {
    border-bottom: 1px solid var(--primary-light-30)
}

.dropdown a:hover {
    background-color: #ddd
}

.show {
    display: block
}

@media only screen and (min-width: 75em) {
    .home-page .header-section {
        padding: 0 4rem
    }
}

@media only screen and (min-width: 87.5em) {
    .home-page .header-section {
        padding: 0 6.3rem
    }
}

.home-page .header-section__container {
    padding: 2rem;
    background: #fff3f2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2.3rem
}

@media only screen and (min-width: 48em) {
    .home-page .header-section__container {
        padding: 3rem 4rem;
        gap: 6rem;
        flex-direction: row;
        align-items: center
    }
}

@media only screen and (min-width: 75em) {
    .home-page .header-section__container {
        gap: 18rem;
        padding: 6rem 10rem;
        margin: 0 auto
    }
}

@media only screen and (min-width: 118em) {
    .home-page .header-section__container {
        padding: 6rem 21rem;
        gap: 22rem
    }
}

.home-page .header-section__container .mobile-demo-btn {
    display: block
}

@media only screen and (min-width: 48em) {
    .home-page .header-section__container .mobile-demo-btn {
        display: none
    }
}

.home-page .header-section__img {
    width: 28.6rem
}

@media only screen and (min-width: 48em) {
    .home-page .header-section__img {
        margin: 0 auto
    }
}

@media only screen and (min-width: 75em) {
    .home-page .header-section__img {
        width: 40rem
    }
}

@media only screen and (min-width: 118em) {
    .home-page .header-section__img {
        width: 46rem
    }
}

.home-page .header-section__content {
    display: flex;
    flex-direction: column;
    gap: 2.3rem
}

@media only screen and (min-width: 75em) {
    .home-page .header-section__content {
        width: 46rem;
        gap: 5rem
    }
}

@media only screen and (min-width: 75em) {
    .home-page .header-section__content {
        width: 57rem;
        gap: 5rem
    }
}

.home-page .header-section__content .title {
    font-size: 3rem;
    line-height: 4rem;
    font-weight: 700;
    color: var(--primary-dark-100)
}

@media only screen and (min-width: 75em) {
    .home-page .header-section__content .title {
        font-size: 4rem;
        line-height: 5rem;
        font-weight: 700
    }
}

@media only screen and (min-width: 118em) {
    .home-page .header-section__content .title {
        font-size: 5rem;
        line-height: 6.5rem;
        font-weight: 700
    }
}

.home-page .header-section__content .desktop-demo-btn {
    display: none
}

@media only screen and (min-width: 48em) {
    .home-page .header-section__content .desktop-demo-btn {
        display: block
    }
}

.home-page .our-aim-section {
    padding: 2rem
}
.home-page .join-section {
    padding: 3rem 4rem 20rem;
    display: flex;
    flex-direction: row;
}

@media only screen and (max-width: 48em) {
    .home-page .our-aim-section {
        padding: 3rem 4rem
    }
    .home-page .join-section {
        padding: 3rem 4rem;
        display: flex;
        flex-direction: row;
    }
}

.home-page .section__container {
    padding: 3rem 2rem 17rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 4rem
}

@media only screen and (min-width: 48em) {
    .home-page .section__container {
        flex-direction: row-reverse;
        gap: 5.2rem;
        padding: 8rem 0
    }
}

@media only screen and (min-width: 75em) {
    .home-page .section__container {
        align-items: center;
        gap: 14rem;
        padding: 6rem 0 6rem;
        width: 110rem;
        margin: 0 auto
    }
}

@media only screen and (min-width: 118em) {
    .home-page .section__container {
        margin: 0 auto;
        width: 126rem;
        gap: 17.8rem;
        padding: 20rem 0rem 30rem
    }
}

.home-page .section__img {
    width: 28.5rem;
}

@media only screen and (max-width: 48em) {
    .home-page .section__img, .home-page .section__content a {
        margin: 0 auto;
    }
    .join-section .section__img {
        order: 3;
    }
    .join-section .section__content {
        order: 1;
    }
    .join-section .signup-btn {
        order: 2;
    }
    .home-page .section__container {
        padding: 3rem 2rem;
    }
}

@media only screen and (min-width: 75em) {
    .home-page .section__img {
        width: 42.7rem
    }
}

@media only screen and (min-width: 118em) {
    .home-page .section__img {
        width: 50.7rem
    }
}


@media only screen and (min-width: 75em) {
    .home-page .section__content {
        gap: 5rem
    }
}
.home-page .section__content {
    display: flex;
    flex-direction: column;
    gap: 2.3rem;
}

.home-page .section__content .title {
    font-size: 3rem;
    line-height: 4rem;
    font-weight: 700;
    color: var(--primary-dark-100)
}
.description {
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700;
}
.sub-title {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 700;
}
.green {
    color: var(--green);
}
.primary-dark-100 {
    color: var(--primary-dark-100);
}

@media only screen and (min-width: 75em) {
    .home-page .section__content .title {
        font-size: 4rem;
        line-height: 5rem;
        font-weight: 700
    }
}

@media only screen and (min-width: 118em) {
    .home-page .section__content .title {
        font-size: 5rem;
        line-height: 6.5rem;
        font-weight: 700
    }
    .home-page .section__content .sub-title{
        font-size: 3rem;
        line-height: 4rem;
        font-weight: 700;
    }
}

.home-page .footer-section {
    background: var(--primary-dark-100);
    padding: 0 0 5rem
}

@media only screen and (min-width: 48em) {
    .home-page .footer-section {
        padding: 0 0 7rem
    }
}

@media only screen and (min-width: 75em) {
    .home-page .footer-section {
        padding: 20rem 8rem 7rem
    }
}

@media only screen and (min-width: 118em) {
    .home-page .footer-section {
        padding: 20rem 8rem 17rem
    }
}

.home-page .footer-section .follow-box {
    z-index: 10;
    position: relative;
    background: var(--tertiary-100);
    color: white;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 4rem 2rem;
    margin-bottom: 4rem;
    overflow: hidden
}

@media only screen and (min-width: 48em) {
    .home-page .footer-section .follow-box {
        padding: 5rem 6rem;
        margin-bottom: 6rem
    }
}

@media only screen and (min-width: 75em) {
    .home-page .footer-section .follow-box {
        width: 110rem;
        margin: -36rem auto 6rem;
        padding: 6rem 18rem 8rem;
        gap: 3rem
    }
}

@media only screen and (min-width: 118em) {
    .home-page .footer-section .follow-box {
        width: 129rem;
        margin: -40rem auto 10rem;
        padding: 7.5rem 28rem 11rem;
        gap: 3rem
    }
}

.home-page .footer-section .follow-box .dots {
    position: absolute;
    display: none
}

@media only screen and (min-width: 48em) {
    .home-page .footer-section .follow-box .dots {
        display: block;
        left: 2rem;
        top: 1rem;
        width: 13rem
    }
}

.home-page .footer-section .follow-box .circle {
    display: none;
    position: absolute;
    border-radius: 50%;
    background: #ffa199;
    z-index: -1
}

@media only screen and (min-width: 48em) {
    .home-page .footer-section .follow-box .circle {
        display: block;
        width: 30rem;
        height: 30rem;
        right: -10rem;
        top: -10rem
    }
}

@media only screen and (min-width: 75em) {
    .home-page .footer-section .follow-box .circle {
        width: 45rem;
        height: 45rem;
        right: -17rem;
        top: -17rem
    }
}

@media only screen and (min-width: 118em) {
    .home-page .footer-section .follow-box .circle {
        display: block;
        width: 50rem;
        height: 50rem;
        right: -25rem;
        top: -25rem
    }
}

.home-page .footer-section .follow-box .title-1 {
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 800
}

@media only screen and (min-width: 48em) {
    .home-page .footer-section .follow-box .title-1 {
        width: 46.5rem
    }
}

@media only screen and (min-width: 75em) {
    .home-page .footer-section .follow-box .title-1 {
        font-size: 3rem;
        line-height: 4rem;
        font-weight: 800
    }
}

.home-page .footer-section .follow-box .title-2 {
    font-weight: 600;
    font-size: 2rem;
    line-height: 130%
}

@media only screen and (min-width: 75em) {
    .home-page .footer-section .follow-box .title-2 {
        font-family: Nunito;
        font-size: 2.4rem
    }
}

.home-page .footer-section .follow-box .btn-light {
    width: 27.5rem
}

.home-page .footer-section .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    flex-direction: column
}

.home-page .footer-section .logo-container .logo {
    margin: 0 auto;
    width: 16rem
}

@media only screen and (min-width: 48em) {
    .home-page .footer-section .logo-container .logo {
        width: 20rem
    }
}

@media only screen and (min-width: 75em) {
    .home-page .footer-section .logo-container .logo {
        width: 24rem
    }
}

.home-page .footer-section .logo-container .logo img {
    width: 100%
}

.home-page .footer-section .logo-container .copy-right {
    color: white;
    font-size: 1.2rem;
    line-height: 3rem;
    font-weight: 600
}

@media only screen and (min-width: 75em) {
    .home-page .footer-section .logo-container .copy-right {
        font-size: 2.4rem;
        line-height: 3rem;
        font-weight: 600
    }
}

.privacy-page__container {
    padding: 4rem 2rem
}

@media only screen and (min-width: 48em) {
    .privacy-page__container {
        padding: 4rem 4rem
    }
}

@media only screen and (min-width: 75em) {
    .privacy-page__container {
        padding: 4rem 8rem
    }
}

@media only screen and (min-width: 118em) {
    .privacy-page__container {
        padding: 4rem 12rem
    }
}

.privacy-page__container .title {
    font-weight: 800;
    font-size: 2rem;
    line-height: 160%;
    letter-spacing: 0.13rem
}

@media only screen and (min-width: 75em) {
    .privacy-page__container .title {
        font-weight: 800;
        font-size: 3rem;
        line-height: 150%;
        letter-spacing: 0.13rem
    }
}

.privacy-page__container .content {
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 160%;
    letter-spacing: 0.13rem
}

@media only screen and (min-width: 75em) {
    .privacy-page__container .content {
        font-weight: 400;
        font-size: 2rem;
        line-height: 160%;
        letter-spacing: 0.13rem
    }
}

.privacy-page__container .content b {
    display: inline-block;
    margin: 1.2rem 0
}

.privacy-page__container .content ul {
    list-style-type: disc;
    padding-left: 2rem
}

@media only screen and (min-width: 75em) {
    .privacy-page__container .content ul {
        padding-left: 4rem
    }
}

.demo-page {
    display: flex;
    flex-direction: column;
    gap: 5.4rem;
    padding: 1.7rem 3.7rem;
    color: var(--primary-dark-100)
}

@media only screen and (min-width: 48em) {
    .demo-page {
        padding: 4rem
    }
}

@media only screen and (min-width: 75em) {
    .demo-page {
        padding: 8rem
    }
}

@media only screen and (min-width: 118em) {
    .demo-page {
        width: 126rem;
        margin: 0 auto
    }
}

.demo-page__heading {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.demo-page__heading .title {
    text-align: center;
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 800
}

@media only screen and (min-width: 48em) {
    .demo-page__heading .title {
        font-size: 3rem;
        line-height: 4rem;
        font-weight: 800;
        text-align: left
    }
}

@media only screen and (min-width: 75em) {
    .demo-page__heading .title {
        font-size: 4rem;
        line-height: 5rem;
        font-weight: 700
    }
}

.demo-page__heading .description {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 600
}

@media only screen and (min-width: 48em) {
    .demo-page__heading .description {
        font-size: 2.4rem;
        line-height: 3rem;
        font-weight: 600
    }
}

.demo-page__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto
}

@media only screen and (min-width: 48em) {
    .demo-page__content {
        flex-direction: row
    }
}

.demo-page__content .card {
    width: 100%;
    box-shadow: 0 -0.1rem 1.6rem 0 #00000033;
    padding: 2.2rem 0 0.8rem;
    border-radius: 0.8rem;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

@media only screen and (min-width: 48em) {
    .demo-page__content .card {
        width: 50%
    }
}

@media only screen and (min-width: 75em) {
    .demo-page__content .card {
        padding: 2.4rem 0 1.6rem
    }
}

@media only screen and (min-width: 118em) {
    .demo-page__content .card {
        padding: 3rem 0 2rem
    }
}

.demo-page__content .card img {
    width: 100%
}

.demo-page__content .card .content {
    font-size: 1.2rem;
    line-height: 3rem;
    font-weight: 600;
    padding: 0 0.8rem;
    color: var(--primary-dark-100);
    display: flex;
    flex-direction: column;
    gap: 2rem
}

@media only screen and (min-width: 75em) {
    .demo-page__content .card .content {
        padding: 0 2.4rem;
        font-size: 2rem;
        line-height: 3rem;
        font-weight: 600
    }
}

@media only screen and (min-width: 118em) {
    .demo-page__content .card .content {
        padding: 0 3.6rem;
        gap: 9.3rem;
        font-size: 2.4rem;
        line-height: 3rem;
        font-weight: 600
    }
}

.demo-page__content .card .content a {
    color: white;
    padding: 1.2rem;
    flex: 1;
    border-radius: 0.5rem;
    font-size: 1.8rem;
    line-height: 3rem;
    font-weight: 700;
    background: var(--primary-dark-100);
    text-align: center;
    cursor: pointer
}

.demo-page__content .card .content a.tertiary {
    background: var(--tertiary-100)
}

.demo-response-page {
    display: flex;
    flex-direction: column;
    gap: 7.7rem;
    padding: 1.7rem 3.7rem;
    color: var(--primary-dark-100)
}

@media only screen and (min-width: 48em) {
    .demo-response-page {
        padding: 4rem;
        gap: 1.8rem
    }
}

@media only screen and (min-width: 75em) {
    .demo-response-page {
        padding: 8rem;
        gap: 3.6rem
    }
}

@media only screen and (min-width: 118em) {
    .demo-response-page {
        width: 126rem;
        gap: 7rem;
        margin: 0 auto
    }
}

.demo-response-page__heading {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.demo-response-page__heading .title {
    text-align: center;
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 800
}

@media only screen and (min-width: 48em) {
    .demo-response-page__heading .title {
        font-size: 3rem;
        line-height: 4rem;
        font-weight: 800;
        text-align: left
    }
}

@media only screen and (min-width: 75em) {
    .demo-response-page__heading .title {
        font-size: 4rem;
        line-height: 5rem;
        font-weight: 700
    }
}

.demo-response-page__heading .description {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 600
}

@media only screen and (min-width: 48em) {
    .demo-response-page__heading .description {
        font-size: 2.4rem;
        line-height: 3rem;
        font-weight: 600
    }
}

.demo-response-page__content {
    display: flex;
    flex-direction: column;
    gap: 12rem;
    margin: 0 auto
}

@media only screen and (min-width: 48em) {
    .demo-response-page__content {
        gap: 0.8rem
    }
}

@media only screen and (min-width: 75em) {
    .demo-response-page__content {
        gap: 2.4rem
    }
}

@media only screen and (min-width: 118em) {
    .demo-response-page__content {
        gap: 4rem
    }
}

.demo-response-page__content img {
    width: 32.6rem
}

@media only screen and (min-width: 48em) {
    .demo-response-page__content img {
        width: 25.2rem
    }
}

@media only screen and (min-width: 75em) {
    .demo-response-page__content img {
        width: 39rem
    }
}

@media only screen and (min-width: 118em) {
    .demo-response-page__content img {
        width: 57rem
    }
}

.demo-form-page {
    display: flex;
    flex-direction: column;
    gap: 7.7rem;
    padding: 1.7rem 3.7rem;
    color: var(--primary-dark-100)
}

@media only screen and (min-width: 48em) {
    .demo-form-page {
        padding: 4rem;
        gap: 1.8rem
    }
}

@media only screen and (min-width: 75em) {
    .demo-form-page {
        padding: 8rem;
        gap: 3.6rem
    }
}

@media only screen and (min-width: 118em) {
    .demo-form-page {
        width: 126rem;
        gap: 7rem;
        margin: 0 auto
    }
}

.demo-form-page__heading {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.demo-form-page__heading .title {
    text-align: center;
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 800
}

@media only screen and (min-width: 48em) {
    .demo-form-page__heading .title {
        font-size: 3rem;
        line-height: 4rem;
        font-weight: 800;
        text-align: left
    }
}

@media only screen and (min-width: 75em) {
    .demo-form-page__heading .title {
        font-size: 4rem;
        line-height: 5rem;
        font-weight: 700
    }
}

.demo-form-page__heading .description {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 600
}

@media only screen and (min-width: 48em) {
    .demo-form-page__heading .description {
        font-size: 2.4rem;
        line-height: 3rem;
        font-weight: 600
    }
}

.demo-form-page__content {
    padding: 3rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-radius: 0.8rem;
    box-shadow: 0 -0.1rem 1.6rem 0 #00000033
}

@media only screen and (min-width: 48em) {
    .demo-form-page__content {
        padding: 4rem 12rem
    }
}

@media only screen and (min-width: 75em) {
    .demo-form-page__content {
        width: 77rem;
        margin: 0 auto
    }
}

.demo-form-page__content .title {
    text-align: center;
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 800
}

@media only screen and (min-width: 48em) {
    .demo-form-page__content .title {
        font-size: 3rem;
        line-height: 4rem;
        font-weight: 800
    }
}

.demo-form-page__content .information {
    display: flex;
    flex-direction: column;
    gap: 3.2rem
}

.demo-form-page__content .invitation {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    font-size: 1.8rem;
    line-height: 3rem;
    font-weight: 700
}

.demo-form-page__content .invitation .inputs {
    display: flex;
    gap: 0.9rem;
    align-items: center
}

.demo-form-page__content .invitation .inputs input {
    flex: 1;
    width: 50%
}

.demo-form-page__content .buttons {
    display: flex;
    gap: 1.2rem;
    justify-content: space-between;
    align-items: center
}

.demo-form-page__content .buttons .back {
    cursor: pointer;
    display: flex;
    gap: 0.1rem;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    line-height: 3rem;
    font-weight: 700
}

.demo-form-page__content .buttons .back img {
    height: 4rem;
    width: 4rem
}

.demo-form-page__content h4 {
    font-size: 2.4rem;
    line-height: 3rem;
    font-weight: 800
}

.demo-form-page__content input {
    padding: 1.2rem 1.7rem;
    font-size: 1.5rem;
    line-height: 2.1rem;
    font-weight: 400;
    letter-spacing: -0.01rem;
    border-radius: 0.4rem;
    border: 1px solid var(--neutral-30)
}

.demo-form-page__content input::placeholder {
    color: var(--neutral-30)
}

.demo-form-page__content input:focus {
    outline: none;
    border: 1px solid var(--primary-dark-80)
}