body {
    background-image: url('../images/splash.jpg'); /* Adjust the path if your image is elsewhere */
    background-size: cover; /* This ensures the image covers the entire background, might crop some parts */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center center; /* Centers the image */
    background-attachment: fixed; /* Keeps the background fixed while scrolling - optional */
    min-height: 100vh; /* Ensures the body takes at least the full viewport height */
    display: flex; /* Helps in centering content if needed, but might affect layout */
    flex-direction: column; /* Stacks children vertically */
}

/* Optional: Add a semi-transparent overlay to make text more readable */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Adjust color and opacity (0.3 is 30% opacity) */
    z-index: -1; /* Puts the overlay behind the body content but in front of the background image */
}

/* Adjust text color for better contrast if needed */
.container h1, .container .lead {
    color: #ffffff; /* Example: white text if your background is dark */
    /* Consider adding a text-shadow for even better readability */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Ensure the navbar doesn't get hidden or adopt weird background issues */
.navbar {
    position: relative; /* Or sticky, fixed depending on desired behavior */
    z-index: 10; /* Ensures navbar is above the pseudo-element overlay */
}

/* Make the main content area distinct if the background is busy */
.container.mt-5.text-center {
    background-color: rgba(255, 255, 255, 0.1); /* Optional: very light, translucent background for the content box */
    padding: 20px;
    border-radius: 8px;
}