/* CSS for the blue header banner */
header {
    background-color: #3498db; /* Blue background color */
    color: #ffffff; /* White text color */
    padding: 15px; /* Increased padding around content for better spacing */
}

header .banner {
    text-align: center; /* Center align text */
    padding: 15px 0; /* Increased vertical padding */
}

header .banner h1 {
    margin: 0; /* Remove default margin */
    font-size: 36px; /* Slightly larger font size for better emphasis */
}

header nav ul {
    list-style-type: none; /* Remove default list style */
    padding: 0; /* Remove default padding */
    text-align: center; /* Center align list items */
}

header nav ul li {
    display: inline; /* Display list items inline */
    margin-right: 15px; /* Increase margin between list items */
}

header nav ul li a {
    color: #ffffff; /* White text color for links */
    text-decoration: none; /* Remove underline from links */
}

/* Style for the image container */
.main-image-container {
    position: relative; /* Position container relative to the document */
    margin: 20px auto; /* Center align the image and add margin */
    max-width: 100%; /* Ensure the image container adjusts to screen size */
    height: auto; /* Maintain aspect ratio */
}

.main-image {
    display: block; /* Make the image a block element */
    width: 100%; /* Ensure the image fits within its container width */
    height: auto; /* Allow height to adjust based on width */
    max-height: 300px; /* Optional max height */
    object-fit: cover; /* Ensure the image covers the fixed height without distortion */
    margin: 0 auto; /* Center align the image horizontally */
}

.image-overlay {
    position: absolute; /* Position text absolutely within its container */
    top: 50%; /* Position text at the vertical center */
    left: 50%; /* Position text at the horizontal center */
    transform: translate(-50%, -50%); /* Center text precisely */
    text-align: center; /* Center-align text within the container */
    color: white; /* Text color */
    font-size: 36px; /* Slightly larger font size for better emphasis */
    font-weight: bold; /* Bold the text */
    background-color: rgba(52, 152, 219, 0.7); /* Semi-transparent blue background */
    padding: 15px; /* Increased padding around text */
}

/* Footer styling */
footer {
    text-align: center;
    padding: 15px; /* Increased padding for better spacing */
    background-color: #e1e1e1; /* Slightly adjusted background color for contrast */
    color: #333;
    margin-top: 20px;
}