/* Basic Reset and Typography */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Light gray background */
    color: #333; /* Dark gray text */
}

/* Header Styling */
.site-header {
    text-align: center;
    background-color: #fff;
    padding-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

 /* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 48px;
  left: 40px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

.header-image {
    /* Make the image span the full width of the header */
    width: 100%;
    /* Set a max height so it doesn't get too tall */
    max-height: 350px;
    /* Ensure the image covers the area without distortion */
    object-fit: cover;
    display: block; /* Removes any extra space below the image */
}

.site-header h1 {
    margin: 20px 0 0;
    color: #0056b3; /* A nice blue color */
}

/* --- Two-Column Layout --- */

.content-container {
    /* Use Flexbox for the column layout */
    display: flex;
    /* Center the container and give it a max width */
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px; /* Padding on the sides for smaller screens */
    gap: 30px; /* Space between the columns */
}

.column {
    /* Each column takes up equal space */
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.column h2 {
    color: #007bff; /* Bright blue for headings */
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
    margin-top: 40px;
}

/* --- Media Query for Responsiveness --- */
/* On screens smaller than 768px, stack the columns vertically */
@media (max-width: 768px) {
    .content-container {
        flex-direction: column;
        gap: 20px; /* Reduce gap when stacked */
    }
}