html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
  font-family: Arial, sans-serif;
}

/* Full-width Header Image Section */
.header-image {
  position: relative;
  width: 100vw;         /* Use full viewport width */
  height: 400px;
  overflow: hidden;
}

.header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.6);
}

/* Centered text on top of the image */
.header-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 3.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 0 15px;
}





.middle-space {
      flex: 1;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
      color: #333;
    }