/* Style for the header background image */
[data-theme=dark] #landing-header {
  background-image: url("../img/Sri_Lankan_Manuscript_6_2.jpg");
}

[data-theme=light] #landing-header,
:root:not([data-theme=dark]) #landing-header {
  background-image: url("../img/Sri_Lankan_Manuscript_6_2-light.jpg"); /* Light-optimized version */
}
#landing-header {
  background-size: cover; /* This is important to make the image cover the header area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  color: white; /* Set text color for contrast against the background image */
  text-align: center; /* Center the text if you want*/
  padding: 100px 20px; /* Adjust padding as needed for the header height */
  margin-bottom: 2rem; /* gives some space under the header */
}

/* Add a dark overlay to ensure text visibility */
#landing-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none; /* This makes sure it does not block interactions */

}

#landing-header > * {
    position: relative;
    z-index: 2;
}