/* --- Custom Dynamic Slider Styling (replacing Bootstrap carousel) --- */

.custom-slider {
	position: relative;
	width: 100%;
	max-width: 1400px; /* Adjust max width for the slider content as desired */
	margin: 30px auto; /* Center the slider on the page */
	overflow: hidden; /* Crucial for hiding extra slides that are off-screen */
	border-radius: 15px; /* Aesthetic: Matches the card border-radius for an integrated look */
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
	background-color: #f0f4f0; /* Background color for the slider container itself */
}

.slider-track-wrapper {
	overflow: hidden; /* Ensures only one slide is visible at a time by clipping content */
	width: 100%;
}

.slider-track {
	display: flex; /* Arranges slides in a row */
	transition: transform 0.6s ease-in-out; /* Smooth sliding animation for the track */
}

.slider-slide {
	flex-shrink: 0; /* Prevents individual slides from shrinking to fit the container */
	width: 100%; /* Each slide takes up 100% of the slider-track-wrapper's width */
	box-sizing: border-box; /* Ensures padding is included within the 100% width */
	padding: 40px 20px; /* Adjusted: Reduced horizontal padding for the slide itself */
	display: flex; /* Use flexbox to center the content card horizontally */
	justify-content: center;
	align-items: center; /* Vertically centers the content card within the slide */
}

/* Featured Story Card within Custom Slider - These classes already exist,
   but we ensure they apply correctly within our custom slider. */
.custom-slider .featured-story-card {
	background-color: #ffffff;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Prominent shadow for the card */
	display: flex;
	align-items: stretch; /* Ensures image and content areas stretch to full height */
	width: 100%; /* Forces the card to take full width of its parent (.slider-slide) */
	max-width: 100%; /* Ensures it doesn't exceed 100% of its parent's width */
}

/* Ensure the image container is taller and its content is centered */
.custom-slider .featured-story-image-container {
	height: 380px; /* Increased height for a longer vertical appearance */
	overflow: hidden;
	position: relative;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	display: flex; /* Added to use flexbox for centering */
	justify-content: center; /* Horizontally center the image */
	align-items: center; /* Vertically center the image */
}

.custom-slider .featured-story-image {
	/* Ensure the image itself can be centered if it's smaller than its container */
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* Use 'contain' to ensure the whole image is visible, 'cover' to fill and crop */
	object-position: center; /* Center the image within its container */
}


.custom-slider .featured-story-content {
	padding: 45px 20px; /* Adjusted: Further reduced horizontal padding for the content area */
	display: flex;
	flex-direction: column;
	justify-content: center; /* Vertically center content */
	flex-grow: 1; /* Allow content to grow and take available space */
}

/* Adjust font size for titles to help prevent wrapping if names are long */
.custom-slider .featured-story-title {
	font-size: 1.8rem; /* Slightly reduced font size from 1.9rem */
	font-weight: 800;
	color: #2c3e50;
	margin-bottom: 12px;
	line-height: 1.2;
	white-space: normal; /* Ensure text can wrap if needed, but give it space */
}

/* Ensure summary text also has flexible width */
.custom-slider .featured-story-summary {
	font-size: 1.05rem;
	color: #555;
	line-height: 1.6;
	margin-bottom: 20px;
	flex-grow: 1;
	white-space: normal;
}


/* Responsive Adjustments for Featured Story Card (unchanged, these will now apply to
   the .featured-story-card elements rendered inside the .custom-slider) */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
	.custom-slider .featured-story-card {
		flex-direction: column; /* Stacks image and content vertically on smaller screens */
		max-width: 600px; /* Adjusts max-width for the stacked layout on tablets */
	}
	.custom-slider .featured-story-image-container {
		height: 320px; /* Adjusted image height for stacked layout on tablets */
		border-bottom-left-radius: 0;
		border-top-right-radius: 15px;
	}
	.custom-slider .featured-story-content {
		padding: 35px 25px; /* Adjusted padding for tablets */
	}
	.custom-slider .featured-story-title {
		font-size: 1.6rem;
	}
	.custom-slider .featured-story-summary {
		font-size: 1rem;
	}
}

@media (max-width: 767.98px) { /* Small devices (phones) */
	.custom-slider .featured-story-image-container {
		height: 280px; /* Further reduced height for smaller phones */
	}
	.custom-slider .featured-story-content {
		padding: 30px 20px; /* Further reduced padding */
	}
	.custom-slider .featured-story-title {
		font-size: 1.4rem;
	}
	.custom-slider .featured-story-summary {
		font-size: 0.95rem;
	}
	/* Controls are hidden on very small screens via the media query below */
}

/* Slider Controls (Arrows) */
.slider-control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: #5a9740; /* ASF Green background for controls */
	color: #ffffff; /* White icon color */
	border: none;
	border-radius: 50%; /* Makes controls circular */
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem; /* Icon size */
	cursor: pointer;
	opacity: 0.7; /* Slightly transparent when not hovered */
	transition: opacity 0.3s ease, background-color 0.3s ease;
	z-index: 10; /* Ensures controls are above the slides */
}

.slider-control:hover {
	opacity: 1; /* Fully opaque on hover */
	background-color: #4a8034; /* Darker green on hover */
}

.slider-control.prev {
	left: 15px; /* Position 'previous' arrow on the left */
}

.slider-control.next {
	right: 15px; /* Position 'next' arrow on the right */
}

/* Slider Indicators (Dots) */
.slider-indicators {
	position: absolute;
	bottom: 20px; /* Position indicators at the bottom */
	left: 50%;
	transform: translateX(-50%); /* Center the indicators horizontally */
	display: flex; /* Arranges dots in a row */
	gap: 10px; /* Space between dots */
}

.slider-indicator {
	width: 12px;
	height: 12px;
	background-color: #5a9740; /* ASF Green for dots */
	border-radius: 50%; /* Makes dots circular */
	opacity: 0.4; /* Slightly transparent when not active */
	cursor: pointer;
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

.slider-indicator.active {
	opacity: 1; /* Fully opaque for the active dot */
	background-color: #4a8034; /* Darker green for active indicator */
}

/* Responsive: Hide controls on small screens to save space */
@media (max-width: 767.98px) {
	.slider-control {
		display: none; /* Hide navigation arrows on very small screens */
	}
	.slider-indicators {
		bottom: 10px; /* Move indicators slightly higher if arrows are hidden */
	}
}



/* All Stories Grid Section - no change here, but included for context */
.all-stories-grid {
	padding: 60px 0;
	background-color: #fcfcfc;
}

/* Responsive Adjustments for Carousel */
@media (max-width: 991.98px) { /* Medium devices (tablets) */
	.featured-story-card {
		flex-direction: column; /* Stack image and content vertically */
		max-width: 600px; /* Adjusted max-width for stacked layout on tablets */
	}
	.featured-story-image-container {
		height: 250px; /* Adjusted image height for stacked layout */
		border-bottom-left-radius: 0;
		border-top-right-radius: 15px; /* Added for top-right when stacked */
	}
	.featured-story-content {
		padding: 25px;
	}
	.featured-story-title {
		font-size: 1.6rem;
	}
	.featured-story-summary {
		font-size: 1rem;
	}
}

@media (max-width: 767.98px) { /* Small devices (phones) */
	.featured-story-image-container {
		height: 200px; /* Further reduced height for smaller phones */
	}
	.featured-story-content {
		padding: 20px; /* Further reduced padding */
	}
	.featured-story-title {
		font-size: 1.4rem;
	}
	.featured-story-summary {
		font-size: 0.95rem;
	}
	.carousel-control-prev,
	.carousel-control-next {
		display: none; /* Hide controls on very small screens to save space */
	}
}

/* --- SVP Projects & Stories Section --- */

.svp-stories-section {
	background-color: #f8fcf8; /* A very light, subtle background for the section */
	padding: 60px 0; /* Standard section padding */
}

.svp-stories-section .section-title {
	font-size: 2.2rem;
	font-weight: 700;
	color: #333;
	margin-bottom: 0.75rem;
}

.svp-stories-section .lead {
	font-size: 1.15rem;
	color: #6c757d;
}

/* Individual News Card */
.news-card {
	background-color: #ffffff;
	border-radius: 12px;
	overflow: hidden; /* Important for image corners */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Soft shadow */
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	display: flex; /* Flex container for content */
	flex-direction: column; /* Stack image and body */
	border: none; /* Remove default Bootstrap card border */
}

.news-card:hover {
	transform: translateY(-7px); /* Lift more on hover */
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

.news-card-image-container {
	width: 100%;
	height: 200px; /* Fixed height for consistent image size */
	overflow: hidden; /* Crop images if they exceed height */
	position: relative;
}

.news-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensures image covers the area without distortion */
	object-position: center; /* Center the image within the container */
	transition: transform 0.5s ease; /* Smooth zoom on hover */
}

.news-card:hover .news-card-image {
	transform: scale(1.05); /* Slightly zoom image on card hover */
}

.news-card-body {
	padding: 20px; /* Generous padding inside the card */
	flex-grow: 1; /* Allows body to take up remaining space, keeping cards equal height */
	display: flex;
	flex-direction: column;
}

.news-card-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #2c3e50; /* Dark heading color */
	margin-bottom: 10px;
	line-height: 1.3;
}

.news-card-summary {
	font-size: 0.95rem;
	color: #666;
	line-height: 1.6;
	margin-bottom: 15px; /* Space above "Read More" button */
	flex-grow: 1; /* Allows summary to take up available space before the link */
}

.read-more-btn {
	display: inline-block;
	color: #5a9740; /* Green text for read more */
	font-weight: 600;
	text-decoration: none;
	transition: color 0.3s ease;
	align-self: flex-start; /* Aligns the button to the start of the flex container */
	margin-top: auto; /* Pushes the button to the bottom of the card-body */
}

.read-more-btn:hover {
	color: #4a8034; /* Darker green on hover */
	text-decoration: underline;
}

/* Archive button styling */
.svp-stories-section .btn-outline-secondary {
	border-color: #5a9740; /* Green border */
	color: #5a9740; /* Green text */
	font-weight: 600;
	transition: all 0.3s ease;
}

.svp-stories-section .btn-outline-secondary:hover {
	background-color: #5a9740; /* Green background on hover */
	color: #ffffff; /* White text on hover */
	border-color: #5a9740;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 991.98px) { /* Adjusts for medium screens */
	.svp-stories-section .col-lg-4 {
		flex: 0 0 50%; /* Two columns on medium screens */
		max-width: 50%;
	}
}

@media (max-width: 767.98px) { /* Adjusts for small screens */
	.svp-stories-section .col-md-6,
	.svp-stories-section .col-lg-4 {
		flex: 0 0 100%; /* One column on small screens */
		max-width: 100%;
	}
	.news-card-title {
		font-size: 1.2rem;
	}
	.news-card-summary {
		font-size: 0.9rem;
	}
	.news-card-image-container {
		height: 180px; /* Slightly smaller image height on mobile */
	}
}

.header-extras ul li:first-child {
	margin-right: 15px; /* Adjust this value as needed for desired space */
	/* You can also use padding-right if you prefer, e.g., padding-right: 15px; */
}

/* Optional: If you want to ensure consistent button height or alignment, you can add */
.header-extras ul li {
	display: inline-block; /* Ensure list items behave like blocks in line */
	vertical-align: middle; /* Align buttons vertically if they have slightly different heights */
}

/* --- Banking Details Section Styling --- */

/* Section title styling */
.banking-details-section .section-title {
	font-size: 2.2rem; /* Make heading prominent */
	font-weight: 700;
	color: #333; /* Dark color for text */
	margin-bottom: 0.75rem; /* Space between title and underline */
}



/* General text within the section */
.banking-details-section .lead {
	font-size: 1.15rem;
	line-height: 1.6;
	color: #6c757d; /* Muted text color */
}

/* Link style for the "Debit Order Form" */
.banking-details-section .text-asf-green {
	color: #5a9740 !important; /* Force green color for the link */
	transition: color 0.3s ease;
}

.banking-details-section .text-asf-green:hover {
	color: #4a8034 !important; /* Slightly darker green on hover */
}

/* Card containing banking details */
.banking-details-card {
	border: 1px solid rgba(0, 0, 0, 0.1); /* Light border */
	border-radius: 8px; /* Rounded corners for the card */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

/* Individual list items within the card */
.banking-details-card .list-group-item {
	padding: 1rem 1.5rem; /* More padding for spacious feel */
	border-color: rgba(0, 0, 0, 0.08); /* Lighter separator lines */
	font-size: 1rem;
	color: #333;
}

.banking-details-card .list-group-item:first-child {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.banking-details-card .list-group-item:last-child {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-bottom: none; /* Remove border from the last item */
}

/* Label and value within each list item */
.banking-details-card .detail-label {
	font-weight: 600; /* Make the label bold */
	color: #4a4a4a; /* Slightly darker for labels */
}

.banking-details-card .detail-value {
	color: #555; /* Standard value text color */
	text-align: right; /* Align value to the right */
}

/* Footer text below the card */
.banking-details-section .small-text {
	font-size: 0.9em;
	line-height: 1.5;
	color: #777; /* Softer color for legal/NPO text */
	margin-bottom: 0.5rem;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
	.banking-details-section .section-title {
		font-size: 1.8rem;
	}

	.banking-details-card .list-group-item {
		flex-direction: column; /* Stack label and value vertically on small screens */
		align-items: flex-start; /* Align stacked items to the left */
		padding: 0.8rem 1rem;
	}

	.banking-details-card .detail-value {
		text-align: left; /* Align value to the left when stacked */
		margin-top: 5px; /* Space between label and value when stacked */
	}
}
/* Wrapper for the row of cards to add some top margin */
.column-card-row {
	margin-top: 3rem; /* Adjust as needed */
}

/* Styling for each individual donor column card */
.donor-column-card {
	background-color: #ffffff; /* White background */
	border-radius: 12px; /* More pronounced rounded corners */
	overflow: hidden; /* Ensures content respects border-radius */
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth hover effects */
	display: flex; /* Use flexbox to make card-body fill height */
	flex-direction: column; /* Stack content vertically */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
	padding: 1.5rem; /* Consistent padding inside the card */
	border: 1px solid rgba(0, 0, 0, 0.08); /* Lighter border */
}

/* Shadow effect for cards */
.card-shadow {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Soft, subtle shadow */
}

/* Hover effect for cards */
.donor-column-card:hover {
	transform: translateY(-5px); /* Lift card slightly on hover */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* Slightly stronger shadow on hover */
}

/* Styling for the card body (content area) */
.donor-column-card .card-body {
	flex-grow: 1; /* Allows the body to take up available space, ensuring consistent height with h-100 */
	padding: 0; /* Remove default padding from Bootstrap card-body if it conflicts */
}

/* Styling for the titles within the cards */
.donor-column-card .card-title {
	color: #333; /* Darker color for headings */
	font-size: 1.6rem; /* Slightly larger font for prominence */
	margin-bottom: 1rem; /* Space below title */
	font-weight: 600; /* Make titles a bit bolder */
}

/* Paragraph styling within the cards */
.donor-column-card p {
	color: #555; /* Slightly lighter text for readability */
	line-height: 1.6; /* Improved line spacing */
	margin-bottom: 1rem; /* Space between paragraphs */
}

/* Styling for the list items (impact points) */
.donor-column-card .impact-points li {
	margin-bottom: 0.75rem; /* Spacing between list items */
	color: #444; /* Darker text for list items */
	display: flex; /* Align icon and text */
	align-items: flex-start; /* Align icon to the top of the text */
}

.donor-column-card .impact-points li:last-child {
	margin-bottom: 0; /* No margin on the last item */
}

/* Styling for the check icons */
.asf-check-icon {
	color: #5a9740; /* Your green primary color */
	margin-right: 0.75rem; /* Space between icon and text */
	font-size: 1.1rem; /* Slightly larger icon */
	min-width: 20px; /* Ensures consistent spacing even with short text */
}

/* Blockquote styling within cards */
.donor-column-card .asf-quote-block {
	border-left: 4px solid #5a9740; /* Green border on the left */
	padding-left: 1rem;
	margin: 1.5rem 0; /* Vertical spacing */
	font-style: italic;
	color: #444;
}

.donor-column-card .asf-quote-block p {
	margin-bottom: 0.5rem;
}

.donor-column-card .asf-quote-block footer {
	font-size: 0.9em;
	color: #777;
	text-align: right; /* Align footer to the right */
}

/* Small screen adjustments */
@media (max-width: 767.98px) {
	.donor-column-card {
		padding: 1.2rem; /* Slightly less padding on small screens */
	}

	.donor-column-card .card-title {
		font-size: 1.4rem; /* Smaller title font on small screens */
	}
}

/* Requirements Section Cards & List Item Enhancement */
#requirements-section .card {
	/* Retain existing styles like background-color, border, border-radius, height */
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Existing soft shadow */
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Ensure transition for hover */
}

#requirements-section .card:hover {
	transform: translateY(-8px); /* More pronounced lift on hover */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

#requirements-section .card ul.applications-list-items li {
	/* Retain existing styles like font-size, color, line-height, position, display, align-items */
	margin-bottom: 15px; /* Slightly increased spacing between list items */
}
#requirements-section .card ul.applications-list-items li:last-child {
	margin-bottom: 0; /* Remove bottom margin for the last item in the list */
}

