@media only screen and (min-width: 0rem){
    #contact {
        padding: 2rem;
        margin-top: 2rem;
        overflow: hidden;
        padding-right: 15%;
        padding-left: 15%;
    }

    /* Base container styling */
    #contact-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-width: 37.5rem;
        margin: 0 auto;
        background-color: #f3f3f3;
        padding: 1rem 2rem;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    /* Contact page typography */
    .contact-intro {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .contact-label {
        font-size: 1.3rem;
        font-weight: bold;
        margin-bottom: 1rem;
    }

    .contact-email {
        display: inline-block;
        font-size: 1.3rem;
        color: var(--primary);
        text-decoration: underline;
        margin-bottom: 1.5rem;
        transition: color 0.3s ease;
    }

    .contact-email:hover {
        color: #8DD6DA;
    }

    .contact-note {
        font-size: 1.1rem;
        color: #666;
    }

    /* Preserve original form styling in case you want to switch back */
    #contact-form label {
        font-weight: bold;
    }

    #contact-form input,
    #contact-form textarea {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #fff;
        border-radius: 5px;
    }

    #contact-form textarea {
        resize: vertical;
    }

    #contact-form button {
        margin: 0 auto;
        width: 100%;
        padding: 1rem;
        background-color: var(--primary);
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
        box-sizing: border-box;
    }

    #contact-form button:hover {
        background-color: #8DD6DA;
    }

    #success-message{
        display: none;
        padding: 1rem;
        border: 2px solid #28a745;
        background-color: #d4edda; 
        text-align: center;
    }
}