/* Hero Styles */
.hero {
    position: relative; /* For absolute img/overlay */
    height: 80vh; /* Default tall for mobile */
    min-height: 400px; /* Prevent too small */
}

.hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill without distortion */
    object-position: center 30%; /* Focus higher up (adjust % to show face; e.g., 20% for top-heavy images) */
    z-index: 0; /* Below overlay */
}

.hero-overlay {
    background: rgba(0, 51, 160, 0.7); /* Blue hue */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Above image */
}

.hero .container {
    position: relative;
    z-index: 2; /* Text above */
}

/* Media Queries for Resizing */
@media (min-width: 768px) { /* Tablets+ */
    .hero {
        height: 60vh; /* Shorter on wider screens to reduce cropping */
    }
}

@media (min-width: 1200px) { /* Desktops like Mac */
    .hero {
        height: 50vh; /* Even shorter for large screens */
    }
    .hero img {
        object-position: center 20%; /* Fine-tune to ensure face visibility */
    }
}

/* Existing styles (e.g., validation, footer) remain unchanged */