@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100..900&display=swap');

:root {
    --neutral-900: #25293a;
    --neutral-800: #333950;
    --neutral-500: #747b95;
    --neutral-50: #fafafa;
    --neutral-0: #ffffff;
    --blue-500: #5175ff;
    --blue-300: #829cff;
    --blue-100: #e4eaff;
    --red-400: #F05b5b;
    --ff-primary: "Kumbh Sans", sans-serif;
    --br-12: 1.2rem;
    --br-full: 100vmax;
}

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

html {
    font-size: 62.5%;
    font-family: var(--ff-primary);
}

body {
    font-size: 1.6rem;
    background-color: var(--neutral-50);
    position: relative;
}

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

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.content {
    width: clamp(21rem, 90vw + 0rem, 110rem);
    /* width: 90vw;
    max-width: 111rem; */
    margin-inline: auto;
}

/* HEADER */
.page_header,
.inner_page_header {
    padding-block-start: 4rem;
}

.header_content {
    display: flex;
    justify-content: center;
}

.home_link img {
    max-width: 15.5rem;
}

/* CTA */
.cta_section {
    padding-block-start: 8rem;
}

.cta_grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
    row-gap: 4.8rem;
}

.cta_text_content {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    text-align: center;
}

.page_title {
    /* font-size: clamp(3.2rem, 3.2rem + 8px, 5.6rem); */
    font-size: clamp(3.2rem, 3rem + 1.1307vw, 5.6rem);
    line-height: 120%;
    color: var(--neutral-800);
}

.lead_text {
    font-size: 1.6rem;
    line-height: 160%;
    color: var(--neutral-500);
}

.cta_link {
    background-color: var(--blue-500);
    border-radius: var(--br-full);
    padding: 1.2rem 4rem;
    color: var(--neutral-0);
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 160%;
    box-shadow: 0 2.5rem 2.5rem -1rem rgba(81, 117, 255, 0.25);
}

.cta_link:hover {
    background-color: var(--blue-300);
}

.cta_link:focus {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

.cta_img_wrapper img {
    width: 100%;
    max-width: 20rem;
}

.price_cards_section {
    padding-block-start: 8rem;
    position: relative;
}

.price_cards_grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2.4rem;
}

.price_card {
    padding-inline: 2.4rem;
    padding-block: 4rem;
    border-radius: var(--br-12);
    text-align: center;
    box-shadow: 0 5rem 5rem -2.5rem rgba(75, 92, 154, .25);
}

.card_white {
    background-color: var(--neutral-0);
}

.level {
    font-size: 2rem;
    line-height: 140%;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 1.6rem;
}

.price {
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 120%;
    text-transform: capitalize;
    margin-bottom: .8rem;
}

.card_lead {
    font-size: 1.6rem;
    line-height: 160%;
}

.card_white .level,
.card_white .price,
.card_white .card_lead {
    color: var(--neutral-900);
}

.features {
    margin-block: 4.8rem;
}

.features li {
    font-size: 1.6rem;
    line-height: 160%;
}

.features li:not(:last-child) {
    margin-bottom: 1.6rem;
}

.card_white .features li {
    color: var(--neutral-500);
}

.card_link {
    padding-inline: 4rem;
    padding-block: 1.2rem;
    border-radius: var(--br-full);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 160%;
}

.card_white .card_link {
    background-color: var(--blue-100);
    color: var(--blue-500);
}

.card_white .card_link:hover {
    background-color: var(--blue-500);
    color: var(--neutral-0);
}

.card_white .card_link:focus {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

.card_pro {
    background-color: var(--blue-500);
    background-image: url("./assets/home/bg-pattern-pricing.svg");
    background-repeat: no-repeat;
    background-position: center -40rem;
    color: var(--neutral-0);
}

.card_pro .card_link {
    background-color: var(--neutral-0);
    color: var(--blue-500);
}

.card_pro .card_link:hover {
    background-color: var(--neutral-50);
}

.card_pro .card_link:focus{
    outline: 2px solid var(--neutral-0);
    outline-offset: 2px;
}

.page_footer {
    padding-block-start: 8rem;
    padding-block-end: 4.8rem;
}

.footer_grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 4.8rem;
    justify-content: center;
}

.deadline {
    text-transform: uppercase;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 5px;
    color: var(--neutral-0);
    margin-bottom: 2rem;
}

.deadline_date {
    color: var(--blue-500);
}

