html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Desktop + tablet hero section */
.hero {
  width: 100%;
  min-height: 100vh;

  /* Background image */
  background-image: url('../images/tonto1.jpg');
  background-repeat: no-repeat;

  /* Center the image BOTH ways */
  background-position: center center;

  /* Cinematic full-screen on desktop */
  background-size: cover;

  /* Fallback color */
  background-color: #d7f3f0;

  /* Soft fade-in */
  opacity: 0;
  animation: fadeIn 1.8s ease-in-out forwards;
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .hero {
    /* Show full image on phones */
    background-size: contain;

    /* Keep it centered vertically AND horizontally */
    background-position: center center;

    background-attachment: scroll;
  }
}