/* === Hero Section (image only) === */
.hero {
  background: #f7f5e7;         /* parchment background */
  padding: 2rem 1rem;
  width: 100%;
}

.hero .container {
  text-align: center;
}

.hero-image img {
  max-width: 800px;            /* nice size on desktop */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* softer shadow */
  border: 2px solid #0b3d0b;   /* subtle dark green frame */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-image img {
    max-width: 100%;
  }
}