.countdown_timer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
    justify-content: center; 
    width: 100%;
    /* width: clamp(335px, 335px + 0rem, 450px); */
    width: clamp(320px, calc(272.727px + 14.773vw), 450px);
    margin-inline: auto;
}

.countdown {
    padding: 1.2rem;
    width: 7.4rem;
    height: 11rem;
    background-color: var(--neutral-800);
    border-radius: var(--br-12);
    font-weight: 700;
    text-align: center;
}

.time_value {
    color: var(--neutral-0);
    font-size: 4rem;
    line-height: 120%;
    margin-bottom: .5rem;
}

.text_value {
    color: var(--neutral-500);
    font-size: 1.6rem;
    line-height: 160%;
}

.justify_self {
    justify-self: center;
}

.footer_link {
    box-shadow: none;
}

.bg_element {
    position: absolute;
    background-color: var(--neutral-900);
    width: 100vw;
    max-width: 144rem;
    margin-inline: auto;
    height: 120rem;
    overflow: hidden;
    z-index: -1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* *************** SIGNUP PAGE ***************** */
.signup_section {
    padding-block: 8rem 6.4rem;
    position: relative;
}

.signup_cta_grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8rem;
}

.signup_cta_text_content {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    align-items: center;
}

.signup_page_title {
    font-size: clamp(3.2rem, 3rem + 1.1307vw, 5.6rem);
    width: 14ch;
    text-align: center;
}

.lead_text_signup {
    font-size: 1.8rem;
    line-height: 150%;
    color: var(--neutral-500);
    text-align: center;
}

/* COUNTDOWN */
.signup_countdown_container {
    margin-block-start: 4rem;
}

.deadline_signup {
    color: var(--neutral-900);
}

.countdown_timer_signup {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
    width: 100%;
}

.countdown_signup {
    padding: 1.2rem;
    width: 7.4rem;
    height: 11rem;
    background-color: var(--blue-100);
    border-radius: var(--br-12);
    font-weight: 700;
    text-align: center;
}

.time_value_signup {
    color: var(--blue-500);
    font-size: 4rem;
    line-height: 120%;
    margin-bottom: .5rem;
}

/* FORM */
.signup_form {
    width: 100%;
    max-width: 45rem;
    background-color: var(--neutral-0);
    border-radius: var(--br-12);
    padding: 4rem 2rem;
    box-shadow: 0 5rem 5rem -2.5rem rgba(75, 92, 154, .15);
    margin-inline: auto;
}

.form_row {
    display: flex;
    flex-direction: column;
    margin-bottom: 2.4rem;
}

.form_row:last-of-type {
    margin-bottom: 1.2rem;
}

label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form_input {
    width: 100%;
    padding: 1.5rem 1.25rem;
    border: none;
    border-bottom: 1px solid var(--neutral-500);
    font-family: inherit;
    font-size: 1.6rem;
    color: var(--dark);
    /* border: 1px solid hotpink; */
}

::placeholder {
    font-family: inherit;
    font-size: 1.6rem;
    color: var(--neutral-500);
}

.form_input:hover {
    cursor: pointer;
    border-color: var(--blue-500);
}

