.newsletter-wrapper {
    display: flex;
    background-color: #f8f9fa;
    min-height: 300px;
    /* Compact height */
    margin: 40px 0;
    overflow: hidden;
    /* rounded corners optional */
    /* border-radius: 8px; */
}

.newsletter-text {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.newsletter-text h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.newsletter-text p {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.newsletter-image {
    flex: 1;
    background-image: url('../images/newsletter-model.jpg');
    /* Default image */
    background-size: cover;
    background-position: center top;
    min-height: 250px;
    /* Ensure visibility on mobile */
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter-input {
    border: 1px solid #ddd;
    padding: 12px;
    width: 100%;
    margin-bottom: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border 0.3s;
}

.newsletter-input:focus {
    border-color: #000;
}

.newsletter-btn {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 1px;
    width: 100%;
    /* Full width button */
    transition: opacity 0.3s;
}

.newsletter-btn:hover {
    opacity: 0.8;
}

/* Response Message Area */
#newsletter_msg {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
}

/* Mobile Compatibility */
@media (max-width: 768px) {
    .newsletter-wrapper {
        flex-direction: column-reverse;
        /* Image on top? Or text on top? Split usually means stacked. */
        /* Let's keep Image on top if we want visuals first, or text first. 
           Base models usually stack image then text or vice versa. 
           Let's do Text then Image (column) or Image then Text (column-reverse if wrapper is row). 
           Default flex-direction is row. 
           flex-direction: column; -> Text (first child) on top, Image (second child) on bottom.
        */
        flex-direction: column;
    }

    .newsletter-bg-col {
        /* If using background div instead of img tag */
        height: 200px;
    }

    .newsletter-wrapper {
        margin: 20px 0;
    }

    .newsletter-text {
        padding: 30px 20px;
    }

    .newsletter-image {
        min-height: 200px;
        order: -1;
        /* Move image to top on mobile */
    }
}