:root{
			--bg:#0b0b0c;--text:#f4f5f6;--muted:#9aa0a6;--teal:#5ad0e5;--blue:#7cc8ff;--ringBg:#1e1f22;--red:#ff6b6b;--line:#212327
		}



.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 */
}

.css_bankDetails {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 400px;
}

.css_bankDetails li {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
	font-size: 1rem;
	line-height: 1.4;
}

.css_bankDetails li strong {
	width: 130px; /* ensures alignment */
	display: inline-block;
	font-weight: 600;
}







/* =========
   THEME
   ========= */
:root {
	--bg: #0a0a0a;
	--panel: #121212;
	--panel-2: #161616;
	--text: #e8e8e8;
	--muted: #b3b3b3;
	--line: #262626;
	--accent: #f195a1; /* swap with your brand colour */
}

.css_body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* =========
   LAYOUT
   ========= */
.css_container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 16px;
}
.css_section { padding: 56px 16px 16px; }
.css_section--tight { padding: 0 16px 40px; }
.css_section--lg { padding: 0 16px 64px; }
.css_sectionHeader {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 12px;
}
.css_hint { font-size: 12px; color: var(--muted); display: none; }
@media (min-width: 768px) { .css_hint { display: inline-block; } }

/* =========
   TYPOGRAPHY
   ========= */
.css_h1 {
	margin: 12px 0 8px;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
}
.css_h2 {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 700;
}
.css_h3 {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 700;
}
.css_small { font-size: 12px; }
.css_lead { margin: 8px 0 18px; font-size: 18px; color: var(--text); opacity: .95; }
.css_mbXs { margin-bottom: 6px; }
.css_mbSm { margin-bottom: 10px; }
.css_mtSm { margin-top: 10px; }
.css_listNone { list-style: none; padding: 0; margin: 0; }
.css_accent { color: var(--accent); }
.css_tag {
	display: inline-block;
	font-size: 18px;
	padding: 4px 10px;
	border-radius: 999px;
	color: var(--muted);
	background: #d3071f;
	font-weight: bold;
	text-transform: capitalize;
	color: #FFFFFF;
}

/* =========
   BUTTONS
   ========= */
.css_actions { display: flex; gap: 12px; flex-wrap: wrap; }
.css_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border-radius: 16px;
	font-weight: 600;
	text-decoration: none;
	color: #FFFFFF;
	background: #d3071f;
	border: 1px solid transparent;
	transition: transform .15s ease, filter .15s ease;
}
.css_btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.css_btn--ghost {
	background: transparent;
	color: var(--text);
	border: 1px solid var(--line);
}

/* =========
   HERO
   ========= */
.css_hero {
	position: relative;
	min-height: 70vh;
	isolation: isolate;
	margin-top: 120PX;
}
.css_hero::before {
	content: "";
	position: absolute; inset: 0;
	background: url("../img/facilities.webp") center / cover no-repeat;
	opacity: .4;
	z-index: -2;
}
.css_hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.4) 45%, rgba(0,0,0,.75));
	z-index: -1;
}
.css_heroGrid
{
	display: grid;
	grid-template-columns: 1fr;   /* mobile */
	align-items: center;          /* <-- vertical centering of left column */
	gap: 40px;
}

@media ( min-width: 900px )
{
	.css_heroGrid
	{
		grid-template-columns: 0.85fr 1.15fr; /* left narrower, right wider */
	}
}
/* =========
   CARDS & PANELS
   ========= */
.css_panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: 20px;
}
.css_card {
	background: lightgray;
	
	border-radius: 24px;
	padding: 20px;
}
.css_card--bank { margin-top: 14px; }

/* image cards */
.css_imageCard {
	min-height: 260px;
	background: url('https://images.unsplash.com/photo-1580584128409-7d1a7c8bb234?q=80&w=1400&auto=format&fit=crop') center/cover no-repeat;
}
.css_imageCard--girls {
	background-image: url('https://images.unsplash.com/photo-1509062522246-3755977927d7?q=80&w=1400&auto=format&fit=crop');
}

/* =========
   GRID HELPERS
   ========= */
.css_grid2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
@media (min-width: 900px) {
	.css_grid2 { grid-template-columns: 1fr 1fr; }
}