/* Style for the new icon wrapper */
.list-item-icon-wrapper {
	flex-shrink: 0; /* Prevent icon wrapper from shrinking */
	width: 35px; /* Fixed width for the circular background */
	height: 35px; /* Fixed height for the circular background */
	background-color: #e6f5f0; /* Light green background for the circle */
	border-radius: 50%; /* Make it circular */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px; /* Space between the icon circle and the text */
	transition: background-color 0.3s ease, transform 0.3s ease; /* For subtle hover effects */
}

.list-item-icon-wrapper i {
	font-size: 1.2em; /* Size of the icon inside the circle */
	color: #59963f; /* ASF Accent Green for the icon color */
	line-height: 1; /* Helps vertically align the icon within the circle */
}

/* Optional: Slight effect on icon when the entire card is hovered */
#requirements-section .card:hover .list-item-icon-wrapper {
	background-color: #d1ede4; /* Slightly darker light green on card hover */
	transform: scale(1.05); /* Subtle scale effect on the icon wrapper */
}

/* Responsive adjustment for list items on smaller screens */
@media (max-width: 767px) {
	#requirements-section .card ul.applications-list-items li {
		margin-bottom: 12px; /* Slightly less margin on mobile if needed */
	}
	.list-item-icon-wrapper {
		width: 30px;
		height: 30px;
		margin-right: 12px;
	}
	.list-item-icon-wrapper i {
		font-size: 1.1em;
	}
}

/* ASF Supported Schools Section - Search Bar */
.asf-school-search-bar .form-control {
	border-radius: 8px 0 0 8px !important; /* Rounded left, straight right */
	border-color: #dce8e4;
	padding: 8px 12px; /* Reduced padding for a smaller input field */
	height: 40px; /* Reduced height for a smaller input field */
	font-size: 0.95em; /* Slightly smaller font size */
}

.asf-school-search-bar .btn-primary {
	background-color: #59963f; /* ASF Green */
	border-color: #59963f;
	color: #fff;
	border-radius: 0 8px 8px 0 !important; /* Straight left, rounded right */
	padding: 8px 15px; /* Reduced padding for a smaller button */
	font-weight: 600;
	font-size: 0.95em; /* Slightly smaller font size */
}
.asf-school-search-bar .btn-primary:hover {
	background-color: #407b36;
	border-color: #407b36;
}

/* ASF Schools List Wrapper for Expand/Collapse */
.asf-schools-list-wrapper {
	position: relative;
	max-height: 300px; /* Initial collapsed height (adjust as needed for ~5 schools) */
	overflow-y: hidden;
	transition: max-height 0.5s ease-in-out; /* Smooth transition for expand/collapse */
}

.asf-schools-list-wrapper.is-expanded {
	max-height: 2000px; /* Sufficiently large height to show all content */
	overflow-y: auto; /* Allow scrolling once expanded */
}

/* Gradient overlay to indicate more content when collapsed */
.asf-schools-list-wrapper:not(.is-expanded) .expand-overlay {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px; /* Height of the gradient fade */
	background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none; /* Allows clicks to pass through */
	z-index: 2; /* Ensures it's above table rows */
}

/* Expand/Collapse Button */
#toggleSchoolsList {
	background-color: #59963f; /* ASF Accent Green */
	border-color: #59963f;
	color: #fff;
	font-weight: 600;
	padding: 10px 25px;
	border-radius: 8px;
	transition: all 0.3s ease;
}

#toggleSchoolsList:hover {
	background-color: #407b36; /* Darker green on hover */
	border-color: #407b36;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ASF Supported Schools Section */
#asf-schools-section {
	background-color: #f8f9fa; /* Light grey background */
}

#asf-schools-section .heading-section .lead {
	font-size: 1em;
	color: #555;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.asf-schools-table-container {
	border-radius: 12px;
	overflow: hidden; /* Ensures rounded corners apply to table content */
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); /* Soft shadow for the table container */
	background-color: #ffffff; /* White background for the table area */
	border: 1px solid #e0f0ea; /* Subtle light green border */
}

.asf-schools-table {
	width: 100%;
	margin-bottom: 0; /* Remove default table bottom margin */
	border-collapse: collapse; /* Ensure borders are merged */
}

.asf-schools-table th,
.asf-schools-table td {
	padding: 15px;
	vertical-align: middle;
	border-top: 1px solid #e9ecef; /* Light separator for rows */
	font-size: 0.95em;
	color: #333;
}

.asf-schools-table th {
	background-color: #e6f5f0; /* Light mint green for table header */
	color: #2c3e50;
	font-weight: 700;
	text-align: left;
	border-bottom: 2px solid #dce8e4; /* Stronger bottom border for header */
}

.asf-schools-table tbody tr:first-child td {
	border-top: none; /* No top border for the very first row of data */
}

.asf-schools-table tbody tr:nth-child(even) {
	background-color: #fcfcfc; /* Very subtle alternate row background */
}

.asf-schools-table tbody tr:hover {
	background-color: #f0f9f6; /* Lighter highlight on row hover */
}

/* Responsive adjustments for table on smaller screens */
@media (max-width: 767px) {
	.asf-schools-table thead {
		display: none; /* Hide table headers on small screens */
	}
	.asf-schools-table,
	.asf-schools-table tbody,
	.asf-schools-table tr,
	.asf-schools-table td {
		display: block; /* Make table elements behave like blocks */
		width: 100%; /* Take full width */
	}
	.asf-schools-table tr {
		margin-bottom: 15px; /* Space between "rows" when stacked */
		border: 1px solid #e9ecef;
		border-radius: 8px;
		overflow: hidden; /* Apply border-radius to each "row" card */
	}
	.asf-schools-table td {
		text-align: right;
		padding-left: 50%; /* Space for pseudo-element labels */
		position: relative;
		border: none; /* Remove individual cell borders */
	}
	.asf-schools-table td::before {
		content: attr(data-label); /* Use data-label for content */
		position: absolute;
		left: 15px;
		width: calc(50% - 30px);
		padding-right: 10px;
		white-space: nowrap;
		text-align: left;
		font-weight: 600;
		color: #555;
	}
	/* Assign data-labels to table cells for mobile view in PHP */
}

/* Custom styling for the hero section buttons */
#applications-hero .hero-buttons-wrapper {
	/* flex-wrap and gap are already handled by Bootstrap classes in HTML */
	margin-top: 20px; /* Adjust top margin if needed for spacing from description */
}

#applications-hero .hero-buttons-wrapper .btn {
	padding: 10px 20px; /* Smaller padding for smaller buttons */
	font-size: 0.95em; /* Slightly smaller font size */
	font-weight: 600; /* A bit bolder */
	border-radius: 8px; /* Consistent border-radius */
	transition: all 0.3s ease;
}

#applications-hero .hero-buttons-wrapper .btn-primary {
	background-color: #59963f; /* ASF Green */
	border-color: #59963f;
	color: #fff;
}

#applications-hero .hero-buttons-wrapper .btn-primary:hover {
	background-color: #407b36; /* Darker green on hover */
	border-color: #407b36;
	transform: translateY(-2px); /* Slight lift on hover */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#applications-hero .hero-buttons-wrapper .btn-outline-secondary {
	background-color: transparent;
	border: 2px solid #59963f; /* Green border for outline button */
	color: #59963f; /* Green text for outline button */
}

#applications-hero .hero-buttons-wrapper .btn-outline-secondary:hover {
	background-color: #59963f; /* Fill with green on hover */
	color: #fff; /* White text on hover */
	transform: translateY(-2px); /* Slight lift on hover */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for buttons if they need to stack on very small screens */
@media (max-width: 575.98px) { /* Extra small devices */
	#applications-hero .hero-buttons-wrapper {
		flex-direction: column; /* Stack buttons vertically */
		align-items: center; /* Center them when stacked */
	}
	#applications-hero .hero-buttons-wrapper .btn {
		width: 100%; /* Make buttons full width when stacked */
		max-width: 250px; /* Optional: Limit max width even when stacked */
	}
}

/* Applications Hero Section */
#applications-hero h1 {
	font-family: 'Lato', sans-serif;
	font-size: 2.8em; /* Adjusted for impact */
	font-weight: 900;
	color: #2c3e50;
	line-height: 1.3;
	margin-bottom: 20px;
}

#applications-hero .lead {
	font-size: 1.1em;
	color: #555;
	line-height: 1.7;
	margin-bottom: 30px; /* Space between text and buttons */
}

#applications-hero .img-fluid {
	border-radius: 15px; /* More rounded corners for the image */
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Application Process Section - Reusing .how-we-operate-section styles if possible, or defining new ones */
.process-steps-container {
	margin-top: 40px; /* Space below heading */
}
.process-step-card {
	height: 100%; /* Ensure all cards in a row are same height */
	display: flex;
	flex-direction: column;
	justify-content: center; /* Vertically center content */
	align-items: center; /* Horizontally center content */
	text-align: center;
	background-color: rgba(89, 150, 63, 0.1); /* Lighter green tint */
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	padding: 35px 30px; /* Adjust padding as per your existing .process-step-card or as desired */
}
.process-step-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.process-step-number {
	font-size: 3em; /* Larger number */
	font-weight: 700;
	color: #59963f;
	opacity: 0.7;
	margin-bottom: 15px;
}
.process-step-title {
	font-size: 1.2em;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 10px;
}
.process-step-description {
	font-size: 0.9em;
	color: #555;
	line-height: 1.6;
}

/* Requirements Section Lists - Making them more appealing */
#requirements-section .card {
	background-color: #ffffff;
	border: 1px solid #e0f0ea; /* Subtle light green border */
	border-radius: 15px; /* Match wireframe's rounded corners */
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Soft shadow */
	height: 100%; /* Ensure cards fill height of flex column */
}

#requirements-section .card h4 {
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	font-weight: 700;
	color: #59963f; /* ASF Accent Green */
	margin-bottom: 20px;
	text-align: center; /* Center heading within the card */
}

#requirements-section .card ul.applications-list-items li {
	font-size: 1em;
	color: #333;
	line-height: 1.6;
	margin-bottom: 12px; /* Spacing between list items */
	padding-left: 0; /* Remove default padding if any */
	position: relative; /* For icon positioning */
	display: flex; /* Use flexbox for item alignment */
	align-items: flex-start; /* Align icon and text at the top */
}

#requirements-section .card ul.applications-list-items li .fa {
	color: #59963f; /* Green icon */
	font-size: 1.1em;
	flex-shrink: 0; /* Prevent icon from shrinking */
	margin-right: 10px; /* Space between icon and text */
	position: relative; /* Allow fine-tuning vertical position */
	top: 3px; /* Adjust vertical alignment if needed */
}
#requirements-section .card ul.applications-list-items li span { /* For text next to icon */
	flex-grow: 1; /* Allow text to take remaining space */
	display: block; /* Ensure text wraps correctly */
}

/* Application Forms Section */
.application-form-card {
	background-color: #ffffff;
	border: 1px solid #e0f0ea; /* Subtle light green border */
	border-radius: 15px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%; /* For equal height */
	display: flex;
	flex-direction: column;
	align-items: center; /* Center content horizontally */
	text-align: center;
}
.application-form-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.application-form-card .card-icon {
	margin-bottom: 20px;
	color: #59963f; /* Green icon */
}
.application-form-card .card-icon .fa {
	font-size: 3em; /* Larger icons for these cards */
}
.application-form-card .card-title {
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 10px;
}
.application-form-card .card-text {
	font-size: 0.9em;
	color: #555;
	line-height: 1.6;
	flex-grow: 1; /* Push button to bottom */
}
.application-form-card .btn-download {
	background-color: #59963f; /* ASF Accent Green */
	border-color: #59963f;
	color: #fff;
	font-weight: 600;
	padding: 10px 25px;
	border-radius: 8px;
	margin-top: auto; /* Aligns button to bottom */
}
.application-form-card .btn-download:hover {
	background-color: #407b36; /* Darker green on hover */
	border-color: #407b36;
}

/* Adjustments for the lead paragraph in Application Forms section */
#application-forms-section .heading-section .lead {
	font-size: 1.2em; /* Adjust based on desired size for this note */
	color: #000000; /* Slightly muted color for a "note" */
	margin-bottom: 40px; /* Space between the note and the cards */
}

/* --- Vision & Mission Tab Content on Homepage --- */
.vision-mission-tab-content .vision-mission-card {
	background-color: #ffffff;
	padding: 25px; /* Adjusted padding for horizontal layout */
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
	border-top: 4px solid #59963f; /* Keep the top accent border */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	/* Remove flex properties that were for vertical centering of whole card content */
	/* display: flex; */
	/* flex-direction: column; */
	/* align-items: center; */ /* Will be handled by inner row or default */
	text-align: left; /* Ensure text is left-aligned */
	height: auto; /* Let content dictate height */
}

.vision-mission-tab-content .vision-mission-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Styling for the icon when it's side-by-side with text */
.vision-mission-tab-content .vision-mission-card .card-icon {
	font-size: 2em; /* Slightly smaller icon if needed for horizontal layout */
	color: #59963f;
	background-color: #e6f5f0;
	width: 60px; /* Adjusted size */
	height: 60px; /* Adjusted size */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0; /* Remove bottom margin as it's side-by-side */
	/* margin-right is handled by .me-3 on the icon's div in HTML */
	flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Text content within the horizontal card */
.vision-mission-tab-content .vision-mission-card .heading-text.heading-section {
	text-align: left; /* Ensure text is left-aligned */
}

.vision-mission-tab-content .vision-mission-card .heading-text.heading-section h2 {
	font-size: 1.7rem; /* Adjusted size */
	color: #2c3e50;
	margin-bottom: 8px; /* Space between H2 and lead text */
	padding-bottom: 0; /* Remove padding if not using a ::before line */
	border-bottom: none; /* Remove border if not using it here */
	display: block; /* Ensure it takes full width of its container */
}
/* Remove the ::before pseudo-element for the line under H2 if it was centered */
.vision-mission-tab-content .vision-mission-card .heading-text.heading-section h2::before {
	display: none;
}


.vision-mission-tab-content .vision-mission-card .lead {
	font-size: 1rem; /* Adjusted size */
	color: #555;
	line-height: 1.7; /* Improved line height */
	margin-top: 0; /* Remove top margin if H2 has bottom margin */
}

/* Responsive adjustments for the tab content cards */
@media (max-width: 767px) {
	.vision-mission-tab-content .vision-mission-card .row {
		/* Optional: Stack icon above text on very small screens if desired */
		/* flex-direction: column; */
		/* text-align: center; */
	}
	.vision-mission-tab-content .vision-mission-card .card-icon {
		/* margin-right: 0; */ /* If stacking */
		/* margin-bottom: 15px; */ /* If stacking */
		/* margin-left: auto; */ /* If stacking and centering */
		/* margin-right: auto; */ /* If stacking and centering */
	}
	.vision-mission-tab-content .vision-mission-card .heading-text.heading-section h2 {
		font-size: 1.5rem;
	}
	.vision-mission-tab-content .vision-mission-card .lead {
		font-size: 0.95rem;
	}
}



/* --- Widen the container for the "Our Team" section only --- */
@media (min-width: 1200px) {
	#team .container {
		max-width: 1440px; /* Default is 1140px. We're making it wider. */
	}
}

