/* ---CONTACT HERO STYLES--- */

.contact_hero_section {
    background: var(--black);
    height: 80vh;
}

.contact_hero_section .absolute_media {
    opacity: .3;
    object-position: center;
}

.contact_hero_section .container {
    justify-content: center;
    padding: 5vw;
}

.contact_hero_section .contact_hero_info {
    max-width: 60%;
}

@media (max-width: 997px) {
    .contact_hero_section {
        height: 160vw;
    }

    .contact_hero_section .container {
        justify-content: flex-end;
        padding: 20vw 10vw;
    }

    .contact_hero_section .contact_hero_info {
        max-width: 100%;
    }
}



/* ---CONTACT FORM STYLES--- */

.contact_form_section .contact_form_split {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 10vw;
    align-items: start;
}

.contact_form_section .contact_form_side {
    display: flex;
    flex-direction: column;
    gap: 3vw;
}

.contact_form_section .contact_form_intro {
    gap: 1.5vw;
}

.contact_form_section .contact_side_links {
    display: flex;
    flex-direction: column;
}

.contact_form_section .contact_side_link {
    display: flex;
    flex-direction: column;
    gap: .5vw;
    padding: 1.8vw 0;
    border-bottom: .05vw solid var(--cream);
    color: var(--cream);
    font-size: var(--text-sm);
    font-weight: 300;
    width: 100%;
    transition: color var(--transition);
}

.contact_form_section .contact_side_link:hover {
    color: var(--white);
}

.contact_form_section .contact_side_link:first-child {
    padding-top: 0;
    
}

.contact_form_section .contact_side_link:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.contact_form_section .contact_form {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.contact_form_section .form_row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw;
}

.contact_form_section .form_field {
    display: flex;
    flex-direction: column;
    gap: .5vw;
    border: .05vw solid #00000050;
    background: #00000010;
    padding: 1vw;
    transition: border-color var(--transition), background var(--transition);
}

.contact_form_section .form_field.full_width {
    grid-column: 1 / -1;
}

.contact_form_section .form_field:focus-within, 
.contact_form_section .form_field.has_error {
    border-color: #00000080;
    background: #00000020;
}

.contact_form_section .form_field label {
    color: #e0d5c988;
    font-size: var(--text-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1vw;
    pointer-events: none;
    transition: color var(--transition);
}

.contact_form_section .form_field:focus-within label {
    color: var(--cream);
}

.contact_form_section .form_field.has_error label {
    color: var(--cream);
}

.contact_form_section .form_field input,
.contact_form_section .form_field select,
.contact_form_section .form_field textarea {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--cream);
    font-size: var(--text-sm);
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    outline: none;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.contact_form_section .form_field input::placeholder,
.contact_form_section .form_field textarea::placeholder {
    color: #ffffff50;
}

.contact_form_section .form_field textarea {
    resize: none;
    height: 7vw;
    line-height: 1.6;
}

.contact_form_section .select_field_wrapper {
    position: relative;
}

.contact_form_section .select_field_wrapper select {
    background: transparent;
    cursor: pointer;
    padding-right: 2vw;
}

.contact_form_section .select_field_wrapper i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #e0d5c940;
    font-size: var(--text-eyebrow);
    pointer-events: none;
    transition: color var(--transition);
}

.contact_form_section .form_field:focus-within .select_field_wrapper i {
    color: var(--cream);
}

.contact_form_section .field_error {
    font-size: var(--text-xs);
    color: var(--white);
}

.contact_form_section .field_error:empty {
    display: none;
}

.contact_form_section .honeypot_field {
    display: none;
}

.contact_form_section .form_actions {
    display: flex;
    align-items: center;
    gap: 3vw;
    padding-top: 1vw;
}

.contact_form_section .form_message {
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--cream);
    opacity: 0;
    transition: opacity var(--transition);
}

.contact_form_section .form_message.visible {
    opacity: 1;
}

.contact_form_section .form_message.error {
    color: var(--white);
}


@media (max-width: 997px) {
    .contact_form_section .contact_form_split {
        grid-template-columns: 1fr;
        gap: 12vw;
    }

    .contact_form_section .contact_form_side {
        position: static;
        gap: 8vw;
    }

    .contact_form_section .contact_form_intro {
        gap: 5vw;
    }

    .contact_form_section .contact_side_link {
        gap: 2vw;
        padding: 5vw 0;
    }

    .contact_form_section .contact_form {
        gap: 2vw;
    }

    .contact_form_section .form_row {
        grid-template-columns: 1fr;
        gap: 2vw;
    }

    .contact_form_section .form_field {
        padding: 3vw 4vw;
        gap: 1.5vw;
    }

    .contact_form_section .form_field input,
    .contact_form_section .form_field select,
    .contact_form_section .form_field textarea {
        font-size: var(--text-base);
    }

    .contact_form_section .form_field textarea {
        height: 28vw;
    }

    .contact_form_section .select_field_wrapper i {
        font-size: var(--text-sm);
    }

    .contact_form_section .form_actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 5vw;
        padding-top: 3vw;
    }
}



/* ---CONTACT CLOSING STYLES--- */

.contact_closing_section .container {
    align-items: center;
}

.contact_closing_section .contact_closing_info {
    max-width: 50%;
}

@media (max-width: 997px) {
    .contact_closing_section .contact_closing_info {
        max-width: 100%;
    }
}