/* MAIN-HEADER after FIXED-TOP-BAR of 70px */

#main-head-image {
  z-index: 0;
  position: relative; /* anchor the absolute overlay on the image */
}

.head-image-style {
  background-color: rgb(11,11,11);
  opacity: 0.8;
  width: 100%;
  padding-left: 8%;
  padding-right: 8%;
  box-sizing: border-box;
}

.head-image-style img {
  max-width: 100%;
  height: auto;
  display: block;
}

.header-footer-descript-style {
  background-color: rgba(0, 0, 0, 0.8);
 
  width: 100%;
  height: auto;
}

.header-font-style {
  color: rgba(250, 250, 250, 1);
}

/* Overlay grid: 1 row, 3 columns */
.overlay-grid-of-HeadLineImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding-left: 8%;
  padding-right: 8%;
  box-sizing: border-box;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr; /* see-through | lady | message */
  grid-template-areas: "see lady msg";
  gap: 0;
}

/* Column 1: see-through */
.see-through-of-HeadLineImage { grid-area: see; }

/* Column 2: lady silhouette */
.lady-of-HeadLineImage { grid-area: lady; }

/* Column 3: message box with external SVG background */
.message-of-HeadLineImage {
  grid-area: msg;
  position: relative;
  display: flex;
  align-items: flex-start;   /* push content to the top */
  justify-content: flex-end; /* push content to the right */
  text-align: right;         /* align text to the right */
  color: #fff;

  /* spacing from top/right edges */
  padding-top: 140px;   /* adjust height from top */
  padding-right: 50px; /* adjust distance from right */


  /* External SVG background */
  background-image: url("lady_bg.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.message-heading-of-HeadLineImage {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;

  z-index: 1; /* text sits above background */
}