/* ---------- Person Block Container ---------- */
.person-block {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 width: 260px;
 margin: 20px auto;
}

/* ---------- Circular Profile Image ---------- */
.person-block img {
 width: 220px;
 height: 220px;
 border-radius: 50%;
 object-fit: cover;
 border: 6px solid #99c7c6; /* Continental light blue */
}

/* ---------- Content Below Image ---------- */
.content-block-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 margin-top: 15px;
}

/* Name */
.content-block-content h2 {
 font-size: 1.75rem;
 font-weight: 700;
 color: #322f33; /* Continental dark */
 margin: 10px 0 5px;
}

/* Role Title */
.content-block-content p {
 font-size: 1.1rem;
 color: #788557; /* Olive green */
 margin: 0 0 10px;
}

/* About Me Link */
.content-block-content a {
 font-weight: bold;
 font-size: 1rem;
 color: #f26741; /* Orange highlight */
 text-decoration: underline;
 transition: color 0.3s ease;
}

.content-block-content a:hover {
 color: #322f33; /* Dark on hover */
}

/* ---------- Modal Styles ---------- */
.modal-overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 justify-content: center;
 align-items: center;
 z-index: 1000;
}

.modal-overlay.active {
 display: flex;
}

/* Modal Content Box */
.modal-content {
 background: #ffffff;
 border-radius: 8px;
 max-width: 800px;
 width: 90%;
 padding: 30px;
 position: relative;
 color: #322f33;
 text-align: left;
 overflow-y: auto;
 max-height: 80vh;
}

/* Close Button */
.modal-close {
 position: absolute;
 top: 15px;
 right: 20px;
 font-size: 2rem;
 color: #f26741;
 cursor: pointer;
}

/* Modal Headings */
.modal-content strong {
 color: #788557; /* Olive */
 display: block;
 margin: 20px 0 10px;
}

/* Modal Paragraph Text */
.modal-content p {
 margin: 0 0 15px;
 font-size: 1rem;
 line-height: 1.6;
 color: #322f33;
}

/* Scrollbar Styling (optional but nice) */
.modal-content::-webkit-scrollbar {
 width: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
 background-color: #99c7c6;
 border-radius: 5px;
}





/* TOP BANNER TITLE STYLE */
.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: 10px 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-body {
 text-align: center;
 color: #5f7549;
 font-size: 1.2em;
 max-width: 800px;
 margin: 10px auto;
}




/* TAN BACKGROUND CONTAINER */
.banner-container {
 width: 100%;
 display: flex;
 justify-content: center;
 background-color: #e7e4de;
 border-radius: 8px;
 padding: 60px 20px 40px 20px;
 margin-top: 20px; /* Add spacing between image and tan box */
}

/* CONTENT WIDTH & PADDING */
.banner-content {
 max-width: 1200px;
 width: 100%;
 padding: 0 20px;
}

/* IMAGE AT TOP */
.banner-image {
 width: 100%;
 height: 400px;
 object-fit: cover;
 border-radius: 8px;
}

/* CALENDAR */
.calendar-section {
 margin-top: 60px;
 padding: 20px;
 background: #e7e4de;
 border-radius: 8px;
 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.section-subtext {
 text-align: center;
 color: #5f7549; /* The green you’re using elsewhere */
 font-size: 1.2em;
 max-width: 800px;
 margin: 10px auto;
}

/* MEET OUR AMBASSADORS */
h2.ambassadors-heading {
 font-size: 4rem !important;
 font-weight: 800;
 color: #322f33;
 text-align: center;
 margin-bottom: 2rem;
 position: relative;
 width: 100%;
}

.ambassadors-heading::after {
 content: '';
 width: 140px;
 height: 6px;
 background-color: #b87c9e;
 margin: 12px auto 0 auto;
 border-radius: 3px;
 display: block;
}