.hero {
    position: relative;
    width: 100%;
    height: 100vh;

    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center center; /* keeps the important part centered */
    background-repeat: no-repeat;
}

/* Invisible clickable area over the black button */
.contact-hotspot {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    bottom: 75px; /* moved up more */

    width: 160px;
    height: 55px;

    opacity: 0;
    cursor: pointer;
}

@media (max-width: 600px) {
  .hero {
    background-position: center top;
  }
}

/* MOBILE FIXES */
@media (max-width: 768px) {
    .hero {
        background-size: cover;
        background-position: center top; /* adjust to top, center, or 30% depending on your image */
        height: 100vh;
    }

    .hero-content {
        padding: 0 20px;
        text-align: center;
    }

    .contact-button {
        margin-top: 20px;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
    }
}