.impact-intro-banner-section .intro-banner-with-background h1 {
	color: #ffffff !important; /* Using !important as a last resort if other styles are overriding heavily */
}

/* --- About Us/Our Impact Navigation Cards Section (Compact) --- */
.about-us-nav-cards-section {
	background-color: #f4fbf8; /* Light mint/greyish background */
	padding-top: 60px;
	padding-bottom: 30px;
}

a.nav-summary-card-link,
a.nav-summary-card-link:hover,
a.nav-summary-card-link:focus {
	text-decoration: none;
	color: inherit;
}

.nav-summary-card {
	background-color: #5a9740; /* Solid green background */
	color: #ffffff;
	padding: 20px; /* REDUCED PADDING */
	border-radius: 12px;
	margin-bottom: 0px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: left;
}

.nav-summary-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* The .card-number rule is removed as the element is no longer in the HTML */

.nav-summary-card .card-title {
	font-size: 1.4em; /* Reduced font size for compactness */
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 8px; /* REDUCED bottom margin */
	line-height: 1.3;
}

.nav-summary-card .card-description {
	font-size: 0.95em;
	color: #f0f0f0;
	line-height: 1.6;
	margin-bottom: 5px; /* REDUCED bottom margin */
	flex-grow: 1;
}

.nav-summary-card .card-learn-more {
	font-size: 0.9em;
	font-weight: 600;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: auto;
	display: inline-block;
}

.nav-summary-card .card-learn-more .fa-arrow-right {
	margin-left: 8px;
	transition: transform 0.2s ease-in-out;
}

.nav-summary-card:hover .card-learn-more .fa-arrow-right {
	transform: translateX(5px);
}

/* Responsive adjustments for cards in the row */
@media (min-width: 992px) { /* Large screens and up */
	.about-us-nav-cards-section .row > .col-lg { /* Applies to impact page too */
		flex-basis: 0;
		flex-grow: 1;
		max-width: 100%;
	}
}



/* --- Enhanced How We Operate Section --- */
.how-we-operate-section {
	background-color: rgba(89, 150, 63, 0.11);
	/* padding-top and padding-bottom are likely already defined in your theme/custom.css */
}

.process-steps-container {
	margin-top: 40px; /* Increased space below the main heading */
}

/* --- Adjust Spacing BETWEEN Process Step Cards & Line Lengths --- */

.process-steps-container > .col-lg-4,
.process-steps-container > .col-md-6 {
	padding-left: 25px;   /* Keeps horizontal gap between cards at 50px */
	padding-right: 25px;  /* Keeps horizontal gap between cards at 50px */
	margin-bottom: 30px;  /* INCREASED: Vertical gap between rows of cards */
}

/* Main card styles (ensure margin-bottom is 0 if column handles it) */
.process-step-card {
	/* ... keep all your existing styles for padding, background, shadow, text size etc. ... */
	padding: 35px 30px;   /* Internal padding, as per previous adjustment */
	margin-bottom: 0;     /* Column wrapper now handles full bottom margin for row spacing */
	height: 100%;
	display: flex;
	flex-direction: column;
	text-align: center;
	background-color: rgba(133, 197, 126, 0.2);
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative; /* Important for the ::after pseudo-element */
}

/* Hover, Number, Icon, Text styles (should remain as previously set) */
.process-step-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.process-step-number { /* As per previous */
	font-size: 2.8em;
	font-weight: 700;
	color: #59963f;
	line-height: 1;
	margin-bottom: 20px;
	opacity: 0.5;
}

.process-step-icon { /* As per previous */
	font-size: 2.5em;
	color: #59963f;
	margin-bottom: 25px;
}

.process-step-icon i { /* As per previous */
	line-height: 1;
}

.process-step-text { /* As per previous */
	font-size: 1.05rem;
	color: #454545;
	line-height: 1.7;
	flex-grow: 1;
}

.process-step-text strong { /* As per previous */
	color: #2c3e50;
	font-weight: 600;
}


/* --- Connecting Lines - ADJUSTED LENGTHS --- */
.process-step-card::after {
	content: '';
	position: absolute;
	top: 50%;
	/* ADJUSTED: Line starts 10px inside card, extends 40px out. Total length 50px. */
	right: -60px;         /* Extends 40px from the card's right edge */
	width: 70px;          /* Total length of the line segment */
	height: 5px;
	background-color: #59963f; /* ASF Accent Green */
	transform: translateY(-50%);
	opacity: 0.6;
	z-index: -1; /* Optional: if you ever had issues with stacking order */
}

/* Hide connector for the last card overall */
.process-steps-container > div:last-child .process-step-card::after {
	display: none;
}

/* Responsive adjustments for connectors */
@media (min-width: 992px) { /* Large screens (3 cards per row) */
	/* Hide connector for the last card in a row of 3 (3rd, 6th, 9th, etc.) */
	.process-steps-container > .col-lg-4:nth-child(3n) .process-step-card::after {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) { /* Medium screens (2 cards per row) */
	/* Apply the same adjusted line length for medium screens if the gap is the same */
	.process-step-card::after {
		right: -40px; /* Extends 40px from card edge */
		width: 50px;  /* Total line length 50px */
	}
	/* Hide connector for the last card in a row of 2 (2nd, 4th, 6th, etc.) */
	.process-steps-container > .col-md-6:nth-child(2n) .process-step-card::after {
		display: none;
	}
}

@media (max-width: 767.98px) { /* Small screens (cards stack - 1 per row) */
	.process-step-card::after {
		display: none; /* Hide horizontal connectors when cards stack */
	}
	/* Other mobile styles for .process-step-card, number, icon, text (keep as previously defined) */
}

#mainMenu-trigger .lines-button .lines {
	background-color: #000000 !important;
}
#mainMenu-trigger .lines-button .lines::before,
#mainMenu-trigger .lines-button .lines::after {
	background-color: #000000 !important;
}

/* In your <style> block or custom.css */
#map-tooltip-box {
	/* Your existing styles for #map-tooltip-box */
	/* Add or adjust max-width to control the overall width */
	max-width: 350px; /* Adjust as needed, e.g., 300px, 400px */
	padding: 10px 15px; /* Ensure decent padding */
	/* white-space: normal; /* This might be needed if you had pre-wrap before */
}

#map-tooltip-box {
	position: fixed; /* Use fixed to position relative to viewport, helps with SVG transforms */
	background-color: rgba(0, 0, 0, 0.9); /* Slightly more opaque */
	color: white;
	padding: 15px; /* Increased padding for better look */
	border-radius: 8px; /* Consistent rounded corners */
	font-size: 0.95em; /* Slightly larger base font size */
	pointer-events: none; /* Allows clicks to pass through to elements beneath */
	opacity: 0;
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
	transform: translate(-50%, -130%); /* Initial position above cursor */
	z-index: 1001; /* Higher than zoom controls */
	visibility: hidden;
	line-height: 1.4; /* Better readability */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Clearer shadow */

	/* KEY CHANGES FOR SIZE AND SCROLLING */
	max-width: 700px; /* Adjust this max-width for the overall tooltip. 700px allows for 4 columns on larger screens. */
	max-height: 300px; /* Set a maximum height to enable scrolling if content overflows */
	overflow-y: auto; /* Add vertical scrollbar if content exceeds max-height */
	white-space: normal; /* Allow content to wrap within the max-width */
}

#map-tooltip-box.visible {
	opacity: 1;
	visibility: visible;
}

/* Styles for the title inside the tooltip */
#map-tooltip-box strong.tooltip-title {
	display: block; /* Ensures it takes its own line */
	font-weight: bold;
	margin-bottom: 10px; /* Space between title and columns */
	font-size: 1.15em; /* Slightly larger for prominence */
	color: #90ee90; /* A distinct light green accent for the title */
	text-align: center; /* Center the title */
	border-bottom: 1px solid rgba(144, 238, 144, 0.3); /* Subtle separator line */
	padding-bottom: 5px; /* Space above the line */
}

/* Container for the multi-column list items */
#map-tooltip-box .tooltip-columns {
	display: grid; /* Use CSS Grid for robust column control */
	grid-template-columns: repeat(4, 1fr); /* FORCES 4 EQUAL COLUMNS */
	gap: 15px; /* Space between the columns */
	margin-top: 10px; /* Space above the columns container */
}

/* Styling for the individual list items within the columns */
#map-tooltip-box .tooltip-columns > div {
	/* These are the individual column wrappers (e.g., the <div> containing '- Item 1<br>- Item 2') */
	min-width: 120px; /* Ensures each column has a reasonable minimum width */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
	padding: 0 5px; /* Small horizontal padding within each column */
	/* text-align: left; /* Ensure list items are left-aligned within their columns */
}

/* Styles for the actual items (e.g., "- Mount Frere (1)") */
/* Assuming your items are simple text with <br> or individual <span>/p tags inside the <div> */
#map-tooltip-box .tooltip-columns > div > span, /* If your list items are spans with <br/> */
#map-tooltip-box .tooltip-columns > div > p,    /* If you decide to use <p> tags for list items */
#map-tooltip-box .tooltip-columns > div /* Fallback for direct text content, though less precise */ {
	display: block; /* Ensure each item takes a new line */
	white-space: nowrap; /* Prevents text from wrapping within a single list item */
	margin-bottom: 3px; /* Small space between items */
	color: #e0e0e0; /* Lighter text for the school names */
	/* Optional: You can make school names bold if you prefer */
	/* font-weight: 500; */
}

/* Adjustments for responsiveness on smaller screens */
@media (max-width: 768px) { /* Adjust breakpoint as needed for your tooltip's size */
	#map-tooltip-box {
		max-width: 500px; /* Reduce max-width on medium screens */
		padding: 12px;
	}
	#map-tooltip-box .tooltip-columns {
		grid-template-columns: repeat(3, 1fr); /* Change to 3 columns on tablets */
		gap: 10px; /* Reduce gap */
	}
}

@media (max-width: 576px) { /* Adjust breakpoint as needed for very small screens */
	#map-tooltip-box {
		max-width: 320px; /* Further reduce max-width on mobile phones */
		padding: 10px;
		/* To help ensure it stays on screen, especially on the right side */
		/* You might want to adjust the JS positioning or use a library for robust mobile positioning */
	}
	#map-tooltip-box .tooltip-columns {
		grid-template-columns: repeat(2, 1fr); /* Change to 2 columns on phones */
		gap: 8px; /* Reduce gap further */
	}
	#map-tooltip-box .tooltip-columns > div {
		min-width: unset; /* Remove min-width to allow more flexibility */
	}
	#map-tooltip-box strong.tooltip-title {
		font-size: 1.05em;
		margin-bottom: 5px;
	}
}

@media (max-width: 380px) { /* Optional: For very small mobile screens if 2 columns are too much */
	#map-tooltip-box .tooltip-columns {
		grid-template-columns: 1fr; /* Stack columns vertically on very small screens */
		gap: 5px;
	}
	#map-tooltip-box .tooltip-columns > div {
		text-align: left; /* Align text left when stacked */
	}
}


.individual-donors-section {
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #e8f5e9; /* Very light green background */
	/* Subtle diagonal stripes or dots (you might need to create a very light pattern image) */
	/* Example using a very light repeating background: */
	/* background-image: url('path/to/subtle-green-pattern.png'); */
	background-size: auto;
}

.individual-donors-section .heading-text h2 {
	color: #388e3c;
	margin-bottom: 20px;
}

.individual-donors-section .lead {
	font-size: 1.1rem;
	color: #555;
	margin-bottom: 20px;
}

.individual-donor-list {
	column-count: 2;
	column-gap: 30px;
	margin-top: 30px;
}

.individual-donor-list .donor-name {
	padding: 6px 0;
	font-size: 1rem;
	color: #434a54;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

@media (max-width: 768px) {
	.individual-donor-list {
		column-count: 1;
	}
}


/* --- Governance Page Specific Styles --- */

/* Optional: Page Title Banner for Governance Page */
#page-title[data-bg-parallax*="governance-banner.jpg"] .page-title h1 {
	font-size: 2.8rem; /* Adjust as needed */
}
#page-title[data-bg-parallax*="governance-banner.jpg"] .page-title span {
	font-size: 1.1rem;
	color: #f0f0f0;
}

/* Main Content Area for Governance Page */
#page-content .governance-info-section {
	padding: 40px 0; /* Add some padding around the new content block */
	background-color: #ffffff; /* White background for this content area */
	border-radius: 8px; /* Optional: if you want a slightly contained look */
	/* box-shadow: 0 5px 25px rgba(0,0,0,0.05); */ /* Optional: subtle shadow */
}

.governance-text-block {
	margin-bottom: 30px; /* Space between distinct blocks of text */
}

.governance-text-block h3 {
	font-family: 'Lato', sans-serif; /* Or your site's heading font */
	font-size: 1.8rem; /* Adjust as needed */
	font-weight: 700;
	color: #2c3e50; /* Dark blue/grey, consistent with other headings */
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #59963f; /* ASF Accent Green underline */
	display: inline-block; /* To make border-bottom only span the text width */
}

.governance-text-block p {
	font-size: 1rem; /* Standard paragraph text size */
	line-height: 1.7;
	color: #555; /* Standard text color */
	margin-bottom: 1.2em;
}

.governance-text-block p strong,
.governance-text-block li strong {
	font-weight: 600; /* Or 700 for bolder */
	color: #333;
}

/* Styling for lists (like trustee responsibilities) */
.governance-text-block ul.list-icon {
	padding-left: 0; /* Remove default ul padding if your theme adds it */
	list-style: none; /* Remove default bullet points */
	margin-top: 15px;
	margin-bottom: 20px;
}

.governance-text-block ul.list-icon li {
	font-size: 1rem;
	color: #555;
	line-height: 1.7;
	margin-bottom: 10px;
	padding-left: 30px; /* Space for the icon */
	position: relative;
}

/* Assuming your theme's .list-icon-check provides the checkmark icon */
/* If not, you might need to add FontAwesome or similar: */
.governance-text-block ul.list-icon.list-icon-check li::before {
	/* content: "\f00c"; */ /* FontAwesome check icon */
	/* font-family: 'Font Awesome 5 Free'; */ /* Or your theme's icon font */
	/* font-weight: 900; */ /* For solid icons in FA */
	color: #59963f; /* ASF Accent Green */
	position: absolute;
	left: 0;
	top: 4px; /* Adjust for vertical alignment */
	font-size: 1.1em;
}

/* Separator styles (if you use <hr class="space">) */
#page-content hr.space {
	margin-top: 30px;
	margin-bottom: 30px;
	border-top: 1px solid #e9ecef; /* Light border for visual separation */
}
#page-content .seperator { /* If you use the chevron separator */
	margin-top: 40px;
	margin-bottom: 40px;
}
#page-content .seperator i {
	color: #59963f; /* ASF Accent Green */
}


/* Styles for the existing Board of Trustees section (ensure they are still good) */
#page-content .heading-section h2 {
	/* Your existing styles for this heading */
	/* Example: color: #2c3e50; margin-bottom: 50px; */
}

.trustee-card {
	/* Your existing .trustee-card styles from custom.css */
	/* Ensure they are distinct or harmonious with the new text blocks */
}

/* Responsive adjustments for governance text */
@media (max-width: 767px) {
	.governance-text-block h3 {
		font-size: 1.5rem;
	}
	.governance-text-block p,
	.governance-text-block ul.list-icon li {
		font-size: 0.95rem;
	}
	#page-content .governance-info-section {
		padding: 20px 15px; /* Reduce padding on mobile */
	}
}

/* In css/custom.css */

