.text-content {
    text-align: left; /* Center align text */
    margin-top: 10px; /* Space between image and text */
}

.text-content h1 {
  margin-bottom: 10px; /* Space between image and text */
}

/* Make the image fill the container */
.bg-image-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Ensures the image doesn't overflow the container */
  }
  
  .bg-image-container img {
    object-fit: cover; /* Ensures the image covers the entire container */
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;  /* Sends the image behind the text content */
  }

  .bg-content-container {
    position: relative;
    z-index: 2; /* Ensure content appears on top */
    padding: 20px;
    color: white;  /* Change text color for readability */
    width: 80%;
    max-width: 800px;
  }

  .parent-container {
    display: flex;
    justify-content: center;  /* Horizontally center */
    align-items: center;      /* Vertically center */
    min-height: 100vh;        /* Make the parent container at least 100% of the viewport height */
  }