.scroller-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            padding: 30px;
            
            width: 90%;
        }

        .scroller-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .image-track {
            display: flex;
            gap: 15px;
            transition: transform 0.4s ease;
        }

        .image-item {
            flex-shrink: 0;
            max-width: 460px;
        }

        .image-item img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            display: block;
        }

        .image-item .caption {
            margin-top: 10px;
            font-size: 14px;
            color: #333;
            text-align: center;
            word-wrap: break-word;
        }

        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        button {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        button:hover:not(:disabled) {
            background: #5568d3;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        button:active:not(:disabled) {
            transform: translateY(0);
        }

        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }

        .scroll-info {
            font-size: 14px;
            color: #666;
            text-align: center;
            margin-top: 10px;
        }

				.css_aboutSection
{
padding: 3rem 1rem;
}


.css_wrap
{
max-width: 1100px;
margin: 0 auto;
text-align: center;
}


.css_sectionTitle
{
margin: 0 0 1.75rem 0;
font-size: 2rem;
line-height: 1.2;
text-transform: none;
}


.css_cardGrid
{
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem; /* increased spacing between cards */
align-items: stretch;
}


@media ( max-width: 768px )
{
.css_cardGrid
{
grid-template-columns: 1fr;
gap: 1.5rem; /* slightly reduced gap for mobile */
}
}


.css_card
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 1.25rem 1.25rem 1.5rem 1.25rem;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}


.css_cardHead
{
margin: 0 0 0.75rem 0;
font-size: 1.25rem;
line-height: 1.3;
text-align: center;
}


.css_imgBox
{
width: 100%;
display: flex;
justify-content: center;
margin: 0.25rem 0 0.75rem 0;
}


.css_img
{
width: 80%;
height: auto;
display: block;
border-radius: 10px;
}


.css_cardText
{
margin: 0;
line-height: 1.6;
text-align: center;
}

.section-left h2 {
display: inline-block;
background: #c40000;
color: #fff;
padding: 0.5rem 1rem;
border-radius: var(--radius);
font-size: 1.8rem;
line-height: 1.3;
margin-bottom: 1rem;
white-space: pre-line; /* allows line breaks */
}

.css_donationSection {
	width: 100%;
	text-align: center;
	padding: 3rem 1rem;
	/*background-color: #f9f9f9;*/
}

.css_donationHeader {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 2rem;
	text-transform: uppercase;
}

.css_donationList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 1000px;
}

.css_donationItem {
	background-color: #fff;
	border-radius: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	padding: 1.5rem;
	transition: transform 0.3s ease;
}

.css_donationItem:hover {
	transform: translateY(-5px);
}

.css_donationSubHeader {
	font-size: 1.4rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

.css_imgWrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

.css_imgWrapper img {
	width: 100%;
	max-width: 300px;
	border-radius: 0.75rem;
}

.css_donationText {
	font-size: 1rem;
	line-height: 1.6;
	color: #333;
}

.css_history_section
{
width: 100%;
padding: 3rem 1rem;
background: #fff;
display: flex;
justify-content: center;
}


.css_history_container
{
max-width: 1200px;
width: 100%;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border-radius: 16px;
padding: 2rem;
}


.css_history_header h1
{
font-size: 1.8rem;
margin-bottom: 0.5rem;
text-transform: uppercase;
text-align: center;
width: 100%;
}


.css_history_header h2
{
font-size: 1.2rem;
color: #a00;
text-transform: uppercase;
margin-bottom: 1.5rem;
}


.css_history_text
{
font-size: 1rem;
line-height: 1.6;
margin-bottom: 2rem;
color: #333;
}


.css_video_wrapper
{
position: relative;
width: 90%;
margin: 0 auto;
padding-bottom: 50.625%; /* 16:9 ratio adjusted for 90% width */
height: 0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


.css_video_wrapper iframe
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 12px;
}


@media ( max-width: 768px )
{
.css_history_container
{
padding: 1.5rem;
}


.css_video_wrapper
{
width: 100%;
padding-bottom: 56.25%; /* true 16:9 ratio for mobile */
}
}

.css_section-now {
padding: 3rem 1rem;
}


.css_now-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}


/* Header */
.css_now-header h1,
.css_now-header h2 {
margin: 0;
line-height: 1.2;
text-transform: uppercase;
}


.css_now-header h1 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
.css_now-header h2 { font-size: clamp(1rem, 2vw, 1.25rem); opacity: 0.85; }


.css_now-text {
margin: 1rem auto 2rem auto;
max-width: 70ch;
text-align: center;
}


/* Gallery */
.css_now-gallery {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}


.css_now-hero {
width: 100%;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}


.css_now-hero img {
display: block;
width: 100%;
height: auto;
}


