.contact-form-section{
    background-color: var(--secondary-white);
    display: flex;
    flex-direction: column;
}

.contact-form-container{
    background: var(--bg-light-gray);
    border-radius: var(--radius-20);
    margin-block: 30px;
    padding-block: 50px;
}

.contact-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    max-width: 1200px;
}

.contact-form .form-input-elements{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.form-input-elements >div{
    display: flex;
    flex-direction: column;
    width: 250px;
}

.form-input-elements #contact-form-submit-btn{
    padding: 15px 50px;
    align-self: flex-end;
}

label{
    font-size: 14px;
    margin-bottom: 5px;
}

input, textarea {
    outline: unset;
    font-size: 1rem;
    color: var(--text-gray);
    padding: 15px;
    background-color: var(--secondary-white);
    border: transparent;
    border-radius: var(--radius-12);
}

textarea {
    resize: vertical;
    field-sizing: content;
    min-height: 125px;
    max-height: 200px;
    overflow-y: auto;
}

input:focus, textarea:focus {
    background: var(--secondary-white);
    border-color: var(--accent-teal-light);
    border: 2px solid;
}

input:not(:placeholder-shown){
    border: 2px solid;
}

textarea:is(:focus-within){
    height: 100px;
}

input:not(:placeholder-shown):valid{
    border-color: #008000;
}

input:not(:placeholder-shown):invalid {
    border-color: #ff0000;
}

input:focus:invalid {
    border-color: var(--accent-teal-light);
}