/*#region Variables*/
:root
{
    --green: #0D4426;
  --axolotl: #6C7D4A;
  --grey-green: #444939;
  --light-axolotl: #E3E6DC;
  --almost-white: #F4F8F3;
  --sage-green: #7F9F77;
  --red: #D84738;
}
/*#endregion Variables*/

/*#region Typography*/

body, a, ::placeholder{
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    color: black;
}

.hidden{
    position: absolute;
    max-height: 0vh;
    overflow: hidden;
    padding: 0rem;
    border: none;
}

.contact-section h1{
    font-size: 1.45rem;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    color: white;
    margin: 1.5rem 0rem;
}

label{
    position: absolute;
    max-height: 0vh;
    overflow: hidden;
}

::placeholder{
    font-size: 0.93rem;
    color: #85897E;
    text-transform: uppercase;
}

.submit p{
    font-size: 1rem;
    color: white;
    padding-right: 0.5rem;
}

.email-us h2{
    font-size: 0.9rem;
    text-transform: uppercase;
    color: white;
    margin-bottom: 0.25rem;
}

.email-us a{
    font-size: 0.9rem;
    color: white;
}

.validationMessage{
    color: var(--red);
    margin-bottom: 0.75rem;
}

/*#endregion Typography*/

/*#region Small Screen Size (320-750)*/
.contact-section{
    background-image: url("../img/sm/mountain-clouds-sm.jpg");
    background-position: top center;
    background-size: cover;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
    padding: 0vw 5vw;
}

.invalid input[type="text"],
.invalid input[type="email"],
.invalid input[type="tel"],
.invalid textarea{
    border: 1px solid red;
}

.contact-form{
    width: 100%;
}

.contact-section .inner-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

input, textarea{
    background-color: var(--almost-white);
    padding: 0.5rem;
    width: 93%;
    border: none;
    margin-bottom: 0.6rem;
    border: 2px solid var(--green);
    resize: vertical;
    font-family: 'Lato', sans-serif;
}

textarea{
    height: 5rem;
}

button{
    border: none;
}

.g-recaptcha {
    margin-bottom: 1rem;
}

.submit{
    display: flex;
    align-items: center;
    background-color: var(--axolotl);
    width: fit-content;
    padding: 0.3rem;
    cursor: pointer;
}

.submit:hover{
    background-color: var(--green);
}

.submit svg{
    width: 8px;
    max-height: 8px;
    transform: rotate(90deg);
}

.submit svg path{
    fill: white;
}

.email-us{
    background-color: var(--green);
    padding: 0.5rem;
    border: 3px solid white;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 93%;
}

.email-us a:hover{
    text-decoration: underline;
}
/*#endregion Small Screen Size (320-750)*/

/*#region Medium Screen Size (751-1160)*/
@media only screen and (min-width: 751px)
{
    .contact-section{
        background-image: url("../img/md/mountain-clouds-md.jpg");
    }

    .contact-section{
        padding: 0rem 20vw;
    }

    .contact-section h1{
        font-size: 1.5rem;
    }

    ::placeholder{
        font-size: 0.9rem;
    }

    .email-us{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .email-us h2{
        font-size: 0.9rem;
        margin: 0rem 0.5rem 0rem 0rem;
    }

    .email-us a{
        font-size: 0.9rem;
        margin: 0rem;
    }

}
/*#endregion Medium Screen Size (751-1160)*/

/*#region Large Screen Size (1161-1920)*/
@media only screen and (min-width: 1161px)
{
    .contact-section{
        background-image: url("../img/lg/mountain-clouds-lg.jpg");
        padding: 0rem 30vw;
    }

    .inner-container{
        max-width: 1161px;
        margin: auto;
    }
}
/*#endregion Large Screen Size (1161-1920)*/

/*#region Extra Large Screen Size (1921-3840+)*/
@media only screen and (min-width: 1921px)
{
    .contact-section{
        background-image: url("../img/xl/mountain-clouds-xl.jpg");
    }
}
/*#endregion Extra Large Screen Size (1921-3840+)*/