.section-title {
    font-family: var(--font-title);
    font-size: 1.55em;
}

.contact-us {
    display: flex;
    align-items: flex-start;
    margin: var(--margin-m);
}

.contact-us-container, .social-media-container{
    flex: 1;
    padding: var(--padding-xs);
}

.contact-us-container{
    border-right: 1px solid rgba(128, 128, 128, 0.205);
    padding-right: var(--padding-s);
}

.social-media-container{
    padding-left: var(--padding-s);
}

.contact-us-title-container, .social-media-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--margin-xs);
}

.contact-us-title-container h1, .social-media-title-container h1 {
    white-space: nowrap;
}

.contact-us-divider{
    height: 0.01em;
    background-color: var(--color-lightgray);
    border-radius: 50px;
    opacity: 0.2;
    flex-grow: 1;
    margin-left: var(--margin-xs);
}


.contact-us p:first-child {
    margin-top: var(--margin-xxs);
    margin-bottom: var(--margin-xs);
    color: var(--color-primary);
}

.contact-us-description {
    color: var(--color-lightgray);
    line-height: 2em;
    font-size: var(--font-size-content);
    margin-bottom: var(--margin-s);
}


.contact-us-form {
    display: flex;
    flex-direction: column;
    gap: var(--padding-s);
    max-width: 1200px;
}

.contact-us-form label {
    padding-bottom: var(--padding-xxs-2);
    font-size: var(--font-size-content);
}

.contact-us-form input {
    width: 100%;
    height: 40px;
    border: 2px solid var(--color-lightgray-2);
    border-radius: 0px;
    margin-bottom: var(--margin-m);
    margin-top: var(--margin-xxs);
}

.contact-us-form textarea {
    resize: vertical;
    width: 100%;
    padding: var(--padding-xs);
    border: 1.5px solid #ccc;
    border-radius: 1px;
    margin-top: var(--margin-xxs);
    height: 15em;
}

.contact-us-submit-btn-container{
    grid-column: span 2;
    display: flex;
    justify-content: flex-start;
}

.contact-us-submit-btn {
    width: 90px;
    height: 40px;
    padding: 10px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
    margin-bottom: var(--margin-s);
}

.contact-us-submit-btn:hover {
    background-color: var(--color-primary-hover);
}

.social-media-icons{
    display: flex;
    flex-direction: column;
    gap: var(--margin-s);
    margin: var(--margin-xs)
}

.social-media-icons a{
    background-color: var(--color-black);
    color: var(--color-black);
    margin: var(--padding-xxs);
    padding: 0.3125em 0.5625em;
    border-radius: var(--border-btn-social-media);
}


/* MEDIA QUERYS */
@media (max-width: 1080px) {
    .contact-us {
        flex-direction: column;
        gap: 0;
    }
    .contact-us-container{
        border-right: 0px
    }

    .social-media-container{
        width: 100%;
        padding-left: 0;
    }
    
}

@media (max-width: 380px) {
    .contact-us-container{
        padding: 0;
    }
}