/* Ensure the header (navbar) stays on top of other content */
#header {
	position: relative; /* Ensures z-index is effective. Your theme might already use relative, fixed, or sticky. */
	z-index: 1050;    /* This is a high value, likely above other elements. Adjust if needed. */
	background-color: #ffffff; /* Replace #ffffff with your navbar's actual intended background color.
                                  This is important if the navbar was transparent and content was showing through.
                                  If your navbar has a different background color set by the theme,
                                  you might not need to declare this if it's already opaque. */
}




/* --- Custom Navigation Bar Font Size --- */
#header #mainMenu nav > ul > li > a {
	font-size: 14px; /* Example: Increased to 14px - Adjust as needed */
	/* You might need to adjust padding slightly if the larger font feels too cramped */
	/* padding: 10px 10px; */ /* Example: slightly less horizontal padding if needed */
}

/* If you also want to increase the font size for dropdown menu items: */
#header #mainMenu nav > ul > li .dropdown-menu > li > a {
	font-size: 13px; /* Example: Slightly larger for dropdowns - adjust as needed */
	/* padding: 11px 20px 11px 18px; */ /* Adjust padding if necessary */
}

/* If you also styled a Donate button and want to adjust its font size if it's different */
#header #mainMenu nav > ul > li.menu-item-donate > a {
	/* font-size: 14px; */ /* Ensure it matches or is distinct as desired */
	/* padding: 8px 18px !important; */ /* Re-check padding for buttons */
}

/* --- Custom Navigation Bar Styling --- */

/* Main Menu Item Colors */
#header #mainMenu nav > ul > li > a {
	color: #333; /* Initial text color - adjust if your navbar is dark */
	/* transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}

/* HOVER, ACTIVE/CURRENT PAGE, and FOCUS states for main menu items */
#header #mainMenu nav > ul > li.hover-active > a,
#header #mainMenu nav > ul > li.current > a,
#header #mainMenu nav > ul > li:hover > a,
#header #mainMenu nav > ul > li:focus > a {
	color: #59963f !important; /* ASF Accent Green */
	/* background-color: transparent; Optional: ensure no background color on hover if not desired */
}

/* Style for the "lines" menu style if you use it (underline effect) */
#mainMenu.menu-lines nav > ul > li.current > a:after,
#mainMenu.menu-lines nav > ul > li:hover > a:after,
#mainMenu.menu-lines nav > ul > li:focus > a:after {
	background-color: #59963f !important; /* ASF Accent Green for the line */
}

/* Dropdown Menu Item Colors */
#header #mainMenu nav > ul > li .dropdown-menu > li > a {
	color: #555; /* Initial dropdown text color */
}

/* HOVER, ACTIVE/CURRENT PAGE for dropdown menu items */
#header #mainMenu nav > ul > li .dropdown-menu > li.current > a,
#header #mainMenu nav > ul > li .dropdown-menu > li:hover > a,
#header #mainMenu nav > ul > li .dropdown-menu > li:focus > a,
#header #mainMenu nav > ul > li .dropdown-menu > li.hover-active > a {
	color: #59963f !important; /* ASF Accent Green */
	background-color: #f0f9f6 !important; /* Optional: Very light green background on dropdown hover */
}

/* Ensure dropdown arrow color changes with parent item hover (if applicable in your menu style) */
#header #mainMenu nav > ul > li.dropdown:hover::before,
#header #mainMenu nav > ul > li.dropdown.hover-active::before {
	/* color: #40d29c; */ /* This might conflict with theme's way of handling dropdown arrow */
}

/* If you use menu-outline style */
#mainMenu.menu-outline nav > ul > li.current > a,
#mainMenu.menu-outline nav > ul > li:hover > a,
#mainMenu.menu-outline nav > ul > li:focus > a {
	color: #59963f !important;
	border-color: #59963f !important;
}

/* If you use menu-hover-background style */
#mainMenu.menu-hover-background nav > ul > li.current,
#mainMenu.menu-hover-background nav > ul > li:hover,
#mainMenu.menu-hover-background nav > ul > li:focus {
	background-color: #40d29c !important; /* ASF Accent Green background */
}
#mainMenu.menu-hover-background nav > ul > li.current > a,
#mainMenu.menu-hover-background nav > ul > li:hover > a,
#mainMenu.menu-hover-background nav > ul > li:focus > a {
	color: #ffffff !important; /* White text on green background */
}
#header #header-wrap {
	background-color: #f0f9f6; /* Example: Very light mint green */
	/* box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Optional: subtle shadow */
}

#header #mainMenu nav > ul > li > a {
	font-family: 'Roboto', sans-serif; /* Example: Change to Roboto */
	font-weight: 500; /* Medium weight */
	/* letter-spacing: 0.8px; */ /* Slightly wider spacing */
	/* text-transform: none; */ /* If you prefer normal case over uppercase */
}

#header #mainMenu nav > ul > li.current > a {
	font-weight: 700; /* Bolder for current item */
	/* border-bottom: 3px solid #40d29c; */ /* Example: Green underline for current item */
	/* padding-bottom: 7px; */ /* Adjust padding if using border-bottom */
	/* background-color: #e6f5f0; /* Light green pill background */
	/* border-radius: 5px; */
}


/* --- Governance Page - Board of Trustees Styling (No Images) --- */
#page-content .heading-section h2 { /* Ensure heading is well-spaced */
	margin-bottom: 50px;
}

.trustee-card {
	background-color: #ffffff;
	border: 1px solid #e0e6eb; /* Softer border */
	border-radius: 10px;
	padding: 25px 20px; /* Adjusted padding */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%; /* Ensures cards in a row have the same height */
	display: flex;
	flex-direction: column;
	text-align: center; /* Center content within the card */
}

.trustee-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.trustee-info {
	flex-grow: 1; /* Pushes contact to the bottom if card heights vary slightly */
	margin-bottom: 20px; /* Space before contact button */
}

.trustee-name { /* Was h3 */
	font-family: 'Lato', sans-serif; /* Or your preferred heading font */
	font-size: 1.3rem; /* Adjust as needed */
	font-weight: 700;
	color: #2c3e50; /* Dark blue/grey */
	margin-bottom: 5px;
}

.trustee-title { /* Was span */
	display: block;
	font-size: 1rem;
	color: #59963f; /* ASF Accent Green */
	font-weight: 500;
	margin-bottom: 10px; /* Space below title */
}

.trustee-affiliation { /* Optional class for short bio/affiliation */
	font-size: 0.85rem;
	color: #6c757d; /* Muted grey */
	margin-bottom: 15px;
	font-style: italic;
}

.trustee-contact {
	margin-top: auto; /* Pushes contact info to the bottom if .trustee-info doesn't fill */
}

.trustee-contact .btn {
	font-size: 0.85rem;
	padding: 6px 15px;
	/* min-width: 100px; */ /* Optional: give buttons a min-width */
}

.trustee-contact .btn i {
	margin-right: 6px;
}

/* Example: Refine btn-outline-secondary if needed for this context */
.trustee-card .btn-outline-secondary {
	color: #545b62;
	border-color: #adb5bd;
}

.trustee-card .btn-outline-secondary:hover {
	color: #fff;
	background-color: #545b62;
	border-color: #545b62;
}

/* --- Our Team Section - No Image Layout --- */
.our-team-no-image-section {
	background-color: #ffffff;
	padding-top: 80px;
	padding-bottom: 50px; /* Adjusted because cards have mb-4 */
}

.our-team-no-image-section .heading-section h2 {
	color: #2c3e50;
	margin-bottom: 50px;
}

/* --- Styles for Team Member Images --- */
.team-member-card-alt .team-member-image {
	margin-bottom: 20px; /* Space between image and name */
}

.team-member-card-alt .team-member-image img {
	width: 120px; /* Adjust size as needed */
	height: 120px; /* Must be same as width for a perfect circle */
	border-radius: 50%; /* This makes the image circular */
	object-fit: cover; /* Prevents image distortion, crops to fit */
	border: 4px solid #f0f9f6; /* A very light green border matching your theme */
	box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Subtle shadow for depth */
	margin-left: auto; /* Ensures centering within the text-aligned parent */
	margin-right: auto;
}

.team-member-card-alt {
	background-color: #ffffff;
	border-radius: 10px;
	padding: 25px 20px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%; /* For equal height cards */
	display: flex;
	flex-direction: column;
	text-align: center; /* Center align text and buttons */
}

.team-member-card-alt:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.team-member-info {
	flex-grow: 1; /* Allows this section to take up space and push contact to bottom */
}

.team-member-card-alt h3 {
	font-family: 'Lato', sans-serif;
	font-size: 1.4rem;
	font-weight: 700;
	color: #2c3e50; /* Dark heading color */
	margin-bottom: 5px;
}

.team-member-title {
	display: block;
	font-size: 0.95rem;
	color: #59963f; /* ASF Accent Green for title */
	font-weight: 500;
	margin-bottom: 15px;
}

.team-member-short-bio {
	font-size: 0.85rem;
	color: #666;
	line-height: 1.6;
	margin-bottom: 20px;
	min-height: 50px; /* Give some space even if bio is short or absent */
}

.team-member-contact-alt {
	margin-top: auto; /* Pushes contact info to the bottom of the card */
}

.team-member-contact-alt .btn {
	margin: 5px;
	font-size: 0.8rem;
	padding: 6px 12px;
	min-width: 90px; /* Give buttons a consistent width */
}

.team-member-contact-alt .btn i {
	margin-right: 5px;
}

/* Ensure your theme's btn-light or btn-outline styles look good here */
/* Example refinement for btn-light if needed: */
.our-team-no-image-section .btn-light {
	background-color: #f0f0f0;
	border-color: #e0e0e0;
	color: #555;
}
.our-team-no-image-section .btn-light:hover {
	background-color: #e0e0e0;
	border-color: #d0d0d0;
	color: #333;
}

/* --- How We Operate Section --- */
.how-we-operate-section {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #ffffff; /* Or a light alternating color like #f8f9fa */
}

.how-we-operate-section .heading-section h2 {
	color: #2c3e50;
	margin-bottom: 50px; /* Space below title */
}
/* Style for the theme's separator line if needed */
.how-we-operate-section .heading-section h2::before {
	margin-bottom: 40px; /* Space after the separator line */
}

ul.icon-list-operate {
	list-style: none;
	padding-left: 0;
	margin-top: 20px;
}

ul.icon-list-operate li {
	display: flex;
	align-items: flex-start; /* Align icon with the top of the text block */
	margin-bottom: 30px; /* Space between items */
	padding: 20px;
	background-color: #f8f9fa; /* Light background for each item */
	border-radius: 8px;
	border-left: 5px solid #59963f; /* Accent border using ASF green */
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
ul.icon-list-operate li:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.08);
	transform: translateY(-3px);
}


ul.icon-list-operate .icon-operate {
	font-size: 1.8em; /* Adjust icon size */
	color: #59963f;   /* ASF Accent Green */
	margin-right: 25px;
	margin-top: 2px; /* Fine-tune vertical alignment with text */
	flex-shrink: 0; /* Prevent icon from shrinking */
	width: 40px; /* Give icon a fixed width for alignment */
	text-align: center;
}

ul.icon-list-operate .text-operate {
	font-size: 1rem; /* Adjust as needed */
	color: #555;
	line-height: 1.7;
}

ul.icon-list-operate .text-operate strong {
	color: #2c3e50; /* Darker color for emphasized text */
	font-weight: 600;
}

/* Responsive adjustments for the list items */
@media (max-width: 767px) {
	ul.icon-list-operate li {
		/* On smaller screens, you might want icon above text or more compact */
		/* display: block; */ /* Example: stack icon and text */
		/* text-align: center; */
		padding: 15px;
	}
	/* ul.icon-list-operate .icon-operate { */
	/* margin-right: 0; */
	/* margin-bottom: 15px; */ /* If stacking */
	/* } */
	ul.icon-list-operate .text-operate {
		font-size: 0.95rem;
	}
}

/* --- Enhanced "Our Story" Timeline Layout --- */
.our-story-section {
	background-color: #f4fbf8;
}

/* Teaser Intro Paragraph */
.story-teaser-intro {
	font-size: 1.1em;
	line-height: 1.7;
	color: #555;
	text-align: center;
	max-width: 800px;
	margin: 0 auto 25px auto;
}

/* Drop cap for the teaser intro */
.story-teaser-intro.first-paragraph::first-letter {
	font-size: 4.5em;
	font-weight: 700;
	color: #5a9740;
	float: left;
	line-height: 0.8;
	margin-right: 12px;
	margin-top: 5px;
	font-family: 'Lato', sans-serif;
}

/* Expandable Container Styling */
.expandable-story-timeline {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.8s ease-in-out;
}

/* The timeline itself */
.story-timeline {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 0;
}

/* The Central Line */
.story-timeline::after {
	content: '';
	position: absolute;
	width: 4px;
	background-color: #c5e0bb; /* Softer green line */
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -2px;
	border-radius: 2px;
}

/* Timeline Item Container */
.timeline-item {
	padding: 20px 0;
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* The content card for each item */
.timeline-content {
	padding: 25px 30px;
	background-color: white;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.07);
	width: calc(50% - 40px); /* 50% width minus a gap */
	box-sizing: border-box;
}

/* For right-aligned items, we use order to swap visual position */
.timeline-item.timeline-item-right > .timeline-content {
	order: 2;
}

.timeline-content h4 {
	font-family: 'Lato', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 10px;
}

.timeline-content p {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #555;
	margin-bottom: 0;
}

/* Image container */
.timeline-image {
	width: calc(50% - 40px); /* 50% width minus a gap */
	box-sizing: border-box;
}

.timeline-image img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	border: 1px solid #eee;
	box-shadow: 0 5px 15px rgba(0,0,0,0.07);
}

/* The circular icon on the timeline */
.timeline-item .timeline-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	border: 4px solid #5a9740;
	border-radius: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	color: #5a9740;
}

/* Responsive Layout for Mobile */
@media screen and (max-width: 991px) {
	.story-timeline::after {
		left: 31px;
	}

	.timeline-item,
	.timeline-item.timeline-item-right {
		width: 100%;
		padding-left: 70px;
		padding-right: 15px; /* Tighter padding on mobile */
		flex-direction: column; /* Stack items vertically */
		align-items: flex-start; /* Align to the left */
	}

	/* Reset the order for stacking */
	.timeline-item.timeline-item-right > .timeline-content {
		order: initial;
	}

	.timeline-content,
	.timeline-image {
		width: 100%;
	}

	.timeline-image {
		margin-top: 20px;
	}

	.timeline-item .timeline-icon {
		left: 15px;
		top: 25px;
		transform: none; /* Remove centering transform */
	}
}

/* --- Floating Button for Story Section (Robust Version) --- */
.floating-btn {
	/* --- Positioning --- */
	position: fixed;
	bottom: 80px;         /* INCREASED: Significantly higher to clear taskbars and be more prominent. */
	left: 50%;
	transform: translateX(-50%);

	/* --- Visibility & Layering --- */
	z-index: 9999;        /* ADDED: A very high z-index to ensure it floats over ALL other content. */
	opacity: 1 !important;    /* ADDED: Aggressively ensures it is not transparent. */
	visibility: visible !important; /* ADDED: Aggressively ensures it is not hidden. */

	/* --- Sizing & Appearance --- */
	width: auto;          /* ADDED: Ensures the button is only as wide as its content. */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
	transition: all 0.3s ease;
}


/* --- Vision & Mission Section (Enhanced) --- */
.vision-mission-section {
	background-color: rgba(89, 150, 63, 0.11); /* Subtle background for the section */
	/* padding-top & padding-bottom are handled by p-t-80 p-b-80 theme classes */
}

.vision-mission-card {
	background-color: #ffffff;
	padding: 35px; /* Slightly increased padding */
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07); /* Adjusted base shadow for more depth */
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* Current: Align items to the start (left) */
	text-align: left;        /* Current: Ensure text within is left-aligned */
	margin-bottom: 30px;
	border-top: 4px solid #59963f; /* NEW: Accent top border */
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}

.vision-mission-card:hover {
	transform: translateY(-8px); /* More lift on hover */
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12); /* Enhanced shadow on hover */
	/* border-top-color: #36a480; */ /* Optional: Darken border on hover */
}

