.hero-section {
    width: 100%;
    overflow-x: hidden; /* Hides the part of the image that goes off-screen */
}

.hero-section .hero-row {
    width: 60%;
    max-width: 1300px; /* stops it from getting too wide on huge screens */
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.hero-section .text-column {
    width: 45%;
    z-index: 10; /* Ensures text stays on top of the image */
    position: relative;
}

.hero-section .image-column {
    width: 55%;
    position: relative;
}

.hero-section .image-column img {
    max-width: none !important; /* Allows image to grow beyond its column */
    width: 160%; /* Make it huge to cover the gap to the right edge */
    transform: translateX(10%) translateY(-5%);
    display: block;
}

@media (max-width: 900px) {
    .hero-section .hero-row {
        width: 90%; /* Wider container on mobile */
        flex-direction: column;
    }

    .hero-section .text-column,
    .hero-section .image-column {
        width: 100%;
    }

    .hero-section .image-column img {
        width: 100%; /* Reset image to fit normally */
        transform: none;
    }
}