.homepage-hero {
    display: flex; /* Enables flexbox for side-by-side layout */
    align-items: center; /* Vertically centers the text next to the image */
    gap: 30px; /* Adds space between the image and the text */
    max-width: 800px; /* Optional: Constrain the width */
    margin: 0 auto; /* Optional: Center the whole block */
    padding: 20px;
}

.hero-image {
    flex-shrink: 0; /* Prevents the image from shrinking */
}

.hero-image img {
    width: 15em; /* Set a fixed size for the image */
    height: 15em; /* Must match the width */
    object-fit: cover; /* Ensures the image fills the circle without distortion */
    border-radius: 50%; /* **This is the key to making it a circle** */
}

.hero-text {
    flex-grow: 1; 
}

@media (max-width: 600px) {
    .homepage-hero {
        flex-direction: column; /* Stacks the image and text vertically on small screens */
        text-align: center;
    }
}