.vision-mission-card .card-icon {
	font-size: 2.3em; /* Slightly larger icon */
	color: #59963f;   /* Your ASF Accent Green */
	margin-bottom: 25px; /* More space below icon */
	background-color: #e6f5f0; /* Light mint background for icon circle */
	width: 65px; /* Slightly larger circle */
	height: 65px; /* Slightly larger circle */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, transform 0.3s ease; /* Added transition */
}

.vision-mission-card:hover .card-icon {
	background-color: #d1ede4; /* Slightly darker mint on card hover */
	transform: scale(1.08) rotate(5deg); /* Slight zoom and tilt on card hover */
}

.vision-mission-card .heading-text.heading-section {
	margin-bottom: 0;
	width: 100%;
}

.vision-mission-card .heading-text.heading-section h2 {
	font-size: 1.9rem;
	color: #2c3e50;
	margin-bottom: 15px;    /* This will create space below the heading */
	display: block;         /* CHANGE: Ensures H2 takes its own line */
	/* Removed position: relative, display: inline-block, and padding-bottom as they were for the line */
}

/* Styling the green line under H2 headings */
.vision-mission-card .heading-text.heading-section h2::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 60px; /* Adjust width of the line */
	background-color: #ffffff; /* ASF Accent Green */
}

.vision-mission-card .lead {
	font-size: 1.1rem; /* Slightly larger lead text */
	color: #555;
	line-height: 1.15; /* Adjusted line height */
	margin-top: 15px; /* This was space AFTER the h2::before line, adjust if needed */
}

/* Optional: Center content within cards for a different dynamic */

.vision-mission-card {
	align-items: center;
	text-align: center;
}
.vision-mission-card .heading-text.heading-section h2::before {
    left: 50%;
    transform: translateX(-50%); /* Center the line if text is centered */
 }


/* Responsive adjustments */
@media (max-width: 991px) {
	.vision-mission-card {
		margin-bottom: 30px; /* Keeps existing stacking margin */
	}
}


/* --- Our Impact Section Styling --- */
.our-impact-section {
	background-color: #f8f9fa; /* A light grey background for the whole section */
	/* padding-top and padding-bottom are already set by p-t-100 p-b-80, adjust if needed */
}

.our-impact-section .heading-section h2 {
	color: #2c3e50; /* Dark blue/grey for heading - consistent with other sections */
	margin-bottom: 50px; /* More space below title */
}

.impact-stat-card {
	background-color: #ffffff;
	padding: 30px 25px;
	border-radius: 12px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07); /* Softer, more modern shadow */
	text-align: center;
	margin-bottom: 30px; /* Spacing for mobile when cards stack */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%; /* For equal height cards if columns are d-flex (Bootstrap default for rows) */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* Vertically center content within the card */
}

.impact-stat-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.impact-stat-card .stat-icon {
	font-size: 2.8em; /* Size of the icon */
	color: #59963f;   /* Your ASF Accent Green */
	margin-bottom: 20px;
	line-height: 1;
}

.impact-stat-card .counter span {
	font-family: 'Lato', sans-serif; /* Or 'Roboto' if you prefer */
	font-size: 3.5rem; /* Large, prominent number */
	font-weight: 900;    /* Very bold */
	color: #2c3e50;      /* Dark blue/grey for the number */
	display: block;
	line-height: 1.1;
	margin-bottom: 15px; /* Space between number and label */
}

.impact-stat-card .stat-label {
	font-family: 'Roboto', sans-serif; /* Clear font for labels */
	font-size: 0.95rem;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 1px; /* Wider letter spacing for a refined look */
	font-weight: 500; /* Medium weight */
	margin-bottom: 0; /* Remove default paragraph margin if any */
}

/* Responsive adjustments for the counter text */
@media (max-width: 991px) { /* Tablets */
	.impact-stat-card .counter span {
		font-size: 3rem;
	}
	.impact-stat-card .stat-icon {
		font-size: 2.5em;
	}
	.impact-stat-card .stat-label {
		font-size: 0.9rem;
	}
}

@media (max-width: 767px) { /* Mobile */
	.impact-stat-card .counter span {
		font-size: 2.5rem;
	}
	.impact-stat-card .stat-icon {
		font-size: 2.2em;
	}
	.our-impact-section .heading-section h2 {
		margin-bottom: 30px;
	}
}

/* Styles for the video wrapper in the hero section */
#animated-hero .hero-video-column .video-wrapper {
	position: relative;
	width: 100%; /* Take full width of the column */
	padding-top: 62.5%; /* This creates a 16:10 aspect ratio (10 / 16 * 100%).
                           Bootstrap's 16:9 is 56.25%.
                           For 4:3, you would use 75%.
                           Adjust this percentage to make the video taller or shorter relative to its width. */
	border-radius: 8px; /* Keep existing border-radius */
	overflow: hidden;   /* Keep existing overflow */
	box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Keep existing box-shadow */
}

#animated-hero .hero-video-column .video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0; /* Ensure no iframe border */
}

/* Optional: Adjustments for smaller screens if needed */
@media (max-width: 991px) { /* Tablets and below */
	#animated-hero .hero-video-column .video-wrapper {
		/* You might want a slightly different aspect ratio or max-width on smaller screens */
		/* For example, to make it slightly less tall on tablets: */
		/* padding-top: 60%; */
	}
}

@media (max-width: 767px) { /* Mobile phones */
	#animated-hero .hero-video-column .video-wrapper {
		/* Example: Revert to 16:9 on very small screens if 16:10 is too tall */
		/* padding-top: 56.25%; */
		margin-top: 20px; /* Add some top margin if content above pushes it too close */
	}
}

/* --- Hero Section General --- */
.animated-hero-section {
	position: relative;
	height: 90vh; /* Or your preferred height */
	overflow: hidden;
	color: #ffffff; /* Default text color for hero */
}

.animated-hero-background { /* Div for the background image */
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background-image: url('../images/parallax/School-Visit-2013-1.jpg'); /* YOUR BACKGROUND IMAGE PATH */
	background-size: cover;
	background-position: center center;
	z-index: 0; /* Base layer */
	/*filter: blur(0px); /* Ensure image is clear */
}

.animated-hero-section.blur-active .animated-hero-background {
	/*filter: blur(0px); /* Ensure no blur is applied even if class is active */
}

.hero-overlay {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 0.45); /* Slightly darker overlay for contrast */
	z-index: 1;
}

.animated-hero-section .container {
	position: relative;
	z-index: 2;
	height: 100%;
}

/* --- Hero Text Content & Logo Styling --- */
.hero-text-content {
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
	/* If your text column is left-aligned by default and you want content centered within it: */
	/* display: flex; */
	/* flex-direction: column; */
	/* align-items: flex-start; /* or 'center' if you want all text content centered */
}

.hero-logo-wrapper {
	/* UPDATED: Reduced max-width for a smaller logo */
	max-width: 300px; /* Was 280px. Adjust further if needed. */
	width: 100%; /* Allow it to shrink if column is narrower */
	margin-bottom: 20px; /* Space below the logo wrapper */
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	/* If the .hero-text-column or .hero-text-content is text-align: center,
       the logo wrapper will center. If they are text-align: left (default for cols),
       the logo wrapper will be left-aligned. */
}

.hero-logo-image {
	display: block;
	width: 100%;    /* Make logo fill the wrapper's width */
	max-width: 100%; /* Redundant if wrapper has max-width, but good practice */
	height: auto;   /* Maintain aspect ratio */
}

.hero-strapline {
	font-family: 'Roboto', sans-serif;
	font-size: 2.5rem;
	font-weight: 500;
	color: #f5f5f5;
	line-height: 1.4;
	margin-bottom: 1em;
}

.hero-description {
	font-family: 'Roboto', sans-serif;
	font-size: 1.20rem;
	font-weight: 400;
	color: #e9ecef;
	line-height: 1.7;
	max-width: 90%; /* Constrains the width of the paragraph itself */
	margin-bottom: 1.5em;
	/* If .hero-logo-wrapper is centered using margin auto, and you want text also centered: */
	/* margin-left: auto; */
	/* margin-right: auto; */
}

/* Buttons */
.hero-text-content .btn { /* General button styling for this context */
	text-shadow: none;
}
.hero-text-content .btn-primary {
	background-color: #5a9740;
	border-color: #5a9740;
	padding: 12px 30px;
	font-weight: 500;
	color: #ffffff;
}
.hero-text-content .btn-primary:hover {
	background-color: #36a480;
	border-color: #36a480;
	color: #ffffff;
}

.hero-text-content .btn-outline-light {
	padding: 12px 30px;
	font-weight: 500;
	border-width: 2px;
}

/* --- Animations --- */
.hero-text-column,
.hero-video-column {
	opacity: 0;
}

