/* assets/css/hero.css
    hero section + overlay text */

#hero {
  position: relative;
  height: 100vh;   /* full viewport height */
  width: 100%;
}

.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures image fills hero area */
  display: block;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  background: transparent;
  z-index: 100; /* above image, below headers */
}

.overlay-text h1 {
    color: yellow;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.overlay-text h2 {
  color: yellow; 
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

.overlay-text p {
  color: yellow; /* black for readability */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}