.contact {
    padding: 5vw;
    border-bottom: 2px solid white;
    & .contact-flex {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }
    & .contact-left {
        line-height: 1.5;
        flex: 1;
        min-width: 320px;
        background: white;
        padding: 2rem;
        border-radius: 1rem;
        color: var(--blue);
        font-size: clamp(1rem, 1.5vw, 1.5rem);
        & a {
            color: var(--blue);
            text-decoration: underline;
            text-underline-offset: 0.2em;  
            text-decoration-thickness: 1px;
            &:hover {
                text-underline-offset: 0.15em;
                text-decoration-thickness: 2px;
            }
        }
        & p {
            margin-bottom: 1rem;
        }
    }
    & .contact-right {
        flex: 1;
        min-width: 320px;
        background: white;
        padding: 2rem;
        border-radius: 1rem;
        color: var(--blue);
        font-size: clamp(1rem, 1.5vw, 1.5rem);
        & .field {
            display: flex;

            margin-bottom: 1rem;
            border-bottom: 1px dotted var(--blue);
            padding: 0.5rem 0;
            & label {
                width: 160px;
                margin-top: 0.5rem;
                &:after {
                    content: ':';
                }
            }
            & input, & textarea {
                width: 100%;
                border: 1px solid var(--blue);
                border-radius: 0.5rem;
                padding: 0.5rem;
                font-size: clamp(1rem, 1.5vw, 1.5rem);
                font-family: 'Outfit',sans-serif;
                &:focus {
                    outline: 2px solid var(--blue);
                    
                }
            }
            & textarea {
                height: 100px;
            }
        }
        & .alert {
            margin-bottom: 1rem;
        }
    }
}


.honeypot {
    position: absolute;
    left: -9999px;
}