:root {
--red: hsl(0, 100%, 74%); 
--green: hsl(154, 59%, 51%);


--blue: hsl(248, 32%, 49%);


--dark-blue: hsl(249, 10%, 26%);
--grayish-blue: hsl(246, 25%, 77%);
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

body {
    height: 100svh;
    display: grid;
    place-content: safe center;

    background: url('../images/bg-intro-mobile.png') var(--red);
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    /* Mobile */
    /* text-align: center; */
    /* margin-inline: 1.6rem; */
    text-align: center;
    margin-inline: clamp(0rem, 2.1634rem + -2.4038vw, 1.6rem);
    /* Desktop */
    /* text-align: left; */
    /* margin-inline: 0rem; */
    /* align-items: center; */
}
form {
    display: flex;
    flex-direction: column;
    background-color: white;

    /* Mobile */
    /* padding-inline: 1.4rem; */
    /* padding-block: 1.5rem; */
    /* border-radius: 9px; */
    /* gap: 1rem; */
    box-shadow: 0px 9px 0px 0px rgba(0, 0, 0, 0.2);
    
    /* inline-size: 20.5rem; */
    /* block-size: 27.55rem; */
    
    padding-inline: clamp(1.4rem, 1.0127rem + 1.6526vw, 2.5rem);
    padding-block: clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem);
    border-radius: 9px;
    gap: clamp(1rem, 0.9296rem + 0.3005vw, 1.2rem);
    /* Desktop */
    
    /* inline-size: 33.8rem; */
    /* block-size: 29.6rem; */
    /* padding-inline: 2.5rem; */
    /* padding-block: 2.5rem; */
    /* border-radius: 9px; */
    /* gap: 1.2rem; */
}
.form-con {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-inline-end: clamp(0rem, -0.4225rem + 1.8028vw, 1.2rem);
    /* Desktop */
    /* margin-inline-end: 1.2rem; */
}

.form-heading {
    background-color: var(--blue);
    color: white;
    border-radius: 10px;
    box-shadow: 0px 9px 0px 0px rgba(0, 0, 0 , 0.2);

    /* Mobile */
    /* padding-inline: 4.5em; */
    /* padding-block: 1rem; */
    /* line-height: 1.75; */
    /* max-width: 50ch; */
    /* font-size: 0.96rem; */
    /* margin-block-end: 1.7rem; */
    line-height: 1.75;
    text-align: center;
    font-size: 0.96rem;
    width: 100%;
    margin-block-end: 1.7rem;
    padding-block: clamp(1rem, 0.8592rem + 0.6009vw, 1.4rem);
    /* Desktop */
    /* padding-inline: 9em; */
    /* padding-block: 1.4rem; */
    /* width: 100%; */
    /* max-width: 50ch; */
    /* line-height: 1; */
    /* font-size: 0.96rem; */
    /* margin-block-end: 1.7rem; */
}


.heading {
    /* Mobile */
    /* max-width: 18ch; */
    /* line-height: 1.3; */
    /* font-size: 1.7rem; */
    /* margin-block: 1.4rem; */
    /* text-align: center; */
    max-width: 18ch;
    line-height: 1.3;
    font-size: clamp(1.7rem, 1.2070rem + 2.1033vw, 3.1rem);
    margin-inline-start: clamp(0rem, -0.1761rem + 0.7512vw, 0.5rem);
    margin-block: clamp(1.4rem, -1.9803rem + 14.4225vw, 11rem) clamp(1.4rem, 1.2592rem + 0.6009vw, 1.8rem);
    /* Desktop */
    /* max-width: 18ch; */
    /* line-height: 1.1;  */
    /* font-size: 3.1em; */
    /* margin-inline-start: 0.5rem; */
    /* margin-block-start: 11rem; */
    /* margin-block-end: 1.8rem; */
}
.heading-con {
    color: white;
    display: flex;
    flex-direction: column;
}

.heading-para {
   
    /* Mobile */
    /* line-height: 1.6; */
    /* font-size: 1rem; */
    /* margin-block-end: 3.9rem; */
    /* play around with max width  */
    /* max-width: 60ch; */

    line-height: 1.6;
    font-size: clamp(1rem, 1.0035rem + -0.0150vw, 0.99rem);
    margin-block-end: clamp(0rem, 5.2732rem + -5.8592vw, 3.9rem);
    margin-inline-start: clamp(0rem, -0.1761rem + 0.7512vw, 0.5rem);
    max-width: 60ch;
    /* Desktop */
    /* line-height: 1.6; */
    /* font-size: 0.99rem; */
    /* margin-inline-start: 0.5rem; */
    /* margin-block-end: 0rem; */
    /* play around with max width  */
    /* max-width: 50ch; */
    
}
.input-con {
    display: flex;
    flex-direction: column;
}

input {
    all: unset;
    text-align: left;
    border: 1px solid var(--grayish-blue);
    /* Mobile */
    /* padding-block: 1rem; */
    /* padding-inline: 1.2rem; */
    /* font-size: 0.93rem; */
    /* border-radius: 5px; */
    
    padding-block: 1rem;
    padding-inline: clamp(1.2rem, 0.9887rem + 0.9014vw, 1.8rem);
    font-size: 0.93rem;
    border-radius: 5px;

    /* Desktop */
    /* padding-block: 1rem;     */
    /* padding-inline: 1.8rem; */
    /* font-size: 0.93rem; */
    /* border-radius: 5px; */
}
input:focus {
    border: 3px solid var(--blue);
}

.input-error {
    background: url('../images/icon-error.svg') no-repeat right 25px center;
    border: 3px solid var(--red);
}
.input-error-hide {
    display: none;
}
.input-error-text {
    color: var(--red);
    font-size: 0.65rem;
    text-align: right;
    /* margin-block-start: -1rem; */
}


.submit-btn {
    background-color: var(--green);
    color: white;
    padding-block: 1rem;
    width: 100%;
    border-radius: 4px;
    box-shadow: inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2);
    margin-block-end: -0.3125rem;

    /* Desktop */ 
    text-align: center;
}

.submit-btn:hover {
    cursor: pointer;
    filter: brightness(1.2);
}

.terms-para {
    color: var(--grayish-blue);
    /* Mobile */
    /* font-size: 0.7rem; */
    /* max-width: 38ch; */
    /* line-height: 1.6; */
    /* margin-inline: 1.1rem; */
    
    max-width: 38ch;
    font-size: clamp(0.68rem, 0.7070rem + -0.0300vw, 0.7rem);
    line-height: 1.6;
    margin-inline: clamp(1.1rem, 0.5014rem + 2.5540vw, 2.8rem);
    /* Desktop */
    /* font-size: 0.68rem; */
    /* max-width: 53ch; */
    /* line-height: 1.6; */
    /* margin-inline: 2.8rem; */
}
.terms-para>span {
    color: var(--red);
}

@media (min-width: 760px) {
    body {
        background-image: url('../images/bg-intro-desktop.png');
    }
    .content {
        text-align: left;
    }

    .form-heading {
        line-height: 1;
    }

    .heading {
        line-height: 1.1;
    }

    .heading-para {
        max-width: 50ch;
    }

    .terms-para {
        max-width: 53ch;
    }
    
}