@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root
{
        --tablet-width: 767px;
        --desktop-width: 1024px;

        --background: hsl(0, 0%, 12%);
        --primary: hsl(176, 81%, 45%);

        --primary-transparent: #16D0C5B5;

        --overlay: #06084D;
        --overlay-2: #212121;

        --text: #ffffff;
        --text-contrast: #212121;

        --padding: 3%;
        --sm-padding: 1%;
        --gap: 1rem;

        --spacer: 5vh;

        --fs-100: 1vw;
        --fs-200: 1.2vw;
        --fs-300: 1.4vw;
        --fs-400: 2.4vw;

        --fw-100: 100;
        --fw-200: 200;
        --fw-300: 300;
        --fw-400: 400;
        --fw-500: 500;
        --fw-600: 600;
        --fw-700: 700;
        --fw-800: 800;
        --fw-900: 900;

        --fs-static-title: 30px;
        --fs-static-paragraph: 18px;
        --fs-static-details: 14px;
}

.p-l-r {
        padding-left: 14vw;
        padding-right: 14vw;
}

@media (max-width: 650px)
{
        .p-l-r {
                padding-left: 2.3vw;
                padding-right: 2.3vw;
        }
}

html {
        scroll-behavior: smooth;
}

body
{
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

.cursor-pointer 
{
        cursor: pointer;
}

.features-figure
{
        width: 35%;
        margin-inline: auto;
}

@media (min-width: 767px)
{
        .features-figure
        {
                /* width: 20%; */
                margin-inline: auto;
        }
}

@media (min-width: 1024px)
{
        .features-figure
        {
                width: 20%;
                margin-inline: auto;
        }
}

.features-wrapper
{
        display: flex;
        gap: var(--padding);
        flex-direction: column;
}

.features-row
{
        display: flex;
        text-align: center;
        flex-direction: column;
        padding: var(--padding);
        gap: var(--padding);
}



.features-container-title
{
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-top: var(--padding);
        padding-bottom: var(--padding);
        text-align: center
}

.hero-submit
{
        display: flex;
        flex-direction: column;
        gap: var(--gap);
}

.hero-submit>input:nth-child(1)
{
        width: 100%;
}

.hero-submit>input:nth-child(2)
{
        width: 100%;
}

.w-full
{
        width: 100%
}

.m-inline
{
        margin-inline: auto;
}

.desktop-text-end .title
{
        text-align: center;
}

.desktop-text-end .paragraph
{
        text-align: center;
}

.desktop-text-end .details
{
        text-align: center;
}

.hero-button
{
        border: 2px solid var(--primary);
        color: var(--primary);
        background: 0;
        border-radius: 100vw;
        width: fit-content;
        padding: 12px 24px;
        text-decoration: none;
        font-weight: 500;
        line-height: 1;
}


.hero-button[data-variant="fill"]
{
        background: var(--primary);
        color: var(--text);
}

.hero-button[data-variant="fill"]:hover
{
        background: transparent;
        color: var(--primary);
}

.server-feedback-landing-page {
        white-space: pre-wrap;
        margin-bottom: 1rem;
        text-align: center;
        font-size: var(--fs-static-paragraph);
}

@media (min-width: 1024px)
{
        .desktop-text-end .title
        {
                text-align: end;

        }

        .desktop-text-end .paragraph
        {
                text-align: end;

        }


        .hero-button
        {
                font-size: 1vw;
        }



        .hero-input
        {
                font-weight: 500;
                font-size: 1vw;
        }


        .desktop-text-end .details
        {
                text-align: end;

        }

        .server-feedback-landing-page {
                text-align: right;
                font-size: 1.4vw;
        }
}


@media (min-width: 767px)
{
        .features-row
        {
                flex-direction: row;
        }

        .hero-submit
        {
                display: flex;
                flex-direction: row;
                gap: var(--gap);
        }

        .hero-submit>input:nth-child(1)
        {
                width: 60%;
        }

        .hero-submit>input:nth-child(2)
        {
                width: 40%;
        }

}