.hero-section {
  position: relative;
  width: 100%;
  height: 100vh; /* full viewport height */
  overflow: hidden;
}

.hero-wrapper {
  width: 100%;
  height: 100%;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes image fill area without distortion */
  object-position: center;
  display: block;
}