.form-wrapper {
    width:100%;
    max-width: 45em;
}
.form-wrapper h2 {
    font-size: clamp(1.825rem,1rem + 1.75vw,2.5rem);
    margin-bottom: .25em;
    color:var(--earth-color);
    font-weight: 600;
  }
#contactForm {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
#contactForm .input-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: .5em;
}
#contactForm .input-wrap.first {
    flex-basis: 100%;
}
#contactForm .input-wrap.left {margin-right: .5em;}

#contactForm .input-wrap.textarea {flex-basis: 100%;}

::placeholder {
    opacity: 1;
    color:#a3a3a3}

#contactForm input[type=text], #contactForm input[type=email], #contactForm textarea {
    position: relative;
    height: 3.125em;
    width: 100%;
    padding: 0 .9em;
    font-size: .9375em;
    font-weight: normal;
    line-height: 3.125em;
    text-overflow: ellipsis;
    color: var(--gray-color);
    font-weight: 500;
    background-color:#fff;
    border: 1px solid #CECECE;
    transition: color .35s ease,background-color .35s ease, border .35s ease;}

input:hover, input:focus, textarea:hover, textarea:focus {
    color: var(--earth-color)!important;
    border-color:#CECECE;}

#contactForm textarea {
    min-height: 14em;
    line-height: 1.4;
    padding-top:1em;
    resize: none;}

/* ------------------------------ error Msg -------*/
#contactForm .empty, #contactForm .invalid {border-color: hsl(0, 100%, 80.4%) !important}
#contactForm .valid {border-color: hsl(85.1, 87.4%, 43.5%) !important}

input + span, textarea + span{
	opacity:0;
	display:block;
	content:"";
	padding:0;
	font-size: .825em;
	font-weight: 400;
	line-height: 1;
	text-align: left;
	background: transparent;
	transition: opacity .3s ease, background-color .3s ease;
}

#contactForm .empty + span, #contactForm .invalid + span {
	display:block;
	opacity:1;
	width:100%;
    font-weight: 500;
	padding:.625em .125em;
	color: hsl(0, 66.7%, 62.4%)
}

.empty + span::before, .empty + span::before{content:attr(data-empty)!important;}
.invalid + span::before, .invalid + span::before {content:attr(data-invalid);}


#validation {
    display: inline-block;
}
#validation.error {
    margin: 1em 0 2em;
    width: 100%;
    text-align: center;
}

#validation p {
    opacity: 1;
    margin:0;
    transition: opacity .3s;
}
#validation.error p::before {content:attr(data-error);}
#validation.error p {
    color: hsl(0, 66.7%, 62.4%);
    padding: .75em 1.25em;
    background-color: #FBE4E4;
    font-weight: 500;}

.button-wrapper {
    display: flex;
    align-items: center;
}
#submitButton::before {content:attr(data-prompt);}
#submitButton.sending::before {content:attr(data-sending);}
#submitButton.success::before {content:attr(data-success);}
#submitButton.error::before {content:attr(data-error);}

#submitButton {
    padding:1.25em 1.5em;
    min-width: 15em;
    font-size: .9375rem;
    background-color: var(--earth-color);
    color: white;
    letter-spacing: .025em;
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color .35s ease;	}

#submitButton:hover {background-color:var(--mustard-color);}
#submitButton:focus {background-color:var(--mustard-color);}

#submitButton.success {
    background-color: hsl(105,85%,25%);
    cursor: default;}
#submitButton.error {
    background-color: #A60002;
    cursor: default;}

#submitButton + .loader {
    opacity: 0;
    visibility: hidden;
    margin-left: 1em;
    position: relative;
    transition: opacity .5s cubic-bezier(0,0,0.3,1), visbility .5s cubic-bezier(0,0,0.3,1)
}
#submitButton.sending + .loader {
    opacity: 1;
    visibility: visible;
} 

    
    @media only screen and (max-width: 58.76rem) {
        #contactForm .input-wrap, #contactForm .input-wrap.left {
            flex-basis: 100%;
            margin-right: 0;
          }
          #submitButton {
            width:100%;}

        }
        
    @media only screen and (max-width: 48rem) {
        #intro_contact .container {
            flex-direction: column;
            max-width: 40em;
        }

    }