#contact {
    color: var(--zg-color-text-primary);
}

#contact .row-f {
    width: 100%;
    max-width: var(--zg-standard-max-width);
    height: auto;
    margin: auto;
    display: flex;
}

#contact #left-column {
    width: 25%;
    background-color: var(--zg-color-white);
    border-right: 1px solid var(--zg-color-secondary);
}

#contact #content-wrapper {
    width: 75%;
}

#contact h4 {
    font-size: var(--zg-font-size-body-large);
}

#contact .contact-rich .block {
    padding: 15px;
}

#contact .contact-rich .block i {
    font-size: var(--zg-font-size-h1);
}

#contact .contact-rich .block .data {
    font-size: var(--zg-font-size-body-large);
    padding: 2px 5px;
}

#contact .contact-rich .block a {
    font-size: var(--zg-font-size-body-large);
    color: var(--zg-color-primary);
}

#contact .form-fields {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#contact .form-fields label {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

#contact .form-fields label span {
    font-weight: var(--zg-font-weight-semibold);
}

#contact #content {
    padding: 20px;
    font-size: var(--zg-font-size-body);
    width: 60%;
}

#contact #content .form-footer {
    display: flex;
    align-items: center;
}

#contact #content .form-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

#contact #content .form-footer button {
    background-color: var(--zg-color-primary);
    border-radius: 7px;
    color: var(--zg-color-white);
    font-weight: var(--zg-font-weight-semibold);
    padding: 10px 15px;
    border: none;
}

#contact #content .form-footer button:hover {
    background-color: var(--zg-color-hover-primary);
}

#contact #content textarea {
    border-radius: 5px;
    border: 1px solid lightgray;
    padding: 10px;
}

#contact #content textarea:focus {
    outline: none;
}

#contact #content select,
#contact #content input {
    height: 34px;
    border-radius: 5px;
    padding: 7px 5px;
    border: 1px solid lightgray;
}

#contact #content select:focus,
#contact #content input:focus,
#contact #content textarea:focus {
    outline: none;
    border: 1px solid var(--zg-color-primary);
}

#contact #content input[type="file"] {
    border: none;
}

#contact #left-column .contact-rich .block {
    display: flex;
    align-items: center;
    gap: 10px;
}


@media screen and (max-width: 475px) {
    #contact .container-width-standard {
        display: flex;
        flex-direction: column-reverse;
    }

    #contact #content-wrapper,
    #contact #content-wrapper #content {
        width: 100%;
    }

    #contact #left-column {
        width: 100%;
    }
}