/* === LAYOUT_CONTACT.CSS === */

.introSection{
    background: var(--colour-background-2);
    padding: var(--space-2) 15%;
    margin-bottom: var(--space-2);
    display: flex;
    flex-direction: column;    
    align-items: start;
}

.introSection .item--Title{
    color: var(--colour-2);
    align-self: center;
    padding: 0;
    margin-bottom: var(--space-2);
}

.introSection p{
    color: var(--colour-2);
    text-align: left;
}

#ContactFormBox{
    padding: var(--space-6) 15% var(--space-4) 15%;
}

#ContactFormBox h3{
    padding-bottom: var(--space-2);
    color: var(--colour-3);
}

#ContactForm{
    text-align: left;
}

#ContactForm input{
    display: block;
    width: 100%;
    margin-bottom: var(--space-1);
}

#ContactForm textarea{
    display: block;
    width: 100%;
    margin-bottom: var(--space-1);
}

#ContactForm button{
    margin-top: var(--space-2);
    margin-bottom: var(--space-1);
}

.success{
    background: green;
    color: white;
    text-align: center;
    border-width: 0;
    margin-bottom: var(--space-2);
}

.error{
    background: red;
    color: white;
    text-align: center;
    border-width: 0;
    margin-bottom: var(--space-2);
}

.validationError::placeholder{
    color: red;
    opacity: 1;
}