@keyframes smoothFloatInUp {
	from { opacity: 0; transform: translate(-40px, 25px) scale(0.95); }
	to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes smoothFadeInUpRight {
	from { opacity: 0; transform: translate(40px, 25px) scale(0.95); }
	to { opacity: 1; transform: translate(0, 0) scale(1); }
}

.animated-hero-section.content-visible .hero-text-column {
	opacity: 1;
	animation: smoothFloatInUp 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
	animation-delay: 0.2s;
}

.animated-hero-section.content-visible .hero-video-column {
	opacity: 1;
	animation: smoothFadeInUpRight 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
	animation-delay: 0.2s;
}

/* --- Video Wrapper --- */
.video-wrapper {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* --- Responsive --- */
@media (max-width: 991px) { /* Tablets */
	.animated-hero-section {
		text-align: center; /* This will center the .hero-logo-wrapper if it's block/inline-block */
		height: auto;
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.hero-text-column {
		/* Ensure content within the column is centered if the section is */
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.hero-logo-wrapper {
		max-width: 170px; /* UPDATED: Was 220px. Smaller logo on tablets */
		/* margin-left: auto; /* Already centered by text-align:center on parent */
		/* margin-right: auto; */
	}
	.hero-strapline {
		font-size: 1.7rem;
	}
	.hero-description {
		font-size: 1.15rem;
		max-width: 100%; /* Allow description to take full width of centered column */
	}
	.hero-video-column {
		margin-top: 40px;
	}
}

@media (max-width: 767px) { /* Mobile phones */
	.hero-logo-wrapper {
		max-width: 150px; /* UPDATED: Was 180px. Even smaller logo on mobile */
	}
	.hero-strapline {
		font-size: 1.4rem;
	}
	.hero-description {
		font-size: 1.05rem;
	}
	.hero-text-content .btn {
		padding: 10px 20px;
		font-size: 0.9rem;
	}
}
/* Slide-in Subscribe Tab Styling */



.subscribe-slide-tab {
	position: fixed;
	top: 50%;
	/* Calculate this: -(width of .tab-content + effective visible width of .tab-handle) */
	/* Assuming .tab-content is 280px and .tab-handle effectively shows ~40px of its edge */
	right: -340px; /* Example: - (280px + 40px). Adjust this precise value based on your handle's actual rendered width. */
	transform: translateY(-50%);
	z-index: 1000;
	transition: right 0.5s ease-in-out;
	display: flex;
	border-radius: 8px 0 0 8px; /* This applies to the whole sliding unit */
	box-shadow: -5px 0px 15px rgba(0, 0, 0, 0.1);
}

.subscribe-slide-tab.visible {
	right: 0; /* Slide it fully into view */
}

/* The rest of your .tab-handle and .tab-content CSS can remain as is, */
/* but ensure the .tab-handle's border-radius is what you want to see first */
/* when it slides in. */
.subscribe-slide-tab .tab-handle {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	background-color: #5a9740; /* Your desired handle background color */
	color: white;
	padding: 20px 10px;
	cursor: pointer;
	border-radius: 8px 0 0 8px; /* Rounds the left edge of the handle */
	font-weight: bold;
	font-size: 0.9rem;
	letter-spacing: 1px;
	text-align: center;
	flex-shrink: 0;
}

.subscribe-slide-tab .tab-content {
	background-color: #5a9740; /* Your main blue from the screenshot */
	color: white; /* Assuming text inside is white or light */
	padding: 25px;
	width: 280px; /* Width of the actual content area */
	position: relative; /* For positioning the close button */
	border-left: 1px solid #5a9740; /* Optional: a subtle separator */
}

/* Rest of the .tab-content styles for form elements, etc. */
.subscribe-slide-tab .tab-content h4 {
	margin-top: 0;
	color: #ffffff; /* White heading */
	font-size: 1.2rem;
}

.subscribe-slide-tab .tab-content p {
	font-size: 0.9rem;
	margin-bottom: 15px;
}

.subscribe-slide-tab .tab-content input[type="email"] {
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #a1c9ff; /* Lighter border for input */
	border-radius: 4px;
	box-sizing: border-box;
	background-color: #f8f9fa; /* Light background for input */
	color: #333;
}

.subscribe-slide-tab .tab-content .btn-primary {
	background-color: #ffc107; /* Example: Contrasting button color like yellow/orange */
	border-color: #ffc107;
	color: #212529; /* Dark text on light button */
	width: 100%;
	padding: 10px;
	font-weight: bold;
}
.subscribe-slide-tab .tab-content .btn-primary:hover {
	background-color: #e0a800;
	border-color: #d39e00;
}


.subscribe-slide-tab .close-tab-btn {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 1.8rem; /* Larger close icon */
	color: #ffffff;   /* White close icon */
	cursor: pointer;
	line-height: 1;
}

/* --- Donation Page - Frequently Asked Questions Section Styles --- */

.faq-section {
	padding: 60px 0 80px 0;
	background-color: #f0f9f6; /* Light mint background */
}

.faq-section .heading-section h2 {
	color: #2c3e50;
	margin-bottom: 40px;
}

.accordion {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	border: none; /* Remove Bootstrap's default outer accordion border if any */
}

.accordion-item {
	background-color: #fff; /* White background for the entire item */
	border: 1px solid #e0e6eb; /* A slightly more visible but still soft border */
	margin-bottom: 15px;
	border-radius: 12px !important; /* More pronounced rounded corners */
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Soft shadow to make items "pop" */
	transition: box-shadow 0.3s ease;
}
.accordion-item:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Slightly enhance shadow on hover */
}

.accordion-item:first-of-type {
	/* No specific top border radius needed due to individual item rounding */
}
.accordion-item:last-of-type {
	margin-bottom: 0;
	/* No specific bottom border radius needed */
}

.accordion-header {
	/* No specific style needed here, button takes precedence */
}

.accordion-button { /* Styles for the Question part */
	background-color: #ffffff; /* White background to match screenshot's question area */
	color: #2a3f3c; /* Dark teal/green for question text */
	font-family: 'Lato', sans-serif; /* Ensure consistent font */
	font-weight: 600;
	font-size: 1em; /* ADJUSTED: Reduced question font size */
	padding: 18px 25px; /* ADJUSTED: Increased padding for more space */
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid #f0f3f5; /* Subtle separator line IF the answer part is also white */
}

/* When the accordion button is NOT collapsed (i.e., the item is open) */
.accordion-button:not(.collapsed) {
	background-color: #f8f9fa; /* Slightly off-white when open, or keep it #fff */
	color: #59963f; /* ASF Accent Green for open question text */
	box-shadow: none !important; /* Ensure no shadow from Bootstrap default */
	border-bottom: 1px solid #e9ecef; /* Slightly more defined separator when open */
}

/* Styling the accordion arrow icon */
.accordion-button::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232a3f3c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	transition: transform 0.2s ease-in-out; /* Smooth arrow rotation */
	transform-origin: center;
	width: 1rem; /* Slightly smaller arrow */
	height: 1rem;
	background-size: 1rem;
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2340d29c'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	/* Bootstrap handles rotation: transform: rotate(-180deg); */
}

.accordion-body { /* Styles for the Answer part */
	padding: 20px 25px 25px 25px; /* ADJUSTED: Consistent and slightly more padding */
	font-size: 0.95em; /* ADJUSTED: Slightly increased answer font size */
	font-family: 'Roboto', sans-serif; /* Ensure consistent font */
	color: #333;
	line-height: 1.7;
	background-color: #fff; /* Ensure answer part is white */
}

/* --- End of Frequently Asked Questions Section Styles --- */


/* --- Donation Page - Our Commitment to Transparency Section Styles --- */

.commitment-section {
	padding: 60px 0 80px 0; /* More bottom padding if it's the last section */
	background-color: #f0f9f6; /* Light mint background, same as contribution section */
}

.commitment-section .heading-section h2 {
	color: #2c3e50;
	margin-bottom: 50px;
}

.commitment-card {
	background-color: #fff;
	padding: 30px 25px;
	border-radius: 20px; /* Very rounded corners as per screenshot */
	text-align: center;
	height: 100%; /* For equal height cards in a row */
	border: 1px solid #e0f0ea; /* Subtle border */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); /* Soft shadow */
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.commitment-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.commitment-icon {
	width: 60px; /* Adjust icon container size */
	height: 60px;
	background-color: #e6f5f0; /* Light mint background for icon circle */
	border-radius: 50%;
	color: #59963f; /* ASF Accent Green for icon symbol */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8em; /* Icon symbol size */
	margin-bottom: 20px;
}
.commitment-icon img { /* If using image icons */
	max-width: 55%;
	max-height: 55%;
}

.commitment-card h5 { /* Title like "Registered NPO" */
	font-family: 'Lato', sans-serif;
	font-size: 1.15em;
	font-weight: 700;
	color: #59963f; /* ASF Accent Green for title */
	margin-bottom: 8px;
}

.commitment-card p {
	font-size: 0.9em;
	color: #555;
	line-height: 1.5;
	margin-bottom: 0;
}

/* --- End of Our Commitment to Transparency Section Styles --- */

/* --- Donation Page - How Your Donation Is Used Section Styles --- */

.donation-usage-section {
	padding: 80px 0;
	background-color: #fff; /* White background for the section */
}

.donation-usage-section .heading-section h2 {
	color: #2c3e50;
	margin-bottom: 50px;
}

/* Left Panel: Fund Allocation */
.fund-allocation-panel {
	background-color: #f0f9f6; /* Light mint background */
	padding: 30px;
	border-radius: 15px;
	text-align: center;
}

.fund-allocation-panel h4 {
	font-family: 'Lato', sans-serif;
	font-size: 1.4em;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 10px;
}

.fund-allocation-panel .allocation-intro-text {
	font-size: 0.95em;
	color: #555;
	margin-bottom: 25px;
	max-width: 100%; /* Allow text to use full width of panel */
	/* margin-left: auto;
    margin-right: auto; /* Was centering this before, now let panel center it */
}

/* New wrapper for chart and legend */
.chart-and-legend-wrapper {
	display: flex;
	align-items: center; /* Vertically align legend and chart */
	justify-content: center; /* Center them if they don't take full width */
	gap: 20px; /* Space between legend and chart */
	flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.custom-chart-legend {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* Align items to the left */
	text-align: left;
	/* max-width: 150px; /* Adjust width as needed */
	flex-shrink: 0; /* Prevent legend from shrinking too much */
	margin: 0; /* Remove previous auto margins */
}

.legend-item {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	font-size: 0.9em;
}

.legend-color-box {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	margin-right: 8px;
	display: inline-block;
	flex-shrink: 0;
}

.legend-label {
	color: #333;
}

.chart-container-wrapper {
	position: relative;
	max-width: 220px; /* Adjust chart size - might need to be smaller to fit next to legend */
	/* margin: 0 auto 25px auto; /* Removed auto margins, flex handles positioning */
	flex-shrink: 0; /* Prevent chart from shrinking too much */
}

#fundAllocationChart {
	/* Chart.js will handle dimensions */
}

.donut-inner-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'Lato', sans-serif;
	font-size: 1.8em; /* Adjusted size to fit potentially smaller donut hole */
	font-weight: 900;
	color: #2a3f3c;
}


/* Right Column: Usage Details */
.usage-details-list {
	/* padding-left: 20px; /* Existing style, keep if needed */
}

.usage-item {
	display: flex;
	margin-bottom: 25px;
	position: relative;
	padding-left: 20px;
}

.usage-item-accent {
	position: absolute;
	left: 0;
	top: 5px;
	bottom: 5px;
	width: 4px;
	border-radius: 2px;
}

.usage-item-content h5 {
	font-family: 'Lato', sans-serif;
	font-size: 1.15em;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 5px;
}

.usage-item-content p {
	font-size: 0.95em;
	color: #555;
	line-height: 1.5;
	margin-bottom: 0;
}

.download-report-link {
	/* text-align: center;  <-- This can be removed if using Bootstrap's text-center class in HTML */
	margin-top: 30px; /* Or more, to give it adequate space */
	/* Ensure it's a block or full-width element if its parent column isn't already centering its block content */
}

/* Styles for the button itself - these are likely fine */
.download-report-link a.btn {
	font-size: 0.9em;
	font-weight: 500;
	color: #555;
	border-color: #ccc;
	/* display: inline-block; /* Default for buttons, which text-center will work on if parent is full width */
}
.download-report-link a.btn:hover {
	color: #fff;
	background-color: #59963f;
	border-color: rgba(31, 119, 27, 0.93);
}
.download-report-link .fa-download {
	margin-right: 8px;
}

/* Responsive adjustments for chart and legend layout */
@media (max-width: 767px) { /* Small devices */
	.chart-and-legend-wrapper {
		flex-direction: column; /* Stack legend on top of chart */
		align-items: center; /* Center items when stacked */
	}
	.custom-chart-legend {
		margin-bottom: 20px; /* Space between legend and chart when stacked */
		align-items: center; /* Center legend items themselves */
		text-align: center;
	}
	.chart-container-wrapper {
		max-width: 200px; /* Adjust chart size for smaller screens */
	}
	.donut-inner-text {
		font-size: 1.6em;
	}
}
/* --- End of How Your Donation Is Used Section Styles --- */


/* --- Donation Page - Make Your Contribution Section Styles --- */

.contribution-section {
	padding: 80px 0;
	background-color: #f0f9f6; /* Light mint background from screenshot */
}

.contribution-section .heading-section h2 {
	color: #2c3e50;
	margin-bottom: 15px;
}
.contribution-section .heading-section .lead {
	font-size: 1.1em;
	color: #555;
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
}

/* Donation Tabs */
.donation-tabs .nav-item .nav-link {
	background-color: #fff;
	color: #555;
	border: 1px solid #dce8e4;
	margin: 0 5px;
	border-radius: 8px; /* Rounded tabs */
	padding: 10px 20px;
	font-weight: 500;
	transition: all 0.3s ease;
}
.donation-tabs .nav-item .nav-link.active {
	background-color: #2a3f3c; /* Dark teal/green for active tab */
	color: #fff;
	border-color: #2a3f3c;
}
.donation-tabs .nav-item .nav-link:not(.active):hover {
	background-color: #e6f5f0;
	color: #2a3f3c;
}


/* Donation Option Cards */
.donation-option-card {
	background-color: #fff;
	border: 1px solid #dce8e4; /* Subtle border */
	border-radius: 12px;
	padding: 25px;
	text-align: left;
	height: 100%; /* For equal height with Bootstrap flex rows */
	position: relative; /* For icon positioning */
	display: flex;
	flex-direction: column;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.donation-option-card.is-emphasized,
.donation-option-card.selected { /* Style for the first card or a selected card */
	border: 2px solid #2a3f3c; /* Dark teal/green border */
	box-shadow: 0 5px 15px rgba(42, 63, 60, 0.1);
}
.donation-option-card:hover:not(.selected) {
	border-color: #59963f; /* ASF Accent green border on hover */
}


.donation-card-icon {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 35px;
	height: 35px;
	background-color: #e6f5f0; /* Light mint */
	border-radius: 50%;
	color: #59963f; /* ASF Accent green */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
}
.donation-card-icon img {
	max-width: 55%;
	max-height: 55%;
}


.donation-option-card h5 { /* Title like "Support a Learner" */
	font-family: 'Lato', sans-serif;
	font-size: 1.25em;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 10px;
}

.donation-amount {
	font-family: 'Lato', sans-serif;
	font-size: 1.5em; /* Prominent amount */
	font-weight: 700;
	color: #2a3f3c; /* Dark teal/green */
	margin-bottom: 10px;
}

.donation-description {
	font-size: 0.9em;
	color: #555;
	line-height: 1.6;
	margin-bottom: 20px;
	flex-grow: 1; /* Pushes button to the bottom */
}

.donation-option-card .btn {
	padding: 10px 15px;
	font-weight: 700;
	border-radius: 8px;
	margin-top: auto; /* Pushes button to bottom of flex column */
}
.donation-option-card .btn-primary { /* Green button */
	background-color: #2a3f3c;
	border-color: #2a3f3c;
	color: #fff;
}
.donation-option-card .btn-primary:hover {
	background-color: #1e2d2b;
	border-color: #1e2d2b;
}
.donation-option-card .btn-outline-secondary { /* White button with dark border */
	background-color: #fff;
	border: 2px solid #2a3f3c;
	color: #2a3f3c;
}
.donation-option-card .btn-outline-secondary:hover {
	background-color: #2a3f3c;
	color: #fff;
}

/* Custom Amount Input */
.custom-amount-input {
	text-align: right;
	font-weight: 700;
}
.custom-amount-input::placeholder {
	font-weight: normal;
}
.input-group-text {
	background-color: #e9ecef;
	border-right: 0; /* Remove border between R and input for seamless look */
	color: #495057;
	font-weight: 700;
}
.custom-amount-input {
	border-left:0;
}


.tax-deductible-note {
	font-size: 0.9em;
	color: #555;
}
.tax-deductible-note .fa-check-circle {
	color: #59963f; /* ASF Accent Green */
	margin-right: 5px;
}

/* --- End of Make Your Contribution Section Styles --- */


/* --- Donation Page - Why Your Gift Matters Section Styles --- */

.gift-matters-section {
	padding: 80px 0;
	background-color: #fff; /* White background for the section */
}

.gift-matters-section .heading-section h2 {
	color: #2c3e50; /* Dark blue/grey heading */
	margin-bottom: 50px; /* Space below the main title */
}

/* Left Column Panel */
.impact-points-panel {
	background-color: #f0f9f6; /* Light mint/green from screenshot */
	padding: 30px;
	border-radius: 15px;
	height: 100%; /* For equal height with testimonial panel if desired */
}

.impact-point-item {
	display: flex;
	align-items: flex-start; /* Align icon with the start of the text block */
	margin-bottom: 25px;
}
.impact-point-item:last-child {
	margin-bottom: 0;
}

.impact-point-icon {
	width: 45px;
	height: 45px;
	background-color: #59963f; /* ASF Accent Green */
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4em; /* Icon font size */
	margin-right: 20px;
	flex-shrink: 0;
}
.impact-point-icon img {
	max-width: 60%;
	max-height: 60%;
}

.impact-point-content h4 {
	font-family: 'Lato', sans-serif;
	font-size: 1.1em; /* Slightly smaller than feature titles */
	font-weight: 700;
	color: #59963f; /* ASF Accent Green for these titles */
	margin-bottom: 8px;
}

.impact-point-content p {
	font-size: 0.9em;
	color: #333; /* Darker text for readability on light mint */
	line-height: 1.6;
	margin-bottom: 0;
}

/* Right Column Panel - Testimonial */
.testimonial-panel {
	background-color: #2a3f3c; /* Dark teal/green from screenshot */
	padding: 40px;
	border-radius: 15px;
	color: #fff;
	height: 100%; /* For equal height columns */
	display: flex;
	flex-direction: column;
	justify-content: center; /* Vertically center content a bit if panel is taller */
}

.testimonial-quote-icon {
	font-size: 2.5em; /* Large quote icon */
	color: #59963f; /* ASF Accent Green - or a lighter shade of the panel green */
	margin-bottom: 20px;
	line-height: 1;
}
.testimonial-quote-icon .fa-quote-left {
	opacity: 0.8; /* Slight transparency for the quote icon */
}

.testimonial-text {
	font-size: 1.05em;
	line-height: 1.7;
	margin-bottom: 25px;
	font-style: italic;
	color: #e0e0e0; /* Light grey text on dark panel */
}

.testimonial-author {
	font-size: 0.95em;
	font-weight: 700;
	color: #ffffff; /* White author text */
	margin-bottom: 15px;
	text-align: left; /* Align author to left */
}

.testimonial-support-info {
	display: flex;
	align-items: center;
	font-size: 0.85em;
	color: #bdc3c7; /* Lighter grey for "Supporting since" text */
}
.testimonial-support-info .support-since-icon {
	color: #59963f; /* ASF Accent Green for this small icon */
	margin-right: 8px;
	font-size: 1.2em; /* Adjust size of this small icon */
	max-width: 18px; /* If using image for this icon */
	max-height: 18px;/* If using image for this icon */
}


/* Responsive adjustments for Why Your Gift Matters section */
@media (max-width: 991px) { /* Tablets */
	.impact-points-panel,
	.testimonial-panel {
		margin-bottom: 30px; /* Add space between panels when they stack */
		height: auto; /* Reset height if they stack */
	}
	.testimonial-panel {
		padding: 30px;
	}
}

/* --- End of Why Your Gift Matters Section Styles --- */

/* --- Donation Page Styles --- */

/* Donation Hero Section (styles for left column remain the same) */
.donation-hero-section {
	padding: 80px 0;
	background-color: #f4fbf8; /* Very light green/almost white background for the section */
}

.donation-hero-left .tagline-pill {
	display: inline-block;
	padding: 6px 12px;
	background-color: #e6f5f0;
	color: #59963f;
	font-size: 0.85em;
	font-weight: 500;
	border-radius: 20px;
	margin-bottom: 15px;
}
.donation-hero-left .tagline-pill .fa-star {
	margin-right: 5px;
}

.donation-hero-left h1 {
	font-family: 'Lato', sans-serif;
	font-size: 2.8em;
	font-weight: 900;
	color: #2c3e50;
	line-height: 1.3;
	margin-bottom: 20px;
}

.donation-hero-left .sub-heading {
	font-size: 1.1em;
	color: #555;
	margin-bottom: 25px;
	line-height: 1.6;
}

.donation-hero-left .donation-perks {
	margin-bottom: 30px;
	display: flex;
	gap: 20px;
}

.donation-hero-left .donation-perks span {
	font-size: 0.9em;
	color: #59963f;
	font-weight: 500;
}
.donation-hero-left .donation-perks span .fa-check-circle {
	margin-right: 6px;
}

.donation-hero-left .donation-actions .btn {
	padding: 12px 25px;
	font-size: 1em;
	font-weight: 700;
	border-radius: 8px;
	margin-right: 10px;
	letter-spacing: 0.5px;
}
.donation-hero-left .donation-actions .btn-donate-now {
	background-color: #59963f;
	border-color: rgba(31, 119, 27, 0.93);
	color: #fff;
}
.donation-hero-left .donation-actions .btn-donate-now:hover {
	background-color: #59963f;
	border-color: #59963f;
}
.donation-hero-left .donation-actions .btn-learn-more {
	background-color: #fff;
	border: 2px solid #bdc3c7;
	color: #2c3e50;
}
.donation-hero-left .donation-actions .btn-learn-more:hover {
	background-color: #f8f9fa;
	border-color: #2c3e50;
	color: #2c3e50;
}


/* Right Column - Stats Panel -- MODIFICATIONS BELOW -- */
.donation-hero-right {
	display: flex;
	align-items: center;
	justify-content: center; /* Keeps panel centered if col-lg-6 is wider */
}

.stats-card-panel {
	background-color: #eef3f1; /* Panel background - slightly off-white/light grey-green */
	padding: 15px; /* Reduced padding a bit for tighter grouping if cards have internal padding */
	border-radius: 16px; /* Slightly larger radius for the main panel */
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08); /* Soft, diffused shadow for the panel */
	width: 100%; /* Ensure panel uses available column width */
}

/* Ensure the row inside the panel uses flex for equal height columns if needed */
.stats-card-panel .row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px; /* Adjust gutter */
	margin-right: -10px; /* Adjust gutter */
}

.stats-card-panel .row > [class*="col-"] {
	padding-left: 10px; /* Gutter for spacing between cards */
	padding-right: 10px; /* Gutter for spacing between cards */
	margin-bottom: 20px; /* Spacing for rows of cards */
	display: flex; /* Make columns flex containers */
}
/* Remove bottom margin from last row of cards */
.stats-card-panel .row > .col-md-6:nth-last-child(-n+2) { /* Assuming 2 cards per row on medium, adjust if different */
	/* margin-bottom: 0; */ /* This might be too aggressive if only one item on last row. Better to let cards fill height. */
}


.stat-card {
	background-color: #fff;
	padding: 20px; /* Internal padding for card content */
	border-radius: 12px; /* Rounded corners for individual stat cards */
	text-align: left;
	width: 100%; /* Make card fill its column */
	height: 100%; /* Make card fill its flex column height */
	border: 1px solid #e9ecef; /* Very subtle border */
	box-shadow: none; /* Remove individual shadow in normal state, rely on panel shadow */
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	display: flex; /* Use flexbox for internal alignment */
	flex-direction: column; /* Stack icon, number, description vertically */
}

.stat-card:hover {
	transform: translateY(-5px); /* Lift effect */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Softer, more noticeable shadow on hover */
	border-color: #59963f; /* Accent border on hover */
}

.stat-icon {
	width: 40px;
	height: 40px;
	background-color: #e6f5f0;
	border-radius: 50%;
	color: #59963f;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3em;
	margin-bottom: 15px; /* Increased space below icon */
	flex-shrink: 0; /* Prevent icon from shrinking */
}
.stat-icon img {
	max-width: 55%;
	max-height: 55%;
}

.stat-number {
	font-family: 'Lato', sans-serif;
	font-size: 1.8em;
	font-weight: 900;
	color: #2c3e50;
	margin-bottom: 8px; /* Increased space below number */
	line-height: 1.1;
}

.stat-description {
	font-size: 0.8em;
	color: #7f8c8d;
	line-height: 1.4;
	margin-bottom: 0;
	flex-grow: 1; /* Allows description to push content if cards have varying heights (not an issue with height:100%) */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 991px) {
	.donation-hero-left {
		text-align: center;
		margin-bottom: 40px;
	}
	.donation-hero-left .donation-perks,
	.donation-hero-left .donation-actions {
		justify-content: center;
	}
	.donation-hero-left h1 {
		font-size: 2.4em;
	}
	/* Adjust panel padding for tablets if necessary */
	.stats-card-panel {
		padding: 10px;
	}
	.stats-card-panel .row > [class*="col-"] {
		margin-bottom: 15px; /* Ensure consistent spacing on tablets if they stack differently */
		padding-left: 7.5px;
		padding-right: 7.5px;
	}
	.stats-card-panel .row {
		margin-left: -7.5px;
		margin-right: -7.5px;
	}
}

@media (max-width: 767px) {
	.donation-hero-left h1 {
		font-size: 2em;
	}
	.stat-card {
		/* text-align: center; /* Optionally center content in stat cards on small screens */
		/* If centered, also center icon: */
		/* .stat-icon { margin-left: auto; margin-right: auto; } */
		padding: 15px; /* Slightly reduce padding on small screens */
	}
	.stat-number {
		font-size: 1.6em;
	}
}

/* --- End of Donation Page Styles --- */



/* --- Our Projects Page - Our Partners Section Styles --- */

.partners-section {
	padding: 60px 0;
	background-color: #fff; /* White background as per screenshot */
}

.partners-section .heading-section h2 {
	color: #333; /* Standard dark heading color */
	margin-bottom: 40px; /* Space below the title */
}

.partner-logo-item {
	padding: 15px; /* Space around each logo */
	text-align: center; /* Center the logo within its column */
	margin-bottom: 20px; /* Space below each item if they wrap */
}

.partner-logo-item img {
	max-width: 100%; /* Ensure logo is responsive within its column */
	max-height: 90px; /* Adjust max-height to control logo sizes and vertical alignment. This helps normalize varied logo dimensions. */
	height: auto; /* Maintain aspect ratio */
	opacity: 0.85; /* Slightly muted effect, optional */
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.partner-logo-item a:hover img {
	opacity: 1; /* Full opacity on hover */
	transform: scale(1.05); /* Slight zoom effect on hover */
}


/* --- Our Projects Page - Guidance Resources Section Styles --- */

.guidance-resources-section {
	padding: 60px 0;
	background-color: rgba(154, 159, 154, 0.09); /* Same very light green/mint background */
}

.resource-card {
	background-color: rgb(255, 255, 255);
	border-radius: 15px; /* Rounded corners for all cards */
	padding: 25px;
	width: 100%; /* Ensure it fills the column */
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
	display: flex; /* For flex properties on children if needed, and for link wrapper */
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.resource-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Wrapper to make the entire card clickable */
.resource-link-wrapper {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit; /* Inherit text color from parent */
	height: 100%; /* Make the link wrapper fill the card */
}
.resource-link-wrapper:hover {
	text-decoration: none;
	color: inherit;
}


.resource-card-icon {
	width: 50px; /* Consistent icon size */
	height: 50px;
	background-color: #59963f; /* ASF Accent Green */
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em; /* Icon font size */
	margin-bottom: 20px;
	flex-shrink: 0;
}
.resource-card-icon img {
	max-width: 60%;
	max-height: 60%;
}

.resource-card h4 { /* Title for icon-text cards */
	font-family: 'Lato', sans-serif;
	font-size: 1.25em;
	font-weight: 700;
	color: #333;
	margin-bottom: 10px;
}

.resource-card p {
	font-size: 0.9em;
	line-height: 1.6;
	color: #555;
	margin-bottom: 0; /* Remove bottom margin if link is below */
	flex-grow: 1; /* Allows text to take available space if card heights are aligned */
}

/* Styles for the highlighted "Guidance Booklets" card */
.resource-card-highlight {
	background-color: #59963f; /* ASF Accent Green */
	color: #fff;
}

.resource-card-highlight h3 { /* Specific heading for highlight card */
	font-family: 'Lato', sans-serif;
	font-size: 1.5em; /* Larger title */
	font-weight: 700;
	color: #fff;
	margin-bottom: 15px;
}
.resource-card-highlight p {
	color: #f0f0f0; /* Lighter text on green background */
	font-size: 0.95em;
}


/* Styles for image-only cards */
.resource-card-image-item {
	padding: 0; /* Remove padding if card is just an image */
	overflow: hidden; /* Ensures image respects rounded corners */
}
.resource-card-image-item .resource-image-link {
	display: block; /* Make link take full space */
	height: 100%;
}
.resource-card-image-item img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensures image covers the card area */
	display: block;
	border-radius: 15px; /* Apply to image if padding is 0 on card */
}


/* Flexbox for equal height cards in a row */
/* .d-flex on .col-lg-4 is already doing this. .resource-card needs width:100% and height:100% if not using .d-flex on parent col.
   Since we used d-flex on the col, .resource-card itself will stretch.
   The .resource-link-wrapper with height:100% ensures the clickable area covers the stretched card.
*/

/* --- End of Guidance Resources Section Styles --- */

/* Styles for the Hero Banner on Our Projects page */
.projects-hero-section {
	background-image: url('../images/projects_banner.jpg'); /* Adjust path if custom.css is in a subfolder of css/ and images is in root */
	background-size: cover;
	background-position: center;
	padding: 100px 0; /* Adjust padding as needed */
	color: #fff;
	text-align: center;
	position: relative;
}

.projects-hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3); /* Dark overlay */
	z-index: 1;
}

