.hero-section {
    height: 300px;
    width: 100%;

    /* Background Image Styling */
    background-size: cover; /* Ensures the image covers the entire element */
    background-position: center center;
    background-repeat: no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;
    overflow: hidden;
    margin-bottom: 15px;

}

.hero-content-wrapper {
    /* Define the area where content sits */
    display: flex;
    flex-direction: column; /* Stack the image and text vertically */
    align-items: center;    /* Center content horizontally */
    justify-content: center; /* Center content vertically */

    /* Ensure it doesn't exceed the hero section's height */
    max-height: 100%;

}

.hero-overlay-image {
    /* This container's height is implicitly set by the image or can be controlled */

    /* Crucial for centering the image */
    display: flex;
    justify-content: center;
    align-items: center;
    flex:1;
    max-width: 500px;

}

.hero-overlay-image img {
    /* Key properties for the overlay image: */
    height: 100%;
    max-height: 300px; /* **Fits on height of its container** */
    width: auto;     /* Maintains aspect ratio */
    /*max-width: 100%; !* Prevents image from overflowing on smaller screens *!*/
}

.hero-text-content {
    /* Style for your title and supporting text */
    text-align: center;
    color: white; /* Use a contrast color */
    /* Optional: Add a text shadow for better readability on busy backgrounds */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-text-content h1 {
    margin-top: 0;
}