/* Side-by-Side Layout */
        body {
            display: flex;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
           /* background-color: var(--bg-cream); */
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }

main {
    width: 90%;
    max-width: 850px;
    color:black;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: left;
    padding: 2rem;
    font-size: 1.25rem;
}   
        
        
.main-wrapper {
    background-image: none;
    background-color: var(--bg-cream);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100%;
    /* Ensure no horizontal padding here is squeezing the footer */
    padding: 0; 
}
.hero-image {
    max-width: 800px; /* Your existing constraint */
    width: 100%;
    height: auto;
    
    /* NEW: Add a maximum height constraint for sub-pages */
    max-height: 350px; 
    object-fit: cover; /* Keeps the aspect ratio without distortion */
    
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Keep the header constrained as discussed on the home page for consistency */
header {
    width: 90%;
    max-width: 850px; 
    margin: 20px auto; 
    padding: 2rem;
    background-color: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
}

/* Ensure the corrected image is banner-sized */
.hero-image {
    max-width: 800px;
    width: 100%;
    
    /* Constraint for sub-pages */
    max-height: 350px; 
    object-fit: cover; 
    
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}