.projects-hero-section .container {
	position: relative;
	z-index: 2;
}
.project-card-item .learn-more-link {
	/* Define the base style for your link if not already defined elsewhere */
	/* For example: */
	color: #fff3cd; /* Replace with the ACTUAL current color of your link text */
	/* background-color: #ffffff; */ /* Replace with the ACTUAL current background-color of your link, if any */
	/* Add any other base styles like padding, border-radius, etc. if needed */
}

.project-card-item .learn-more-link:hover,
.project-card-item .learn-more-link:focus { /* It's good practice to style :focus the same as :hover for accessibility */
	color: #FFFFFF; /* Set this to the SAME color as the base state */
	/* background-color: #ffffff; */ /* Set this to the SAME background-color as the base state, if any */
	text-decoration: none; /* Optional: if you want to remove underline on hover */
	/* Ensure no other properties like border-color change either, if applicable */
}

.projects-hero-section h1 {
	font-size: 3.2em; /* Consider making this a variable or class if used elsewhere */
	font-weight: 900;
	margin-bottom: 20px;
	color: #fff; /* Ensure text visibility */
}

/* Styles for the Project Cards Section */
.projects-cards-section {
	padding: 60px 0;
	background-color: #e6f5f0; /* Black background for this section */
}

.project-card-item {
	background-color: #5a9740; /* Dark green for cards */
	border-radius: 15px;
	padding: 30px;
	margin-bottom: 30px; /* Handled by Bootstrap's row > col spacing or mb-4 on cols if preferred */
	color: #ffffff;
	display: flex;
	flex-direction: column;
	height: 100%; /* For equal height cards */
}

.project-card-item .number-badge {
	width: 50px;
	height: 50px;
	border: 2px solid #ffffff;
	border-radius: 8px; /* Rounded square */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 20px;
}

.project-card-item h3 {
	font-family: 'Lato', sans-serif; /* Ensure Lato is applied if not inherited */
	font-size: 1.6em;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 15px;
}

.project-card-item p {
	font-size: 0.95em;
	color: #e0e0e0; /* Light grey text */
	line-height: 1.6;
	flex-grow: 1; /* Pushes link to bottom */
	margin-bottom: 20px;
}

.project-card-item .learn-more-link {
	text-transform: uppercase;
	font-size: 0.9em;
	font-weight: 500; /* Using Roboto's 500 weight from your font import */
	color: #ffffff;
	text-decoration: none;
	letter-spacing: 0.5px;
	display: inline-block;
	margin-top: auto; /* Aligns to bottom if card content varies */
}

.project-card-item .learn-more-link:hover {
	color: #59963f; /* ASF Accent Green */
	text-decoration: none;
}

/* Styles for the Project Detail Section (Two-Column Layout) */
.project-detail-section {
	padding: 60px 0;
	background-color: #f0f9f6;
	overflow-x: hidden;
}

.project-detail-content {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.project-detail-content .row {
	display: flex;
	flex-wrap: wrap;
	/* align-items: stretch; */ /* This is Bootstrap's default, ensuring columns can be equal height.
                                 Remove align-items: flex-start !important; if you added it. */
}

.project-detail-left-col {
	padding: 30px;
	display: flex;
	flex-direction: column;
}

.project-detail-left-col h2 {
	font-family: 'Lato', sans-serif;
	font-size: 2em;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 20px;
	line-height: 1.3;
	text-align: center;
	width: 100%;
}

.project-detail-image {
	width: 100%;
	max-width: 550px;
	height: auto;
	border-radius: 10px;
	margin-top: 0;
	margin-bottom: 25px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.project-detail-left-col p {
	font-size: 1em;
	color: #555555;
	line-height: 1.7;
	margin-bottom: 15px;
	text-align: justify;
}
.project-detail-left-col p:last-of-type {
	margin-bottom: 0;
}

.project-detail-right-col {
	background-color: #e6f5f0;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	padding: 40px 30px;
	display: flex;             /* Ensure it's a flex container */
	flex-direction: column;    /* Stack its children (the feature items) vertically */
	justify-content: center; /* <<< THIS IS THE KEY CHANGE to vertically center its content */
}

.feature-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 25px;
}
.feature-item:last-child {
	margin-bottom: 0;
}

.feature-icon {
	width: 45px;
	height: 45px;
	background-color: #59963f;
	border-radius: 50%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3em;
	margin-right: 15px;
	flex-shrink: 0;
}
.feature-icon img {
	max-width: 55%;
	max-height: 55%;
	display: block;
}

.feature-content h4 {
	font-family: 'Lato', sans-serif;
	font-size: 1.15em;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 6px;
}

.feature-content p {
	font-size: 0.9em;
	color: #555555;
	line-height: 1.6;
	margin-bottom: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) { /* Tablets - when columns stack */
	.project-detail-left-col {
		padding: 25px;
	}
	.project-detail-right-col {
		margin-top: 30px;
		border-radius: 8px;
		padding: 30px 25px;
		justify-content: flex-start; /* Revert to top alignment when stacked */
	}
	.project-detail-left-col h2 {
		font-size: 1.8em;
		text-align: center;
	}
	.project-detail-image {
		max-width: 400px;
	}
	.project-detail-left-col p {
		text-align: center;
	}
	.feature-content h4 {
		font-size: 1.1em;
	}
}

@media (max-width: 767.98px) { /* Mobile phones */
	.project-detail-section {
		padding: 40px 0;
	}
	.project-detail-left-col,
	.project-detail-right-col {
		padding: 20px;
	}
	.project-detail-right-col {
		padding: 25px 20px;
	}
	.project-detail-left-col h2 {
		font-size: 1.6em;
	}
	.project-detail-image {
		max-width: 100%;
	}
	.feature-icon {
		width: 40px;
		height: 40px;
		font-size: 1.2em;
		margin-right: 12px;
	}
}

/* Annual Report Section Styling */
.annual-report-section {
	padding: 80px 0; /* More padding for a standalone important section */
	background-color: #eef2f7; /* Slightly different or same as newsletter: #f8f9fa; */
	animation: fadeInSection 0.8s ease-in-out; /* Re-using animation */
}

.annual-report-content-wrapper {
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
	padding: 40px;
	overflow: hidden; /* If inner elements have negative margins or large shadows */
}

@media (max-width: 767px) { /* For mobile */
	.annual-report-content-wrapper {
		padding: 25px;
	}
	.annual-report-text h3 {
		text-align: center;
	}
	.annual-report-image-col {
		margin-top: 30px; /* Space between text and image on mobile */
	}
	.report-buttons {
		text-align: center; /* Center buttons on mobile */
	}
}

.annual-report-text h3 {
	font-size: 2.5rem; /* Prominent heading */
	font-weight: 700;
	color: #2c3e50; /* Darker, sophisticated blue/grey */
	margin-bottom: 20px;
	line-height: 1.3;
}

.annual-report-text p {
	font-size: 1.1rem;
	color: #555;
	line-height: 1.7;
	margin-bottom: 25px;
}

.report-buttons .btn {
	margin-right: 10px; /* Space between buttons */
	margin-bottom: 10px; /* For stacking on smaller screens if they wrap */
	font-weight: 500;
	padding: 12px 25px; /* Consistent padding */
	transition: all 0.3s ease; /* Smooth transition for all button properties */
}

.report-buttons .btn-primary { /* Matching newsletter primary button */
	background-color: #0056b3;
	border-color: #0056b3;
}

.report-buttons .btn-primary:hover {
	background-color: #004494;
	border-color: #003b80;
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(0, 86, 179, 0.3);
}

.report-buttons .btn-outline-secondary { /* Matching newsletter secondary button */
	color: #6c757d;
	border-color: #6c757d;
}

.report-buttons .btn-outline-secondary:hover {
	background-color: #6c757d;
	color: #ffffff;
	transform: translateY(-3px);
	box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3);
}