.form_input:focus {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

select {
    border: none;
    background-color: transparent;
    border-bottom: 1px solid var(--neutral-500);
    padding: 1.5rem 1.25rem;
    font-family: inherit;
    color: var(--dark);
    font-size: 1.6rem;
    font-weight: 700;
    width: 100%;
}

option {
    font-size: 1.6rem;
}

select:hover {
    border-color: var(--blue-500);
}

select:focus {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

.basic {
    font-weight: 700;
    color: var(--neutral-800);
}

.submit_btn {
    display: block;
    width: 100%;
    background-color: var(--blue-500);
    color: var(--neutral-0);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 160%;
    padding: 1.5rem 4rem;
    border-radius: var(--br-full);
    border: none;
    margin-top: 2.4rem;
}

.submit_btn:hover {
    background-color: var(--blue-300);
}

.submit_btn:focus {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
}

.error {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--red-400);
    font-size: 1.4rem;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;

    img {
        width: 2rem;
        height: 2rem;
    }
}

.error.show {
    opacity: 1;
    visibility: visible;
}

.form_input.err {
    outline: 2px solid var(--red-400);
    outline-offset: 2px;
}

.bg_element_signup {
    position: absolute;
    background-color: var(--neutral-900);
    width: 100vw;
    max-width: 76rem;
    margin-inline: auto;
    height: 31rem;
    overflow: hidden;
    z-index: -1;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width: 50rem) {
    .page_header,
    .inner_page_header {
        padding-block-start: 8rem;
}

    .header_content {
        display: flex;
        justify-content: start;
    }

    .cta_section {
        padding-block-start: 11.2rem;
    }
    
    .cta_grid {
        grid-template-columns: 1.1fr 1fr;
        justify-content: start;
        justify-items: start;
        align-items: center;
        row-gap: 0;
        column-gap: 6rem;
    }
    
    .cta_text_content {
        order: 0;
        align-items: start;
        text-align: start;
    }

    .cta_img_wrapper img {
        width: 100%;
        max-width: 28rem;
    }

    .price_cards_section {
        padding-block-start: 11.2rem;
    }

    .price_cards_grid {
        justify-items: center;
    }

    .price_card {
        position: relative;
        padding-inline: 4.8rem;
        padding-block: 4.8rem;
        text-align: left;
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        grid-template-rows: auto;
        row-gap: 2.4rem;
        justify-items: start;
        align-items: center;
        width: 100%;
        max-width: 76rem;
    }

    .features {
        text-align: left;
        grid-column: 2/-1;
        grid-row: 1/3;
        align-self: center;
        margin-block: 0;
    }

    .card_pro {
        background-position: -35rem center;
    }

    .page_footer {
        padding-block-start: 9.6rem;
        padding-block-end: 11rem;
    }

    .footer_grid {
        justify-items: center;
    }

    .countdown_timer {
        column-gap: 1.6rem;
    }
    
    .countdown {
        padding: 1.4rem;
        width: 10rem;
        height: 13rem;
    }

    .time_value {
        font-size: 5.6rem;
        line-height: 120%;
        margin-bottom: .5rem;
    }
    
    .justify_self {
        justify-self: center;
    }

    .bg_element {
        height: 94rem;
    }

    /* SIGNUP PAGE */
    .signup_section {
        padding-block: 8rem 12rem;
    }

    .signup_page_title {
        font-size: clamp(3.2rem, 3rem + 1.1307vw, 5.6rem);
        width: initial;
        text-align: center;
    }
    
    .lead_text_signup {
        width: 51ch;
    }

    .countdown_timer_signup {
        column-gap: 1.6rem;
    }
    
    .countdown_signup {
        padding: 1.4rem;
        width: 10rem;
        height: 13rem;
    }
    
    .time_value_signup {
        font-size: 5.6rem;
    }

    .signup_form {
        margin-inline: auto;
    }

    .bg_element_signup {
        height: 47rem;
    }
}

@media screen and (min-width: 70rem) {
    .cta_section {
        padding-block-start: 14rem;
    }

    .cta_grid {
        grid-template-columns: 1fr 1fr;
        column-gap: 7rem;
    }

    .cta_img_wrapper img {
        max-width: 48rem;
    }

    .price_cards_section {
        padding-block-start: 14rem;
    }

    .price_cards_grid {
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 0;
        column-gap: 3.2rem;
        justify-items: center;
    }

    .price_card {
        text-align: center;
        padding-inline: 4.8rem;
        padding-block: 4.8rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        row-gap: 0;
        justify-items: center;
        align-items: start;
    }

    .level {
        margin-bottom: 4rem;
    }

    .features {
        text-align: center;
        grid-column: initial;
        grid-row: initial;
        align-self: start;
        margin-block: 4rem;
    }

    .card_pro {
        background-position: center -40rem;
    }

    .footer_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 0;
        justify-items: start;
    }

    .deadline {
        text-align: start;
    }

    .justify_self {
        justify-self: end;
        align-self: center;
    }

    .bg_element {
        height: 62.5rem;
    }

    /* SIGNUP PAGE */
    .signup_section {
        height: 100vh;
    }
    .signup_cta_grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 0;
        column-gap: 11rem;
        align-items: center;
    }

    .signup_cta_text_content {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;
        align-items: start;
    }
    
    .signup_page_title {
        font-size: clamp(3.2rem, 3rem + 1.1307vw, 5.6rem);
        width: 14ch;
        text-align: left;
    }
    
    .lead_text_signup {
        font-size: 1.8rem;
        line-height: 150%;
        color: var(--neutral-500);
        text-align: left;
    }

    .signup_form {
        margin-inline: initial;
    }

    .signup_form {
        padding: 4rem 4rem;
    }

    .bg_element_signup {
        max-width: 46rem;
        margin-inline: auto;
        height: 100%;
        bottom: 0;
        left: initial;
        right: 0;
        transform: translateX(-120%);
    }
}