/* =========
   PROGRESS
   ========= */
.css_progressWrap { display: flex; gap: 16px; align-items: center; }
.css_ringBg { stroke: #1f1f1f; stroke-width: 10; fill: none; }
.css_ring { stroke: var(--accent); stroke-width: 10; fill: none; stroke-linecap: round; }
.css_ringPct { text-anchor: middle; fill: #e8e8e8; font-size: 20px; font-weight: 700; }
.css_ringLabel { text-anchor: middle; fill: #b3b3b3; font-size: 12px; }
.css_progressMeta { margin: 0 0 6px; color: var(--muted); }
.css_progressRaised { margin: 0 0 8px; font-weight: 700; }
.css_progressBar { height: 8px; background: #222; border-radius: 999px; overflow: hidden; width: 100%; }
.css_progressBar > span { display: block; height: 8px; background: var(--accent); width: 0%; }
.css_progressHint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* =========
   FACILITIES
   ========= */
.css_facilities {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 16px;
}
@media (min-width: 700px) { .css_facilities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .css_facilities { grid-template-columns: repeat(3, 1fr); } }
.css_facItem {
	display: flex; gap: 16px; align-items: flex-start;
	background: var(--panel-2);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 16px;
	transition: border-color .15s ease, transform .15s ease;
}
.css_facItem:hover { border-color: #3a3a3a; transform: translateY(-1px); }
.css_iconBox {
	height: 48px; width: 48px; flex: 0 0 48px;
	border-radius: 12px;
	background: rgba(241,149,161,.12);
	border: 1px solid rgba(241,149,161,.3);
	display: grid; place-items: center;
}
.css_icon { color: var(--accent); }

/* =========
   FOOTER
   ========= */
.css_footer { border-top: 1px solid var(--line); padding: 40px 0; margin-top: 40px; }




		
		
		.css_title{margin:0 0 10px;font-size:32px;font-weight:800}
		.css_title span{color:var(--teal)}
		.css_subtitle{color:var(--muted);font-weight:600;letter-spacing:.02em}
		.css_grid{display:grid;gap:18px}
		@media(min-width:820px){.css_grid{grid-template-columns:repeat(2,1fr)}}
		.css_card{border:1px solid var(--line);border-radius:14px;padding:18px;background:#0e0f12;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
		.css_phaseTitle{font-weight:800; color: white; letter-spacing: 0.5px;}
		.css_phasePct{color:var(--muted);font-weight:700}
		.css_desc{color:var(--muted);margin:6px 0 0}
		.css_alert{color:var(--red);font-weight:700;margin:10px 0 0}
		/* Big ring */
		.css_ring{width:120px;height:120px}
		/*.css_ringPct{fill:var(--text);font-size:20px;font-weight:800;text-anchor:middle;dominant-baseline:central}*/
		.css_totals{margin-top:22px}
		.css_line{color:var(--muted);margin:6px 0}
		.css_total{color:var(--blue);font-weight:800}

		
/* Slightly larger circles so they breathe better inside cards */
.css_ring {
	width: 140px;            /* was 120px */
	height: 140px;
}

/* If you add class="css_heroRight" on the right column, ensure it doesn't shrink */
.css_heroRight {
	min-width: 0;            /* fix overflow issues in some layouts */
}








/* inner disc backdrop so text sits on clean black */
.css_ringCenter {
	fill: #0b0b0c;    /* your dark hero bg; adjust if different */
}

/* % text inside the circle — bold + readable on any background */
.css_ringPct {
	fill: #ffffff;
	font-size: 26px;
	font-weight: 900;
	text-anchor: middle;
	dominant-baseline: middle;
	alignment-baseline: middle;

	/* crisp outline so white text pops over teal/grey */
	stroke: rgba(0,0,0,0.9);
	stroke-width: 3px;
	paint-order: stroke fill;

	/* extra insurance for anti-aliased displays */
	filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
}

/* (optional) keep the larger ring size you chose */
.css_ring {
	width: 140px;
	height: 140px;
}

.css_totalsCard
{
	border: 1px solid var( --line );
	border-radius: 14px;
	background: #0e0f12;
	padding: 18px;
}

.css_totalsCard .css_line { margin: 6px 0; }