:root{
    --GreenPrimary200lighter: hsl(148, 38%, 91%);
    --GreenPrimary600medium: hsl(169, 82%, 27%);
    --RedPrimary: hsl(0, 66%, 54%);
    --WhiteNeutral: hsl(0, 0%, 100%);
    --Greyeutral500medium: hsl(186, 15%, 59%);
    --Greyeutral900darker: hsl(187, 24%, 22%);
}

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

body{
    position: relative;
    background-color: var(--GreenPrimary200lighter);
    font-family: 'karla', monospace;
}

section{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,5%);
    height: 5em;
    width: 16.25em;
    background-color: var(--Greyeutral900darker);
    z-index: 1000;
    border-radius: 0.625em;
    padding: 0.625em;
    display: flex;
    flex-direction: column;
    gap: 0.625em;
    color: var(--WhiteNeutral);
    visibility: hidden;
}

.head{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0.625em;
}

.success .head p{
    font-size: 1em;
}

.success > p{
    font-size: 0.5625em;
}

form{
    position: absolute;
    transform: translate(-50%,4%);
    left: 50%;
    width: 16.25em;
    height: 49.69em;
    border-radius: 0.625em;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    background-color: var(--WhiteNeutral);
    /* padding: 1.25em 1.125em 1.125em 1.125em; */
    padding-top: clamp(1.25em, 4vw, 2.5em);
    padding-right: clamp(1.125em, 4vw, 2.1875em);
    padding-bottom: clamp(1.125em, 4vw, 2em);
    padding-left: clamp(1.125em, 4vw, 2.1875em );
}

.form-group-name{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding-top: 1.5em;
}

.first-name{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    
}


.last-name{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding-top: clamp(0.3125em, 2.5vw, 1em);
}

.email-group{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5em;
    padding-top: clamp(0.3125em, 2.5vw, 1em);
}


.container-labels{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 0.5em;
    width: 100%;
}




.message-textArea{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding-top: clamp(0.5em, 2.5vw, 1em);
}

#first-name,
#last-name,
#email
{
    height: 2.5em;
    border: 0.0625em solid var(--Greyeutral500medium);
    border-radius: 0.3125em;
    cursor: pointer;
    padding-left: 1em;
}

#first-name:hover,
#last-name:hover,
#email:hover{
    border: 0.0625em solid var(--GreenPrimary600medium);
}

#first-name:focus,
#last-name:focus,
#email:focus{
    border: 0.0625em solid var(--GreenPrimary600medium);
    outline: none;
}


.consent-error{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: clamp(0.5em, 2.5vw, 0.45em);
    padding-top: clamp(0.6em, 2.5vw, 1.6em);
    padding-bottom: clamp(0.7em, 2.5vw, 1.3em);
}

.consent{
    display: flex;
    gap: 1em;
}

.lbl-consent{
    cursor: pointer;
    
}

.lbl-consent:hover{
    color: var(--GreenPrimary600medium);
}

.btnSubmit{
    width: 100%;
    height: 2.5em;
    border: none;
    border-radius: 0.3125em;
    background-color: var(--GreenPrimary600medium);
    color: var(--WhiteNeutral);
    font-size: 1em;
    font-family: 'karla', monospace;
    cursor: pointer;
   
}



#message{
    height: 10.9375em;
    border-radius: 0.3125em;
    resize: none;
    padding-left: 1em;
    padding-top: 0.625em;
    padding-right: 1em;
}

#message-validation{
    visibility: hidden;
    color: var(--RedPrimary);
}
#message:hover{
    border: 0.0625em solid var(--GreenPrimary600medium);
}

#message:focus{
    outline: none;
    border: 0.0625em solid var(--GreenPrimary600medium);
}

#general-enquiry,
#support-request{
    cursor: pointer;
}


.required{
    color: var(--GreenPrimary600medium);
    font-size: 1.1em;
}



#first-name-validation{
    visibility: hidden;
    color: var(--RedPrimary);
}

#last-name-validation{
    visibility: hidden;
    color: var(--RedPrimary);
}

#email-validation{
    visibility: hidden;
    color: var(--RedPrimary);
}


#query-validation{
    visibility: hidden;
    color: var(--RedPrimary);
}


label{
    font-size: clamp(0.6875em, 2.5vw, 1em);
}

span{
    font-size: clamp(0.6875em, 2.5vw, 0.8em);
}

span.error-required{
    font-size: clamp(0.6875em, 2.5vw, 0.8em);
}

.query .error-required{
    font-size: clamp(0.6875em, 2.5vw, 0.8em);
    
}

#consent-validation{
    visibility: hidden;
    color: var(--RedPrimary);
}

fieldset{
    
    border: none;   
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 100%;
    gap: 0.5em;
    font-size: 1em;

}

legend{
    padding-top: clamp(0.3125em, 2.5vw, 1em);
    padding-bottom: 0.625em;
    font-size: clamp(0.6875em, 2.5vw, 1em);
}

fieldset label{
    width: 100%;
    border: 0.0625em solid var(--Greyeutral500medium);
    height: 2.5em;
    border-radius: 0.3125em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding-left: 0.625em;
    font-size: 1em;
    cursor: pointer;
}

fieldset label:hover{
    background-color: var(--GreenPrimary200lighter);
    border: 1px solid var(--GreenPrimary600medium);
}

fieldset label:focus{
    background-color: var(--GreenPrimary200lighter);
    border: 1px solid var(--GreenPrimary600medium);
}

@media (min-width:48em){
    section{
        width: 24.69em;
        height: 5.94em;
        margin-top: 2.5em;
        padding: 1.4375em;
    }

    form{
        margin-top: 6.875em;
        width: 40.2em;
        height: 44.375em;
       
    }

    .form-group-name{
        flex-direction: row;
        gap: 0.9375em;
    }

    
    .last-name{
        padding: 0;
    }

    .container-labels{
        flex-direction: row;
        gap: 0.9375em;
    }

   
    .success > p{
    font-size: 0.8125em;
    }

    #message{
        height: 5.625em;
    }

   .query{
    flex-direction: column;
   }

}