/*
  The .overlay div will hold the background image and
  an optional semi-transparent color layer (the actual 'overlay')
  to make the text in .hero-content more readable.
*/
.background {
  /* Set the width and height to cover its parent container */
  width: 100%;
  height: 100%;

  /* --- BACKGROUND IMAGE PROPERTIES --- */

  /* 1. Specify the image URL */
  /* Replace 'path/to/your/image.jpg' with the actual path to your image file. */
  background-image: url('../images/bg.png');

  /* 2. Scale the image to cover the entire div area */
  background-size: cover;

  /* 3. Center the image within the div */
  background-position: center;

  /* 4. Optional: If you want an actual color overlay on top of the image */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  background-blend-mode: overlay; /* Blends the color with the image */

  /* 5. Optional: Prevent the image from scrolling with the page */
  /* background-attachment: fixed; */
}

/* top section */
.hero-section {
  position: relative; /* Essential for positioning the overlay correctly */
  height: 40vh;
  overflow: hidden;
}
/* main section */
.main-section {
  position: relative;
  height: 60vh;
  overflow: auto;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Ensures the text is on top of the overlay */
  color: #ffffff; /* Make the text white for better contrast */
  text-align: center;
  padding: 20px;
}
/*
  The hex color #57ACD6 is a light, vibrant blue.
  We create a custom class 'custom-footer-bg' to apply it.
*/
#footer {
    background-color: #57ACD6 !important; /* Use !important to ensure it overrides Bootstrap's .bg-dark */
}

/* Optional: Adjust text color if needed, but 'text-light' should handle it */
#footer {
    color: #f8f9fa !important; /* Ensures the light text is applied */
}