:root{
	--eco-green: #2E8F53;
	--sky-blue: #2AB2E6;
	--navy-blue: #0A3D62;
	--forest: #0F5132;
	--sunny: #FFD166;
	--blossom: #F8BBD0;
	--muted: #6B7280;
	--surface: #F4FBF7;
}

body{
	background-color: var(--surface);
}

/* Cards and rounded surfaces */
.rounded-card { border-radius: 0.85rem; }
.card { border-radius: .85rem; box-shadow: 0 18px 45px rgba(10,61,98,0.08); border: 1px solid rgba(10,61,98,0.06); backdrop-filter: blur(6px); }

/* Rich sections */
.section-shell { border-radius: 1rem; padding: 3rem 2rem; background: linear-gradient(120deg, rgba(46,143,83,0.15), rgba(42,178,230,0.18)); }
.section-shell.alt { background: linear-gradient(135deg, rgba(255,209,102,0.2), rgba(248,187,208,0.27)); }
.section-shell.dark { background: linear-gradient(120deg, #0A3D62, #0F5132); color: #ECFDF3; }

/* Hero */
.hero-min { min-height: 420px; }

/* Buttons */
.btn-primary { background: linear-gradient(90deg,var(--eco-green),var(--sky-blue)); color: white; padding: .7rem 1.25rem; border-radius: .6rem; box-shadow: 0 18px 30px rgba(46,143,83,0.28); font-weight: 600; }
.btn-secondary { border: 1px solid rgba(255,255,255,0.7); padding: .65rem 1.25rem; border-radius: .6rem; color: white; }
.btn-donate { background-color: var(--navy-blue); color: #fff; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 600; box-shadow: 0 14px 26px rgba(10,61,98,0.25); transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; display: inline-flex; align-items: center; justify-content: center; }
.btn-donate:hover { background-color: var(--eco-green); box-shadow: 0 18px 32px rgba(46,143,83,0.25); transform: translateY(-1px); }

/* Small UI */
input[type="text"], input[type="email"], input[type="number"], textarea {
	border: 1px solid rgba(15,23,42,0.12);
	transition: border-color .2s;
}
input:focus, textarea:focus { border-color: var(--eco-green); outline: none; box-shadow: 0 0 0 3px rgba(46,143,83,0.15); }

/* Image hover */
.hover-zoom { transition: transform .35s ease, box-shadow .3s ease; }
.hover-zoom:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 40px rgba(10,61,98,0.18); }

/* Count up animation */
.stat { font-weight: 700; font-size: 1.75rem; color: var(--navy-blue); }

/* Pattern dots */
.pattern-dots { background-image: radial-gradient(circle at 1px 1px, rgba(10,61,98,0.15) 1px, transparent 0); background-size: 24px 24px; }

/* utility to subtle fade-in */
.fade-in { animation: fadeIn .6s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px);} to { opacity: 1; transform: translateY(0);} }

.timeline { position: relative; margin-top: 1rem; padding-left: 2.75rem; }
.timeline::before { content: ""; position: absolute; left: 1.1rem; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--eco-green), var(--sky-blue)); opacity: .7; }
.timeline-item { position: relative; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; border-radius: .85rem; background: #fff; box-shadow: 0 20px 35px rgba(10,61,98,0.08); border-left: 4px solid var(--eco-green); }
.timeline-item:nth-child(even) { border-left-color: var(--sky-blue); background: linear-gradient(135deg,#fff,rgba(42,178,230,0.05)); }
.timeline-item::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 999px; background: #fff; border:3px solid currentColor; left: -34px; top: 1.4rem; color: inherit; box-shadow: 0 0 0 4px var(--surface); }
.timeline-year { display: inline-flex; align-items: center; gap:.4rem; font-size: .85rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.timeline-year::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .6; }