.css_now-thumbs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}


.css_now-thumbs img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 0.75rem;
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}


/* Responsive tweaks */
@media (max-width: 680px) {
.css_now-thumbs {
grid-template-columns: 1fr;
}
}

.css_facilitiesSection {
line-height: 1.6;
margin: 0;
}


.css_facilitiesList {
--gap: 2rem;
width: 70%;
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: var(--gap);
}


.css_facilityItem {
flex: 0 1 calc((100% - (2 * var(--gap))) / 3);
display: flex;
}


.css_facilityCard {
--icon-row-height: 72px;
flex: 1;
display: grid;
grid-template-rows: var(--icon-row-height) auto;
gap: .75rem;
align-items: start;
justify-items: center;
text-align: center;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
padding: 1.25rem;
text-transform: uppercase;
}


.css_iconWrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}


.css_icon svg {
width: 42px;
height: 42px;
color: #b21f24;
}


.css_textWrap {
width: 100%;
display: block;
text-align: center;
align-self: start;
}


.css_facilityText {
color: #111;
margin: 0;
}


@media ( max-width: 768px ) {
.css_facilitiesList {
width: 100%;
}
.css_facilityItem {
flex: 0 1 100%;
}
}


.css_dream_section {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.css_dream_bg_block {
	position: relative;
	width: 100%;
	/* 1920x1080 => 16:9 exact ratio, keeps full image without cropping */
	aspect-ratio: 16 / 9;
	background-image: url("../img/GirlsBG.webp");
	background-size: contain; /* show whole image */
	background-position: center;
	background-repeat: no-repeat;
	/* no padding here so the div height is controlled purely by aspect-ratio */
	color: #fff;
}

/* horizontally-centered, top-aligned content over the image */
.css_dream_inner {
	position: absolute;
	top: clamp(1rem, 4vw, 2rem); /* top spacing responsive */
	left: 50%;
	transform: translateX(-50%);
	width: min(90%, 900px);
	text-align: center; /* horizontal center only */
}

.css_dream_inner h1 {
	font-size: clamp(1.8rem, 4vw, 2.5rem);
	margin-bottom: 0.75rem;
	color: #fff;
}

.css_dream_inner h2 {
	font-size: clamp(1.1rem, 2.5vw, 1.5rem);
	margin-bottom: 1rem;
	color: #fff;
}

.css_dream_inner p {
	line-height: 1.7;
	font-size: 1rem;
	color: #fff;
}

/* optional readability overlay; comment out if not needed
.css_dream_bg_block::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 70%);
	pointer-events: none;
} */

.css_dream_bg_block h1 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: #fff;
}

.css_dream_bg_block h2 {
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
	color: #fff;
}

.css_dream_bg_block p {
	max-width: 900px;
	margin: 0 auto;
	line-height: 1.7;
	font-size: 1rem;
	color: #fff;
	text-align: center;
}

.css_vision_content {
	max-width: 900px;
	padding: 4rem 1.5rem;
	margin: 0 auto;
	color: #222;
	text-align: center;
}

.css_vision_content h2 {
	font-size: 1.8rem;
	margin-bottom: 1.5rem;
	color: #000;
}

.css_vision_content p {
	margin-bottom: 1rem;
	line-height: 1.7;
	font-size: 1rem;
}

@media (max-width: 768px) {
	.css_dream_bg_block {
		padding: 4rem 1rem;
	}
	.css_dream_bg_block h1 {
		font-size: 2rem;
	}
	.css_dream_bg_block h2 {
		font-size: 1.2rem;
	}
	.css_vision_content {
		padding: 3rem 1rem;
	}
}

.css_innerList {
	list-style-type: disc;
	padding-left: 1.8rem;
	margin: 1.5rem auto;
	width: fit-content;
	text-align: left;
	max-width: 600px;
	line-height: 1.7;
}

.css_innerItem {
	margin-bottom: 0.8rem;
	font-size: 1.05rem;
	font-weight: 500;
	letter-spacing: 0.2px;
	color: #222;
}

@media (max-width: 768px) {
	.css_innerList {
		padding-left: 1.4rem;
		line-height: 1.8;
	}

	.css_innerItem {
		font-size: 1rem;
		margin-bottom: 0.9rem;
	}
}
  .rahma-impact-list li strong {
    color: #b22222; /* Optional highlight color */
  }

	.css_legacy_bg_block {
	position: relative;
	width: 100%;
	/* 1920x1080 => 16:9 exact ratio, keeps full image without cropping */
	aspect-ratio: 16 / 9;
	background-image: url("../img/back_legacy.webp");
	background-size: contain; /* show whole image */
	background-position: center;
	background-repeat: no-repeat;
	/* no padding here so the div height is controlled purely by aspect-ratio */
}