.page-title {
 text-align: center;
 font-size: 48px !important; 
 color: #322f33;
 text-transform: uppercase;
 font-weight: 900;
 margin-bottom: 10px;
 padding-bottom: 5px;
 display: block;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
 border-bottom: 2px solid #99c7c6; /* Teal line */
 position: relative;
line-height: 1.2;
letter-spacing: 2px;
}

.page-title::after {
 content: "";
 display: block;
 width: 100%; 
 height: 2px;
 background: linear-gradient(to right, #b87c9e, #99c7c6);
 margin: 8px auto 0; /* Add spacing above the line */
}

/* Sub-Headers */
.section-header {
 font-size: 28px;
 font-weight: 700;
 color: #322f33;
 margin-bottom: 15px;
 text-align: center;
line-height: 1.3;
}

/* Section Divider */
.section-divider {
 width: 80%;
 max-width: 800px;
 margin: 30px auto;
 border-top: 2px solid #e7e4de; /* Light tan */
 border-radius: 1px;
 height: 2px;
}


/* Container for the tan background */
.banner-container {
 width: 100%;
 display: flex;
 justify-content: center; /* Centers the content inside the container */
 background-color: #e7e4de; /* Tan background */
border-radius: 8px;
 padding: 40px 0; /* Vertical padding for extra space */
}

/* The content inside the banner with the image and intro text */
.banner-content {
 max-width: 1200px; /* Set a maximum width for the container */
 width: 100%; /* Ensure the content container is responsive */
 padding: 0 20px; /* Horizontal padding */
}

/* Style for the banner image */
.banner-image {
 width: 100%; /* Image takes up full width of its container */
 height: 400px; /* Set a height for the image */
 object-fit: cover; /* Ensure the image maintains its aspect ratio while covering the area */
border-radius: 8px;
}