.annual-report-image-col .image-container {
	border-radius: 10px; /* Rounded corners for the image container */
	overflow: hidden; /* Ensures image respects border-radius if it scales */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.annual-report-image-col .report-image {
	display: block;             /* Remove extra space below image */
	width: 100%;                /* Makes image responsive to container width */
	max-width: 450px;           /* <<<< ADD THIS: Set your desired max width */
	height: auto;               /* <<<< ADD THIS: Maintain aspect ratio */
	margin-left: auto;          /* <<<< ADD THIS (Optional): Center image if narrower than column */
	margin-right: auto;         /* <<<< ADD THIS (Optional): Center image if narrower than column */
	border-radius: 10px;        /* Match container or can be removed if container handles it */
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.3s ease-in-out;
}

.annual-report-image-col .image-container:hover {
	transform: translateY(-8px) scale(1.02); /* Slight lift and scale for the container */
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.annual-report-image-col .image-container:hover .report-image {
	transform: scale(1.1); /* Image zooms more significantly within its container */
	filter: brightness(103%); /* Subtle brightness increase */
}

/* Animations (can reuse from newsletter or define specifically) */
/* Assuming fadeInSection is already defined from newsletter CSS */

.annual-report-content-wrapper { /* Staggered animation for content */
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUpItem 0.6s ease-out forwards;
	animation-delay: 0.2s; /* Delay after section fades in */
}

/* Ensure fadeInUpItem animation is defined if not already: */
@keyframes fadeInUpItem {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Newsletter Section Styling */
.newsletters-section {
	padding: 60px 0;
	background-color: #f8f9fa;
}

.newsletters-section h2 {
	text-align: center;
	margin-bottom: 40px;
	font-weight: 700;
	color: #333;
}

.newsletter-layout-grid {
	display: grid;
	grid-template-columns: 1fr; /* Single column by default for mobile */
	gap: 30px;
}

@media (min-width: 992px) {
	.newsletter-layout-grid {
		grid-template-columns: 2fr 1fr;
	}
}

.latest-newsletter-column .newsletter-item {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	padding: 30px;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
}

.latest-newsletter-column .newsletter-item:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.latest-newsletter-column .icon-area {
	margin-bottom: 20px;
}

.latest-newsletter-column .icon-area img {
	max-width: 80px;
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Added for hover effect */
}

/* === NEW HOVER EFFECT FOR LARGE IMAGE === */
.latest-newsletter-column .newsletter-item:hover .icon-area img {
	transform: scale(1.1);
	filter: brightness(105%);
}

.latest-newsletter-column .details-area h4 {
	font-size: 1.75rem;
	color: #59963f;
	margin-bottom: 15px;
}

.latest-newsletter-column .newsletter-description {
	font-size: 1rem;
	color: #555;
	margin-bottom: 25px;
	line-height: 1.6;
}

.previous-newsletters-column {
	display: flex;
	flex-direction: column;
	gap: 30px; /* This ensures equal space between the two items */
}

.previous-newsletters-column .newsletter-item {
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	padding: 20px;
	display: flex;
	align-items: center;
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.previous-newsletters-column .newsletter-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.previous-newsletters-column .icon-area.small-icon {
	margin-right: 15px;
	flex-shrink: 0;
}

.previous-newsletters-column .icon-area.small-icon img {
	max-width: 40px;
	transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* Added for hover effect */
}

/* === NEW HOVER EFFECT FOR SMALLER IMAGES === */
.previous-newsletters-column .newsletter-item:hover .icon-area.small-icon img {
	transform: scale(1.15); /* Slightly more scale for smaller icons */
	filter: brightness(105%);
}

.previous-newsletters-column .details-area h5 {
	font-size: 1.1rem;
	color: #333;
	margin-bottom: 8px;
}

.btn-download {
	font-weight: 500;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.latest-newsletter-column .btn-download {
	padding: 12px 30px;
	font-size: 1.1rem;
}

.previous-newsletters-column .btn-download {
	padding: 8px 15px;
	font-size: 0.9rem;
}

/* Clean Professional Effects & Animations */
.newsletters-section {
	animation: fadeInSection 0.8s ease-in-out;
}

@keyframes fadeInSection {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.newsletter-item {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUpItem 0.5s ease-out forwards;
}

.latest-newsletter-column .newsletter-item {
	animation-delay: 0.2s;
}

.previous-newsletters-column .newsletter-item:nth-child(1) {
	animation-delay: 0.4s;
}
.previous-newsletters-column .newsletter-item:nth-child(2) {
	animation-delay: 0.6s;
}

@keyframes fadeInUpItem {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.find-older {
	margin-top: 40px;
	text-align: center;
}

.find-older .btn-light {
	border-color: #ddd;
}

.find-older .btn-light:hover {
	background-color: #e9ecef;
	border-color: #ccc;
}


/* Styles for the Success Story Cards (enhancing your existing .story-card) */
.story-card {
	background-color: #fff;
	border: 1px solid #e0e0e0; /* Lighter border */
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Softer shadow */
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%; /* For equal height cards in a row if using d-flex on parent */
	display: flex;
	flex-direction: column;
}

.story-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.story-card img {
	/* If you want the image to be a fixed size circle like in the original screenshot for this section */
		 width: 300px;
       height: 300px;
       border-radius: 50%;
       margin: 20px auto 15px auto;
       object-fit: cover;
       border: 3px solid #f0f0f0;


}
.story-card-body {
	flex-grow: 1; /* Allows body to take remaining space */
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Pushes button to bottom */
}

.story-card h4 {
	font-family: 'Lato', sans-serif; /* From your theme */
	font-size: 1.4em;
	margin-top: 15px;
	margin-bottom: 8px;
	color: #333;
}

.story-card p.text-muted {
	font-size: 0.9em;
	color: #666;
	margin-bottom: 15px;
	flex-grow: 1; /* Allows paragraph to take space before button */
}

.story-card .btn-more {
	text-transform: uppercase;
	font-size: 0.85em;
	padding: 10px 20px;
	/* Use your theme's primary button style if .btn-primary is defined */
	background-color: #59963f; /* ASF Accent */
	border-color: rgba(31, 119, 27, 0.93);
	color: #fff;
	margin-top: auto; /* Pushes button to bottom */
}
.story-card .btn-more:hover {
	background-color: rgba(31, 119, 27, 0.93); /* Darker shade */
	border-color: #59963f;
}


/* Modal Specific Styles */
.student-modal-profile img {
	max-width: 180px; /* Adjust as needed */
	margin-bottom: 15px !important; /* Bootstrap override */
	border: 3px solid #eee;
}
.student-modal-profile h5 {
	font-family: 'Lato', sans-serif;
	font-size: 2.5em;
	color: #000000;
	margin-bottom: 5px;
}
.student-modal-profile p.small {
	font-size: 1.2em;
}

.student-modal-story p {
	font-size: 1em;
	line-height: 1.7;
	color: #000000;
	text-align: left;
}
.modal-header .modal-title {
	font-family: 'Lato', sans-serif;
}


/* === General Section CSS (in your custom.css or main stylesheet) === */
.where-we-operate-section { padding: 80px 0; background-color: #f8f9fa; overflow: hidden; }
.where-we-operate-section .container > h2 { text-align: center; margin-bottom: 30px; font-size: 2.8em; font-weight: 700; font-family: 'Lato', sans-serif; color: #333; position: relative; }
.where-we-operate-section .container > h2::after { content: ''; display: block; width: 100px; height: 2px; background-color: #59963f; margin: 10px auto 0; border-radius: 1px; }
.where-we-operate-section .description-text { padding-right: 30px; display: flex; flex-direction: column; justify-content: center; }
.where-we-operate-section .description-text p { margin-bottom: 20px; line-height: 1.8; font-size: 1.05em; color: #555; }
.where-we-operate-section .description-text strong { color: #333a45; font-weight: 600; }
.map-legend { margin-top: 20px; }
.map-legend p { display: flex; align-items: center; font-size: 0.9em; color: #555; }
.legend-color-highlight { display: inline-block; width: 20px; height: 20px; background-color: #59963f; border-radius: 4px; margin-right: 10px; border: 1px solid #59963f; }

/* === Map Container and SVG Sizing === */
.map-container-styled {
	position: relative; /* For tooltips and zoom buttons */
	background-color: #ffffff;
	padding: 15px;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	width: 100%;
}

#sa-map-svg { /* Targeting the SVG by its ID */
	width: 100%;
	height: auto;
	display: block;
	/* The viewBox will handle the aspect ratio */
}

/* Styles specific to this SVG's paths - Place inside <svg><style> HERE </style></svg> */
#sa-map-svg g#SA path { /* Target paths INSIDE the g#SA group */
	stroke: #FFFFFF;
	stroke-width: 0.75px;
	fill: #E0E0E0;     /* Default unhighlighted grey for ALL paths */
	transition: fill 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out;
	transform-origin: center center;
}



/* --- HOVER STYLES --- */
/* Hover effect for the 3 initially highlighted provinces - makes them darken */
#sa-map-svg g#SA path#WC:hover,
#sa-map-svg g#SA path#NC:hover,
#sa-map-svg g#SA path#EC:hover {
	fill: rgba(31, 119, 27, 0.93); /* Darker shade of #40d29c */
	opacity: 0.95; /* Slightly adjust opacity if desired */
	cursor: pointer;
}

/* Hover effect for OTHER provinces */
#sa-map-svg g#SA path:not(#WC):not(#NC):not(#EC):hover {
	fill: #BDBDBD; /* Slightly darker grey for other provinces on hover */
	cursor: pointer;
}

/* === Basic CSS Tooltip Styling (from previous response) === */
.map-tooltip {
	position: fixed; /* Use fixed to position relative to viewport, helps with SVG transforms */
	background-color: rgba(0, 0, 0, 0.85);
	color: white;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 0.9em;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
	transform: translate(-50%, -130%); /* Initial position above cursor */
	white-space: nowrap;
	z-index: 1001; /* Higher than zoom controls */
	visibility: hidden;
}
.map-tooltip.visible {
	opacity: 1;
	visibility: visible;
}

/* === Placeholder for Zoom Buttons (from previous response) === */
.map-zoom-controls {
	position: absolute;
	top: 10px; /* Adjust positioning */
	right: 10px;
	z-index: 1000;
}
.map-zoom-controls button {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 5px 10px;
	margin-left: 5px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.map-zoom-controls button:hover {
	background-color: #f0f0f0;
}
.impact-intro-banner-section {
	/* No specific background here, as child elements will have it */
	padding-bottom: 5px; /* Space below stats before next section */
}

.intro-banner-with-background {
	position: relative; /* Ensures pseudo-element is positioned relative to this */
	padding: 60px 0;   /* Or your desired padding */
	text-align: center;
	color: #ffffff;       /* Text color, assuming it's light on a darker/blurred background */
	overflow: hidden;   /* Helps contain the blur effect if it extends beyond edges */
	/* Remove background-image properties from the main element if they were here */
}

.intro-banner-with-background::before {
	content: ''; /* Necessary for the pseudo-element to be generated */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('../images/impact-banner-background.jpg'); /* Or your actual image path */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	filter: blur(1px); /* --- This is where you add the blur --- Adjust "4px" as needed */
	z-index: -1; /* Places the blurred background behind the content of .intro-banner-with-background */
}

/* Ensure your content container is positioned above the pseudo-element */
.intro-banner-with-background .container {
	position: relative; /* Keeps it in the normal flow but allows z-index */
	z-index: 1;         /* Ensures content is above the ::before pseudo-element */
}

/* Styles for the text within the intro banner */
.intro-banner-text {
	color: #ffffff !important; /* Darker green text color - !important ensures it overrides other color rules */
	font-weight: 600 !important; /* Make it a bit bolder (original was 500) - adjust as needed */



	/* Option 2: Subtle darker text shadow (can also work, creates a slightly inset look) */
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4) !important;

	/* Option 3: No shadow, but with an outline (can be stark, use with care) */
	/* -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.5); */ /* For WebKit browsers */
	/* text-stroke: 0.5px rgba(255, 255, 255, 0.5); */        /* Standard (less browser support) */

	/* Keep existing styles from inline block or add if needed, !important if overriding */
	font-size: 1.5em !important;
	line-height: 1.7 !important;
	margin-bottom: 0 !important;
}

/* Container for just the stats below the banner */
.stats-container {
	background-color: #ffffff; /* Or keep transparent if section bg is desired */
	padding: 10px 0 20px 0; /* Padding above and below stats */
}

/* Existing styles for .stat-items-row, .col-lg-3, .stat-item, .icon, .counter, .label remain the same */
/* (Copied from previous response for completeness here) */
.stat-items-row {
	display: flex;
	flex-wrap: wrap;
}
.stat-items-row > .col-lg-3,
.stat-items-row > .col-md-6 {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}
.stat-item {
	background-color: #333a45;
	color: #fff;
	padding: 35px 20px;
	border-radius: 10px;
	text-align: center;
	width: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.stat-item .icon {
	margin-bottom: 15px; /* Space below icon */
	color: #59963f;
}
.stat-item .icon .fa {
	font-size: 2.5em; /* Adjusted icon size */
}

/* UPDATED FONT SIZES FOR COUNTERS */
.stat-item .counter span, /* Targets .custom-counter-span */
.stat-item .counter .custom-counter-span {
	font-size: 2.2rem;  /* REDUCED from 2.8em */
	font-weight: 700;
	display: block;
	line-height: 1.2;
	margin-bottom: 8px;
	color: #fff;
}

.stat-item .label {
	font-size: 0.85em; /* Slightly smaller label */
	text-transform: uppercase;
	color: #bdc3c7;
	letter-spacing: 0.5px;
}

.impact-stats-section {
	background-color: #ffffff; /* Or your desired background */
	padding: 60px 0; /* Adjust padding as needed */
	text-align: center;
}

.impact-stats-section .intro-text {
	margin-bottom: 50px; /* Increased spacing */
	font-size: 1.1em; /* Or match your theme's paragraph style */
	color: #555; /* Or match your theme's text color */
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.7;
}

/* Styling for the row containing stat items to enable equal heights */
.stat-items-row {
	display: flex;
	flex-wrap: wrap;
}

/* Ensure columns take up full height of their flex container */
.stat-items-row > .col-lg-3,
.stat-items-row > .col-md-6 {
	display: flex; /* Makes the column a flex container itself */
	flex-direction: column; /* Stack items vertically within the column */
	margin-bottom: 30px; /* Spacing for items on smaller screens when they wrap */
}

.stat-item {
	background-color: #333a45; /* Dark background from image */
	color: #fff; /* White text */
	padding: 35px 20px; /* Increased padding */
	border-radius: 10px; /* More rounded corners like the image */
	text-align: center;
	width: 100%; /* Make stat-item take full width of its column */
	flex-grow: 1; /* Allows the stat-item to grow and fill the column height */
	display: flex;
	flex-direction: column;
	justify-content: center; /* Center content vertically */
	align-items: center; /* Center content horizontally */
}

.stat-item .icon {
	margin-bottom: 20px; /* Increased spacing */
	color: #59963f; /* A green accent color, adjust as needed or use white */
	/* If you used <img> tags for icons, you might need:
    filter: brightness(0) invert(1); For white icons on dark bg
    max-height: 40px;
    */
}

.stat-item .icon .fa { /* For Font Awesome icons */
	font-size: 3em; /* Adjust icon size */
}


.stat-item .counter span { /* Target the span containing the number */
	font-size: 2.8em; /* Large number size */
	font-weight: 700; /* Bold numbers */
	display: block;
	line-height: 1.2;
	margin-bottom: 8px; /* Spacing below number */
	color: #fff; /* Ensure number is white */
}

.stat-item .label {
	font-size: 0.95em; /* Slightly larger label */
	text-transform: uppercase;
	color: #bdc3c7; /* Lighter grey for label text */
	letter-spacing: 0.5px;
}

/* Responsive adjustments if needed */
@media (max-width: 991px) { /* Medium devices (tablets, less than 992px) */
	.stat-item .counter span {
		font-size: 2.4em;
	}
	.stat-item .icon .fa {
		font-size: 2.5em;
	}
}

@media (max-width: 767px) { /* Small devices (landscape phones, less than 768px) */
	.stat-items-row > .col-md-6 {
		/* Ensure two items per row if that's the design, Bootstrap handles this with col-md-6 */
	}
	.stat-item {
		padding: 25px 15px;
	}
	.stat-item .counter span {
		font-size: 2em;
	}
	.stat-item .icon .fa {
		font-size: 2.2em;
	}
}

.background-green{
	background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)) !important;
}

.btn-default{
	background-color: #59963f !important;
	border-color: #5a9740 !important;
}

.heading-text.heading-section h2:before {	
	background-color: #5a9740 !important;
}

.tabs .nav-tabs .nav-link.active {
	color: #5a9740 !important;
}

.background-colored{
	background-color: #5a9740 !important;
}

.p-progress-bar, .progress-bar {
	background-color: #5a9740 !important;
}