/* ============================================================
Sengodu Foundation — Combined Stylesheet
Merges: original style.css + homepage redesign styles
============================================================ */
/* ──────────────────────────────────────────────────────────────
1. CSS VARIABLES (unified token set)
────────────────────────────────────────────────────────────── */
:root {
/* Original site palette */
--primary-color: #0077b6;
--primary-dark: #005f8d;
--secondary-color: #f77f00;
--accent-color: #06d6a0;
--text-dark: #1a1a1a;
--text-medium: #4a4a4a;
--text-light: #6a6a6a;
--bg-light: #f8f9fa;
--bg-white: #ffffff;
--border-color: #e0e0e0;
--success-color: #008d68;
--warning-color: #f77f00;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
--shadow-md: 0 4px 16px rgba(0,0,0,0.12);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.16);
--transition: all 0.3s ease;
--hc-blue: #0077b6;
--hc-blue-dark: #005f8d;
--hc-blue-pale: #e8f4fb;
--hc-teal: #0096a0;
--hc-red: #e63946;
--hc-pink: #ef6c9c;
/* Homepage redesign tokens */
--green-deep: #0D5C3A;
--green-mid: #1A7A4E;
--green-light: #2FA96A;
--green-pale: #E6F5EE;
--amber: #f5a623;
--amber-dark: #D4891A;
--cream: #FAF7F2;
--charcoal: #1C1C1C;
--slate: #4A5568;
--white: #FFFFFF;
--shadow-soft: 0 4px 24px rgba(0,0,0,0.08);
--shadow-deep: 0 16px 48px rgba(0,0,0,0.18);
--radius: 16px;
--brand: #16a34a;
--brand-d: #14532d;
--brand-m: #166534;
--brand-l: #bbf7d0;
--brand-xl: #f0fdf4;
--amber-d: #78350f;
--amber-l: #fef3c7;
--indigo: #4f46e5;
--indigo-d: #3730a3;
--teal: #0d9488;
--teal-d: #0f766e;
--text: #1a1a1a;
--muted: #555;
--border: #e5e7eb;
--radius-lg: 20px;
--radius-md: 14px;
--shadow-sm: 0 3px 14px rgba(0,0,0,.07);
--shadow-md: 0 6px 28px rgba(0,0,0,.1);
--edu-blue: #1565C0;
--edu-blue-dark: #0D47A1;
--edu-blue-mid: #1976D2;
--edu-gold: #F9A825;
--edu-gold-dk: #F57F17;
--edu-green: #2E7D32;
--edu-red: #C62828;
--edu-purple: #6A1B9A;
--edu-cream: #FAFAF7;
--edu-ink: #1A1A2E;
--grn: #1b4332;
--grn-mid: #2d6a4f;
--grn-light: #40916c;
--red-deep: #7f1d1d;
--red-mid: #c0392b;
--red-light: #e74c3c;
--red-pale: #fff5f5;
--amber-cel: #b45309;
--amber-light: #d97706;
--amber-pale: #fffbeb;
}
/* ──────────────────────────────────────────────────────────────
2. RESET & BASE
────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--text-dark);
background-color: var(--cream);
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', 'Crimson Pro', Georgia, serif;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { margin-bottom: 1rem; }
a { color: var(--primary-color); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
/* Utility classes */
.mo { margin: 0; }
.txt_cntr { text-align: center; }
.text-center { text-align: center; }
.lead { font-size: 1.25rem; font-weight: 400; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
/* ──────────────────────────────────────────────────────────────
3. CONTAINER
────────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
/* ──────────────────────────────────────────────────────────────
4. BUTTONS
────────────────────────────────────────────────────────────── */
/* Base */
.btn {
display: inline-block;
padding: 14px 32px;
font-size: 1rem;
font-weight: 600;
text-align: center;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
text-decoration: none;
}
.btn-primary { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); color: white; }
.btn-secondary { color: var(--bg-white); border-color: var(--secondary-color); background-color: #f77f00c7; }
.btn-secondary:hover { background-color: var(--secondary-color); color: white; }
.btn-large { padding: 18px 48px; font-size: 1.125rem; }
.btn-donate { background-color: var(--success-color); color: white !important; padding: 10px 24px; border-radius: 6px; font-weight: 600; }
.btn-donate:hover { background-color: #00664c; color: white; transform: translateY(-1px); }
/* Hero slider buttons */
.btn-hero-primary {
background: var(--amber); color: var(--charcoal); font-weight: 700;
font-size: 0.95rem; padding: 15px 32px; border-radius: 50px;
letter-spacing: 0.02em; box-shadow: 0 6px 24px rgba(245,166,35,0.45);
transition: var(--transition); display: inline-flex; align-items: center; gap: 8px;
}
.btn-hero-primary:hover { background: var(--amber-dark); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(245,166,35,0.55); color: var(--charcoal); }
.btn-hero-outline {
background: transparent; color: var(--white); font-weight: 600;
font-size: 0.95rem; padding: 14px 32px; border-radius: 50px;
border: 2px solid rgba(255,255,255,0.6); transition: var(--transition);
display: inline-flex; align-items: center; gap: 8px;
}
.btn-hero-outline:hover { background: rgba(255,255,255,0.12); border-color: var(--white); color: var(--white); }
/* Green pill buttons (help cards) */
.btn-green {
display: inline-flex; align-items: center; gap: 8px;
background: var(--green-deep); color: var(--white); font-weight: 600;
font-size: 0.88rem; padding: 12px 24px; border-radius: 50px; transition: var(--transition);
}
.btn-green:hover { background: var(--green-mid); transform: translateY(-2px); color: var(--white); }
.btn-outline {
display: inline-flex; align-items: center; gap: 8px;
background: transparent; color: var(--green-deep); font-weight: 600;
font-size: 0.88rem; padding: 11px 24px; border-radius: 50px;
border: 2px solid var(--green-deep); transition: var(--transition);
}
.btn-outline:hover { background: var(--green-deep); color: var(--white); }
/* CTA section buttons */
.btn-cta-primary {
background: var(--amber); color: var(--charcoal); font-weight: 700;
font-size: 1rem; padding: 16px 36px; border-radius: 50px;
box-shadow: 0 8px 28px rgba(245,166,35,0.4); transition: var(--transition); display: inline-block;
}
.btn-cta-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(245,166,35,0.55); background: var(--amber-dark); color: var(--charcoal); }
.btn-cta-outline {
border: 2px solid rgba(255,255,255,0.5); color: var(--white); font-weight: 600;
font-size: 1rem; padding: 14px 36px; border-radius: 50px; transition: var(--transition); display: inline-block;
}
.btn-cta-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--white); color: var(--white); }
/* Small button (mega menu CTA) */
.btn-sm { display: inline-block; background: var(--secondary-color); color: white; padding: 6px 15px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; }
.btn-sm:hover { background: #d66d00; color: white; }
/* ──────────────────────────────────────────────────────────────
5. NAVIGATION
────────────────────────────────────────────────────────────── */
.nav-menu.open { display: flex; z-index: 9999; }
.navbar {
background-color: transparent;
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
transition: background 0.4s ease, box-shadow 0.4s ease;
}
.navbar.scrolled { background-color: var(--bg-white); box-shadow: var(--shadow-sm); }
.navbar.scrolled .nav-menu a { color: var(--text-dark); }
.navbar.scrolled .nav-menu a:hover { color: var(--green-mid); }
.navbar.scrolled .logo-text { color: var(--green-deep); }
.navbar.scrolled .mobile-toggle span{ background-color: var(--text-dark); }
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
/* Logo */
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { height: 50px; width: auto; }
.logo h1 { font-size: 1.5rem; color: var(--primary-color); margin-bottom: 0; }
.logo p { font-size: 0.75rem; color: var(--text-light); margin: 0; }
.logo-text {
font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700;
color: var(--white); line-height: 1.2; transition: color 0.4s;
}
.logo-text span { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 400; opacity: 0.85; letter-spacing: 0.08em; }
/* Nav links */
.nav-menu { display: flex; align-items: center; gap: 2rem; }
.nav-menu a { color: rgba(255,255,255,0.92); font-weight: 500; transition: var(--transition); position: relative; }
/* .nav-menu a:not(.btn-donate):hover,
.nav-menu a.active { color: var(--white); } */
.nav-menu a:not(.btn-donate)::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--amber); transition: var(--transition); }
.nav-menu a:not(.btn-donate):hover::after,
.nav-menu a.active::after { width: 100%; }
.btn-donate.active,
.navbar.scrolled .btn-donate { background-color: var(--success-color) !important; }
/* Mobile toggle */
.mobile-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; }
.mobile-toggle span { width: 25px; height: 3px; background-color: var(--white); transition: var(--transition); border-radius: 2px; }
/* Standard dropdown */
.dropdown { position: relative; }
.dropdown > a { cursor: pointer; }
.dropdown-menu {
position: absolute; top: 100%; left: 0; background: var(--bg-white);
min-width: 220px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-radius: 8px;
padding: 10px 0; margin-top: 10px; opacity: 0; visibility: hidden;
transform: translateY(-10px); transition: var(--transition); z-index: 1000; list-style: none;
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu li { list-style: none; }
.dropdown-menu li a { display: block; padding: 12px 20px; color: #2d5f3f; font-size: 0.95rem; transition: var(--transition); border-left: 3px solid transparent; }
.dropdown-menu li a:hover { background: #f1f8f4; color: #1a472a; }
.dropdown > a::after { display: inline-block; transition: transform 0.3s ease; }
.dropdown:hover > a::after { transform: rotate(180deg); }
/* Mega menu */
.mega-dropdown { position: static; }
.mega-menu {
position: absolute !important; top: 100%; left: 0; width: 100%;
background-color: var(--bg-white); border-top: 3px solid var(--primary-color);
box-shadow: 0 15px 40px rgba(0,0,0,0.1); opacity: 0; visibility: hidden;
transform: translateY(10px); transition: var(--transition); z-index: 999;
}
.nav-menu li.mega-dropdown:hover .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-content-container { max-width: 1200px; margin: 0 auto; padding: 2rem 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.mega-column h3 { font-size: 1.1rem !important; color: var(--primary-color); margin-bottom: 1rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; font-family: 'DM Sans','Work Sans', sans-serif; font-weight: 600; }
.mega-column ul { list-style: none; padding: 0; }
.mega-column ul li { margin-bottom: 0.5rem; }
.mega-column ul li a { color: var(--text-medium); font-size: 0.95rem; display: block; padding: 5px 0; transition: var(--transition); }
.mega-column ul li a:hover { color: var(--primary-color); transform: translateX(5px); }
.mega-cta { background: #e8f4f8; padding: 1rem; border-radius: 8px; text-align: center; margin-top: 1rem; }
.mega-cta p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.mega-cta a { color: #fff; }
.mega-cta a:hover { color: #fff !important; }
.mega-cta a::after { height: 0 !important; }
/* ──────────────────────────────────────────────────────────────
6. LEGACY HERO (used on inner pages)
────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 90vh; display: flex; align-items: center; background: linear-gradient(135deg, #0077b6 0%, #005f8d 100%); color: white; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%); pointer-events: none; }
.hero-overlay { position: absolute; inset: 0; background: url('data:image/svg+xml,'); opacity: 0.3; }
.hero-content { position: relative; z-index: 2; max-width: 1000px; animation: fadeInUp 1s ease-out; text-align: center; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.hero-title { font-size: 3.5rem; margin-bottom: 1.5rem; line-height: 1.1; animation: fadeInUp 1s ease-out 0.2s both; }
.hero-subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; line-height: 1.6; animation: fadeInUp 1s ease-out 0.4s both; }
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeInUp 1s ease-out 0.6s both; justify-content: center; }
.scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); text-align: center; animation: float 2s ease-in-out infinite; z-index: 2; }
@keyframes float { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } }
.scroll-indicator span { font-size: 0.875rem; opacity: 0.8; display: block; margin-bottom: 8px; }
.scroll-arrow { width: 24px; height: 24px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); margin: 0 auto; }
/* ──────────────────────────────────────────────────────────────
7. HOMEPAGE HERO SLIDER
────────────────────────────────────────────────────────────── */
.hero-slider { position: relative; height: 100vh; min-height: 620px; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; z-index: 0; }
.slide.active { opacity: 1; z-index: 1; }
.slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.06); transition: transform 8s ease; }
.slide.active .slide-bg { transform: scale(1); }
.slide-1 .slide-bg { background: linear-gradient(135deg, #0D5C3A 0%, #1A7A4E 40%, #0A3D25 100%); }
.slide-2 .slide-bg { background: linear-gradient(135deg, #1A3A5C 0%, #2A5F8F 40%, #0D2A4A 100%); }
.slide-3 .slide-bg { background: linear-gradient(135deg, #5C2E0D 0%, #9B4A1A 40%, #3D1A05 100%); }
.slide-bg::after {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.04) 0%, transparent 60%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.slide-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.08) 100%);
z-index: 2;
}
.slide-content { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 28px; max-width: 1200px; margin: 0 auto; }
.slide-tag {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(245,166,35,0.2); border: 1px solid rgba(245,166,35,0.5);
color: var(--amber); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; padding: 6px 16px; border-radius: 50px; width: fit-content;
margin-bottom: 24px; opacity: 0; transform: translateY(20px);
transition: opacity 0.6s 0.2s ease, transform 0.6s 0.2s ease;
}
.slide.active .slide-tag { opacity: 1; transform: translateY(0); }
.slide-title {
font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 5.5vw, 4.8rem);
font-weight: 900; color: var(--white); line-height: 1.08; max-width: 780px;
margin-bottom: 22px; opacity: 0; transform: translateY(30px);
transition: opacity 0.7s 0.4s ease, transform 0.7s 0.4s ease;
}
.slide-title em { font-style: italic; color: var(--amber); }
.slide.active .slide-title { opacity: 1; transform: translateY(0); }
.slide-desc {
font-size: 1.2rem; color: rgba(255,255,255,0.82);
margin-bottom: 36px; line-height: 1.; font-weight: 300; opacity: 0;
transform: translateY(30px); transition: opacity 0.7s 0.6s ease, transform 0.7s 0.6s ease;
}
.slide.active .slide-desc { opacity: 1; transform: translateY(0); }
.slide-actions { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; transform: translateY(30px); transition: opacity 0.7s 0.8s ease, transform 0.7s 0.8s ease; }
.slide.active .slide-actions { opacity: 1; transform: translateY(0); }
.slider-controls { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 12px; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; transition: var(--transition); border: none; }
.slider-dot.active { width: 28px; border-radius: 4px; background: var(--amber); }
.slider-arrows { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; padding: 0 20px; transform: translateY(-50%); z-index: 10; pointer-events: none; }
.slider-arrow { pointer-events: all; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: var(--white); font-size: 1.2rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.slider-arrow:hover { background: var(--amber); border-color: var(--amber); color: var(--charcoal); transform: scale(1.1); }
.scroll-cue { position: absolute; bottom: 44px; right: 44px; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255,255,255,0.6); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.scroll-cue-line { width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0%,100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.5); opacity: 0.4; } }
/* ──────────────────────────────────────────────────────────────
8. TRUST BAR
────────────────────────────────────────────────────────────── */
.trust-bar { background: var(--green-deep); padding: 18px 0; }
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.85); font-size: 0.85rem; font-weight: 500; }
.trust-item .trust-icon { width: 32px; height: 32px; background: rgba(255,255,255,0.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.trust-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.2); }
/* ──────────────────────────────────────────────────────────────
9. SECTION HEADINGS & TAGS
────────────────────────────────────────────────────────────── */
section { padding: 80px 0; }
h2#section-title { color: var(--text-dark) !important; }
.section-title { font-size: 2.5rem; margin-bottom: 1rem; color: var(--text-dark); }
.section-subtitle { font-size: 1.125rem; color: var(--text-medium); max-width: 700px; margin: 0 auto 3rem; }
.section-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--green-mid); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.section-tag::before { content: ''; width: 24px; height: 2px; background: var(--green-light); border-radius: 2px; }
/* ──────────────────────────────────────────────────────────────
10. IMPACT STATS
────────────────────────────────────────────────────────────── */
.impact-section { background: var(--cream); padding: 100px 0; position: relative; overflow: hidden; }
.impact-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(47,169,106,0.08) 0%, transparent 70%); border-radius: 50%; }
.impact-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 60px; gap: 32px; flex-wrap: wrap; }
/* Homepage 6-col strip */
.impact-section .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--white); border-radius: 24px; box-shadow: var(--shadow-soft); overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
/* Legacy grid (other pages) */
.impact-stats .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; }
.stat-card { padding: 44px 28px; text-align: center; position: relative; transition: var(--transition); }
.impact-section .stat-card:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(0,0,0,0.07); }
.impact-section .stat-card:hover { background: var(--green-pale); }
.impact-section .stat-card:hover .stat-num { color: var(--green-deep); }
/* Legacy card style */
.impact-stats .stat-card { background-color: var(--bg-white); border-radius: 12px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--primary-color); padding: 2rem 1rem; }
.impact-stats .stat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 3.6rem; color: var(--green-mid); line-height: 1; margin-bottom: 8px; letter-spacing: 0.02em; transition: var(--transition); }
.stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); font-family: 'Crimson Pro', serif; margin-bottom: 0.5rem; }
.stat-icon { font-size: 3rem; margin-bottom: 10px; }
.stat-label { font-size: 0.82rem; font-weight: 600; color: var(--slate); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; }
.stat-number[data-placeholder="true"]::after { content: " (Update me)"; font-size: 0.4em; display: block; margin-top: 5px; font-style: normal; }
/* ──────────────────────────────────────────────────────────────
11. PROGRAMS
────────────────────────────────────────────────────────────── */
.programs-section { background: var(--white); }
.programs-header { margin-bottom: 60px; }
/* Homepage 3-col grid */
.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* New prog-card */
.prog-card { background: var(--cream); border-radius: 20px; padding: 36px 30px; position: relative; overflow: hidden; transition: var(--transition); border: 1px solid rgba(0,0,0,0.04); }
.prog-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--green-light); transform: scaleX(0); transition: transform 0.4s ease; transform-origin: left; }
.prog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); background: var(--white); }
.prog-card:hover::before { transform: scaleX(1); }
.prog-emoji { width: 56px; height: 56px; background: var(--green-pale); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 20px; transition: var(--transition); }
.prog-card:hover .prog-emoji { background: var(--green-deep); transform: rotate(-6deg) scale(1.1); }
.prog-card h3 { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--charcoal); margin-bottom: 12px; }
.prog-card p { font-size: 0.9rem; color: var(--slate); line-height: 1.7; margin-bottom: 20px; }
.prog-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green-mid); font-size: 0.87rem; font-weight: 600; transition: var(--transition); }
.prog-link::after { content: '→'; }
.prog-link:hover { gap: 10px; color: var(--green-deep); }
/* Programs CTA row */
.programs-cta { text-align: center; margin-top: 48px; }
/* Legacy program cards (other pages) */
.program-card { background-color: var(--bg-white); padding: 2rem; border-radius: 12px; box-shadow: var(--shadow-sm); transition: var(--transition); border-top: 4px solid var(--primary-color); }
.program-card:nth-child(2) { border-top-color: var(--secondary-color); }
.program-card:nth-child(3) { border-top-color: var(--accent-color); }
.program-card:nth-child(4) { border-top-color: #f72585; }
.program-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.program-icon { font-size: 3rem; margin-bottom: 1rem; }
.program-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-dark); }
.program-highlights { margin: 1.5rem 0; }
.program-highlights li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; color: var(--text-medium); }
.program-highlights li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-color); font-weight: bold; }
.program-link { display: inline-block; margin-top: 1rem; color: var(--primary-color); font-weight: 600; transition: var(--transition); }
.program-link:hover { transform: translateX(5px); }
/* ──────────────────────────────────────────────────────────────
12. WHY SECTION
────────────────────────────────────────────────────────────── */
.why-section { background: var(--green-deep); padding: 100px 0; position: relative; overflow: hidden; }
.why-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.why-section .section-title { color: var(--white); }
.why-section .section-tag { color: var(--amber); }
.why-section .section-tag::before { background: var(--amber); }
.why-section .section-subtitle { color: rgba(255,255,255,0.7); }
.why-header { margin-bottom: 60px; }
.why-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 4rem;
align-items: center;
}
/* ── Programs Page styles ── */
.programs-hero {
background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 60%, var(--green-light) 100%);
padding: 120px 0 80px;
position: relative;
overflow: hidden;
text-align: center;
}
.programs-hero::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.programs-hero .hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 100px;
margin-bottom: 24px;
}
.programs-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 5vw, 3.8rem);
font-weight: 900;
color: #fff;
line-height: 1.15;
margin-bottom: 20px;
}
.programs-hero h1 em {
font-style: italic;
color: var(--amber);
}
.programs-hero p {
font-size: 1.1rem;
color: rgba(255,255,255,0.85);
max-width: 620px;
margin: 0 auto 36px;
line-height: 1.7;
}
.programs-hero .hero-stats {
display: flex;
justify-content: center;
gap: 48px;
flex-wrap: wrap;
margin-top: 48px;
padding-top: 36px;
border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-stat-item {
text-align: center;
color: #fff;
}
.hero-stat-item .num {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
font-weight: 900;
color: var(--amber);
display: block;
line-height: 1;
}
.hero-stat-item .lbl {
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.8;
margin-top: 4px;
}
/* ── Programs Nav Tabs ── */
.programs-tabs {
background: #fff;
border-bottom: 2px solid var(--border);
position: sticky;
top: 70px;
z-index: 90;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.programs-tabs .container {
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.programs-tabs .container::-webkit-scrollbar { display: none; }
.tab-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 18px 24px;
font-size: 0.88rem;
font-weight: 600;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
border-bottom: 3px solid transparent;
transition: all 0.25s ease;
cursor: pointer;
}
.tab-btn:hover { color: var(--brand); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-btn .tab-icon { font-size: 1.1rem; }
/* ── Category Sections ── */
.programs-section {
padding: 80px 0;
}
.programs-section:nth-child(even) { background: var(--bg-light); }
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 48px;
flex-wrap: wrap;
gap: 16px;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 10px;
}
.section-eyebrow span {
width: 28px;
height: 2px;
background: var(--brand);
display: inline-block;
}
.section-header h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 800;
color: var(--charcoal);
line-height: 1.2;
}
.section-header h2 em {
font-style: italic;
color: var(--brand);
}
.section-header p {
color: var(--muted);
font-size: 1rem;
margin-top: 10px;
max-width: 520px;
line-height: 1.65;
}
.view-all-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
font-weight: 600;
color: var(--brand);
text-decoration: none;
border: 2px solid var(--brand);
padding: 10px 20px;
border-radius: 100px;
transition: all 0.25s;
white-space: nowrap;
}
.view-all-link:hover {
background: var(--brand);
color: #fff;
}
/* ── Program Cards Grid ── */
.prog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 28px;
}
.prog-card {
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
}
.prog-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
}
.prog-card-visual {
height: 180px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
}
/* Category colour themes */
.prog-card.essential .prog-card-visual { background: linear-gradient(135deg, #fff0f0 0%, #ffe0e0 100%); }
.prog-card.empowerment .prog-card-visual { background: linear-gradient(135deg, #f0f4ff 0%, #dde9ff 100%); }
.prog-card.world .prog-card-visual { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
.prog-card.community .prog-card-visual { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); }
.prog-card-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.prog-cat-tag {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 3px 10px;
border-radius: 100px;
display: inline-block;
margin-bottom: 12px;
}
.essential .prog-cat-tag { background: #ffe0e0; color: #b91c1c; }
.empowerment .prog-cat-tag { background: #dde9ff; color: #1d4ed8; }
.world .prog-cat-tag { background: #dcfce7; color: #15803d; }
.community .prog-cat-tag { background: #fef3c7; color: #92400e; }
.prog-card-body h3 {
font-family: 'DM Sans', sans-serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 10px;
}
.prog-card-body p {
font-size: 0.88rem;
color: var(--muted);
line-height: 1.65;
flex: 1;
margin-bottom: 20px;
}
.prog-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--brand);
text-decoration: none;
transition: gap 0.2s;
}
.prog-card-link:hover { gap: 10px; }
/* ── Featured / Wide Cards for 1-item categories ── */
.prog-featured {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
}
@media (max-width: 768px) {
.prog-featured { grid-template-columns: 1fr; }
}
.prog-featured-visual {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
font-size: 6rem;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}
.prog-featured-body {
padding: 40px;
}
.prog-featured-body h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 800;
color: var(--charcoal);
margin-bottom: 14px;
}
.prog-featured-body p {
font-size: 0.96rem;
color: var(--muted);
line-height: 1.7;
margin-bottom: 24px;
}
.prog-featured-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--amber);
color: #fff;
font-weight: 700;
font-size: 0.9rem;
padding: 12px 26px;
border-radius: 100px;
text-decoration: none;
transition: background 0.25s;
}
.prog-featured-cta:hover { background: var(--amber-dark); }
/* ── Impact CTA Band ── */
.programs-cta-band {
background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
padding: 80px 0;
text-align: center;
color: #fff;
}
.programs-cta-band h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 900;
margin-bottom: 16px;
}
.programs-cta-band h2 em { font-style: italic; color: var(--amber); }
.programs-cta-band p {
font-size: 1.05rem;
opacity: 0.85;
max-width: 560px;
margin: 0 auto 36px;
line-height: 1.7;
}
.cta-btn-row {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--amber);
color: #fff;
font-weight: 700;
font-size: 1rem;
padding: 14px 32px;
border-radius: 100px;
text-decoration: none;
transition: background 0.25s, transform 0.2s;
box-shadow: 0 4px 16px rgba(245,166,35,0.4);
}
.btn-cta-primary:hover { background: var(--amber-dark); transform: translateY(-2px); }
.btn-cta-outline {
display: inline-flex;
align-items: center;
gap: 8px;
border: 2px solid rgba(255,255,255,0.6);
color: #fff;
font-weight: 600;
font-size: 1rem;
padding: 14px 32px;
border-radius: 100px;
text-decoration: none;
transition: all 0.25s;
}
.btn-cta-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
/* ── Scroll animations ── */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* ── Responsive ── */
@media (max-width: 768px) {
.programs-tabs .container { gap: 0; }
.section-header { flex-direction: column; align-items: flex-start; }
.hero-stats { gap: 28px; }
.prog-featured-body { padding: 28px 24px; }
}
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.why-card { background: rgba(255,255,255,0.05); padding: 40px 32px; transition: var(--transition); }
.why-card:hover { background: rgba(255,255,255,0.1); }
.why-card h3 { font-size: 1.5rem; color: var(--white); margin-bottom: 12px; }
.why-card p { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.7; }
.why-card .why-icon { font-size: 32px; }
.why-icon-wrap { width: 52px; height: 52px; background: rgba(245,166,35,0.18); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 20px; transition: var(--transition); }
.why-card:hover .why-icon-wrap { background: var(--amber); transform: rotate(6deg); }
/* ──────────────────────────────────────────────────────────────
13. HOW YOU CAN HELP
────────────────────────────────────────────────────────────── */
.help-section { background: var(--cream); padding: 100px 0; }
.help-header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.help-section .help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.help-card { background: var(--white); border-radius: 20px; padding: 36px 26px; transition: var(--transition); border: 1px solid rgba(0,0,0,0.05); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.help-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(to right, var(--green-light), var(--amber)); transform: scaleX(0); transition: transform 0.4s; transform-origin: left; }
.help-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); }
.help-card:hover::after { transform: scaleX(1); }
.help-icon-wrap { width: 60px; height: 60px; background: var(--green-pale); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 20px; transition: var(--transition); flex-shrink: 0; }
.help-card:hover .help-icon-wrap { background: var(--green-deep); transform: scale(1.08); }
.help-card h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; }
.help-card p { font-size: 0.88rem; color: var(--slate); line-height: 1.7; margin-bottom: 16px; flex-grow: 1; }
.help-list { margin-bottom: 24px; flex-grow: 1; }
.help-list li { font-size: 0.84rem; color: var(--slate); padding: 5px 0; display: flex; align-items: flex-start; gap: 8px; }
.help-list li::before { content: '✓'; color: var(--green-mid); font-weight: 700; margin-top: 1px; flex-shrink: 0; }
.social-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
.social-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--green-pale); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: var(--transition); }
.social-btn:hover { background: var(--green-deep); transform: translateY(-3px); }
/* Legacy */
.help-icon { font-size: 3rem; margin-bottom: 1rem; }
.donation-examples { text-align: left; margin: 1.5rem 0; }
.donation-examples li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; color: var(--text-medium); font-size: 0.95rem; }
.donation-examples li::before { content: '•'; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; }
.social-links { display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; }
.social-links a { font-size: 1.5rem; transition: var(--transition); }
.social-links a:hover { transform: scale(1.2); }
/* ──────────────────────────────────────────────────────────────
14. TESTIMONIALS
────────────────────────────────────────────────────────────── */
.testimonials-section { background: var(--white); padding: 100px 0; }
.testi-header { text-align: center; max-width: 580px; margin: 0 auto 60px; }
.testimonials-grid,
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 3rem; }
.testi-card,
.testimonial-card { background: var(--cream); border-radius: 20px; padding: 36px 30px; position: relative; transition: var(--transition); border: 1px solid rgba(0,0,0,0.04); }
.testi-card:hover,
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); background: var(--white); }
.quote-icon,
.quote-mark { font-family: 'Playfair Display', serif; font-size: 5rem; color: var(--green-light); line-height: 0.6; margin-bottom: 20px; opacity: 0.4; }
.testi-rating { color: var(--amber); font-size: 0.9rem; margin-bottom: 16px; }
.testi-text,
.testimonial-text { font-size: 0.92rem; color: var(--charcoal); line-height: 1.8; font-style: italic; margin-bottom: 24px; }
.testi-author,
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.author-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--green-mid), var(--green-deep)); color: var(--white); font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.author-name { font-weight: 700; font-size: 0.92rem; color: var(--charcoal); margin: 0 0 2px; }
.author-detail { font-size: 0.78rem; color: var(--slate); margin: 0; }
/* ──────────────────────────────────────────────────────────────
15. CTA BAND
────────────────────────────────────────────────────────────── */
.cta-section { background: linear-gradient(135deg, var(--green-deep) 0%, #0A4229 50%, #1A5C3A 100%); padding: 100px 0; position: relative; overflow: hidden; color: white; text-align: center; }
.cta-section::before { content: ''; position: absolute; top: -80px; right: -80px; width: 400px; height: 400px; border-radius: 50%; background: rgba(245,166,35,0.08); }
.cta-section::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.04); }
.cta-inner { position: relative; z-index: 2; }
.cta-inner .section-tag { justify-content: center; color: var(--amber); }
.cta-inner .section-tag::before { display: none; }
.cta-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 900; color: var(--white); line-height: 1.1; margin-bottom: 20px; margin-left: auto; margin-right: auto; }
.cta-sub { font-size: 1.05rem; color: rgba(255,255,255,0.72); max-width: 520px; margin: 0 auto 40px; line-height: 1.7; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* Legacy CTA */
.cta-content h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.cta-content p { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.95; }
.cta-section .btn-large { background-color: var(--secondary-color); border-color: var(--secondary-color); color: white; }
.cta-section .btn-large:hover { background-color: #d66d00; transform: translateY(-3px); }
/* ──────────────────────────────────────────────────────────────
16. FOOTER
────────────────────────────────────────────────────────────── */
.footer { background-color: #1a1a1a; color: #ffffff; padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; margin-bottom: 3rem; }
.footer-column h3 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--secondary-color); }
.footer-column ul li { margin-bottom: 0.75rem; }
.footer-column a { color: rgba(255,255,255,0.8); transition: var(--transition); }
.footer-column a:hover { color: white; padding-left: 5px; }
.footer-column p { color: rgba(255,255,255,0.8); line-height: 1.8; }
.footer-social { display: flex; gap: 1rem; margin-top: 1rem; }
.footer-social a { font-size: 1.5rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { margin: 0; color: rgba(255,255,255,0.6); }
.footer-links a { color: rgba(255,255,255,0.6); }
/* ──────────────────────────────────────────────────────────────
17. PAGE HEADER
────────────────────────────────────────────────────────────── */
.page-header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); color: white; padding: 40px 0 30px; text-align: center; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0; background: url('data:image/svg+xml,'); opacity: 0.3; }
.page-title { font-size: 3rem; margin-bottom: 1rem; position: relative; z-index: 2; }
.page-subtitle { font-size: 1.25rem; opacity: 0.95; position: relative; z-index: 2; }
/* ──────────────────────────────────────────────────────────────
18. ALL INNER-PAGE SECTIONS (kept from original, unchanged)
────────────────────────────────────────────────────────────── */
.mission-content { display: grid; gap: 4rem; align-items: center; }
.mission-text h2 { color: var(--primary-color); margin-bottom: 1.5rem; }
.mission-text .lead { font-size: 1.25rem; color: var(--text-medium); margin-bottom: 1.5rem; }
.mission-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; }
.value-item { padding: 1.5rem; background-color: var(--bg-light); border-radius: 8px; border-left: 4px solid var(--accent-color); }
.value-item h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--primary-color); }
.founder-section { background-color: var(--bg-light); padding: 80px 0; }
.founder-content { display: grid; grid-template-columns: 1fr 4fr; gap: 2rem; align-items: start; }
.founder-image { position: sticky; top: 100px; }
.founder-image .image-placeholder { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); }
.founder-text h2 { color: var(--primary-color); margin-bottom: 2rem; }
.founder-quote { background-color: var(--bg-white); padding: 2.5rem; border-radius: 12px; border-left: 4px solid var(--primary-color); margin-bottom: 2rem; }
.founder-quote p { margin-bottom: 1.5rem; line-height: 1.8; color: var(--text-medium); }
.quote-text { font-style: italic; font-size: 1.125rem; }
.signature { margin-top: 2rem; font-style: italic; }
.founder-details { padding: 1.5rem; background-color: var(--bg-white); border-radius: 8px; }
.founder-details p { margin-bottom: 1rem; line-height: 1.8; }
.mission-vision-section { padding: 80px 0; }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; }
.mv-card { padding: 3rem; border-radius: 12px; text-align: center; transition: var(--transition); }
.mission-card { background: linear-gradient(135deg, #0077b6 0%, #005f8d 100%); color: white; }
.vision-card { background: linear-gradient(135deg, #f77f00 0%, #d66d00 100%); color: white; }
.mv-icon { font-size: 3.5rem; margin-bottom: 1.5rem; }
.mv-card h3 { font-size: 2rem; margin-bottom: 1.5rem; }
.mv-card p { font-size: 1.125rem; line-height: 1.8; opacity: 0.95; }
.mv-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.values-section { background-color: var(--bg-light); padding: 80px 0; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
.value-card { background-color: var(--bg-white); padding: 2rem; border-radius: 12px; text-align: center; transition: var(--transition); border-top: 4px solid var(--primary-color); }
.value-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.value-icon { font-size: 3rem; margin-bottom: 1rem; }
.value-card h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--primary-color); }
.value-card p { color: var(--text-medium); line-height: 1.6; }
.legal-section { padding: 5px 0; }
.legal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; }
.legal-card { padding: 2rem; background-color: var(--bg-light); border-radius: 12px; border-left: 4px solid var(--accent-color); }
.legal-card h4 { color: var(--primary-color); margin-bottom: 1.5rem; }
.legal-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); color: var(--text-medium); }
.legal-list li:last-child { border-bottom: none; }
.note { margin-top: 1rem; padding: 1rem; background-color: #fff3cd; border-radius: 6px; font-size: 0.9rem; color: #856404; }
.team-section { background-color: var(--bg-light); padding: 80px 0; }
.team-category { margin-bottom: 4rem; }
.team-category h3 { font-size: 2rem; margin-bottom: 2rem; color: var(--primary-color); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.team-member { background-color: var(--bg-white); padding: 2rem; border-radius: 12px; text-align: center; transition: var(--transition); }
.team-member:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.member-photo { display: flex; align-items: center; justify-content: center; }
.member-photo img { width: 150px; height: 150px; border-radius: 10%; margin-bottom: 15px; }
.team-member h4 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--text-dark); }
.member-role { color: var(--primary-color); font-weight: 600; margin-bottom: 1rem; }
.member-bio { color: var(--text-medium); line-height: 1.6; font-size: 0.95rem; }
.recognition-section { padding: 80px 0; }
.recognition-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; margin-top: 3rem; }
.partner-category h3 { color: var(--primary-color); margin-bottom: 1rem; }
.partner-category ul li { padding: 0.75rem 0 0.75rem 1.5rem; position: relative; color: var(--text-medium); }
.partner-category ul li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-color); font-weight: bold; }
.story-section { padding: 80px 0; }
.story-content h2 { color: var(--primary-color); margin-bottom: 2rem; font-size: 2.5rem; }
.story-text p { margin-bottom: 1.5rem; line-height: 1.8; color: var(--text-medium); }
.program-intro { padding: 60px 0; }
.intro-content { max-width: 900px; margin: 0 auto; text-align: center; }
.program-stats { background-color: var(--bg-light); padding: 80px 0; }
.program-details { padding: 80px 0; }
.program-services { display: grid; gap: 3rem; margin-top: 3rem; }
.service-card { background-color: var(--bg-light); padding: 3rem; border-radius: 12px; border-left: 4px solid var(--primary-color); }
.service-icon { font-size: 3rem; margin-bottom: 1.5rem; }
.service-card h3 { color: var(--primary-color); margin-bottom: 1rem; }
.service-details { margin-top: 2rem; }
.service-details h4 { font-size: 1.125rem; margin-bottom: 1rem; color: var(--text-dark); }
.service-details ul { list-style: none; margin: 1rem 0; }
.service-details li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; color: var(--text-medium); }
.service-details li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-color); font-weight: bold; }
.highlight { background-color: #fff3cd; padding: 1rem; border-radius: 6px; font-weight: 600; margin-top: 1rem; color: #856404; }
.success-stories { background-color: var(--bg-light); padding: 80px 0; }
.stories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 3rem; margin-top: 3rem; }
.story-card { background-color: var(--bg-white); padding: 3rem; border-radius: 12px; box-shadow: var(--shadow-sm); position: relative; }
.story-quote { font-size: 5rem; color: var(--primary-color); opacity: 0.2; line-height: 1; position: absolute; top: 20px; left: 20px; }
.story-card h3 { margin-top: 2rem; color: var(--primary-color); margin-bottom: 1rem; }
.story-text { color: var(--text-medium); line-height: 1.8; margin-bottom: 1.5rem; }
.story-impact { display: flex; gap: 1rem; flex-wrap: wrap; }
.impact-badge { background-color: var(--accent-color); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600; }
.get-support-section { padding: 80px 0; }
.support-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 3rem; }
.step-card { text-align: center; padding: 2rem; background-color: var(--bg-light); border-radius: 12px; }
.step-number { width: 50px; height: 50px; background-color: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin: 0 auto 1rem; }
.step-card h3 { margin-bottom: 1rem; color: var(--primary-color); }
.volunteer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
.volunteer-card { background-color: var(--bg-light); padding: 2.5rem; border-radius: 12px; border-top: 4px solid var(--accent-color); }
.volunteer-card h3 { color: var(--primary-color); margin-bottom: 1.5rem; }
.volunteer-card p { color: var(--text-medium); margin-bottom: 1rem; line-height: 1.6; }
.volunteer-card .btn { margin-top: 1.5rem; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.contact-info { background-color: var(--bg-light); padding: 3rem; border-radius: 12px; }
.contact-item { margin-bottom: 2rem; }
.contact-item h3 { color: var(--primary-color); margin-bottom: 1rem; font-size: 1.25rem; }
.contact-item p { color: var(--text-medium); line-height: 1.8; }
.contact-item a { color: var(--primary-color); }
.contact-item a:hover { text-decoration: underline; }
.donation-form-section { padding: 4rem 0; background: linear-gradient(135deg, #e8f4f8 0%, #ffffff 100%); }
.donation-form-container { max-width: 800px; margin: 0 auto; background: white; padding: 3rem; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.form-section { margin-bottom: 2rem; }
.form-section h3 { color: #0077b6; margin-bottom: 1rem; font-size: 1.3rem; }
.amount-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.amount-option { position: relative; }
.amount-option input[type="radio"] { position: absolute; opacity: 0; }
.amount-option label { display: block; padding: 1.2rem; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.3s ease; font-weight: 600; color: #495057; }
.amount-option input[type="radio"]:checked + label { background: #0077b6; border-color: #0077b6; color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,119,182,0.3); }
.amount-option label:hover { border-color: #0077b6; transform: translateY(-2px); }
.custom-amount-wrapper { margin-top: 1rem; display: none; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: #495057; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem 1rem; border: 2px solid #dee2e6; border-radius: 8px; font-size: 1rem; font-family: 'DM Sans','Work Sans', sans-serif; transition: border-color 0.3s ease; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #0077b6; }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.donation-purpose { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; }
.purpose-option { position: relative; }
.purpose-option input[type="radio"] { position: absolute; opacity: 0; }
.purpose-option label { display: block; padding: 0.8rem 1rem; background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; text-align: center; font-size: 0.95rem; }
.purpose-option input[type="radio"]:checked + label { background: #06d6a0; border-color: #06d6a0; color: white; }
.tax-benefit-info { background: #fff3cd; border-left: 4px solid #ffc107; padding: 1rem; margin: 1.5rem 0; border-radius: 4px; }
.tax-benefit-info h4 { margin: 0 0 0.5rem; color: #856404; font-size: 1rem; }
.tax-benefit-info p { margin: 0; color: #856404; font-size: 0.9rem; }
.donate-button { width: 100%; padding: 1.2rem; background: linear-gradient(135deg, #0077b6 0%, #005f8d 100%); color: white; border: none; border-radius: 8px; font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'DM Sans','Work Sans', sans-serif; }
.donate-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,119,182,0.4); }
.donate-button:disabled { background: #6c757d; cursor: not-allowed; transform: none; }
.security-badge { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; color: #6c757d; font-size: 0.9rem; }
.impact-info { background: #e8f4f8; padding: 2rem; border-radius: 12px; margin-bottom: 2rem; }
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.impact-item { text-align: center; }
.impact-item .icon { font-size: 2rem; margin-bottom: 0.5rem; }
.impact-item h4 { color: #0077b6; margin: 0.5rem 0; font-size: 1.1rem; }
.impact-item p { margin: 0; color: #6c757d; font-size: 0.9rem; }
.payment-methods { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #dee2e6; }
.payment-methods p { color: #6c757d; font-size: 0.9rem; margin-bottom: 0.5rem; }
.payment-logos { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.donation-impact { padding: 80px 0; background-color: var(--bg-light); }
.donation-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin: 3rem 0; }
.donation-card { background-color: var(--bg-white); padding: 2rem; border-radius: 12px; border: 2px solid var(--border-color); text-align: center; transition: var(--transition); cursor: pointer; }
.donation-card:hover, .donation-card.selected { border-color: var(--primary-color); transform: translateY(-5px); box-shadow: var(--shadow-md); background-color: #f0f8ff; }
.donation-amount { font-size: 2.5rem; color: var(--primary-color); font-weight: 700; margin-bottom: 1rem; font-family: 'Crimson Pro', serif; }
.donation-card h3 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--text-dark); }
.donation-card button.btn.btn-primary { width: -webkit-fill-available; padding: 10px; }
.donation-description { color: var(--text-medium); line-height: 1.6; }
.donation-methods { padding: 80px 0; }
.methods-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
.method-card { background-color: var(--bg-light); padding: 2.5rem; border-radius: 12px; border-top: 4px solid var(--primary-color); }
.method-icon { font-size: 3rem; margin-bottom: 1rem; }
.method-card h3 { color: var(--primary-color); margin-bottom: 1.5rem; }
.method-details { margin: 1.5rem 0; line-height: 1.8; }
.method-details p { margin-bottom: 0.75rem; color: var(--text-medium); }
.method-note { margin-top: 1.5rem; padding: 1rem; background-color: #d1ecf1; border-radius: 6px; font-size: 0.9rem; color: #0c5460; }
.qr-code-placeholder { text-align: center; margin: 1.5rem 0; }
.qr-code-placeholder p { margin-top: 1rem; font-weight: 600; }
.monthly-giving { padding: 80px 0; background-color: var(--bg-light); }
.monthly-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 3rem; }
.tier-card { background-color: var(--bg-white); padding: 2.5rem 2rem; border-radius: 12px; text-align: center; transition: var(--transition); border: 2px solid var(--border-color); }
.tier-card.featured { border-color: var(--secondary-color); transform: scale(1.05); box-shadow: var(--shadow-md); }
.tier-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-md); }
.tier-badge { background-color: var(--primary-color); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600; display: inline-block; margin-bottom: 1rem; }
.tier-card.featured .tier-badge { background-color: var(--secondary-color); }
.tier-amount { font-size: 2rem; color: var(--primary-color); font-weight: 700; margin-bottom: 1rem; font-family: 'Crimson Pro', serif; }
.tier-card p { color: var(--text-white); margin-bottom: 1.5rem; }
.tier-benefits { text-align: left; margin-top: 1.5rem; }
.tier-benefits li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; color: var(--text-medium); }
.tier-benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-color); font-weight: bold; }
.tax-benefits { padding: 80px 0; }
.tax-info { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; }
.tax-card { background-color: var(--bg-light); padding: 2.5rem; border-radius: 12px; }
.tax-card h3 { color: var(--primary-color); margin-bottom: 1.5rem; }
.tax-card li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; color: var(--text-medium); }
.tax-card li::before { content: '•'; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; }
.tax-example { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); padding: 2.5rem; border-radius: 12px; color: white; }
.tax-example h3 { margin-bottom: 1.5rem; }
.example-box { background-color: rgba(255,255,255,0.1); padding: 2rem; border-radius: 8px; margin-top: 1rem; }
.example-box p { margin-bottom: 1rem; font-size: 1.125rem; }
.donation-faq { padding: 80px 0; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
.faq-item { background-color: var(--bg-light); border-radius: 12px; border-left: 4px solid var(--accent-color); }
.faq-item h3 { color: var(--primary-color); font-size: 1.125rem; margin-bottom: 1rem; }
.faq-item p { color: var(--text-medium); line-height: 1.6; }
.csr-partner-section { padding: 80px 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); }
.csr-content { max-width: 1200px; margin: 0 auto; }
.csr-content .lead { text-align: center; font-size: 1.2rem; color: #495057; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; }
.csr-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 40px; }
.csr-benefit-card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; }
.csr-benefit-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15); }
.csr-icon { font-size: 2.5rem; color: #28a745; margin-bottom: 15px; font-weight: bold; }
.csr-benefit-card h3 { color: #2c3e50; margin-bottom: 10px; font-size: 1.3rem; }
.csr-benefit-card p { color: #6c757d; line-height: 1.6; }
.csr-cta { text-align: center; padding: 40px; background: white; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.csr-cta p { font-size: 1.1rem; color: #495057; margin-bottom: 20px; }
.community-photo-section { padding: 80px 0; background: #f8f9fa; }
.community-photo-container { max-width: 1200px; margin: 0 auto; text-align: center; }
.community-photo-container img { width: 100%; max-height: 500px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.community-photo-placeholder { width: 100%; height: 500px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-size: 1.5rem; font-weight: 600; }
/* About-page enhancement styles */
/* ─── HERO: FULL-BLEED SPLIT ─────────────────────────────── */
.about-hero {
padding-top: 100px; /* navbar offset */
/* background: var(--cream); */
background: #2A7B9B;
background: linear-gradient(180deg, rgba(42, 123, 155, 1) 0%, rgba(36, 147, 191, 1) 26%, rgba(237, 221, 83, 1) 37%, rgba(12, 120, 57, 1) 45%, rgba(97, 212, 145, 1) 100%);
position: relative;
overflow: hidden;
}
.about-hero::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 55%;
height: 100%;
background: var(--green-pale);
clip-path: polygon(98% 0, 100% 0, 100% 100%, 0% 100%);
z-index: 0;
}
.about-hero .hero-founded { color: #fff;}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
min-height: 88vh;
gap: 0;
}
.agriculture-hero {
padding-top: 100px; /* navbar offset */
/* background: var(--cream); */
background: #2A7B9B;
background: linear-gradient(180deg, rgba(42, 123, 155, 1) 0%, rgba(36, 147, 191, 1) 51%, rgba(97, 212, 145, 1) 100%);
position: relative;
overflow: hidden;
}
.agriculture-hero::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 55%;
height: 100%;
background: var(--green-pale);
clip-path: polygon(98% 0, 100% 0, 100% 100%, 0% 100%);
z-index: 0;
}
.agriculture-hero .hero-founded { color: #fff;}
.hero-copy { padding: 80px 60px 80px 0; }
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--text-light);
margin-bottom: 24px;
font-weight: 500;
}
.breadcrumb a { color: var(--green-mid); }
.breadcrumb span { color: var(--text-light); }
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--green-pale);
color: var(--green-deep);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 100px;
margin-bottom: 20px;
border: 1px solid rgba(13,92,58,0.15);
}
.hero-eyebrow .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--green-light);
animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(0.85)} }
.about-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 4.5vw, 4.2rem);
font-weight: 900;
line-height: 1.08;
color: var(--charcoal);
margin-bottom: 20px;
}
.about-h1 em { font-style: italic; color: var(--green-mid); }
.hero-lead {
font-size: 1.1rem;
color: var(--text-medium);
line-height: 1.8;
max-width: 460px;
margin-bottom: 36px;
}
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-founded {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 36px;
font-size: 0.82rem;
color: var(--text-light);
}
.hero-founded .divider { width: 32px; height: 1px; background: var(--border-color); }
.hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 0 60px 60px;
}
.hero-img-wrap {
position: relative;
width: 100%;
max-width: 480px;
}
.hero-img-main {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: 20px;
box-shadow: var(--shadow-deep);
display: block;
}
.hero-img-badge {
position: absolute;
bottom: -24px;
left: -28px;
background: var(--green-deep);
color: #fff;
border-radius: 16px;
padding: 18px 22px;
box-shadow: 0 10px 30px rgba(13,92,58,0.35);
}
.hero-img-badge .big { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 900; line-height: 1; }
.hero-img-badge .small { font-size: 0.72rem; letter-spacing: 0.08em; opacity: 0.8; margin-top: 2px; }
.hero-tag-float {
position: absolute;
top: 28px;
right: -24px;
background: var(--amber);
color: var(--charcoal);
font-size: 0.78rem;
font-weight: 700;
padding: 10px 16px;
border-radius: 10px;
box-shadow: 0 6px 20px rgba(245,166,35,0.4);
text-align: center;
line-height: 1.4;
}
/* ─── IMPACT TICKER STRIP ─────────────────────────────────── */
.ticker-strip {
background: var(--green-deep);
padding: 24px 0;
overflow: hidden;
position: relative;
}
.ticker-inner {
display: flex;
align-items: center;
gap: 0;
animation: ticker 30s linear infinite;
width: max-content;
}
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item {
display: flex;
align-items: center;
gap: 16px;
padding: 0 48px;
white-space: nowrap;
color: rgba(255,255,255,0.9);
font-size: 0.88rem;
font-weight: 500;
}
.ticker-item strong { color: var(--amber); font-size: 1rem; font-weight: 700; }
.ticker-sep { color: rgba(255,255,255,0.25); font-size: 1.2rem; }
/* ─── STORY: SPLIT SCROLL ─────────────────────────────────── */
.story-section {
padding: 100px 0;
background: var(--bg-white);
}
.story-layout {
display: grid;
grid-template-columns: 4fr 6fr;
gap: 80px;
align-items: start;
}
.story-left { position: sticky; top: 110px; }
.story-img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
border-radius: 18px;
display: block;
box-shadow: var(--shadow-md);
}
.story-caption {
margin-top: 16px;
font-size: 0.78rem;
color: var(--text-light);
text-align: center;
font-style: italic;
}
.story-right { padding-top: 8px; }
.story-lede {
font-size: 1.22rem;
color: var(--charcoal);
font-weight: 500;
line-height: 1.7;
border-left: 4px solid var(--green-light);
padding-left: 20px;
margin-bottom: 28px;
}
.story-right p {
color: var(--text-medium);
line-height: 1.85;
margin-bottom: 18px;
font-size: 1rem;
}
.milestones { margin-top: 44px; }
.milestone-row {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 22px 0;
border-bottom: 1px solid var(--border-color);
}
.milestone-row:last-child { border-bottom: none; }
.m-icon {
width: 46px; height: 46px;
border-radius: 12px;
background: var(--green-pale);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
border: 1px solid rgba(47,169,106,0.2);
}
.m-text strong { display: block; font-size: 0.93rem; font-weight: 600; color: var(--charcoal); margin-bottom: 2px; }
.m-text span { font-size: 0.83rem; color: var(--text-light); }
/* ─── FOUNDER: DARK FULL-BLEED ───────────────────────────── */
.founder-section {
background: var(--green-deep);
padding: 100px 0;
position: relative;
overflow: hidden;
color: #fff;
}
.founder-section::before {
content: '\201C';
position: absolute;
top: -60px; left: -10px;
font-family: 'Playfair Display', serif;
font-size: 28rem;
color: rgba(255,255,255,0.04);
line-height: 1;
pointer-events: none;
}
.founder-layout {
display: grid;
grid-template-columns: 320px 1fr;
gap: 72px;
align-items: start;
position: relative;
z-index: 1;
}
.founder-card-dark {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 20px;
padding: 32px;
text-align: center;
position: sticky;
top: 110px;
}
.f-photo {
width: 130px; height: 130px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 16px;
display: block;
border: 3px solid rgba(255,255,255,0.25);
}
.f-name { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.f-title { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 20px; }
.f-contact a { display: block; font-size: 0.83rem; color: rgba(255,255,255,0.6); margin-bottom: 5px; transition: var(--transition); }
.f-contact a:hover { color: var(--amber); }
.f-badge {
margin-top: 20px;
padding: 12px;
background: rgba(245,166,35,0.15);
border: 1px solid rgba(245,166,35,0.3);
border-radius: 10px;
font-size: 0.78rem;
color: var(--amber);
font-weight: 600;
}
.founder-message .section-tag { color: var(--amber); }
.founder-message .section-tag::before { background: var(--amber); }
.founder-message h2 { color: #fff; margin-bottom: 28px; }
.founder-message .salutation {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 1.1rem;
color: rgba(255,255,255,0.9);
margin-bottom: 24px;
}
.founder-message p {
font-size: 1rem;
line-height: 1.85;
color: rgba(255,255,255,0.72);
margin-bottom: 18px;
}
.founder-message .sign-off { font-style: italic; color: rgba(255,255,255,0.5); margin-top: 8px; }
.founder-message h4 { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 0; }
/* ─── MISSION + VISION: HORIZONTAL SPLIT CARD ─────────────── */
.mission-section {
padding: 100px 0;
background: var(--bg-light);
}
.mv-split {
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-md);
margin-top: 52px;
}
.mv-panel {
padding: 56px 48px;
position: relative;
}
.mv-panel.mission-panel { background: var(--bg-white); }
.mv-panel.vision-panel { background: var(--green-deep); color: #fff; }
.mv-overline {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--green-mid);
margin-bottom: 8px;
}
.vision-panel .mv-overline { color: rgba(255,255,255,0.55); }
.mv-icon-box {
width: 60px; height: 60px;
border-radius: 16px;
background: var(--green-pale);
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem;
margin-bottom: 24px;
}
.vision-panel .mv-icon-box { background: rgba(255,255,255,0.1); }
.mv-panel h3 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 900;
color: var(--charcoal);
margin-bottom: 16px;
}
.vision-panel h3 { color: #fff; }
.mv-panel p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-medium);
margin: 0;
}
.vision-panel p { color: rgba(255,255,255,0.78); }
/* ─── VALUES: BENTO GRID ──────────────────────────────────── */
.values-section {
padding: 100px 0;
background: var(--cream);
}
.values-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 52px;
}
.vb-card {
background: var(--bg-white);
border-radius: 18px;
padding: 36px 28px;
border: 1px solid var(--border-color);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.vb-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(to right, var(--green-light), var(--amber));
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: left;
}
.vb-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.vb-card:hover::after { transform: scaleX(1); }
.vb-card.wide { grid-column: span 2; }
.vb-card.dark { background: var(--charcoal); border-color: var(--charcoal); }
.vb-card.dark h3 { color: #fff; }
.vb-card.dark p { color: rgba(255,255,255,0.6); }
.vb-card.dark .vb-icon-wrap { background: rgba(255,255,255,0.1); }
.vb-icon-wrap {
width: 50px; height: 50px;
border-radius: 14px;
background: var(--green-pale);
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
transition: var(--transition);
}
.vb-card:hover .vb-icon-wrap { background: var(--green-deep); transform: rotate(-5deg) scale(1.1); }
.vb-card.dark:hover .vb-icon-wrap { background: rgba(245,166,35,0.2); }
.vb-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 10px;
}
.vb-card p { font-size: 0.9rem; color: var(--text-medium); line-height: 1.65; margin: 0; }
/* ─── TEAM: CARD REDESIGN ─────────────────────────────────── */
.team-section {
padding: 100px 0;
background: var(--bg-white);
}
.team-divider {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-light);
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 32px;
}
.team-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.team-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 56px;
}
.t-card {
background: var(--cream);
border-radius: 18px;
overflow: hidden;
border: 1px solid var(--border-color);
transition: var(--transition);
}
.t-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.t-photo {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
background: var(--green-pale);
}
.t-initials {
width: 100%;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--green-pale), #d4edd9);
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 700;
color: var(--green-deep);
}
.t-body { padding: 24px; }
.t-name { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.t-role {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--green-mid);
margin-bottom: 12px;
}
.t-bio { font-size: 0.88rem; color: var(--text-medium); line-height: 1.65; }
/* ─── LEGAL INFO: CLEAN TABLE STYLE ──────────────────────── */
.legal-section { padding: 5px 0; background: var(--bg-light); }
.legal-duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 52px;
}
.legal-panel {
background: var(--bg-white);
border-radius: 18px;
padding: 36px;
border: 1px solid var(--border-color);
}
.legal-panel-title {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
color: var(--charcoal);
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
gap: 10px;
}
.legal-panel-title .icon { font-size: 1.2rem; }
.legal-rows { list-style: none; }
.legal-rows li {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.88rem;
}
.legal-rows li:last-child { border-bottom: none; }
.legal-rows li .lk { color: var(--text-light); font-weight: 500; flex-shrink: 0; }
.legal-rows li .lv { color: var(--text-dark); font-weight: 600; text-align: right; }
.cert-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cert-tag {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--green-pale);
color: var(--green-deep);
font-size: 0.75rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 100px;
border: 1px solid rgba(47,169,106,0.2);
}
/* ─── PARTNERS: DARK TRIPTYCH ─────────────────────────────── */
.partners-section {
padding: 100px 0;
background: var(--charcoal);
color: #fff;
}
.partners-section .section-tag { color: var(--amber); }
.partners-section .section-tag::before { background: var(--amber); }
.partners-section .section-title { color: #fff; }
.partners-section .section-subtitle { color: rgba(255,255,255,0.6); }
.partner-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
border-radius: 20px;
overflow: hidden;
margin-top: 52px;
}
.p-card {
background: rgba(255,255,255,0.05);
padding: 44px 36px;
transition: var(--transition);
display: flex;
flex-direction: column;
}
.p-card:hover { background: rgba(255,255,255,0.1); }
.p-icon {
font-size: 2.2rem;
margin-bottom: 20px;
}
.p-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: #fff;
margin-bottom: 12px;
}
.p-card p { font-size: 0.9rem; color: rgba(255,255,255,0.62); line-height: 1.75; flex-grow: 1; margin-bottom: 28px; }
.p-card .btn-outline {
border-color: rgba(255,255,255,0.3);
color: #fff;
font-size: 0.83rem;
padding: 10px 22px;
border-radius: 50px;
align-self: flex-start;
}
.p-card .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
/* ─── CTA: DIAGONAL ACCENT ────────────────────────────────── */
.about-cta {
background: linear-gradient(135deg, var(--green-deep) 0%, #0A4229 55%, #1A5C3A 100%);
padding: 100px 0;
position: relative;
overflow: hidden;
text-align: center;
color: #fff;
}
.about-cta::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 450px; height: 450px;
border-radius: 50%;
background: rgba(245,166,35,0.07);
}
.about-cta::after {
content: '';
position: absolute;
bottom: -100px; left: -100px;
width: 350px; height: 350px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.cta-inner { position: relative; z-index: 2; }
.cta-inner .section-tag { justify-content: center; }
.cta-inner .section-tag::before { display: none; }
/* ──────────────────────────────────────────────────────────────
19. ANIMATIONS
────────────────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.7s ease forwards; }
.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.counting { transition: all 0.3s; }
/* ══════════════════════════════════════════
BLOOD PAGE — PAGE-SPECIFIC STYLES
══════════════════════════════════════════ */
/* ── HERO ── */
.blood-hero {
min-height: 92vh;
background: linear-gradient(135deg, #6b0000 0%, #b71c1c 35%, #d32f2f 65%, #7b1010 100%);
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.blood-hero::before {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.03'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
.blood-hero::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
background: linear-gradient(to bottom, transparent, #faf7f2);
}
.hero-inner-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
padding: 120px 0 100px;
}
.hero-tag {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
color: #ffd6d6; font-size: 0.8rem; font-weight: 600;
padding: 6px 16px; border-radius: 50px;
letter-spacing: 0.08em; text-transform: uppercase;
margin-bottom: 1.5rem; backdrop-filter: blur(8px);
}
.hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 1.5rem;
}
.hero-h1 em { color: #ffc2c2; font-style: italic; }
.hero-sub {
color: rgba(255,255,255,0.82);
font-size: 1.15rem;
line-height: 1.8;
margin-bottom: 2.5rem;
max-width: 520px;
}
.hero-btns-row {
display: flex; gap: 14px; flex-wrap: wrap;
}
.hero-btn-primary {
background: #fff; color: #b71c1c; font-weight: 700;
padding: 15px 32px; border-radius: 50px;
font-size: 0.95rem; text-decoration: none;
box-shadow: 0 8px 28px rgba(0,0,0,0.2);
transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;
}
.hero-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.3); color: #b71c1c; }
.hero-btn-outline {
border: 2px solid rgba(255,255,255,0.55); color: #fff; font-weight: 600;
padding: 14px 32px; border-radius: 50px; font-size: 0.95rem; text-decoration: none;
transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;
}
.hero-btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
/* Hero Visual Side */
.hero-visual-side {
display: flex; flex-direction: column; gap: 16px;
}
.stat-pill {
display: flex; align-items: center; gap: 16px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(12px);
padding: 18px 24px; border-radius: 16px;
animation: slideIn 0.6s ease forwards;
opacity: 0;
}
.stat-pill:nth-child(1) { animation-delay: 0.2s; }
.stat-pill:nth-child(2) { animation-delay: 0.35s; }
.stat-pill:nth-child(3) { animation-delay: 0.5s; }
.stat-pill:nth-child(4) { animation-delay: 0.65s; }
@keyframes slideIn { from { opacity:0; transform: translateX(30px); } to { opacity:1; transform: translateX(0); } }
.stat-pill-icon { font-size: 2rem; }
.stat-pill-val { font-size: 1.8rem; font-weight: 800; color: #fff; font-family: 'Playfair Display', serif; line-height: 1; }
.stat-pill-lbl { font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
.stat-pill-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.2); }
/* ── BREADCRUMB ── */
.breadcrumb-bar {
background: #fff;
border-bottom: 1px solid #f0e8e8;
padding: 12px 0;
}
.breadcrumb-bar ol {
display: flex; align-items: center; gap: 8px;
font-size: 0.85rem; color: #888;
flex-wrap: wrap;
}
.breadcrumb-bar ol li { display: flex; align-items: center; gap: 8px; }
.breadcrumb-bar ol li a { color: #b71c1c; font-weight: 500; }
.breadcrumb-bar ol li::after { content: '/'; color: #ccc; }
.breadcrumb-bar ol li:last-child::after { display: none; }
.breadcrumb-bar ol li:last-child { color: #444; font-weight: 500; }
/* ── SECTION TAGS ── */
/* .section-tag {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: #b71c1c; margin-bottom: 1rem;
}
.section-tag::before { content: ''; display: block; width: 28px; height: 2px; background: #b71c1c; } */
/* ── OVERVIEW SPLIT ── */
.overview-section {
padding: 100px 0;
background: var(--cream, #faf7f2);
}
.overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.overview-text h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3vw, 2.6rem);
color: #1a1a1a;
margin-bottom: 1.2rem;
}
.overview-text h2 span { color: #b71c1c; }
.overview-text p {
color: #555; line-height: 1.9; margin-bottom: 1.2rem;
}
.overview-text .lead { font-size: 1.1rem; color: #333; font-weight: 500; }
.overview-visual {
position: relative;
}
.overview-card-stack {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.ov-card {
background: #fff;
border-radius: 20px;
padding: 28px 24px;
box-shadow: 0 4px 24px rgba(183,28,28,0.08);
border-left: 4px solid #b71c1c;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ov-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(183,28,28,0.15); }
.ov-card.tall { grid-row: span 2; }
.ov-card-icon { font-size: 2rem; margin-bottom: 12px; }
.ov-card h4 { font-size: 1rem; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.ov-card p { font-size: 0.88rem; color: #666; line-height: 1.6; margin: 0; }
.ov-card .big-num {
font-family: 'Playfair Display', serif;
font-size: 2.8rem; font-weight: 900; color: #b71c1c; line-height: 1;
margin-bottom: 4px;
}
/* ── SERVICES BENTO GRID ── */
.services-section {
padding: 100px 0;
background: #fff;
}
.section-head { text-align: center; margin-bottom: 60px; }
.section-head h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3vw, 2.8rem);
color: #1a1a1a; margin-bottom: 1rem;
}
.section-head p { color: #666; font-size: 1.05rem; max-width: 600px; margin: 0 auto; }
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 20px;
}
.bento-card {
background: var(--cream, #faf7f2);
border-radius: 24px;
padding: 36px 32px;
transition: all 0.3s ease;
position: relative; overflow: hidden;
}
/* .bento-card::after {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #b71c1c, #e53935);
border-radius: 24px 24px 0 0;
} */
/* .bento-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(183,28,28,0.12); background: #fff; } */
.bento-card.featured {
grid-column: span 2;
background: linear-gradient(135deg, #7b0000, #c62828);
color: #fff;
}
.bento-card.featured::after { display: none; }
.bento-card.featured h3, .bento-card.featured p, .bento-card.featured li { color: #fff; }
.bento-card.featured .bc-icon { background: rgba(255,255,255,0.15); }
.bc-icon {
width: 60px; height: 60px;
background: rgba(183,28,28,0.1);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem; margin-bottom: 20px;
}
.bento-card h3 { font-size: 1.2rem; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
.bento-card p { font-size: 0.9rem; color: #666; line-height: 1.7; margin-bottom: 16px; }
.bento-card ul { margin-top: 12px; }
.bento-card ul li {
font-size: 0.87rem; color: #555; padding: 5px 0;
padding-left: 18px; position: relative;
}
.bento-card ul li::before {
content: '→'; position: absolute; left: 0;
color: #b71c1c; font-weight: 700;
}
.bento-card.featured ul li { color: rgba(255,255,255,0.85); }
.bento-card.featured ul li::before { color: #ffcdd2; }
/* ── IMPACT STATS TICKER ── */
.impact-strip {
background: linear-gradient(135deg, #b71c1c, #7b0000);
padding: 60px 0;
position: relative; overflow: hidden;
}
.impact-strip::before {
content: '🩸';
position: absolute; font-size: 300px; opacity: 0.04;
right: -60px; top: -60px; line-height: 1;
}
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
}
.stat-item {
text-align: center;
padding: 32px 24px;
border-right: 1px solid rgba(255,255,255,0.12);
}
.stat-item:last-child { border-right: none; }
.stat-big {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 900; color: #fff;
line-height: 1; margin-bottom: 8px;
}
/* .stat-label {
font-size: 0.88rem; color: rgba(255,255,255,0.7);
text-transform: uppercase; letter-spacing: 0.06em;
} */
/* ── DONATION SUPPORT SECTION ── */
.support-section {
padding: 100px 0;
background: var(--cream, #faf7f2);
}
.support-lead {
text-align: center; max-width: 680px; margin: 0 auto 60px;
color: #555; font-size: 1.05rem; line-height: 1.8;
}
.donation-cards-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.don-card {
background: #fff;
border-radius: 20px;
padding: 28px 18px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
transition: all 0.3s ease;
border-top: 5px solid var(--card-color, #b71c1c);
cursor: pointer;
}
.don-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(183,28,28,0.15); }
.don-amount {
font-family: 'Playfair Display', serif;
font-size: 2rem; font-weight: 900;
margin-bottom: 10px;
}
.don-desc { color: #000; line-height: 1.5; margin-bottom: 16px; min-height: 40px; }
.don-btn {
width: 100%; padding: 10px; border-radius: 8px;
background: var(--card-color, #b71c1c); color: #fff;
border: none; font-weight: 700; font-size: 0.88rem;
cursor: pointer; transition: opacity 0.2s;
}
.don-btn:hover { opacity: 0.88; }
.custom-amount-wrapper {
background: #fff;
border-radius: 20px;
padding: 28px 18px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
border-top: 5px solid #880e4f;
display: flex; flex-direction: column; justify-content: space-between;
}
.don-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.don-cta-row .btn-primary-red {
background: #b71c1c; color: #fff; padding: 15px 36px; border-radius: 50px;
font-weight: 700; text-decoration: none; transition: all 0.3s ease;
font-size: 0.95rem; display: inline-block;
}
.don-cta-row .btn-primary-red:hover { background: #7b0000; transform: translateY(-2px); color: #fff; }
.don-cta-row .btn-outline-red {
border: 2px solid #b71c1c; color: #b71c1c; padding: 14px 36px; border-radius: 50px;
font-weight: 700; text-decoration: none; transition: all 0.3s ease;
font-size: 0.95rem; display: inline-block;
}
.don-cta-row .btn-outline-red:hover { background: #b71c1c; color: #fff; }
/* ── TESTIMONIALS ── */
.testimonials-wrap {
padding: 100px 0;
background: #fff;
}
.testi-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.testi-card {
background: var(--cream, #faf7f2);
border-radius: 24px; padding: 36px 32px;
position: relative; overflow: hidden;
transition: all 0.3s ease;
}
.testi-card::before {
content: '"';
font-family: 'Playfair Display', serif;
font-size: 8rem; color: rgba(183,28,28,0.08);
position: absolute; top: -10px; right: 20px;
line-height: 1;
}
.testi-card:hover { box-shadow: 0 16px 48px rgba(183,28,28,0.1); transform: translateY(-4px); }
.testi-text { color: #555; line-height: 1.8; font-size: 0.96rem; margin-bottom: 24px; font-style: italic; position: relative; z-index: 1; }
.testi-author { display: flex; align-items: center; gap: 14px; }
.author-avatar {
width: 46px; height: 46px; border-radius: 50%;
background: linear-gradient(135deg, #b71c1c, #e53935);
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1.2rem;
}
.author-name { font-weight: 700; color: #1a1a1a; font-size: 0.95rem; }
.author-role { font-size: 0.8rem; color: #999; }
/* ── JOIN MISSION ── */
.join-section { padding: 100px 0; background: var(--cream, #faf7f2); }
.join-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.join-card {
background: #fff; border-radius: 24px; padding: 40px 32px;
text-align: center; transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.join-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(183,28,28,0.1); }
.join-icon {
width: 72px; height: 72px; border-radius: 20px;
background: linear-gradient(135deg, rgba(183,28,28,0.08), rgba(183,28,28,0.15));
display: flex; align-items: center; justify-content: center;
font-size: 2rem; margin: 0 auto 20px;
}
.join-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; color: #1a1a1a; }
.join-card p { font-size: 0.9rem; color: #666; line-height: 1.7; margin-bottom: 16px; }
.join-card ul { text-align: left; margin: 12px 0 20px; }
.join-card ul li { font-size: 0.87rem; color: #555; padding: 4px 0 4px 18px; position: relative; }
.join-card ul li::before { content: '✓'; position: absolute; left: 0; color: #b71c1c; font-weight: 700; }
.join-card .btn-join {
display: inline-block; padding: 12px 28px; border-radius: 50px;
background: #b71c1c; color: #fff; font-weight: 700; font-size: 0.88rem;
text-decoration: none; transition: all 0.3s ease;
}
.join-card .btn-join:hover { background: #7b0000; transform: translateY(-2px); color: #fff; }
.join-card .btn-join.outline {
background: transparent; border: 2px solid #b71c1c; color: #b71c1c;
}
.join-card .btn-join.outline:hover { background: #b71c1c; color: #fff; }
/* ── FACTS SECTION ── */
.facts-section {
padding: 100px 0;
background: #fff;
}
.facts-split {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.facts-intro h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3vw, 2.6rem);
margin-bottom: 1.2rem; color: #1a1a1a;
}
.facts-intro h2 span { color: #b71c1c; }
.facts-intro p { color: #666; line-height: 1.9; }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fact-card {
background: var(--cream, #faf7f2); border-radius: 20px; padding: 28px 24px;
border-bottom: 4px solid #b71c1c;
transition: all 0.3s ease;
}
.fact-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(183,28,28,0.1); }
.fact-card h4 { font-size: 1rem; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.fact-card p { font-size: 0.88rem; color: #666; line-height: 1.7; margin: 0; }
/* ══════════════════════════════════════════
FOOD DONATION PHOTO GALLERY — YEAR-WISE
══════════════════════════════════════════ */
.gallery-section {
padding: 100px 0;
background: var(--cream, #faf7f2);
}
.gallery-year-tabs {
display: flex; gap: 10px; flex-wrap: wrap;
justify-content: center; margin-bottom: 50px;
}
.year-tab {
padding: 10px 24px; border-radius: 50px;
background: #fff; border: 2px solid #e0d0d0;
font-weight: 600; font-size: 0.9rem; color: #888;
cursor: pointer; transition: all 0.3s ease;
}
.year-tab:hover, .year-tab.active {
background: #b71c1c; border-color: #b71c1c; color: #fff;
}
.gallery-year-content { display: none; }
.gallery-year-content.active { display: block; }
.gallery-year-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.gallery-year-header h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem; color: #1a1a1a; margin: 0;
}
.gallery-year-header h3 span { color: #b71c1c; }
.gallery-year-stats {
display: flex; gap: 24px; flex-wrap: wrap;
}
.gallery-year-stat {
display: flex; align-items: center; gap: 8px;
background: #fff; padding: 8px 16px; border-radius: 50px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
font-size: 0.85rem; color: #555;
}
.gallery-year-stat strong { color: #b71c1c; }
/* Photo color variants per year */
.year-2024 .photo-item { background: linear-gradient(135deg, #ffcdd2, #ef9a9a); }
.year-2023 .photo-item { background: linear-gradient(135deg, #ffccbc, #ffab91); }
.year-2022 .photo-item { background: linear-gradient(135deg, #f8bbd0, #f48fb1); }
.year-2021 .photo-item { background: linear-gradient(135deg, #ffe0b2, #ffcc80); }
.year-2024 .photo-placeholder .ph-icon { filter: sepia(1) saturate(3) hue-rotate(320deg); }
/* ── LIGHTBOX ── */
.lightbox {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.9); z-index: 9999;
align-items: center; justify-content: center;
backdrop-filter: blur(6px);
}
.lightbox.open { display: flex; }
.lightbox-inner {
background: #fff; border-radius: 20px; padding: 40px;
max-width: 600px; width: 90%; text-align: center;
position: relative;
}
.lightbox-close {
position: absolute; top: 16px; right: 20px;
font-size: 1.5rem; cursor: pointer; color: #888;
transition: color 0.2s;
}
.lightbox-close:hover { color: #b71c1c; }
.lightbox-icon { font-size: 4rem; margin-bottom: 16px; }
.lightbox-inner h3 { color: #1a1a1a; margin-bottom: 8px; }
.lightbox-inner p { color: #777; font-size: 0.9rem; }
/* ── CTA SECTION ── */
.cta-blood {
background: linear-gradient(135deg, #6b0000, #b71c1c, #c62828);
padding: 100px 0; text-align: center; position: relative; overflow: hidden;
}
.cta-blood::before {
content: '';
position: absolute; width: 500px; height: 500px; border-radius: 50%;
background: rgba(255,255,255,0.04); top: -200px; right: -200px;
}
.cta-blood::after {
content: '';
position: absolute; width: 350px; height: 350px; border-radius: 50%;
background: rgba(255,255,255,0.04); bottom: -150px; left: -150px;
}
.cta-inner { position: relative; z-index: 2; }
.cta-inner h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
color: #fff; margin-bottom: 1rem;
}
.cta-inner p { color: rgba(255,255,255,0.8); font-size: 1.1rem; margin-bottom: 2.5rem; max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-btn-white { background: #fff; color: #b71c1c; padding: 15px 36px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; font-size: 0.95rem; }
.cta-btn-white:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); color: #b71c1c; }
.cta-btn-ghost { border: 2px solid rgba(255,255,255,0.5); color: #fff; padding: 14px 36px; border-radius: 50px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; font-size: 0.95rem; }
.cta-btn-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
/* ── DONATION MODAL ── */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal.show { display: flex; }
.modal-content { background: #fff; border-radius: 24px; padding: 0; max-width: 480px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 32px 80px rgba(0,0,0,0.3); }
.modal-header { background: linear-gradient(135deg, #b71c1c, #7b0000); padding: 28px 32px; border-radius: 24px 24px 0 0; position: relative; }
.modal-header h2 { color: #fff; font-size: 1.4rem; margin-bottom: 4px; }
.modal-header p { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin: 0; }
.close { position: absolute; top: 16px; right: 20px; font-size: 1.5rem; color: rgba(255,255,255,0.7); cursor: pointer; transition: color 0.2s; }
.close:hover { color: #fff; }
.modal-body { padding: 28px 32px; }
.donation-summary { background: #fef2f2; border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 24px; border: 1px solid #fecaca; }
.donation-summary h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-bottom: 6px; }
.amount { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 900; color: #b71c1c; line-height: 1; margin-bottom: 4px; }
.donation-summary p { font-size: 0.88rem; color: #666; margin: 0; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 0.88rem; color: #333; margin-bottom: 6px; }
.required { color: #b71c1c; }
.form-group input, .form-group textarea {
width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 10px;
font-size: 15px; font-family: 'DM Sans', sans-serif; transition: border-color 0.3s;
box-sizing: border-box;
}
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #b71c1c; }
.form-group.error input, .form-group.error textarea { border-color: #ef5350; }
.form-error { display: none; font-size: 0.8rem; color: #ef5350; margin-top: 4px; }
.form-group.error .form-error { display: block; }
.checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.checkbox-group input { width: auto; }
.modal-footer { padding: 16px 32px 28px; display: flex; gap: 12px; }
.btn-cancel { flex: 1; padding: 13px; border-radius: 10px; border: 2px solid #e0e0e0; background: transparent; font-weight: 600; cursor: pointer; color: #666; transition: all 0.2s; }
.btn-cancel:hover { border-color: #b71c1c; color: #b71c1c; }
.btn-submit { flex: 2; padding: 13px; border-radius: 10px; background: linear-gradient(135deg, #b71c1c, #c62828); color: #fff; border: none; font-weight: 700; cursor: pointer; font-size: 1rem; transition: all 0.3s ease; }
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(183,28,28,0.3); }
/* ══════════════════════════════════════════
LAYOUT HELPERS
══════════════════════════════════════════ */
.csr-sec { padding: 80px 0; }
.bg-w { background: #fff; }
.bg-mint { background: #f0fdf4; }
.bg-grey { background: #f8f9fa; }
.bg-cream { background: #fffbeb; }
.bg-dark { background: #0f1f14; }
@media (max-width: 640px) { .csr-sec { padding: 55px 0; } }
/* ══════════════════════════════════════════
PAGE HERO — green gradient, celebration style
══════════════════════════════════════════ */
.page-header {
background: linear-gradient(140deg, #0c3b21 0%, #14532d 35%, #16a34a 70%, #22c55e 100%);
padding: 90px 0 78px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 15% 60%, rgba(255,255,255,.07) 0%, transparent 50%),
radial-gradient(ellipse at 85% 25%, rgba(187,247,208,.06) 0%, transparent 55%);
pointer-events: none;
}
/* Diagonal decorative lines */
.page-header::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 5px;
background: linear-gradient(90deg, #bbf7d0, #22c55e, #d97706, #22c55e, #bbf7d0);
}
.hero-pill {
display: inline-block;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
border-radius: 30px; padding: 5px 18px;
font-size: .78rem; font-weight: 700; letter-spacing: 2.5px;
text-transform: uppercase; color: #bbf7d0; margin-bottom: 1.1rem;
}
.page-title {
font-family: 'Crimson Pro', Georgia, serif;
font-size: clamp(2.5rem, 5vw, 3.6rem);
font-weight: 700; color: #fff; line-height: 1.18;
margin: 0 0 1rem; letter-spacing: -.5px;
}
.page-subtitle {
font-size: clamp(1rem, 2.2vw, 1.17rem);
color: rgba(255,255,255,.88);
max-width: 680px; margin: 0 auto; line-height: 1.75;
}
.hero-creds {
display: flex; gap: .7rem; justify-content: center;
flex-wrap: wrap; margin-top: 1.6rem;
}
.hero-cred-pill {
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
border-radius: 30px; padding: 5px 14px;
font-size: .78rem; font-weight: 600; color: #bbf7d0;
}
.hero-cta-row {
display: flex; gap: 1rem; justify-content: center;
flex-wrap: wrap; margin-top: 2rem;
}
.btn-hero-solid {
background: #fff; color: #14532d;
padding: 12px 28px; border-radius: 30px;
font-weight: 700; text-decoration: none; font-size: .92rem;
transition: transform .18s, box-shadow .18s;
display: inline-block;
}
.btn-hero-solid:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.btn-hero-outline {
background: rgba(255,255,255,.14); color: #fff;
padding: 12px 28px; border-radius: 30px;
font-weight: 600; text-decoration: none; font-size: .92rem;
border: 1.5px solid rgba(255,255,255,.38); display: inline-block;
transition: background .18s;
}
.btn-hero-outline:hover { background: rgba(255,255,255,.26); }
/* ══════════════════════════════════════════
BREADCRUMB
══════════════════════════════════════════ */
.breadcrumb-bar {
background: #f8f9fa; padding: 10px 0;
border-bottom: 1px solid #e9ecef;
}
.bc-list {
list-style: none; margin: 0; padding: 0;
display: flex; gap: .5rem; align-items: center;
font-size: .85rem; color: #666; flex-wrap: wrap;
}
.bc-list a { color: #16a34a; text-decoration: none; }
.bc-sep { color: #ccc; }
/* ══════════════════════════════════════════
STATS STRIP — matches site pattern
══════════════════════════════════════════ */
.stats-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
background: linear-gradient(135deg, #14532d 0%, #16a34a 55%, #22c55e 100%);
border-radius: var(--radius-lg); overflow: hidden;
}
@media (max-width: 900px) { .stats-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }
.sc { padding: 2rem .8rem; text-align: center; border-right: 1px solid rgba(255,255,255,.13); }
.sc:last-child { border-right: none; }
.sc .sn { font-size: 2.2rem; font-weight: 800; color: #bbf7d0; line-height: 1; }
.sc .sl { font-size: .77rem; color: rgba(255,255,255,.87); margin-top: .4rem; font-weight: 500; }
/* ══════════════════════════════════════════
SECTION HEADER — matches site pattern
══════════════════════════════════════════ */
.sh { text-align: center; margin-bottom: 3rem; }
.sh-tag {
display: inline-block;
background: #dcfce7; border: 1px solid #86efac;
border-radius: 30px; padding: 5px 18px;
font-size: .72rem; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: var(--brand-d); margin-bottom: .9rem;
}
.sh h2 { color: var(--brand-d); margin-bottom: .75rem; font-size: 2rem; }
.sh p { max-width: 720px; margin: 0 auto; color: var(--muted); line-height: 1.9; font-size: 1.02rem; }
/* Amber section header variant */
.sh-amber .sh-tag { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.sh-amber h2 { color: #78350f; }
/* ══════════════════════════════════════════
WHY PARTNER — SPLIT LAYOUT
Left: text + trust badges | Right: stacked highlight cards
══════════════════════════════════════════ */
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.trust-badges {
display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem;
}
.trust-badge {
display: inline-flex; align-items: center; gap: .5rem;
background: #f0fdf4; border: 1.5px solid #86efac;
border-radius: 8px; padding: .55rem 1rem;
font-size: .82rem; font-weight: 700; color: #14532d;
}
.trust-badge .tb-icon { font-size: 1rem; }
/* .why-cards {
display: flex; flex-direction: column; gap: 1.1rem;
}
.why-card {
background: #fff; border-radius: var(--radius-md); padding: 1.4rem 1.6rem;
box-shadow: var(--shadow-sm); border-left: 5px solid var(--brand);
display: flex; align-items: flex-start; gap: 1.1rem;
transition: transform .2s, box-shadow .2s;
}
.why-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.why-card:nth-child(2) { border-left-color: var(--amber); }
.why-card:nth-child(3) { border-left-color: var(--indigo); }
.why-card:nth-child(4) { border-left-color: var(--teal); }
.why-icon { font-size: 1.7rem; flex-shrink: 0; margin-top: .1rem; }
.why-card h3 { font-size: .97rem; font-weight: 700; color: #1a1a1a; margin: 0 0 .3rem; }
.why-card p { font-size: .86rem; color: var(--muted); line-height: 1.7; margin: 0; } */
/* ══════════════════════════════════════════
CSR MODELS — ANCHOR-NAV + DETAILED CARDS
══════════════════════════════════════════ */
/* Tab nav for CSR models */
.model-nav {
display: flex; gap: 0; flex-wrap: wrap;
background: #f0fdf4; border-radius: 14px; padding: .4rem;
margin-bottom: 2.5rem; max-width: 800px; margin-left: auto; margin-right: auto;
}
.model-nav-btn {
flex: 1; min-width: 140px; padding: .7rem 1rem; border: none;
background: transparent; border-radius: 10px; cursor: pointer;
font-weight: 600; font-size: .85rem; color: #555;
transition: background .2s, color .2s; font-family: 'Work Sans', sans-serif;
text-align: center;
}
.model-nav-btn.active, .model-nav-btn:hover {
background: #14532d; color: #fff;
}
/* Big model cards */
.model-cards { display: flex; flex-direction: column; gap: 2.2rem; }
.model-card {
background: #fff; border-radius: 22px;
box-shadow: 0 6px 32px rgba(0,0,0,.09);
overflow: hidden; display: grid;
grid-template-columns: 260px 1fr;
}
@media (max-width: 820px) { .model-card { grid-template-columns: 1fr; } }
.model-card-left {
padding: 2.4rem 2rem;
display: flex; flex-direction: column; gap: .9rem;
justify-content: center;
}
.mc-green { background: linear-gradient(160deg, #0c3b21, #16a34a); }
.mc-blue { background: linear-gradient(160deg, #1e3a8a, #3b82f6); }
.mc-teal { background: linear-gradient(160deg, #134e4a, #0d9488); }
.mc-amber { background: linear-gradient(160deg, #451a03, #d97706); }
.model-card-left .mc-icon { font-size: 3rem; }
.model-card-left h3 {
font-family: 'Crimson Pro', serif;
font-size: 1.6rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.2;
}
.model-card-left .mc-invest {
background: rgba(255,255,255,.15); border-radius: 8px; padding: .55rem .9rem;
font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.95);
}
.model-card-left .mc-impact-num {
font-size: 1.8rem; font-weight: 800; color: #bbf7d0; line-height: 1;
}
.model-card-left .mc-impact-num.amber { color: #fde68a; }
.model-card-left .mc-impact-num.blue { color: #bfdbfe; }
.model-card-left .mc-impact-num.teal { color: #99f6e4; }
.model-card-left .mc-impact-label {
font-size: .75rem; color: rgba(255,255,255,.78); margin-top: .2rem; font-weight: 500;
}
.model-card-right { padding: 2.4rem 2.4rem; }
.model-card-right p.desc {
font-size: 1rem; color: #333; line-height: 1.85; margin: 0 0 1.4rem;
}
.model-detail-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;
}
@media (max-width: 560px) { .model-detail-grid { grid-template-columns: 1fr; } }
.mdc {
background: #f8f9fa; border-radius: 10px; padding: 1rem 1.1rem;
}
.mdc h4 { font-size: .78rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 .5rem; }
.mdc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.mdc ul li { font-size: .86rem; color: #444; display: flex; align-items: flex-start; gap: .45rem; line-height: 1.5; }
.mdc ul li::before { content: "→"; color: var(--brand); font-weight: 700; flex-shrink: 0; font-size: .85rem; }
.model-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.model-tag {
background: #dcfce7; color: #14532d; font-size: .72rem;
font-weight: 700; padding: 3px 11px; border-radius: 20px;
}
.model-tag.blue { background: #dbeafe; color: #1e3a8a; }
.model-tag.teal { background: #ccfbf1; color: #134e4a; }
.model-tag.amber { background: #fef3c7; color: #78350f; }
.model-card-right .mc-cta-row {
display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.5rem;
}
/* ══════════════════════════════════════════
PROCESS — NUMBERED HORIZONTAL FLOW
══════════════════════════════════════════ */
.process-flow {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
position: relative;
}
@media (max-width: 900px) { .process-flow { grid-template-columns: repeat(3, 1fr); gap: 1.2rem 0; } }
@media (max-width: 560px) { .process-flow { grid-template-columns: repeat(2, 1fr); } }
.process-flow::before {
content: '';
position: absolute; top: 28px; left: 8%; right: 8%;
height: 2px;
background: linear-gradient(90deg, #14532d, #22c55e);
z-index: 0;
}
@media (max-width: 900px) { .process-flow::before { display: none; } }
.pf-step {
display: flex; flex-direction: column; align-items: center;
gap: .75rem; padding: 0 .5rem;
text-align: center; position: relative; z-index: 1;
}
.pf-num {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, #14532d, #22c55e);
display: flex; align-items: center; justify-content: center;
font-weight: 800; color: #fff; font-size: 1.15rem;
box-shadow: 0 4px 16px rgba(22,163,74,.35);
border: 3px solid #fff;
}
.pf-step h4 { font-size: .88rem; font-weight: 700; color: #14532d; margin: 0 0 .2rem; }
.pf-step p { font-size: .78rem; color: #666; line-height: 1.55; margin: 0; }
/* ══════════════════════════════════════════
BENEFITS — TWO-COLUMN FEATURE GRID
══════════════════════════════════════════ */
.benefits-feature-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem;
}
@media (max-width: 900px) { .benefits-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefits-feature-grid { grid-template-columns: 1fr; } }
.bf-card {
background: #fff; border-radius: 16px; padding: 1.8rem 1.6rem;
box-shadow: var(--shadow-sm);
border-top: 4px solid transparent;
display: flex; flex-direction: column; gap: .65rem;
transition: transform .2s, box-shadow .2s;
}
.bf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bf-card:nth-child(1) { border-top-color: #16a34a; }
.bf-card:nth-child(2) { border-top-color: #d97706; }
.bf-card:nth-child(3) { border-top-color: #4f46e5; }
.bf-card:nth-child(4) { border-top-color: #0d9488; }
.bf-card:nth-child(5) { border-top-color: #dc2626; }
.bf-card:nth-child(6) { border-top-color: #7c3aed; }
.bf-card:nth-child(7) { border-top-color: #059669; }
.bf-card:nth-child(8) { border-top-color: #0284c7; }
.bf-card:nth-child(9) { border-top-color: #d97706; }
.bf-icon { font-size: 1.75rem; }
.bf-card h3 { font-size: .97rem; font-weight: 700; color: #1a1a1a; margin: 0; }
.bf-card p { font-size: .86rem; color: var(--muted); line-height: 1.7; margin: 0; }
/* ══════════════════════════════════════════
LEGAL CREDENTIALS STRIP
══════════════════════════════════════════ */
.legal-strip {
background: linear-gradient(135deg, #0c3b21, #14532d);
border-radius: 20px; padding: 2.4rem 2.8rem;
display: grid; grid-template-columns: 1fr auto;
gap: 2rem; align-items: center;
}
@media (max-width: 760px) { .legal-strip { grid-template-columns: 1fr; } }
.legal-text h3 { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0 0 .6rem; }
.legal-text p { color: rgba(255,255,255,.82); font-size: .93rem; line-height: 1.75; margin: 0; }
.legal-creds { display: flex; flex-direction: column; gap: .65rem; }
.legal-cred {
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
border-radius: 10px; padding: .7rem 1.2rem;
display: flex; align-items: center; gap: .7rem;
}
.legal-cred .lc-icon { font-size: 1.3rem; flex-shrink: 0; }
.legal-cred .lc-text { font-size: .84rem; font-weight: 600; color: #bbf7d0; }
.legal-cred .lc-sub { font-size: .74rem; color: rgba(255,255,255,.65); margin-top: 1px; }
/* ══════════════════════════════════════════
SECTOR FOCUS — ICON GRID
══════════════════════════════════════════ */
.sector-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
@media (max-width: 860px) { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
.sector-card {
background: #fff; border-radius: 16px; padding: 1.7rem 1.4rem;
box-shadow: var(--shadow-sm); text-align: center;
border-bottom: 4px solid var(--brand);
transition: transform .2s, box-shadow .2s;
}
.sector-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.sector-card:nth-child(2) { border-bottom-color: #2563eb; }
.sector-card:nth-child(3) { border-bottom-color: #0d9488; }
.sector-card:nth-child(4) { border-bottom-color: #d97706; }
.sector-card:nth-child(5) { border-bottom-color: #7c3aed; }
.sector-card:nth-child(6) { border-bottom-color: #dc2626; }
.sector-card:nth-child(7) { border-bottom-color: #059669; }
.sector-card:nth-child(8) { border-bottom-color: #0284c7; }
.sc-icon { font-size: 2.2rem; margin-bottom: .7rem; }
.sector-card h3 { font-size: .95rem; font-weight: 700; color: #1a1a1a; margin: 0 0 .35rem; }
.sector-card p { font-size: .82rem; color: var(--muted); line-height: 1.65; margin: 0; }
.sector-card .sc-tag {
display: inline-block; margin-top: .7rem;
font-size: .7rem; font-weight: 700; padding: 2px 10px; border-radius: 20px;
background: #dcfce7; color: #14532d;
}
/* ══════════════════════════════════════════
TESTIMONIALS / IMPACT STORIES
══════════════════════════════════════════ */
.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 760px) { .testi-grid { grid-template-columns: 1fr; } }
.testi {
background: #fff; border-radius: 18px; padding: 2rem 1.9rem;
box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .9rem;
border-left: 5px solid var(--brand);
}
.testi:nth-child(2) { border-left-color: var(--amber); }
.testi-q { font-size: 3rem; line-height: .5; color: #bbf7d0; font-family: Georgia, serif; font-weight: 900; }
.testi:nth-child(2) .testi-q { color: #fcd34d; }
.testi-t { color: #333; line-height: 1.85; font-size: .95rem; font-style: italic; flex: 1; }
.testi-a { display: flex; gap: .85rem; align-items: center; }
.testi-av {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, #14532d, #16a34a);
display: flex; align-items: center; justify-content: center;
font-weight: 800; color: #fff; font-size: 1.05rem; flex-shrink: 0;
}
.testi:nth-child(2) .testi-av { background: linear-gradient(135deg, #78350f, #d97706); }
.testi-nm { font-weight: 700; color: #14532d; font-size: .93rem; margin: 0; }
.testi:nth-child(2) .testi-nm { color: #78350f; }
.testi-rl { font-size: .78rem; color: #888; margin: 0; }
/* ══════════════════════════════════════════
NOTE BAR
══════════════════════════════════════════ */
.note-bar {
background: linear-gradient(135deg, #14532d, #16a34a);
border-radius: 16px; padding: 1.5rem 2rem;
display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
margin-top: 2.5rem;
}
.note-bar .ni { font-size: 1.7rem; flex-shrink: 0; }
.note-bar p {
/* color: rgba(255,255,255,.92); font-size: .95rem; line-height: 1.75; margin: 0; */
flex: 1; }
/* .note-bar strong { color: #bbf7d0; } */
/* ══════════════════════════════════════════
FAQ
══════════════════════════════════════════ */
.faq-list { max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: .9rem; }
.faq-item { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item summary {
padding: 1.25rem 1.6rem; font-weight: 700; color: var(--brand-d);
font-size: .95rem; list-style: none; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { font-size: 1.25rem; color: var(--brand); flex-shrink: 0; transition: transform .2s; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-body { padding: 0 1.6rem 1.25rem; color: var(--muted); line-height: 1.8; font-size: .92rem; }
.faq-body a { color: var(--brand); }
/* ══════════════════════════════════════════
CONTACT SPLIT — CTA PANEL
══════════════════════════════════════════ */
.contact-split {
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
@media (max-width: 860px) { .contact-split { grid-template-columns: 1fr; gap: 2rem; } }
.contact-form-card {
background: #fff; border-radius: 22px; padding: 2.5rem 2.4rem;
box-shadow: 0 8px 40px rgba(0,0,0,.1);
}
.contact-form-card h3 { font-size: 1.3rem; font-weight: 700; color: #14532d; margin: 0 0 .5rem; }
.contact-form-card > p { font-size: .9rem; color: #555; margin: 0 0 1.8rem; line-height: 1.7; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }
.fg { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.fg label { font-size: .82rem; font-weight: 600; color: #333; }
.fg input, .fg select, .fg textarea {
padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 9px;
font-size: .9rem; font-family: 'Work Sans', sans-serif;
transition: border-color .2s, box-shadow .2s; width: 100%; box-sizing: border-box;
background: #fafafa; color: #1a1a1a;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
outline: none; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12);
background: #fff;
}
.fg textarea { resize: vertical; min-height: 90px; }
.btn-submit {
width: 100%; padding: 13px; border: none; border-radius: 10px;
background: linear-gradient(135deg, #14532d, #16a34a);
color: #fff; font-weight: 700; font-size: .97rem;
cursor: pointer; font-family: 'Work Sans', sans-serif;
transition: transform .18s, box-shadow .18s;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,163,74,.35); }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info h3 { font-size: 1.4rem; font-weight: 700; color: #14532d; margin: 0 0 .3rem; font-family: 'Crimson Pro', serif; }
.contact-info > p { font-size: .96rem; color: #444; line-height: 1.8; margin: 0 0 1.5rem; }
.ci-items { display: flex; flex-direction: column; gap: .9rem; }
.ci-item {
display: flex; align-items: flex-start; gap: .9rem;
background: #f0fdf4; border-radius: 12px; padding: 1rem 1.2rem;
}
.ci-item .cii { font-size: 1.4rem; flex-shrink: 0; }
.ci-item h4 { font-size: .85rem; font-weight: 700; color: #14532d; margin: 0 0 .15rem; }
.ci-item p { font-size: .84rem; color: #555; margin: 0; line-height: 1.6; }
.ci-item a { color: #16a34a; text-decoration: none; font-weight: 600; }
.download-kit {
background: linear-gradient(135deg, #14532d, #16a34a);
border-radius: 14px; padding: 1.4rem 1.6rem;
display: flex; align-items: center; gap: 1rem;
}
.download-kit .dk-icon { font-size: 2rem; flex-shrink: 0; }
.download-kit h4 { font-size: .95rem; font-weight: 700; color: #fff; margin: 0 0 .2rem; }
.download-kit p { font-size: .82rem; color: rgba(255,255,255,.8); margin: 0 0 .7rem; }
.download-kit a {
display: inline-block; background: rgba(255,255,255,.2); color: #fff;
padding: 7px 16px; border-radius: 8px; font-size: .82rem; font-weight: 700;
text-decoration: none; border: 1px solid rgba(255,255,255,.3);
transition: background .2s;
}
.download-kit a:hover { background: rgba(255,255,255,.35); }
/* ══════════════════════════════════════════
CTA SECTION
══════════════════════════════════════════ */
.cta-section {
background: linear-gradient(140deg, #0c3b21 0%, #14532d 35%, #16a34a 70%, #22c55e 100%);
padding: 75px 0; text-align: center;
}
.cta-content h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: .8rem; font-family: 'Crimson Pro', serif; }
.cta-content p { color: rgba(255,255,255,.88); max-width: 640px; margin: 0 auto; line-height: 1.8; font-size: 1rem; }
/* ══════════════════════════════════════════
RESPONSIVE OVERRIDES
══════════════════════════════════════════ */
@media (max-width: 640px) {
.model-card { border-radius: 16px; }
.model-card-right { padding: 1.6rem; }
.legal-strip { padding: 1.8rem; }
}
/* ═══════════════════════════════════════════════
EDUCATION PAGE — DEDICATED STYLES
═══════════════════════════════════════════════ */
/* ── HERO ── */
.edu-hero {
min-height: 94vh;
background: linear-gradient(135deg, #0D2B6E 0%, #1565C0 45%, #1E88E5 80%, #0D47A1 100%);
position: relative;
display: flex;
align-items: center;
overflow: hidden;
}
.edu-hero::before {
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(249,168,37,0.12) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.06) 0%, transparent 50%);
}
.edu-hero::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 100px;
background: linear-gradient(to bottom, transparent, #fafaf7);
}
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
position: relative; z-index: 2;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(249,168,37,0.18); border: 1px solid rgba(249,168,37,0.4);
color: #FFECB3; font-size: 0.78rem; font-weight: 700;
padding: 6px 16px; border-radius: 50px;
letter-spacing: 0.1em; text-transform: uppercase;
margin-bottom: 1.4rem; backdrop-filter: blur(8px);
}
.hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.4rem, 5vw, 4.2rem);
font-weight: 900; color: #fff;
line-height: 1.08; margin-bottom: 1.4rem;
}
.hero-h1 em { color: #FFCA28; font-style: italic; }
.hero-p { color: rgba(255,255,255,0.82); font-size: 1.1rem; line-height: 1.85; margin-bottom: 2.4rem; max-width: 540px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.hbtn-primary {
background: var(--edu-gold); color: #1A1A2E; font-weight: 800;
padding: 15px 32px; border-radius: 50px; font-size: 0.95rem;
text-decoration: none; box-shadow: 0 8px 24px rgba(249,168,37,0.4);
transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;
}
.hbtn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(249,168,37,0.55); background: var(--edu-gold-dk); color: #1A1A2E; }
.hbtn-outline {
border: 2px solid rgba(255,255,255,0.5); color: #fff; font-weight: 600;
padding: 14px 32px; border-radius: 50px; font-size: 0.95rem;
text-decoration: none; transition: all 0.3s ease;
display: inline-flex; align-items: center; gap: 8px;
}
.hbtn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
/* Hero right — floating cards */
.hero-cards-col { display: flex; flex-direction: column; gap: 14px; }
.h-stat-card {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(14px);
border-radius: 18px; padding: 20px 26px;
display: flex; align-items: center; gap: 18px;
animation: slideRight 0.6s ease forwards; opacity: 0;
}
.h-stat-card:nth-child(1){animation-delay:0.15s}
.h-stat-card:nth-child(2){animation-delay:0.3s}
.h-stat-card:nth-child(3){animation-delay:0.45s}
.h-stat-card:nth-child(4){animation-delay:0.6s}
.h-stat-card:nth-child(5){animation-delay:0.75s}
.h-stat-card:nth-child(6){animation-delay:0.9s}
@keyframes slideRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
.hsc-icon { font-size: 1.8rem; }
.hsc-val { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 900; color: #fff; line-height: 1; }
.hsc-lbl { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin-top: 2px; }
.hsc-div { width: 1px; height: 36px; background: rgba(255,255,255,0.18); }
/* ── BREADCRUMB ── */
/* .breadcrumb { background: #fff; border-bottom: 1px solid #EBF0F8; padding: 11px 0; } */
.breadcrumb ol { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: #888; flex-wrap: wrap; }
.breadcrumb ol li { display: flex; align-items: center; gap: 8px; }
.breadcrumb ol li::after { content: '/'; color: #ccc; }
.breadcrumb ol li:last-child::after { display: none; }
.breadcrumb ol li a { color: var(--edu-blue); font-weight: 500; }
.breadcrumb ol li:last-child { color: #333; font-weight: 600; }
/* ── SECTION UTILITY ── */
/* .section-tag {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--edu-blue); margin-bottom: 1rem;
}
.section-tag::before { content: ''; display: block; width: 28px; height: 2px; background: var(--edu-blue); } */
.section-head { text-align: center; margin-bottom: 60px; }
.section-head h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.9rem, 3vw, 2.9rem); color: var(--edu-ink); margin-bottom: 1rem;
}
.section-head h2 span { color: var(--edu-blue); }
.section-head p { color: #666; font-size: 1.05rem; max-width: 620px; margin: 0 auto; line-height: 1.8; }
/* ── OVERVIEW SECTION ── */
.overview-sec { padding: 100px 0; background: var(--edu-cream); }
.overview-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ov-text h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--edu-ink); margin-bottom: 1.2rem; }
.ov-text h2 span { color: var(--edu-blue); }
.ov-text p { color: #555; line-height: 1.9; margin-bottom: 1.1rem; }
.ov-text .lead { font-size: 1.1rem; color: #333; font-weight: 500; }
.ov-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.pillar-pill {
display: flex; align-items: center; gap: 10px;
background: #EFF4FF; border-radius: 10px; padding: 12px 14px;
font-size: 0.88rem; font-weight: 600; color: var(--edu-blue-dark);
transition: all 0.3s ease;
}
.pillar-pill:hover { background: var(--edu-blue); color: #fff; transform: translateY(-2px); }
.ov-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ov-card {
background: #fff; border-radius: 20px; padding: 28px 24px;
box-shadow: 0 4px 20px rgba(21,101,192,0.08);
border-top: 4px solid var(--edu-blue);
transition: all 0.3s ease;
}
.ov-card:hover { transform: translateY(-5px); box-shadow: 0 14px 36px rgba(21,101,192,0.15); }
.ov-card.tall { grid-row: span 2; }
.ov-card-ico { font-size: 2rem; margin-bottom: 12px; }
.ov-card h4 { font-size: 1rem; font-weight: 700; color: var(--edu-ink); margin-bottom: 8px; }
.ov-card p { font-size: 0.87rem; color: #666; line-height: 1.65; margin: 0; }
.ov-big { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 900; color: var(--edu-blue); line-height: 1; margin-bottom: 4px; }
/* ── STATS STRIP ── */
/* .stats-strip {
background: linear-gradient(135deg, #0D2B6E, #1565C0, #1E88E5);
padding: 64px 0; position: relative; overflow: hidden;
}
.stats-strip::before {
content: '📚'; position: absolute;
font-size: 280px; opacity: 0.04; right: -40px; top: -40px; line-height: 1;
} */
/* .stats-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.st-item { text-align: center; padding: 24px 16px; border-right: 1px solid rgba(255,255,255,0.1); }
.st-item:last-child { border-right: none; }
.st-big { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 900; color: #fff; line-height: 1; margin-bottom: 6px; }
.st-lbl { font-size: 0.78rem; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.06em; } */
/* ── PROGRAMS BENTO ── */
.programs-sec { padding: 100px 0; background: #fff; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bcard {
background: var(--edu-cream); border-radius: 24px; padding: 36px 30px;
transition: all 0.3s ease; position: relative; overflow: hidden;
}
.bcard::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--edu-blue); border-radius: 24px 24px 0 0; }
.bcard:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(21,101,192,0.12); background: #fff; }
.bcard.wide { grid-column: span 2; }
.bcard.gold::after { background: linear-gradient(90deg, var(--edu-gold), var(--edu-gold-dk)); }
.bcard.green-t::after { background: linear-gradient(90deg, #2E7D32, #43A047); }
.bcard.red-t::after { background: linear-gradient(90deg, #C62828, #E53935); }
.bcard.purple-t::after { background: linear-gradient(90deg, #6A1B9A, #8E24AA); }
.bcard-ico { width: 58px; height: 58px; border-radius: 15px; background: rgba(21,101,192,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 18px; }
.bcard.gold .bcard-ico { background: rgba(249,168,37,0.12); }
.bcard.green-t .bcard-ico { background: rgba(46,125,50,0.1); }
.bcard.red-t .bcard-ico { background: rgba(198,40,40,0.08); }
.bcard.purple-t .bcard-ico { background: rgba(106,27,154,0.08); }
.bcard h3 { font-size: 1.15rem; font-weight: 700; color: var(--edu-ink); margin-bottom: 10px; }
.bcard p { font-size: 0.88rem; color: #666; line-height: 1.7; margin-bottom: 14px; }
.bcard ul { margin-top: 8px; }
.bcard ul li { font-size: 0.85rem; color: #555; padding: 4px 0 4px 18px; position: relative; }
.bcard ul li::before { content: '→'; position: absolute; left: 0; color: var(--edu-blue); font-weight: 700; }
.bcard.gold ul li::before { color: var(--edu-gold-dk); }
.bcard.green-t ul li::before { color: var(--edu-green); }
.bcard.red-t ul li::before { color: var(--edu-red); }
.bcard.purple-t ul li::before { color: var(--edu-purple); }
/* ── DRUG AWARENESS MODULE ── */
.drug-sec { padding: 100px 0; background: linear-gradient(135deg, #B71C1C 0%, #C62828 50%, #7B0000 100%); position: relative; overflow: hidden; }
.drug-sec::before { content: '🚫'; position: absolute; font-size: 320px; opacity: 0.04; right: -60px; top: -40px; line-height: 1; }
.drug-inner { position: relative; z-index: 2; }
.drug-header { text-align: center; margin-bottom: 60px; }
.drug-header .section-tag { color: #FFCDD2; }
.drug-header .section-tag::before { background: #FFCDD2; }
.drug-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 3rem); color: #fff; margin-bottom: 1rem; }
.drug-header p { color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 700px; margin: 0 auto; line-height: 1.8; }
.drug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.drug-card {
background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 20px; padding: 32px 28px;
}
.drug-card h3 { font-size: 1.15rem; font-weight: 700; color: #FFCDD2; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.drug-card ul { list-style: none; padding: 0; }
.drug-card ul li { color: rgba(255,255,255,0.88); font-size: 0.9rem; line-height: 1.7; padding: 5px 0 5px 22px; position: relative; }
.drug-card ul li::before { position: absolute; left: 0; }
.drug-card.problem ul li::before { content: '✗'; color: #FF8A80; font-weight: 700; }
.drug-card.solution ul li::before { content: '✓'; color: #A5D6A7; font-weight: 700; }
.drug-teach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.drug-teach-card { background: rgba(255,255,255,0.1); border-radius: 16px; padding: 24px 18px; text-align: center; }
.drug-teach-card .dt-icon { font-size: 2rem; margin-bottom: 10px; }
.drug-teach-card h4 { font-size: 0.95rem; font-weight: 700; color: #FFE082; margin-bottom: 8px; }
.drug-teach-card p { font-size: 0.82rem; color: rgba(255,255,255,0.78); line-height: 1.65; margin: 0; }
.drug-impact {
background: rgba(255,255,255,0.15); border-radius: 16px; padding: 24px 32px; text-align: center;
}
.drug-impact p { font-size: 1.05rem; color: #fff; font-weight: 600; margin: 0; line-height: 1.8; }
/* ── TREE PLANTATION MODULE ── */
.tree-sec { padding: 100px 0; background: var(--edu-cream); }
.tree-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; margin-bottom: 60px; }
.tree-intro-text h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--edu-ink); margin-bottom: 1.1rem; }
.tree-intro-text h2 span { color: var(--edu-green); }
.tree-intro-text p { color: #555; line-height: 1.9; }
.tree-reason-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tree-reason {
background: linear-gradient(135deg, #E8F5E9, #F1F8E9); border-radius: 16px; padding: 22px 20px;
border-left: 4px solid var(--edu-green); transition: all 0.3s ease;
}
.tree-reason:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(46,125,50,0.12); }
.tree-reason .tr-icon { font-size: 1.8rem; margin-bottom: 8px; }
.tree-reason h4 { font-size: 0.95rem; font-weight: 700; color: var(--edu-green); margin-bottom: 6px; }
.tree-reason p { font-size: 0.84rem; color: #555; line-height: 1.65; margin: 0; }
.tree-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tree-step {
background: #fff; border-radius: 20px; padding: 28px 22px;
text-align: center; box-shadow: 0 4px 18px rgba(46,125,50,0.08);
transition: all 0.3s ease; position: relative;
}
.tree-step::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--edu-green), #66BB6A); border-radius: 20px 20px 0 0; }
.tree-step:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(46,125,50,0.15); }
.ts-num { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #2E7D32, #43A047); color: #fff; font-weight: 900; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.tree-step h4 { font-size: 0.95rem; font-weight: 700; color: var(--edu-ink); margin-bottom: 8px; }
.tree-step p { font-size: 0.84rem; color: #666; line-height: 1.65; margin: 0; }
.tree-impact { background: linear-gradient(135deg, #1B5E20, #2E7D32); border-radius: 16px; padding: 24px 32px; text-align: center; margin-top: 40px; }
.tree-impact p { font-size: 1.05rem; color: #fff; font-weight: 600; margin: 0; line-height: 1.8; }
/* ── SPORTS & CULTURAL ── */
.sports-sec { padding: 100px 0; background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 50%, #311B92 100%); position: relative; overflow: hidden; }
.sports-sec::before { content: '🏆'; position: absolute; font-size: 300px; opacity: 0.04; left: -60px; bottom: -40px; line-height: 1; }
.sports-inner { position: relative; z-index: 2; }
.sports-header { text-align: center; margin-bottom: 60px; }
.sports-header .section-tag { color: #E1BEE7; }
.sports-header .section-tag::before { background: #E1BEE7; }
.sports-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 3rem); color: #fff; margin-bottom: 1rem; }
.sports-header p { color: rgba(255,255,255,0.8); font-size: 1.05rem; max-width: 660px; margin: 0 auto; line-height: 1.8; }
.sports-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 32px; }
.sw-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 18px; padding: 28px 22px; text-align: center; }
.sw-icon { font-size: 2.2rem; margin-bottom: 12px; }
.sw-card h4 { font-size: 0.95rem; font-weight: 700; color: #EDE7F6; margin-bottom: 8px; }
.sw-card p { font-size: 0.83rem; color: rgba(255,255,255,0.75); line-height: 1.65; margin: 0; }
.sports-events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.se-card { background: rgba(255,255,255,0.08); border-radius: 16px; padding: 22px 20px; border: 1px solid rgba(255,255,255,0.12); transition: all 0.3s ease; }
.se-card:hover { background: rgba(255,255,255,0.15); transform: translateY(-4px); }
.se-card h4 { font-size: 0.95rem; font-weight: 700; color: #FFE082; margin-bottom: 8px; }
.se-card p { font-size: 0.85rem; color: rgba(255,255,255,0.78); line-height: 1.65; margin: 0; }
.sports-impact { background: rgba(255,255,255,0.15); border-radius: 16px; padding: 22px 32px; text-align: center; }
.sports-impact p { font-size: 1.05rem; color: #fff; font-weight: 600; margin: 0; line-height: 1.8; }
/* ── ACADEMIC AWARDS ── */
.awards-sec { padding: 100px 0; background: #fff; }
.awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 40px; }
.award-card {
border-radius: 22px; padding: 32px 26px; text-align: center;
transition: all 0.3s ease; box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
.award-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,0.14); }
.award-icon { font-size: 3rem; margin-bottom: 14px; }
.award-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.award-card p { font-size: 0.87rem; line-height: 1.7; margin: 0; }
.award-gold { background: linear-gradient(135deg, #FFF8E1, #FFF3CD); border-top: 5px solid var(--edu-gold); }
.award-gold h4 { color: #F57F17; }
.award-silver { background: linear-gradient(135deg, #F5F5F5, #EEEEEE); border-top: 5px solid #9E9E9E; }
.award-silver h4 { color: #424242; }
.award-bronze { background: linear-gradient(135deg, #FBE9E7, #FDECEA); border-top: 5px solid #BF360C; }
.award-bronze h4 { color: #BF360C; }
.award-pink { background: linear-gradient(135deg, #FCE4EC, #F8BBD9); border-top: 5px solid #E91E63; }
.award-pink h4 { color: #AD1457; }
.award-cyan { background: linear-gradient(135deg, #E0F7FA, #B2EBF2); border-top: 5px solid #00838F; }
.award-cyan h4 { color: #006064; }
.award-rainbow { background: linear-gradient(135deg, #FFF8E1, #F3E5F5); border-top: 5px solid var(--edu-blue); }
.award-rainbow h4 { color: var(--edu-blue-dark); }
.awards-annual {
background: linear-gradient(135deg, #0D2B6E, #1565C0);
border-radius: 20px; padding: 40px;
}
.awards-annual h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #fff; margin-bottom: 16px; text-align: center; }
.awards-annual p { color: rgba(255,255,255,0.85); line-height: 1.85; margin-bottom: 20px; font-size: 0.98rem; }
.awards-annual ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.awards-annual ul li { color: rgba(255,255,255,0.88); font-size: 0.88rem; padding: 6px 0 6px 20px; position: relative; }
.awards-annual ul li::before { content: '✓'; position: absolute; left: 0; color: var(--edu-gold); font-weight: 700; }
.awards-impact { background: #EFF4FF; border-radius: 14px; padding: 22px 28px; margin-top: 28px; border-left: 5px solid var(--edu-blue); }
.awards-impact p { font-size: 1rem; color: var(--edu-blue-dark); margin: 0; line-height: 1.8; font-weight: 500; }
/* ── PHILOSOPHY STRIP ── */
.philosophy-strip {
padding: 80px 0;
background: linear-gradient(135deg, #0D2B6E, #1565C0, #1E88E5);
text-align: center; position: relative; overflow: hidden;
}
.philosophy-strip::before { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.04); top: -150px; right: -100px; }
.philosophy-inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; }
.philosophy-inner h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.4rem); color: #fff; margin-bottom: 1.5rem; }
.philosophy-quote { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 16px; padding: 32px 40px; border-left: 4px solid var(--edu-gold); }
.philosophy-quote blockquote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.15rem; color: rgba(255,255,255,0.92); line-height: 1.9; margin: 0 0 12px; }
.philosophy-quote cite { font-size: 0.85rem; color: rgba(255,255,255,0.65); }
/* ══════════════════════════════════════════
YEAR-WISE EVENT GALLERY
══════════════════════════════════════════ */
.gallery-sec { padding: 100px 0; background: var(--edu-cream); }
/* Category filter bar */
.cat-filter {
display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px;
}
.cat-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 20px; border-radius: 50px;
background: #fff; border: 2px solid #DDE4F5;
font-weight: 600; font-size: 0.85rem; color: #666;
cursor: pointer; transition: all 0.3s ease;
}
.cat-btn:hover, .cat-btn.active {
background: var(--edu-blue); border-color: var(--edu-blue); color: #fff;
}
.cat-btn.cat-republic.active { background: #FF6F00; border-color: #FF6F00; }
.cat-btn.cat-republic:hover { background: #FF6F00; border-color: #FF6F00; color: #fff; }
.cat-btn.cat-independence.active { background: #1B5E20; border-color: #1B5E20; }
.cat-btn.cat-independence:hover { background: #1B5E20; border-color: #1B5E20; color: #fff; }
.cat-btn.cat-tree.active { background: #2E7D32; border-color: #2E7D32; }
.cat-btn.cat-tree:hover { background: #2E7D32; border-color: #2E7D32; color: #fff; }
.cat-btn.cat-drug.active { background: #C62828; border-color: #C62828; }
.cat-btn.cat-drug:hover { background: #C62828; border-color: #C62828; color: #fff; }
.cat-btn.cat-sports.active { background: #6A1B9A; border-color: #6A1B9A; }
.cat-btn.cat-sports:hover { background: #6A1B9A; border-color: #6A1B9A; color: #fff; }
.cat-btn.cat-awards.active { background: #F57F17; border-color: #F57F17; }
.cat-btn.cat-awards:hover { background: #F57F17; border-color: #F57F17; color: #fff; }
/* Year tabs */
.year-tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 48px; }
.ytab {
padding: 10px 26px; border-radius: 50px;
background: #fff; border: 2px solid #DDE4F5;
font-weight: 700; font-size: 0.9rem; color: #888;
cursor: pointer; transition: all 0.3s ease;
}
.ytab:hover, .ytab.active { background: var(--edu-blue); border-color: var(--edu-blue); color: #fff; }
/* Year panel */
.year-panel { display: none; }
.year-panel.active { display: block; }
.year-panel-header {
display: flex; align-items: flex-start; justify-content: space-between;
margin-bottom: 36px; flex-wrap: wrap; gap: 16px;
background: #fff; border-radius: 20px; padding: 28px 32px;
box-shadow: 0 4px 20px rgba(21,101,192,0.07);
}
.yph-left h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--edu-ink); margin-bottom: 6px; }
.yph-left h3 span { color: var(--edu-blue); }
.yph-left p { font-size: 0.88rem; color: #888; margin: 0; }
.yph-stats { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.yph-stat {
display: flex; align-items: center; gap: 8px;
background: #EFF4FF; padding: 8px 16px; border-radius: 50px;
font-size: 0.83rem; color: #555;
}
.yph-stat strong { color: var(--edu-blue); }
/* Event categories inside a year */
.event-category { margin-bottom: 48px; }
.event-cat-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 20px; padding-bottom: 12px;
border-bottom: 2px solid #EFF4FF;
}
.event-cat-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
}
.badge-republic { background: #FFF3E0; color: #E65100; }
.badge-independence{ background: #E8F5E9; color: #1B5E20; }
.badge-tree { background: #E8F5E9; color: #2E7D32; }
.badge-drug { background: #FFEBEE; color: #C62828; }
.badge-sports { background: #F3E5F5; color: #6A1B9A; }
.badge-awards { background: #FFF8E1; color: #F57F17; }
.badge-other { background: #EFF4FF; color: var(--edu-blue); }
.event-cat-header h4 { font-size: 1.05rem; font-weight: 700; color: var(--edu-ink); margin: 0; }
.event-cat-header span.count { font-size: 0.82rem; color: #999; margin-left: auto; }
/* Photo grid */
.photo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.photo-item {
border-radius: 14px; overflow: hidden;
aspect-ratio: 4/3; position: relative;
cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.photo-item:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: unset; min-height: 300px; }
/* .photo-item:hover { transform: scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,0.18); z-index: 2; } */
.photo-bg {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 16px; text-align: center;
}
.photo-bg .pb-icon { font-size: 2.2rem; margin-bottom: 8px; }
.photo-bg .pb-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 4px; }
.photo-bg .pb-sub { font-size: 0.75rem; opacity: 0.7; }
/* .photo-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.82), transparent);
opacity: 0; transition: opacity 0.3s ease;
display: flex; align-items: flex-end; padding: 16px;
} */
.photo-item:hover .photo-overlay { opacity: 1; }
.photo-overlay-txt h5 { color: #fff; font-size: 0.88rem; font-weight: 700; margin-bottom: 3px; }
.photo-overlay-txt p { color: rgba(255,255,255,0.78); font-size: 0.76rem; margin: 0; }
/* Category color schemes */
.republic .photo-item { background: linear-gradient(135deg, #FFF3E0, #FFE0B2); }
.republic .pb-title { color: #BF360C; }
.republic .pb-sub { color: #E64A19; }
.independence .photo-item { background: linear-gradient(135deg, #E8F5E9, #DCEDC8); }
.independence .pb-title { color: #1B5E20; }
.independence .pb-sub { color: #2E7D32; }
.tree-p .photo-item { background: linear-gradient(135deg, #E8F5E9, #C8E6C9); }
.tree-p .pb-title { color: #1B5E20; }
.tree-p .pb-sub { color: #388E3C; }
.drug-p .photo-item { background: linear-gradient(135deg, #FFEBEE, #FFCDD2); }
.drug-p .pb-title { color: #7B0000; }
.drug-p .pb-sub { color: #B71C1C; }
.sports-p .photo-item { background: linear-gradient(135deg, #F3E5F5, #E1BEE7); }
.sports-p .pb-title { color: #4A148C; }
.sports-p .pb-sub { color: #6A1B9A; }
.awards-p .photo-item { background: linear-gradient(135deg, #FFF8E1, #FFECB3); }
.awards-p .pb-title { color: #E65100; }
.awards-p .pb-sub { color: #F57F17; }
/* ── DONATION SUPPORT ── */
.support-sec { padding: 100px 0; background: #fff; }
.don-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 20px; }
.don-row2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px; }
.dcard {
background: var(--edu-cream); border-radius: 20px; padding: 28px 20px; text-align: center;
transition: all 0.3s ease; border-top: 5px solid var(--edu-blue); cursor: pointer;
}
.dcard:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(21,101,192,0.12); }
.dcard .d-amt { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 900; color: var(--edu-blue); margin-bottom: 8px; }
.dcard .d-desc { color: #777; line-height: 1.5; margin-bottom: 14px; min-height: 36px; }
.dcard .d-btn { width: 100%; padding: 10px; background: var(--edu-blue); color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: opacity 0.2s; }
.dcard .d-btn:hover { opacity: 0.88; }
.dcard-custom { background: var(--edu-cream); border-radius: 20px; padding: 28px 20px; text-align: center; border-top: 5px solid var(--edu-gold-dk); }
.custom-input { width: 100%; padding: 11px 14px; border: 2px solid #ddd; border-radius: 8px; font-size: 15px; margin-bottom: 10px; box-sizing: border-box; }
.custom-input:focus { outline: none; border-color: var(--edu-blue); }
.d-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.dcta-primary { background: var(--edu-blue); color: #fff; padding: 15px 36px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; font-size: 0.95rem; }
.dcta-primary:hover { background: var(--edu-blue-dark); transform: translateY(-2px); color: #fff; }
.dcta-outline { border: 2px solid var(--edu-blue); color: var(--edu-blue); padding: 14px 36px; border-radius: 50px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; font-size: 0.95rem; }
.dcta-outline:hover { background: var(--edu-blue); color: #fff; }
/* ── CTA ── */
.cta-edu {
background: linear-gradient(135deg, #0D2B6E, #1565C0, #1E88E5);
padding: 100px 0; text-align: center; position: relative; overflow: hidden;
}
.cta-edu::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(249,168,37,0.06); top: -200px; right: -150px; }
.cta-edu::after { content: ''; position: absolute; width: 350px; height: 350px; border-radius: 50%; background: rgba(255,255,255,0.04); bottom: -120px; left: -100px; }
.cta-inner-edu { position: relative; z-index: 2; }
.cta-inner-edu h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3.2rem); color: #fff; margin-bottom: 1rem; }
.cta-inner-edu p { color: rgba(255,255,255,0.8); font-size: 1.1rem; max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.8; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-gold { background: var(--edu-gold); color: var(--edu-ink); padding: 15px 36px; border-radius: 50px; font-weight: 800; text-decoration: none; transition: all 0.3s ease; font-size: 0.95rem; }
.cta-gold:hover { background: var(--edu-gold-dk); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(249,168,37,0.4); color: var(--edu-ink); }
.cta-ghost { border: 2px solid rgba(255,255,255,0.5); color: #fff; padding: 14px 36px; border-radius: 50px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; font-size: 0.95rem; }
.cta-ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }
/* ── MODAL ── */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal.show { display: flex; }
.modal-content { background: #fff; border-radius: 24px; padding: 0; max-width: 480px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 32px 80px rgba(0,0,0,0.3); }
.modal-header { background: linear-gradient(135deg, #1565C0, #0D47A1); padding: 28px 32px; border-radius: 24px 24px 0 0; position: relative; }
.modal-header h2 { color: #fff; font-size: 1.4rem; margin-bottom: 4px; }
.modal-header p { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin: 0; }
.close { position: absolute; top: 16px; right: 20px; font-size: 1.5rem; color: rgba(255,255,255,0.7); cursor: pointer; transition: color 0.2s; }
.close:hover { color: #fff; }
.modal-body { padding: 28px 32px; }
.donation-summary { background: #EFF4FF; border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 24px; border: 1px solid #BBDEFB; }
.donation-summary h3 { font-size: 0.83rem; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-bottom: 6px; }
.amount { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 900; color: var(--edu-blue); line-height: 1; margin-bottom: 4px; }
.donation-summary p { font-size: 0.87rem; color: #666; margin: 0; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 0.88rem; color: #333; margin-bottom: 6px; }
.required { color: var(--edu-red); }
.form-group input, .form-group textarea { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 15px; font-family: 'DM Sans', sans-serif; transition: border-color 0.3s; box-sizing: border-box; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--edu-blue); }
.form-group.error input, .form-group.error textarea { border-color: #EF5350; }
.form-error { display: none; font-size: 0.8rem; color: #EF5350; margin-top: 4px; }
.form-group.error .form-error { display: block; }
.checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.checkbox-group input { width: auto; }
.modal-footer { padding: 16px 32px 28px; display: flex; gap: 12px; }
.btn-cancel { flex: 1; padding: 13px; border-radius: 10px; border: 2px solid #e0e0e0; background: transparent; font-weight: 600; cursor: pointer; color: #666; transition: all 0.2s; }
.btn-cancel:hover { border-color: var(--edu-blue); color: var(--edu-blue); }
.btn-submit { flex: 2; padding: 13px; border-radius: 10px; background: linear-gradient(135deg, #1565C0, #1976D2); color: #fff; border: none; font-weight: 700; cursor: pointer; font-size: 1rem; transition: all 0.3s ease; }
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(21,101,192,0.3); }
/* ── PHOTO LIGHTBOX ── */
.lb { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(6px); }
.lb.open { display: flex; }
.lb-box { background: #fff; border-radius: 20px; padding: 40px; max-width: 560px; width: 90%; text-align: center; position: relative; }
.lb-close { position: absolute; top: 14px; right: 18px; font-size: 1.5rem; cursor: pointer; color: #999; transition: color 0.2s; }
.lb-close:hover { color: var(--edu-blue); }
.lb-icon { font-size: 3.5rem; margin-bottom: 14px; }
.lb-box h3 { color: var(--edu-ink); margin-bottom: 6px; font-size: 1.15rem; }
.lb-box .lb-meta { color: var(--edu-blue); font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; }
.lb-box .lb-note { color: #888; font-size: 0.84rem; line-height: 1.6; }
/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.overview-layout { grid-template-columns: 1fr; gap: 48px; }
.bento { grid-template-columns: 1fr 1fr; }
.bcard.wide { grid-column: span 2; }
.tree-intro { grid-template-columns: 1fr; gap: 40px; }
.tree-steps { grid-template-columns: 1fr 1fr; }
.drug-teach-grid { grid-template-columns: 1fr 1fr; }
.sports-why { grid-template-columns: 1fr 1fr; }
.awards-grid { grid-template-columns: 1fr 1fr 1fr; }
.don-grid, .don-row2 { grid-template-columns: repeat(2, 1fr); }
.stats-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.drug-grid { grid-template-columns: 1fr; }
.drug-teach-grid { grid-template-columns: 1fr 1fr; }
.tree-reason-grid { grid-template-columns: 1fr; }
.sports-events { grid-template-columns: 1fr 1fr; }
.awards-grid { grid-template-columns: 1fr 1fr; }
.awards-annual ul { grid-template-columns: 1fr; }
.photo-grid { grid-template-columns: 1fr 1fr; }
.photo-item:nth-child(1) { grid-column: span 2; grid-row: span 1; min-height: 200px; }
.don-grid, .don-row2 { grid-template-columns: 1fr 1fr; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.st-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
}
@media (max-width: 540px) {
.bento { grid-template-columns: 1fr; }
.bcard.wide { grid-column: span 1; }
.tree-steps { grid-template-columns: 1fr; }
.sports-why { grid-template-columns: 1fr; }
.sports-events { grid-template-columns: 1fr; }
.awards-grid { grid-template-columns: 1fr; }
.photo-grid { grid-template-columns: 1fr 1fr; }
.ov-pillars { grid-template-columns: 1fr; }
.ov-cards-grid { grid-template-columns: 1fr 1fr; }
.don-grid, .don-row2 { grid-template-columns: 1fr; }
.hero-grid { padding: 80px 0 60px; }
}
/* ════════════════════════════════════════════════════════════
SKILL DEVELOPMENT PAGE — CUSTOM STYLES
════════════════════════════════════════════════════════════ */
.skill-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(135deg, #0D5C3A 0%, #1A7A4E 40%, #0A3D25 100%);
}
.skill-hero-bg {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.04) 0%, transparent 60%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.skill-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.05) 100%);
z-index: 1;
}
.skill-hero-inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 120px 28px 80px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
width: 100%;
}
.skill-hero-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(245,166,35,0.2);
border: 1px solid rgba(245,166,35,0.5);
color: var(--amber);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 50px;
margin-bottom: 24px;
animation: fadeInUp 0.7s 0.1s ease both;
}
.skill-hero-tag .dot {
width: 6px; height: 6px;
background: var(--amber);
border-radius: 50%;
animation: pulse 2s infinite;
}
.skill-hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 5vw, 4.6rem);
font-weight: 900;
color: var(--white);
line-height: 1.06;
margin-bottom: 22px;
animation: fadeInUp 0.7s 0.25s ease both;
}
.skill-hero-h1 em { font-style: italic; color: var(--amber); }
.skill-hero-desc {
font-size: 1.15rem;
color: rgba(255,255,255,0.8);
line-height: 1.75;
max-width: 520px;
margin-bottom: 38px;
animation: fadeInUp 0.7s 0.4s ease both;
}
.skill-hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
animation: fadeInUp 0.7s 0.55s ease both;
}
#gallery .section-title { color: #fff;}
/* Hero right – stat cluster */
.skill-hero-right {
animation: fadeInUp 0.8s 0.3s ease both;
}
.hero-stat-cluster {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.hero-stat-box {
background: rgba(255,255,255,0.09);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px;
padding: 28px 22px;
text-align: center;
transition: var(--transition);
}
.hero-stat-box:hover { background: rgba(255,255,255,0.16); transform: translateY(-4px); }
.hero-stat-box.amber-box { background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.35); }
.hst-icon { font-size: 1.8rem; margin-bottom: 8px; }
.hst-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 3rem;
color: var(--amber);
line-height: 1;
margin-bottom: 4px;
}
.hero-stat-box.amber-box .hst-num { color: var(--white); }
.hst-label {
font-size: 0.72rem;
font-weight: 600;
color: rgba(255,255,255,0.65);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.3;
}
/* Scroll cue */
.skill-hero-scroll {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: rgba(255,255,255,0.5);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.scroll-line {
width: 1px;
height: 44px;
background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.4} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
/* ── BREADCRUMB STRIP ─────────────────────────────────────── */
.breadcrumb-nav {
background: var(--bg-light);
padding: 13px 0;
border-bottom: 1px solid var(--border-color);
}
.bc-list {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
color: var(--text-light);
font-weight: 500;
list-style: none;
}
.bc-list a { color: var(--green-mid); }
.bc-list a:hover { color: var(--green-deep); }
.bc-sep { opacity: 0.4; }
/* ── OVERVIEW: STICKY SPLIT ───────────────────────────────── */
.overview-split {
display: grid;
grid-template-columns: 5fr 5fr;
gap: 80px;
align-items: start;
}
.overview-sticky { position: sticky; top: 110px; }
.overview-img-block {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(135deg, var(--green-pale) 0%, #c8e6d8 100%);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 6rem;
box-shadow: 0 20px 60px rgba(13,92,58,0.18);
position: relative;
}
.img-badge-float {
position: absolute;
bottom: -20px;
right: -20px;
background: var(--green-deep);
color: white;
border-radius: 16px;
padding: 18px 24px;
box-shadow: 0 10px 32px rgba(13,92,58,0.35);
text-align: center;
}
.img-badge-float .big {
font-family: 'Playfair Display', serif;
font-size: 2.6rem;
font-weight: 900;
line-height: 1;
color: var(--amber);
}
.img-badge-float .small {
font-size: 0.7rem;
letter-spacing: 0.08em;
opacity: 0.8;
margin-top: 2px;
display: block;
text-transform: uppercase;
}
.overview-text .story-lede {
font-size: 1.2rem;
color: var(--charcoal);
font-weight: 500;
line-height: 1.75;
border-left: 4px solid var(--green-light);
padding-left: 20px;
margin-bottom: 24px;
}
.overview-text p { color: var(--text-medium); line-height: 1.85; margin-bottom: 16px; }
/* ── IMPACT STATS: BENTO ──────────────────────────────────── */
.stats-bento-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
margin-top: 52px;
}
.bento-card {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 36px 30px;
transition: var(--transition);
}
/* .bento-card:hover { background: rgba(255,255,255,0.13); transform: translateY(-4px); } */
.bento-card.bento-featured {
grid-column: 1;
grid-row: 1 / 3;
background: rgba(245,166,35,0.14);
border-color: rgba(245,166,35,0.28);
display: flex;
flex-direction: column;
justify-content: center;
}
.bento-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 4.8rem;
color: var(--amber);
line-height: 1;
margin-bottom: 8px;
}
.bento-featured .bento-num { font-size: 7rem; }
.bento-lbl {
font-size: 0.78rem;
font-weight: 600;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.bento-desc {
font-size: 0.92rem;
color: rgba(255,255,255,0.7);
margin-top: 12px;
line-height: 1.65;
}
/* ── PROGRAMS: NEW PROG-CARD GRID ────────────────────────── */
.sk-programs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 50px;
}
/* reuses .prog-card styles from style.css + adds highlight list */
.prog-card .prog-highlights {
list-style: none;
margin-top: 14px;
}
.prog-card .prog-highlights li {
font-size: 0.83rem;
color: var(--text-medium);
padding: 4px 0 4px 18px;
position: relative;
}
.prog-card .prog-highlights li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--green-light);
font-weight: 700;
}
/* ── DONATION CARDS: REDESIGNED ──────────────────────────── */
.sk-donate-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 48px;
}
.sk-donate-card {
background: var(--white);
border-radius: 20px;
padding: 32px 26px;
text-align: center;
border-top: 5px solid var(--primary-color);
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: var(--transition);
display: flex;
flex-direction: column;
}
.sk-donate-card:nth-child(2) { border-top-color: #764ba2; }
.sk-donate-card:nth-child(3) { border-top-color: var(--green-deep); }
.sk-donate-card:nth-child(4) { border-top-color: #e91e63; }
.sk-donate-card:nth-child(5) { border-top-color: #ff6b6b; }
.sk-donate-card:nth-child(6) { border-top-color: #4a90e2; }
.sk-donate-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.sk-donate-amount {
font-family: 'Bebas Neue', sans-serif;
font-size: 3.8rem;
color: var(--primary-color);
line-height: 1;
margin-bottom: 10px;
}
.sk-donate-card:nth-child(2) .sk-donate-amount { color: #764ba2; }
.sk-donate-card:nth-child(3) .sk-donate-amount { color: var(--green-deep); }
.sk-donate-card:nth-child(4) .sk-donate-amount { color: #e91e63; }
.sk-donate-card:nth-child(5) .sk-donate-amount { color: #ff6b6b; }
.sk-donate-card:nth-child(6) .sk-donate-amount { color: #4a90e2; }
.sk-donate-desc { color: var(--slate); margin-bottom: 22px; line-height: 1.6; flex-grow: 1; }
.sk-donate-card .custom-input {
width: 100%;
padding: 10px;
border: 2px solid var(--border-color);
border-radius: 8px;
font-size: 1rem;
margin-bottom: 14px;
font-family: 'DM Sans','Work Sans',sans-serif;
transition: border-color 0.3s;
}
.sk-donate-card .custom-input:focus { outline: none; border-color: #4a90e2; }
/* ── PARTNERSHIPS: SIDE-BY-SIDE CARDS ────────────────────── */
.partnership-duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 50px;
}
.p-duo-card {
background: var(--white);
border-radius: 20px;
padding: 40px 36px;
box-shadow: var(--shadow-sm);
border: 1px solid rgba(0,0,0,0.05);
transition: var(--transition);
}
.p-duo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.p-duo-card.ngo { border-top: 5px solid #4a90e2; }
.p-duo-card.govt { border-top: 5px solid var(--green-deep); }
.p-duo-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.p-duo-icon {
font-size: 3rem;
flex-shrink: 0;
}
.p-duo-title { font-size: 1.3rem; color: var(--text-dark); margin-bottom: 4px; }
.p-duo-sub { font-size: 0.85rem; color: var(--text-light); }
.p-duo-card p { color: var(--text-medium); line-height: 1.8; margin-bottom: 20px; }
.p-sub-grid {
display: grid;
grid-template-columns: 2fr;
gap: 12px;
margin-top: 20px;
}
.p-sub-item {
background: var(--bg-light);
border-radius: 12px;
padding: 16px;
}
.p-sub-item h5 { color: var(--primary-color); margin-bottom: 6px; }
.p-sub-item p { color: var(--text-medium); margin: 0; line-height: 1.5; }
.p-duo-card.govt .p-sub-item h5 { color: var(--green-deep); }
/* Process steps inside govt card */
.govt-steps { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; }
.govt-step {
display: flex;
gap: 14px;
align-items: flex-start;
background: var(--green-pale);
border-radius: 12px;
padding: 16px;
}
.govt-step-num {
width: 34px; height: 34px;
background: var(--green-deep);
color: white;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
font-weight: 700;
flex-shrink: 0;
}
.govt-step h5 { font-size: 0.88rem; color: var(--green-deep); margin-bottom: 3px; }
.govt-step p { font-size: 0.82rem; color: var(--text-medium); margin: 0; line-height: 1.5; }
.info-note {
background: #fff3cd;
border-left: 4px solid #ffc107;
border-radius: 8px;
padding: 14px 18px;
font-size: 0.88rem;
color: #856404;
margin-top: 20px;
}
.info-chips {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 20px;
}
.info-chip {
background: #e8f5e9;
border-radius: 10px;
padding: 12px 16px;
text-align: center;
flex: 1;
min-width: 110px;
}
.info-chip .ch-icon { font-size: 1.4rem; margin-bottom: 4px; }
.info-chip h5 { font-size: 0.82rem; color: var(--green-deep); margin-bottom: 2px; }
.info-chip p { font-size: 0.76rem; color: var(--text-medium); margin: 0; }
/* ── ONLINE PROGRAM SECTION ──────────────────────────────── */
.online-prog-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 90px 0;
position: relative;
overflow: hidden;
color: white;
}
.online-prog-section::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 400px; height: 400px;
background: rgba(255,255,255,0.06);
border-radius: 50%;
}
.online-prog-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: start;
position: relative;
z-index: 1;
}
.online-badge {
display: inline-block;
background: rgba(255,255,255,0.2);
padding: 6px 18px;
border-radius: 50px;
font-size: 0.82rem;
font-weight: 600;
color: white;
margin-bottom: 20px;
}
.online-prog-section h2 { color: white; font-size: 2.2rem; margin-bottom: 16px; }
.online-prog-section .lead { color: rgba(255,255,255,0.9); margin-bottom: 28px; }
.online-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.online-feature {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(8px);
border-radius: 14px;
padding: 20px;
}
.online-feature .of-icon { font-size: 1.8rem; margin-bottom: 10px; }
.online-feature h4 { color: #ffd700; font-size: 0.9rem; margin-bottom: 6px; font-family: 'DM Sans',sans-serif; }
.online-feature ul { list-style: none; }
.online-feature ul li { font-size: 0.82rem; color: rgba(255,255,255,0.8); padding: 3px 0; }
.online-feature ul li::before { content: '✓ '; color: #ffd700; }
.participant-badge {
background: rgba(255,255,255,0.15);
border-radius: 12px;
padding: 16px 20px;
margin-top: 14px;
display: flex;
align-items: center;
gap: 14px;
}
.participant-badge .big-num { font-family: 'Bebas Neue',sans-serif; font-size: 3rem; color: #ffd700; line-height: 1; }
.participant-badge .big-lbl { font-size: 0.82rem; color: rgba(255,255,255,0.75); }
/* institutions list */
.inst-header { color: white; font-size: 1.2rem; margin-bottom: 16px; font-family: 'Playfair Display',serif; }
.inst-list { display: flex; flex-direction: column; gap: 10px; }
.inst-item {
background: rgba(255,255,255,0.1);
border-radius: 12px;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
transition: background 0.3s;
}
.inst-item:hover { background: rgba(255,255,255,0.18); }
.inst-item .inst-icon { font-size: 1.3rem; width: 36px; height: 36px; background: rgba(255,255,255,0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.inst-item .inst-name { color: white; font-weight: 600; font-size: 0.88rem; }
.inst-item .inst-loc { color: rgba(255,255,255,0.55); font-size: 0.78rem; }
.online-cta-strip {
background: rgba(255,255,255,0.2);
border-radius: 14px;
padding: 18px 24px;
text-align: center;
margin-top: 24px;
font-size: 1rem;
font-weight: 600;
color: white;
}
/* ── METHODOLOGY: 4-COLUMN STRIP ────────────────────────── */
.methodology-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 52px;
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.method-cell {
padding: 38px 28px;
border-right: 1px solid rgba(0,0,0,0.07);
position: relative;
transition: background 0.3s;
}
.method-cell:last-child { border-right: none; }
.method-cell:hover { background: var(--green-pale); }
.method-step-num {
font-family: 'Bebas Neue',sans-serif;
font-size: 5rem;
color: rgba(47,169,106,0.1);
line-height: 1;
position: absolute;
top: 14px; right: 16px;
}
.method-cell .m-icon { font-size: 2rem; margin-bottom: 14px; }
.method-cell h3 { font-size: 1.05rem; color: var(--charcoal); margin-bottom: 8px; }
.method-cell p { font-size: 0.85rem; color: var(--slate); line-height: 1.7; margin: 0; }
/* ── TESTIMONIALS ────────────────────────────────────────── */
/* reuses .testimonials-grid + .testimonial-card from style.css */
/* ── HOW TO HELP ─────────────────────────────────────────── */
/* reuses .help-section .help-grid .help-card from style.css */
/* ── Add icon-wrap support to help-card when using emoji ── */
.help-card .help-icon { font-size: 2.8rem; margin-bottom: 16px; }
/* ── YEAR-WISE FOOD DONATION GALLERY ─────────────────────── */
/* .gallery-section {
background: #1a1a1a;
padding: 90px 0;
}
.gallery-section .section-title { color: white; text-align: center; }
.gallery-section .section-subtitle { color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 48px; } */
/* Year tab pills */
.year-tabs {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 44px;
}
.year-tab-btn {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.6);
font-weight: 600;
font-size: 0.88rem;
padding: 9px 22px;
border-radius: 50px;
cursor: pointer;
transition: var(--transition);
font-family: 'DM Sans','Work Sans',sans-serif;
}
.year-tab-btn:hover { background: rgba(255,255,255,0.12); color: white; }
.year-tab-btn.active {
background: var(--amber);
border-color: var(--amber);
color: var(--charcoal);
}
.year-panel { display: none; }
.year-panel.active { display: block; }
/* Year panel header row */
.yr-header {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
}
.yr-badge {
font-family: 'Bebas Neue',sans-serif;
font-size: 3.8rem;
color: var(--amber);
line-height: 1;
}
.yr-divider { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.yr-meta {
background: rgba(255,255,255,0.07);
color: rgba(255,255,255,0.5);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 50px;
}
/* Mosaic photo grids */
.photo-mosaic {
display: grid;
gap: 10px;
}
.photo-mosaic.mosaic-a { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 240px 190px; }
.photo-mosaic.mosaic-b { grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 250px; }
.photo-mosaic.mosaic-c { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 240px; }
.photo-mosaic.mosaic-d { grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 220px 200px; }
.photo-item {
position: relative;
border-radius: 12px;
overflow: hidden;
background: rgba(255,255,255,0.05);
cursor: pointer;
}
.photo-item.span-row2 { grid-row: span 2; }
.photo-item img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.photo-item:hover img { transform: scale(1.06); }
/* Placeholder when no real image */
.photo-placeholder {
width: 100%; height: 100%;
min-height: 190px;
background: linear-gradient(135deg, rgba(13,92,58,0.45) 0%, rgba(47,169,106,0.2) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.photo-placeholder .ph-icon { font-size: 2.2rem; opacity: 0.45; }
.photo-placeholder .ph-txt { font-size: 0.72rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.1em; text-align: center; padding: 0 12px; }
.photo-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
padding: 18px 14px 12px;
opacity: 0;
transition: opacity 0.3s;
}
.photo-item:hover .photo-overlay { opacity: 1; }
.photo-overlay-txt { color: white; font-size: 0.8rem; font-weight: 600; }
/* Year stats strip */
.yr-stats-strip {
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
margin-top: 32px;
background: rgba(255,255,255,0.04);
border-radius: 16px;
padding: 28px;
}
.yrs-item { text-align: center; }
.yrs-num { font-family: 'Bebas Neue',sans-serif; font-size: 2.8rem; color: var(--amber); line-height: 1; }
.yrs-lbl { font-size: 0.72rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-top: 4px; }
/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
.skill-hero-inner { grid-template-columns: 1fr; padding: 120px 28px 60px; }
.skill-hero-desc { max-width: 100%; }
.overview-split { grid-template-columns: 1fr; gap: 40px; }
.overview-sticky { position: static; }
.stats-bento-grid { grid-template-columns: 1fr 1fr; }
.bento-card.bento-featured { grid-column: 1 / -1; grid-row: 1; }
.sk-programs-grid { grid-template-columns: 1fr 1fr; }
.sk-donate-grid { grid-template-columns: 1fr 1fr; }
.partnership-duo { grid-template-columns: 1fr; }
.online-prog-inner { grid-template-columns: 1fr; gap: 40px; }
.methodology-strip { grid-template-columns: 1fr 1fr; }
.method-cell:nth-child(2) { border-right: none; }
.method-cell:nth-child(3),
.method-cell:nth-child(4) { border-top: 1px solid rgba(0,0,0,0.07); }
}
@media (max-width: 768px) {
.skill-hero-h1 { font-size: 2.6rem; }
.hero-stat-cluster { grid-template-columns: 1fr 1fr; }
.sk-programs-grid { grid-template-columns: 1fr; }
.sk-donate-grid { grid-template-columns: 1fr; }
.stats-bento-grid { grid-template-columns: 1fr; }
.methodology-strip { grid-template-columns: 1fr; }
.method-cell { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.07); }
.photo-mosaic.mosaic-a,
.photo-mosaic.mosaic-d { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.photo-mosaic.mosaic-b,
.photo-mosaic.mosaic-c { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.photo-item.span-row2 { grid-row: span 1; }
.yr-stats-strip { gap: 24px; }
.online-features-grid { grid-template-columns: 1fr; }
.skill-hero-actions { flex-direction: column; }
.skill-hero-actions .btn-hero-primary,
.skill-hero-actions .btn-hero-outline { width: 100%; justify-content: center; }
}
/* ── CHALD CARE PAGE ── */
.childcare-hero {
position: relative;
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
background: linear-gradient(247deg, #002415 0%, #00ff8a 55%, #0A3D25 100%);
}
.hero-left {
background: linear-gradient(150deg, #0D5C3A 0%, #1A7A4E 55%, #0A3D25 100%);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
padding: 140px 60px 80px 60px;
z-index: 2;
}
.hero-left::after {
content: '';
position: absolute;
top: 0; right: -60px; bottom: 0;
width: 120px;
background: linear-gradient(150deg, #0D5C3A 0%, #1A7A4E 100%);
clip-path: polygon(0 0, 0% 100%, 100% 100%);
z-index: 3;
}
.hero-left::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-right {
background: linear-gradient(135deg, #E6F5EE 0%, #FAF7F2 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 60px 80px 80px;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(245,166,35,0.18);
border: 1px solid rgba(245,166,35,0.5);
color: #F5A623;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 50px;
margin-bottom: 28px;
width: fit-content;
animation: fadeSlideUp 0.7s 0.2s both;
}
.hero-headline {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 4.5vw, 4rem);
font-weight: 900;
color: #ffffff;
line-height: 1.1;
margin-bottom: 24px;
animation: fadeSlideUp 0.7s 0.4s both;
}
.hero-headline em {
font-style: italic;
color: #F5A623;
}
.hero-desc {
font-size: 1.1rem;
color: rgba(255,255,255,0.8);
line-height: 1.8;
margin-bottom: 40px;
max-width: 480px;
animation: fadeSlideUp 0.7s 0.6s both;
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
animation: fadeSlideUp 0.7s 0.8s both;
}
.hero-stats-row {
display: flex;
gap: 40px;
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,0.15);
animation: fadeSlideUp 0.7s 1s both;
}
.hero-stat-item { text-align: center; }
.hero-stat-num {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 900;
color: #F5A623;
line-height: 1;
}
.hero-stat-lbl {
font-size: 0.75rem;
color: rgba(255,255,255,0.65);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 4px;
}
/* Right panel cards */
.hero-right-inner {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
max-width: 460px;
}
.hero-card {
background: #ffffff;
border-radius: 16px;
padding: 24px 28px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 4px 24px rgba(0,0,0,0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: fadeSlideRight 0.7s both;
}
.hero-card:hover { transform: translateX(-6px); box-shadow: 0 8px 36px rgba(0,0,0,0.12); }
.hero-card:nth-child(1) { animation-delay: 0.5s; }
.hero-card:nth-child(2) { animation-delay: 0.7s; }
.hero-card:nth-child(3) { animation-delay: 0.9s; }
.hero-card-icon {
width: 54px; height: 54px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.hero-card-icon.green { background: #E6F5EE; }
.hero-card-icon.amber { background: #FFF3DC; }
.hero-card-icon.pink { background: #FDE8F0; }
.hero-card h4 {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
color: #1C1C1C;
margin: 0 0 4px 0;
}
.hero-card p {
font-size: 0.82rem;
color: #4A5568;
margin: 0;
line-height: 1.5;
}
.hero-scroll-cue {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.5);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
z-index: 10;
}
.scroll-line {
width: 1px; height: 44px;
background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0%, 100% { transform: scaleY(1); opacity: 1; }
50% { transform: scaleY(0.4); opacity: 0.3; }
}
/* ── BREADCRUMB ── */
.breadcrumb-bar {
background: #f8f9fa;
border-bottom: 1px solid #e8ecef;
padding: 12px 0;
}
/* .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: #4A5568;
} */
.breadcrumb a { color: #0D5C3A; font-weight: 500; }
.breadcrumb-sep { color: #9CA3AF; }
/* ── OVERVIEW / INTRO ── */
.overview-section {
padding: 100px 0;
background: #FAF7F2;
}
.overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.overview-label {
display: inline-flex;
align-items: center;
gap: 8px;
color: #1A7A4E;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 16px;
}
.overview-label::before {
content: '';
width: 24px; height: 2px;
background: #2FA96A;
border-radius: 2px;
}
.overview-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 900;
color: #1C1C1C;
line-height: 1.2;
margin-bottom: 24px;
}
.overview-title em { font-style: italic; color: #0D5C3A; }
.overview-body p {
color: #4A5568;
line-height: 1.85;
margin-bottom: 18px;
}
.overview-checklist {
margin-top: 28px;
display: grid;
gap: 12px;
}
.check-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.92rem;
color: #1C1C1C;
font-weight: 500;
}
.check-icon {
width: 22px; height: 22px;
background: #E6F5EE;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.65rem;
color: #0D5C3A;
font-weight: 800;
flex-shrink: 0;
margin-top: 2px;
}
.overview-visual {
position: relative;
}
.overview-visual-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.visual-card {
background: #ffffff;
border-radius: 20px;
padding: 32px 24px;
text-align: center;
box-shadow: 0 4px 24px rgba(0,0,0,0.07);
transition: transform 0.3s ease;
}
.visual-card:hover { transform: translateY(-5px); }
.visual-card-num {
font-family: 'Playfair Display', serif;
font-size: 2.6rem;
font-weight: 900;
color: #0D5C3A;
line-height: 1;
margin-bottom: 6px;
}
.visual-card-lbl {
font-size: 0.78rem;
font-weight: 600;
color: #4A5568;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.visual-card.accent { background: #0D5C3A; }
.visual-card.accent .visual-card-num { color: #F5A623; }
.visual-card.accent .visual-card-lbl { color: rgba(255,255,255,0.75); }
.visual-card.amber-bg { background: #F5A623; }
.visual-card.amber-bg .visual-card-num { color: #1C1C1C; }
.visual-card.amber-bg .visual-card-lbl { color: rgba(28,28,28,0.75); }
/* ── SERVICES BENTO GRID ── */
.services-section {
padding: 100px 0;
background: #ffffff;
}
.services-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
gap: 20px;
margin-top: 56px;
}
/* .bento-card {
background: #FAF7F2;
border-radius: 20px;
padding: 36px 28px;
transition: all 0.35s ease;
border: 1px solid rgba(0,0,0,0.04);
position: relative;
overflow: hidden;
}
.bento-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(to right, #2FA96A, #F5A623);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.bento-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.10); background: #fff; }
.bento-card:hover::after { transform: scaleX(1); }
.bento-card.featured {
grid-column: span 2;
background: linear-gradient(135deg, #0D5C3A 0%, #1A7A4E 100%);
color: white;
}
.bento-card.featured::after { background: linear-gradient(to right, #F5A623, #ffd700); }
.bento-emoji {
width: 56px; height: 56px;
background: rgba(255,255,255,0.15);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem;
margin-bottom: 20px;
}
.bento-card:not(.featured) .bento-emoji { background: #E6F5EE; }
.bento-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 12px;
color: #1C1C1C;
}
.bento-card.featured h3 { color: #F5A623; }
.bento-card p { font-size: 0.87rem; color: #4A5568; line-height: 1.7; margin-bottom: 16px; }
.bento-card.featured p { color: rgba(255,255,255,0.78); }
.bento-list { list-style: none; margin: 0; }
.bento-list li {
font-size: 0.83rem;
color: #4A5568;
padding: 5px 0;
display: flex;
align-items: center;
gap: 8px;
}
.bento-card.featured .bento-list li { color: rgba(255,255,255,0.8); }
.bento-list li::before {
content: '✓';
color: #2FA96A;
font-weight: 800;
font-size: 0.7rem;
}
.bento-card.featured .bento-list li::before { color: #F5A623; } */
/* ── WAYS TO HELP ── */
.help-section-v2 {
padding: 100px 0;
background: #0D5C3A;
position: relative;
overflow: hidden;
}
.help-section-v2::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(47,169,106,0.15) 0%, transparent 70%);
border-radius: 50%;
}
.help-section-v2 .section-tag { color: #F5A623; }
.help-section-v2 .section-tag::before { background: #F5A623; }
.help-section-v2 .section-title { color: #ffffff; }
.help-section-v2 .section-subtitle { color: rgba(255,255,255,0.7); }
.help-cards-v2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
.help-card-v2 {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 36px 28px;
transition: all 0.35s ease;
display: flex;
flex-direction: column;
backdrop-filter: blur(4px);
}
.help-card-v2:hover {
background: rgba(255,255,255,0.12);
transform: translateY(-6px);
border-color: rgba(245,166,35,0.4);
}
.help-card-v2 .hc-icon {
width: 60px; height: 60px;
background: rgba(245,166,35,0.15);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 1.7rem;
margin-bottom: 22px;
transition: all 0.3s ease;
}
.help-card-v2:hover .hc-icon { background: #F5A623; }
.help-card-v2 h3 {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: #ffffff;
margin-bottom: 12px;
}
.help-card-v2 p {
font-size: 0.87rem;
color: rgba(255,255,255,0.7);
line-height: 1.75;
flex-grow: 1;
margin-bottom: 24px;
}
/* ── DONATION CARDS ── */
.donation-section-v2 {
padding: 100px 0;
background: #FAF7F2;
}
.donation-grid-v2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
/* .don-card {
background: #ffffff;
border-radius: 20px;
padding: 36px 28px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
border-top: 4px solid;
transition: all 0.35s ease;
cursor: pointer;
position: relative;
overflow: hidden;
} */
/* .don-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: currentColor;
opacity: 0;
transition: opacity 0.3s ease;
} */
.don-card:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,0,0,0.12); }
.don-card.c1 { border-color: #0D5C3A; color: #0D5C3A; }
.don-card.c2 { border-color: #F5A623; color: #F5A623; }
.don-card.c3 { border-color: #e91e63; color: #e91e63; }
.don-card.c4 { border-color: #667eea; color: #667eea; }
.don-card.c5 { border-color: #ff6b6b; color: #ff6b6b; }
.don-card.c6 { border-color: #4a90e2; color: #4a90e2; }
/* .don-amount {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
font-weight: 900;
line-height: 1;
margin-bottom: 12px;
} */
.don-label {
color: #4A5568;
line-height: 1.6;
margin-bottom: 24px;
min-height: 50px;
}
/* ── SPECIAL INITIATIVES ── */
.initiatives-section {
padding: 100px 0;
background: #ffffff;
}
.initiatives-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
.init-card {
background: #FAF7F2;
border-radius: 20px;
padding: 36px 28px;
border-left: 4px solid #0D5C3A;
transition: all 0.35s ease;
}
.init-card:nth-child(2) { border-left-color: #F5A623; }
.init-card:nth-child(3) { border-left-color: #e91e63; }
.init-card:nth-child(4) { border-left-color: #667eea; }
.init-card:nth-child(5) { border-left-color: #2FA96A; }
.init-card:nth-child(6) { border-left-color: #ff6b6b; }
.init-card:hover { transform: translateY(-5px); box-shadow: 0 12px 36px rgba(0,0,0,0.09); background: #fff; }
.init-icon { font-size: 2rem; margin-bottom: 16px; }
.init-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
color: #1C1C1C;
margin-bottom: 12px;
}
.init-card p {
font-size: 0.87rem;
color: #4A5568;
line-height: 1.75;
margin: 0;
}
/* ── INNER WHEEL PARTNERSHIP ── */
.partnership-section {
padding: 100px 0;
background: linear-gradient(135deg, #e91e63 0%, #f06292 100%);
position: relative;
overflow: hidden;
}
.partnership-section::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.partnership-inner {
position: relative;
z-index: 2;
}
.partnership-section .section-title { color: #ffffff; text-align: center; }
.partnership-section .section-subtitle { color: rgba(255,255,255,0.8); text-align: center; }
.partnership-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
color: #ffd700;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 50px;
margin-bottom: 20px;
}
.process-steps {
background: rgba(255,255,255,0.12);
border-radius: 20px;
padding: 40px;
margin: 48px 0 40px;
backdrop-filter: blur(8px);
}
.process-steps h3 {
color: #ffd700;
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin-bottom: 28px;
}
.process-list { display: grid; gap: 20px; }
.process-item {
display: flex;
gap: 18px;
align-items: flex-start;
}
.process-num {
width: 40px; height: 40px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 0.95rem;
color: #ffffff;
flex-shrink: 0;
}
.process-item h5 {
color: #ffffff;
font-size: 1rem;
margin-bottom: 4px;
}
.process-item p {
color: rgba(255,255,255,0.8);
font-size: 0.87rem;
line-height: 1.7;
margin: 0;
}
.package-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 32px;
}
.pkg-item {
background: rgba(255,255,255,0.15);
border-radius: 14px;
padding: 24px;
text-align: center;
backdrop-filter: blur(6px);
}
.pkg-item .pkg-icon { font-size: 2rem; margin-bottom: 10px; }
.pkg-item h5 { color: #ffd700; font-size: 0.95rem; margin-bottom: 6px; }
.pkg-item p { color: rgba(255,255,255,0.8); font-size: 0.82rem; margin: 0; }
.donor-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 32px;
}
.donor-item {
background: rgba(255,255,255,0.1);
border-radius: 14px;
padding: 24px;
}
.donor-item .d-icon { font-size: 2rem; margin-bottom: 12px; }
.donor-item h4 { color: #ffd700; font-size: 1rem; margin-bottom: 10px; }
.donor-item p { color: rgba(255,255,255,0.85); font-size: 0.87rem; line-height: 1.7; margin: 0; }
.together-banner {
background: rgba(255,255,255,0.2);
border-radius: 14px;
padding: 24px 32px;
text-align: center;
margin-top: 40px;
}
.together-banner p {
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
margin: 0;
}
/* ── FOOD DONATION GALLERY ── */
.food-gallery-section {
padding: 100px 0;
background: #FAF7F2;
}
.year-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
margin: 40px 0 48px;
}
.year-tab {
padding: 10px 24px;
border-radius: 50px;
border: 2px solid #0D5C3A;
background: transparent;
color: #0D5C3A;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'DM Sans', sans-serif;
}
/* .year-tab.active, .year-tab:hover {
background: #0D5C3A;
color: #ffffff;
} */
.gallery-panel { display: none; }
.gallery-panel.active { display: block; }
.gallery-header {
text-align: center;
margin-bottom: 36px;
}
.gallery-header h3 {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
color: #1C1C1C;
margin-bottom: 8px;
}
.gallery-header p { color: #4A5568; font-size: 0.9rem; }
.gallery-stats-bar {
display: flex;
justify-content: center;
gap: 48px;
margin-bottom: 40px;
padding: 24px 40px;
background: #0D5C3A;
border-radius: 16px;
}
.gstat { text-align: center; }
.gstat-num {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 900;
color: #F5A623;
line-height: 1;
}
.gstat-lbl {
font-size: 0.75rem;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 4px;
}
/* ── TESTIMONIALS ── */
.testimonials-section-v2 {
padding: 100px 0;
background: #ffffff;
}
.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
.testi-card {
background: #FAF7F2;
border-radius: 20px;
padding: 36px 28px;
position: relative;
transition: all 0.35s ease;
}
.testi-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,0.09); }
.testi-quote {
font-family: 'Playfair Display', serif;
font-size: 4rem;
color: #0D5C3A;
opacity: 0.15;
line-height: 1;
margin-bottom: -16px;
}
.testi-text {
font-size: 0.92rem;
color: #4A5568;
line-height: 1.85;
margin-bottom: 24px;
font-style: italic;
}
.testi-author {
display: flex;
align-items: center;
gap: 14px;
}
.testi-avatar {
width: 46px; height: 46px;
border-radius: 50%;
background: #0D5C3A;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 1.1rem;
color: #F5A623;
flex-shrink: 0;
}
.testi-name {
font-weight: 700;
color: #1C1C1C;
font-size: 0.95rem;
margin-bottom: 2px;
}
.testi-role { font-size: 0.8rem; color: #4A5568; }
/* ── CTA FINAL ── */
.cta-section-v2 {
padding: 100px 0;
background: #0D5C3A;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section-v2::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 800px; height: 800px;
background: radial-gradient(circle, rgba(47,169,106,0.2) 0%, transparent 70%);
border-radius: 50%;
}
.cta-section-v2 .cta-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.cta-section-v2 h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
color: #ffffff;
margin-bottom: 18px;
}
.cta-section-v2 h2 em { font-style: italic; color: #F5A623; }
.cta-section-v2 p {
color: rgba(255,255,255,0.75);
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 40px;
}
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ── ANIMATIONS ── */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideRight {
from { opacity: 0; transform: translateX(28px); }
to { opacity: 1; transform: translateX(0); }
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.childcare-hero { grid-template-columns: 1fr; }
.hero-left { padding: 120px 40px 60px; }
.hero-left::after { display: none; }
.hero-right { display: none; }
.overview-grid { grid-template-columns: 1fr; gap: 48px; }
.services-bento { grid-template-columns: repeat(2, 1fr); }
.bento-card.featured { grid-column: span 2; }
.donation-grid-v2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.help-cards-v2, .initiatives-grid, .testi-grid { grid-template-columns: 1fr; }
.services-bento { grid-template-columns: 1fr; }
.bento-card.featured { grid-column: span 1; }
.donation-grid-v2 { grid-template-columns: 1fr; }
.package-items { grid-template-columns: 1fr; }
.donor-grid { grid-template-columns: 1fr; }
.photo-grid { grid-template-columns: repeat(2, 1fr); }
.photo-item.large { grid-column: span 2; }
.gallery-stats-bar { gap: 24px; flex-wrap: wrap; }
.hero-stats-row { gap: 24px; flex-wrap: wrap; }
}
/* ═══════════════════════════════════════════════════════════
SPORTS PAGE — CUSTOM STYLES
═══════════════════════════════════════════════════════════ */
.sports-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background: #0A3D25;
}
/* Layered mesh gradient background */
.hero-bg-layer {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 70% 20%, rgba(245,166,35,0.13) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 10% 80%, rgba(47,169,106,0.10) 0%, transparent 55%),
linear-gradient(145deg, #071F12 0%, #0D5C3A 40%, #1A7A4E 75%, #0A3D25 100%);
}
/* Animated diagonal stripe overlay */
.hero-stripes {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-55deg,
transparent,
transparent 60px,
rgba(255,255,255,0.018) 60px,
rgba(255,255,255,0.018) 62px
);
pointer-events: none;
}
/* Large decorative sport-shape right side */
.hero-geo {
position: absolute;
top: -60px; right: -80px;
width: 650px; height: 650px;
border-radius: 50%;
border: 1px solid rgba(245,166,35,0.12);
pointer-events: none;
}
.hero-geo::before {
content: '';
position: absolute;
top: 40px; left: 40px; right: 40px; bottom: 40px;
border-radius: 50%;
border: 1px solid rgba(245,166,35,0.08);
}
.hero-geo::after {
content: '';
position: absolute;
top: 100px; left: 100px; right: 100px; bottom: 100px;
border-radius: 50%;
background: rgba(245,166,35,0.05);
}
.sports-hero .container { position: relative; z-index: 4; width: 100%; }
.hero-grid {
display: grid;
grid-template-columns: 1fr 460px;
gap: 64px;
align-items: center;
}
/* Eyebrow */
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(245,166,35,0.15);
border: 1px solid rgba(245,166,35,0.4);
color: #F5A623;
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 50px;
margin-bottom: 26px;
opacity: 0;
animation: fadeUp 0.7s 0.2s ease forwards;
}
.hero-eyebrow-dot {
width: 7px; height: 7px;
background: #F5A623;
border-radius: 50%;
animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:0.4; transform:scale(1.5); }
}
.hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.8rem, 5vw, 4.6rem);
font-weight: 900;
color: #fff;
line-height: 1.08;
margin-bottom: 24px;
opacity: 0;
animation: fadeUp 0.7s 0.4s ease forwards;
}
.hero-h1 em { font-style: italic; color: #F5A623; }
.hero-desc {
font-size: 1.08rem;
color: rgba(255,255,255,0.76);
line-height: 1.88;
max-width: 530px;
margin-bottom: 38px;
opacity: 0;
animation: fadeUp 0.7s 0.6s ease forwards;
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 0.7s 0.8s ease forwards;
}
/* Stats strip */
.hero-stats-strip {
display: flex;
gap: 0;
margin-top: 56px;
padding-top: 44px;
border-top: 1px solid rgba(255,255,255,0.1);
opacity: 0;
animation: fadeUp 0.7s 1s ease forwards;
}
.hstat {
flex: 1;
text-align: center;
padding: 0 24px;
border-right: 1px solid rgba(255,255,255,0.1);
}
.hstat:last-child { border-right: none; }
.hstat:first-child { padding-left: 0; }
.hstat-num {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
font-weight: 900;
color: #F5A623;
line-height: 1;
display: block;
}
.hstat-lbl {
font-size: 0.72rem;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 5px;
display: block;
}
/* Right: Sport discipline cards */
.hero-right-col {
display: flex;
flex-direction: column;
gap: 14px;
opacity: 0;
animation: fadeRight 0.8s 0.5s ease forwards;
}
.sport-pill-card {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 20px 24px;
display: flex;
align-items: center;
gap: 18px;
backdrop-filter: blur(8px);
transition: all 0.3s ease;
cursor: default;
}
.sport-pill-card:hover {
background: rgba(255,255,255,0.13);
border-color: rgba(245,166,35,0.35);
transform: translateX(-5px);
}
.spc-icon {
width: 52px; height: 52px;
border-radius: 14px;
background: rgba(245,166,35,0.15);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
transition: background 0.3s ease;
}
.sport-pill-card:hover .spc-icon { background: rgba(245,166,35,0.3); }
.spc-tag {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.45);
margin-bottom: 3px;
}
.spc-name {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
margin-bottom: 2px;
}
.spc-detail {
font-size: 0.78rem;
color: rgba(255,255,255,0.6);
}
.spc-badge {
margin-left: auto;
background: rgba(245,166,35,0.18);
color: #F5A623;
font-size: 0.68rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 50px;
white-space: nowrap;
flex-shrink: 0;
}
/* Scroll cue */
.hero-scroll-cue {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.38);
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
z-index: 10;
opacity: 0;
animation: fadeUp 1s 1.3s ease forwards;
}
.scroll-line {
width: 1px; height: 42px;
background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
animation: scrollLinePulse 2s ease-in-out infinite;
}
@keyframes scrollLinePulse {
0%,100% { transform:scaleY(1); opacity:1; }
50% { transform:scaleY(0.4); opacity:0.3; }
}
/* ── BREADCRUMB ───────────────────────────────────────────── */
.breadcrumb-bar {
background: #fff;
border-bottom: 1px solid var(--border-color);
padding: 13px 0;
}
/* .breadcrumb {
display: flex; align-items: center; gap: 8px;
font-size: 0.83rem; color: var(--slate);
} */
.breadcrumb a { color: var(--green-mid); font-weight: 500; }
.breadcrumb a:hover { color: var(--green-deep); }
.bc-sep { color: #CBD5E0; }
/* ── OVERVIEW SECTION ────────────────────────────────────── */
.overview-section {
padding: 100px 0;
background: var(--cream);
}
.overview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.ov-label {
display: inline-flex; align-items: center; gap: 8px;
color: var(--green-mid);
font-size: 0.76rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
margin-bottom: 16px;
}
.ov-label::before {
content: ''; width: 24px; height: 2px;
background: var(--green-light); border-radius: 2px;
}
.ov-title {
font-family: 'Playfair Display', serif;
font-size: 2.4rem; font-weight: 900;
color: var(--charcoal); line-height: 1.2;
margin-bottom: 22px;
}
.ov-title em { font-style: italic; color: var(--green-deep); }
.ov-body p { color: var(--slate); line-height: 1.88; font-size: 0.96rem; margin-bottom: 18px; }
.ov-body p:last-child { margin-bottom: 0; }
/* Right: visual stats 2×2 */
.ov-stats-quad {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.stat-tile {
border-radius: 20px;
padding: 32px 24px;
text-align: center;
transition: transform 0.3s ease;
}
.stat-tile:hover { transform: translateY(-5px); }
.stat-tile.green { background: var(--green-deep); }
.stat-tile.amber { background: #F5A623; }
.stat-tile.pale { background: var(--bg-white); box-shadow: var(--shadow-soft); }
.stat-tile.cream2 { background: #1A7A4E; }
.stat-tile-num {
font-family: 'Playfair Display', serif;
font-size: 2.8rem; font-weight: 900; line-height: 1;
margin-bottom: 6px;
}
.stat-tile.green .stat-tile-num { color: #F5A623; }
.stat-tile.amber .stat-tile-num { color: #1C1C1C; }
.stat-tile.pale .stat-tile-num { color: var(--green-deep); }
.stat-tile.cream2 .stat-tile-num { color: #F5A623; }
.stat-tile-lbl {
font-size: 0.74rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
}
.stat-tile.green .stat-tile-lbl { color: rgba(255,255,255,0.7); }
.stat-tile.amber .stat-tile-lbl { color: rgba(28,28,28,0.65); }
.stat-tile.pale .stat-tile-lbl { color: var(--slate); }
.stat-tile.cream2 .stat-tile-lbl { color: rgba(255,255,255,0.7); }
/* ── SPORTS INITIATIVES — BENTO ──────────────────────────── */
.initiatives-section {
padding: 100px 0;
background: var(--bg-white);
}
.bento-sports {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
gap: 20px;
margin-top: 52px;
}
.bs-card {
background: var(--cream);
border-radius: 22px;
padding: 36px 28px;
border: 1px solid rgba(0,0,0,0.04);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.bs-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(to right, var(--green-light), #F5A623);
transform: scaleX(0); transform-origin: left;
transition: transform 0.4s ease;
}
.bs-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); background: #fff; }
.bs-card:hover::after { transform: scaleX(1); }
/* Featured wide card */
.bs-card.wide {
grid-column: span 2;
background: linear-gradient(135deg, var(--green-deep) 0%, #1A7A4E 100%);
color: #fff;
}
.bs-card.wide::after { background: linear-gradient(to right, #F5A623, #ffd700); }
.bs-emoji {
width: 54px; height: 54px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.bs-card:not(.wide) .bs-emoji { background: var(--green-pale); }
.bs-card.wide .bs-emoji { background: rgba(255,255,255,0.15); }
.bs-card:hover .bs-emoji { transform: rotate(-6deg) scale(1.1); }
.bs-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem; font-weight: 700;
margin-bottom: 12px;
color: var(--charcoal);
}
.bs-card.wide h3 { color: #F5A623; font-size: 1.3rem; }
.bs-card p { font-size: 0.86rem; color: var(--slate); line-height: 1.72; margin-bottom: 16px; }
.bs-card.wide p { color: rgba(255,255,255,0.78); }
.bs-list { list-style: none; margin: 0; }
.bs-list li {
font-size: 0.82rem; color: var(--slate);
padding: 5px 0;
display: flex; align-items: flex-start; gap: 8px;
}
.bs-list li::before { content: '✓'; color: var(--green-mid); font-weight: 800; font-size: 0.7rem; flex-shrink: 0; margin-top: 1px; }
.bs-card.wide .bs-list li { color: rgba(255,255,255,0.8); }
.bs-card.wide .bs-list li::before { color: #F5A623; }
/* ── FEATURED INITIATIVES MARQUEE STRIP ──────────────────── */
.highlight-strip {
background: #F5A623;
padding: 18px 0;
overflow: hidden;
white-space: nowrap;
}
.strip-track {
display: inline-flex;
animation: marqueeTicker 28s linear infinite;
gap: 0;
}
.strip-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 40px;
font-size: 0.82rem;
font-weight: 700;
color: #0A3D25;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.strip-dot { width: 6px; height: 6px; background: #0A3D25; border-radius: 50%; opacity: 0.5; }
@keyframes marqueeTicker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── FEATURED PROGRAMS — DARK PANEL ──────────────────────── */
.featured-section {
padding: 100px 0;
background: var(--charcoal);
position: relative;
overflow: hidden;
}
.featured-section::before {
content: '';
position: absolute;
top: -160px; right: -160px;
width: 520px; height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,166,35,0.07) 0%, transparent 70%);
}
.featured-section .section-tag { color: #F5A623; }
.featured-section .section-tag::before { background: #F5A623; }
.featured-section .section-title { color: #fff; }
.featured-section .section-subtitle { color: rgba(255,255,255,0.6); }
.feat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 52px;
}
.feat-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 36px 32px;
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.feat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(to right, #F5A623, #ffd700);
transform: scaleX(0); transform-origin: left;
transition: transform 0.4s ease;
}
.feat-card:hover { background: rgba(255,255,255,0.09); transform: translateY(-5px); border-color: rgba(245,166,35,0.2); }
.feat-card:hover::before { transform: scaleX(1); }
.feat-num {
font-family: 'Playfair Display', serif;
font-size: 4rem; font-weight: 900;
color: rgba(245,166,35,0.15);
line-height: 1;
margin-bottom: -12px;
}
.feat-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.18rem; font-weight: 700;
color: #F5A623; margin-bottom: 14px;
}
.feat-card p { font-size: 0.88rem; color: rgba(255,255,255,0.7); line-height: 1.8; margin: 0; }
/* ── DONATION SECTION ────────────────────────────────────── */
.donation-section {
padding: 100px 0;
background: var(--cream);
}
.don-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 52px;
}
/* .don-card {
background: #fff;
border-radius: 20px;
padding: 36px 28px;
text-align: center;
border-top: 4px solid;
box-shadow: var(--shadow-soft);
transition: all 0.35s ease;
cursor: pointer;
position: relative;
overflow: hidden;
} */
.don-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-deep); }
.don-card.c1 { border-top-color: #667eea; }
.don-card.c2 { border-top-color: #764ba2; }
.don-card.c3 { border-top-color: var(--green-deep); }
.don-card.c4 { border-top-color: #e91e63; }
.don-card.c5 { border-top-color: #ff6b6b; }
.don-card.c6 { border-top-color: #4a90e2; }
.don-amt {
font-family: 'Playfair Display', serif;
font-size: 2.4rem; font-weight: 900;
line-height: 1; margin-bottom: 10px;
}
.don-card.c1 .don-amt { color: #667eea; }
.don-card.c2 .don-amt { color: #764ba2; }
.don-card.c3 .don-amt { color: var(--green-deep); }
.don-card.c4 .don-amt { color: #e91e63; }
.don-card.c5 .don-amt { color: #ff6b6b; }
.don-card.c6 .don-amt { color: #4a90e2; }
/* .don-desc { font-size: 0.85rem; color: var(--slate); line-height: 1.65; margin-bottom: 22px; min-height: 50px; } */
/* .don-btn {
display: inline-block;
padding: 10px 28px;
border-radius: 50px;
font-weight: 700;
font-size: 0.84rem;
border: 2px solid currentColor;
transition: all 0.3s ease;
} */
.don-card.c1 .don-btn { color: #667eea; }
.don-card.c2 .don-btn { color: #764ba2; }
.don-card.c3 .don-btn { color: var(--green-deep); }
.don-card.c4 .don-btn { color: #e91e63; }
.don-card.c5 .don-btn { color: #ff6b6b; }
.don-card.c6 .don-btn { color: #4a90e2; }
/* .don-card:hover .don-btn { background: currentColor; color: #fff !important; } */
.custom-input-wrap { margin-bottom: 14px; }
.custom-input-wrap input {
width: 100%; padding: 10px 14px;
border: 2px solid #e0e0e0; border-radius: 8px;
font-size: 1rem; font-family: 'DM Sans', sans-serif;
outline: none; transition: border-color 0.3s ease;
}
.custom-input-wrap input:focus { border-color: #4a90e2; }
/* ── HOW YOU CAN HELP ────────────────────────────────────── */
.help-v2 {
padding: 100px 0;
background: var(--green-deep);
position: relative;
overflow: hidden;
}
.help-v2::before {
content: '';
position: absolute;
bottom: -120px; right: -120px;
width: 460px; height: 460px;
border-radius: 50%;
background: radial-gradient(circle, rgba(47,169,106,0.15) 0%, transparent 70%);
}
.help-v2 .section-tag { color: #F5A623; }
.help-v2 .section-tag::before { background: #F5A623; }
.help-v2 .section-title { color: #fff; }
.help-v2 .section-subtitle { color: rgba(255,255,255,0.68); }
.help-cards-v2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 52px;
}
.hc2 {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 36px 28px;
display: flex; flex-direction: column;
transition: all 0.35s ease;
backdrop-filter: blur(4px);
position: relative; z-index: 2;
}
.hc2:hover { background: rgba(255,255,255,0.13); transform: translateY(-6px); border-color: rgba(245,166,35,0.4); }
.hc2-icon {
width: 60px; height: 60px;
background: rgba(245,166,35,0.15);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 1.7rem;
margin-bottom: 22px;
transition: background 0.3s ease;
}
.hc2:hover .hc2-icon { background: #F5A623; }
.hc2 h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem; color: #fff;
margin-bottom: 12px;
}
.hc2 p { font-size: 0.86rem; color: rgba(255,255,255,0.68); line-height: 1.75; flex-grow: 1; margin-bottom: 24px; }
/* ── TESTIMONIALS ────────────────────────────────────────── */
.testi-section {
padding: 100px 0;
background: var(--bg-white);
}
.testi-grid-v2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 52px;
}
.tc2 {
background: var(--cream);
border-radius: 22px;
padding: 36px 30px;
transition: all 0.35s ease;
border: 1px solid rgba(0,0,0,0.04);
position: relative;
}
.tc2:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); background: #fff; }
.tc2-quote {
font-family: 'Playfair Display', serif;
font-size: 4.5rem;
color: var(--green-light);
opacity: 0.25;
line-height: 1;
margin-bottom: -14px;
}
.tc2-text {
font-size: 0.91rem;
color: var(--charcoal);
line-height: 1.85;
font-style: italic;
margin-bottom: 24px;
}
.tc2-author { display: flex; align-items: center; gap: 14px; }
.tc2-avatar {
width: 46px; height: 46px; border-radius: 50%;
background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 1.1rem; color: #F5A623; flex-shrink: 0;
}
.tc2-name { font-weight: 700; font-size: 0.93rem; color: var(--charcoal); margin-bottom: 2px; }
.tc2-role { font-size: 0.78rem; color: var(--slate); }
/* ── FINAL CTA ───────────────────────────────────────────── */
.sports-cta {
padding: 100px 0;
background: linear-gradient(135deg, var(--green-deep) 0%, #0A4229 55%, #1A5C3A 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.sports-cta::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 450px; height: 450px;
border-radius: 50%;
background: rgba(245,166,35,0.07);
}
.sports-cta::after {
content: '';
position: absolute;
bottom: -100px; left: -100px;
width: 350px; height: 350px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.sports-cta .cta-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.sports-cta h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4.2vw, 3.2rem);
color: #fff; margin-bottom: 18px; line-height: 1.15;
}
.sports-cta h2 em { font-style: italic; color: #F5A623; }
.sports-cta p { color: rgba(255,255,255,0.72); font-size: 1.05rem; line-height: 1.75; margin-bottom: 40px; }
.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRight {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1024px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-right-col { display: grid; grid-template-columns: 1fr 1fr; }
.hero-stats-strip { gap: 0; }
.overview-grid { grid-template-columns: 1fr; gap: 48px; }
.bento-sports { grid-template-columns: repeat(2, 1fr); }
.bs-card.wide { grid-column: span 2; }
.feat-grid { grid-template-columns: 1fr; }
.don-grid { grid-template-columns: repeat(2, 1fr); }
.help-cards-v2 { grid-template-columns: 1fr 1fr; }
.testi-grid-v2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.hero-right-col { grid-template-columns: 1fr; }
.sports-hero { padding-bottom: 80px; }
.hero-stats-strip { flex-wrap: wrap; gap: 20px; }
.hstat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 12px 0; flex: 0 0 45%; }
.bento-sports { grid-template-columns: 1fr; }
.bs-card.wide { grid-column: span 1; }
.don-grid { grid-template-columns: 1fr; }
.help-cards-v2 { grid-template-columns: 1fr; }
.testi-grid-v2 { grid-template-columns: 1fr; }
.ov-stats-quad { grid-template-columns: 1fr 1fr; }
}
/* ── RURAL DEVELOPMENT PAGE ── */
/* Page-accent overrides */
.rur-tag {
display: inline-flex; align-items: center; gap: 8px;
color: var(--grn-mid); font-size: 0.78rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px;
}
.rur-tag::before { content: ''; width: 24px; height: 2px; background: var(--grn-light); border-radius: 2px; }
/* Sidebar sticky layout */
.sidebar-page-layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 0;
align-items: start;
}
.sticky-sidebar {
position: sticky;
top: 90px;
padding: 32px 36px 32px 0;
border-right: 2px solid var(--border-color);
}
.sidebar-nav { list-style: none; margin: 0; padding: 0; }
.sidebar-nav li { margin-bottom: 0; }
.sidebar-nav li a {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px;
font-size: 0.88rem; font-weight: 500;
color: var(--text-medium); text-decoration: none;
transition: var(--transition); border-left: 3px solid transparent;
}
.sidebar-nav li a:hover, .sidebar-nav li a.active {
background: var(--green-pale);
color: var(--grn);
border-left-color: var(--grn-light);
}
.sidebar-nav li a .nav-icon { width: 22px; text-align: center; font-size: 1rem; }
.sidebar-divider { height: 1px; background: var(--border-color); margin: 12px 0; }
.sidebar-cta {
margin-top: 24px; padding: 20px; background: var(--green-pale);
border-radius: 14px; border: 1px solid rgba(47,169,106,0.2);
}
.sidebar-cta p { font-size: 0.82rem; color: var(--grn); font-weight: 600; margin-bottom: 10px; }
/* Main content */
.main-content { padding: 48px 0 48px 48px; }
.content-section { margin-bottom: 64px; }
.content-section:last-child { margin-bottom: 0; }
.content-section h2 { color: var(--grn); margin-bottom: 1.5rem; }
/* Initiatives grid inside main */
.init-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.init-card {
background: var(--cream);
border-radius: 14px; padding: 1.6rem;
border-left: 4px solid var(--grn-light);
transition: var(--transition);
}
.init-card:hover { background: var(--bg-white); box-shadow: var(--shadow-soft); transform: translateX(4px); }
.init-icon { font-size: 1.8rem; margin-bottom: 0.8rem; }
.init-card h3 { color: var(--grn); font-size: 1rem; margin-bottom: 0.5rem; }
.init-card p { color: var(--text-medium); font-size: 0.88rem; line-height: 1.7; margin-bottom: 0.8rem; }
.init-card ul { list-style: none; padding: 0; }
.init-card ul li { font-size: 0.83rem; color: var(--slate); padding: 3px 0; display: flex; align-items: center; gap: 6px; }
.init-card ul li::before { content: '✓'; color: var(--grn-mid); font-weight: 700; flex-shrink: 0; }
/* Escalation steps */
.escalation-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
margin: 2rem 0;
}
.step-block { position: relative; }
.step-num {
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1rem; margin-bottom: 0.8rem;
}
.step-block:nth-child(1) .step-num { background: #f4a261; color: #0f2027; }
.step-block:nth-child(2) .step-num { background: #52b788; color: #0f2027; }
.step-block:nth-child(3) .step-num { background: #667eea; color: #fff; }
.step-block h3 { font-size: 0.95rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.5rem; }
.step-block p { font-size: 0.83rem; color: var(--text-medium); line-height: 1.7; margin: 0; }
/* Officials grid */
.officials-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
margin-top: 1.5rem;
}
.official-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 0.8rem; background: var(--bg-white); border-radius: 10px;
border: 1px solid var(--border-color);
}
.official-item .off-icon { font-size: 1.3rem; flex-shrink: 0; }
.official-item h4 { font-size: 0.85rem; font-weight: 700; color: var(--charcoal); margin: 0 0 2px; }
.official-item p { font-size: 0.78rem; color: var(--text-light); margin: 0; line-height: 1.4; }
/* Volunteer strength cards */
.vol-strength-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem;
}
.vs-card {
background: var(--bg-white);
border-radius: 14px; padding: 1.5rem;
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
border-left: 5px solid var(--grn-light);
}
.vs-card:nth-child(2) { border-left-color: var(--grn-mid); }
.vs-card:nth-child(3) { border-left-color: var(--grn); }
.vs-card .vs-emoji { font-size: 2rem; margin-bottom: 0.7rem; }
.vs-card h3 { color: var(--grn); font-size: 0.98rem; margin-bottom: 0.6rem; }
.vs-card p { color: #555; line-height: 1.7; font-size: 0.87rem; margin: 0; }
/* Donation */
.rur-don-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; }
.rur-don-card {
background: white; border-radius: 12px; padding: 1.5rem;
text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.07);
border-top: 4px solid var(--grn-light); cursor: pointer; transition: var(--transition);
}
.rur-don-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rur-don-card .don-emoji { font-size: 1.8rem; margin-bottom: 0.5rem; }
.rur-don-card .don-amount { font-size: 2rem; font-weight: 800; color: var(--grn-mid); margin-bottom: 0.4rem; line-height: 1; }
.rur-don-card h4 { color: var(--grn); margin-bottom: 0.5rem; font-size: 0.95rem; }
.rur-don-card p { color: #666; line-height: 1.55; font-size: 0.84rem; margin-bottom: 1rem; }
.rur-don-card button { background: var(--grn-mid); color: white; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; width: 100%; font-weight: 700; font-size: 0.88rem; transition: var(--transition); }
.rur-don-card button:hover { background: var(--grn); }
@media (max-width: 1024px) {
.sidebar-page-layout { grid-template-columns: 240px 1fr; }
.escalation-steps { grid-template-columns: 1fr; }
.vol-strength-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.sidebar-page-layout { grid-template-columns: 1fr; }
.sticky-sidebar { position: static; padding: 0 0 24px; border-right: none; border-bottom: 2px solid var(--border-color); margin-bottom: 24px; }
.main-content { padding: 24px 0; }
.init-grid { grid-template-columns: 1fr; }
.officials-grid { grid-template-columns: 1fr; }
.vol-strength-grid { grid-template-columns: 1fr; }
.rur-don-grid { grid-template-columns: 1fr; }
}
/* ════ SKILL-STYLE HERO (shared by all pages) ════════════════════════════ */
.page-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.page-hero-bg {
position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.04) 0%, transparent 60%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.05) 100%);
z-index: 1;
}
.page-hero-inner {
position: relative; z-index: 2;
max-width: 1200px; margin: 0 auto;
padding: 120px 28px 80px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 60px;
align-items: center;
width: 100%;
}
.hero-tag-pill {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(245,166,35,0.2);
border: 1px solid rgba(245,166,35,0.5);
color: var(--amber, #f5a623);
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 7px 16px; border-radius: 50px;
margin-bottom: 22px;
animation: heroFadeUp 0.7s 0.1s ease both;
}
.hero-tag-pill .dot {
width: 6px; height: 6px;
background: var(--amber, #f5a623);
border-radius: 50%;
animation: heroPulse 2s infinite;
}
.page-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 5vw, 4.4rem);
font-weight: 900; color: white;
line-height: 1.06; margin-bottom: 20px;
animation: heroFadeUp 0.7s 0.25s ease both;
}
.page-hero h1 em { font-style: italic; color: var(--amber, #f5a623); }
.page-hero .hero-desc {
font-size: 1.1rem; color: rgba(255,255,255,0.82);
line-height: 1.78; max-width: 520px;
margin-bottom: 36px;
animation: heroFadeUp 0.7s 0.4s ease both;
}
.hero-actions {
display: flex; gap: 14px; flex-wrap: wrap;
animation: heroFadeUp 0.7s 0.55s ease both;
}
/* .btn-hero-primary {
display: inline-flex; align-items: center;
background: var(--amber, #f5a623); color: #1a1a1a;
padding: 14px 28px; border-radius: 8px;
font-weight: 700; font-size: 0.95rem;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(245,166,35,0.4); }
.btn-hero-outline {
display: inline-flex; align-items: center;
border: 2px solid rgba(255,255,255,0.5); color: white;
padding: 13px 28px; border-radius: 8px;
font-weight: 600; font-size: 0.95rem;
text-decoration: none; background: transparent;
transition: background 0.2s, border-color 0.2s;
}
.btn-hero-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); } */
/* stat cluster */
.hero-stat-cluster {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
animation: heroFadeUp 0.8s 0.3s ease both;
}
.hero-stat-box {
background: rgba(255,255,255,0.09);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px; padding: 26px 20px;
text-align: center;
transition: background 0.2s, transform 0.2s;
}
.hero-stat-box:hover { background: rgba(255,255,255,0.16); transform: translateY(-4px); }
.hero-stat-box.accent-box { background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.35); }
.hst-icon { font-size: 1.7rem; margin-bottom: 8px; }
.hst-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.8rem; color: var(--amber, #f5a623);
line-height: 1; margin-bottom: 4px;
}
.hero-stat-box.accent-box .hst-num { color: white; }
.hst-label {
font-size: 0.7rem; font-weight: 600;
color: rgba(255,255,255,0.62);
text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.35;
}
/* scroll cue */
.hero-scroll-cue {
position: absolute; bottom: 34px; left: 50%;
transform: translateX(-50%);
z-index: 10; display: flex; flex-direction: column;
align-items: center; gap: 6px;
color: rgba(255,255,255,0.45);
font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-scroll-line {
width: 1px; height: 42px;
background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
animation: heroScrollLine 2s ease-in-out infinite;
}
/* breadcrumb strip */
.breadcrumb-strip {
background: var(--bg-light, #f8f9fa);
padding: 12px 0;
border-bottom: 1px solid var(--border-color, #e9ecef);
}
.bc-list {
display: flex; align-items: center; gap: 6px;
font-size: 0.82rem; color: var(--text-light, #666);
font-weight: 500; list-style: none;
}
.bc-list a { text-decoration: none; }
.bc-list a:hover { text-decoration: underline; }
.bc-sep { opacity: 0.4; }
/* animations */
@keyframes heroFadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes heroScrollLine { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.4} }
/* responsive */
@media (max-width: 1024px) {
.page-hero-inner { grid-template-columns: 1fr; padding: 120px 28px 60px; }
.page-hero .hero-desc { max-width: 100%; }
}
@media (max-width: 768px) {
.page-hero h1 { font-size: 2.6rem; }
.hero-stat-cluster { grid-template-columns: 1fr 1fr; }
.hero-actions { flex-direction: column; }
.btn-hero-primary, .btn-hero-outline { width: 100%; justify-content: center; }
}
/* ── TREE PLANTATION ── */
.timeline-section { padding: 80px 0; background: var(--cream); }
.timeline-header { text-align: center; max-width: 700px; margin: 0 auto 4rem; }
.timeline-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 0;
position: relative;
}
.timeline-sidebar {
padding-right: 48px;
position: sticky;
top: 100px;
align-self: start;
border-right: 2px solid var(--border-color);
}
.timeline-sidebar h3 {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-light);
margin-bottom: 20px;
}
.tl-year {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 28px;
}
.tl-year-label {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 900;
color: var(--green-deep);
line-height: 1;
}
.tl-year-count {
font-size: 0.78rem;
color: var(--text-light);
font-weight: 500;
}
.tl-year-bar {
width: 32px;
height: 3px;
background: var(--green-light);
border-radius: 2px;
margin-top: 4px;
}
.timeline-feed { padding-left: 48px; }
.tl-entry {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
margin-bottom: 2rem;
position: relative;
}
.tl-entry::before {
content: '';
position: absolute;
left: -50px;
top: 14px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--green-mid);
border: 2px solid var(--cream);
box-shadow: 0 0 0 2px var(--green-mid);
}
.tl-date {
font-size: 0.72rem;
font-weight: 700;
color: var(--green-mid);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1.4;
padding-top: 2px;
}
.tl-card {
background: var(--bg-white);
border-radius: 14px;
padding: 22px 24px;
border: 1px solid var(--border-color);
transition: var(--transition);
}
.tl-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.tl-card-top {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 12px;
}
.tl-emoji {
width: 40px;
height: 40px;
background: var(--green-pale);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.tl-card h3 {
font-size: 0.98rem;
font-weight: 700;
color: var(--charcoal);
margin: 0;
line-height: 1.4;
}
.tl-card p {
font-size: 0.88rem;
color: var(--text-medium);
line-height: 1.7;
margin: 0;
}
.tl-card.featured {
background: linear-gradient(135deg, var(--green-deep), #1A7A4E);
border-color: transparent;
}
.tl-card.featured h3 { color: #fff; }
.tl-card.featured p { color: rgba(255,255,255,0.78); }
.tl-card.featured .tl-emoji { background: rgba(255,255,255,0.15); }
.tl-year-divider {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 16px;
margin: 8px 0 24px;
}
.tl-year-divider span {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--charcoal);
white-space: nowrap;
}
.tl-year-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-color);
}
/* ── Mission Banner ── */
.mission-banner {
background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 50%, #40916c 100%);
color: white;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.mission-banner::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);
}
.mission-banner-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 160px 1fr;
gap: 3rem;
align-items: center;
}
.mission-banner-icon {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 20px;
padding: 2rem;
text-align: center;
}
.mission-banner-icon .big-emoji { font-size: 3.5rem; }
.mission-banner-icon .year-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; margin-top: 8px; }
.mission-banner-tag {
display: inline-block;
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 30px;
padding: 5px 18px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 1rem;
}
.mission-banner h2 { font-size: 1.9rem; font-weight: 700; margin-bottom: 1.1rem; line-height: 1.3; }
.mission-banner p { opacity: 0.9; line-height: 1.8; margin-bottom: 1rem; font-size: 1rem; }
.mission-banner .highlight-quote {
background: rgba(255,255,255,0.12);
border-left: 4px solid rgba(255,255,255,0.6);
border-radius: 0 12px 12px 0;
padding: 1rem 1.5rem;
}
.mission-banner .highlight-quote p { margin: 0; font-style: italic; font-size: 1.05rem; opacity: 0.95; }
/* ── Species grid ── */
.species-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: 2.5rem;
}
/* ── Donation grid ── */
.green-donation-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.green-don-card {
background: white;
border-radius: 16px;
padding: 1.8rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
border-top: 5px solid var(--green-mid);
cursor: pointer;
transition: var(--transition);
}
.green-don-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.green-don-card .don-emoji { font-size: 2.2rem; margin-bottom: 0.6rem; }
.green-don-card .don-amount { font-size: 2.2rem; font-weight: 800; color: var(--green-deep); margin-bottom: 0.5rem; line-height: 1; }
.green-don-card h4 { color: #1b4332; margin-bottom: 0.7rem; font-size: 1rem; }
.green-don-card p { color: #666; line-height: 1.6; font-size: 0.88rem; margin-bottom: 1.2rem; }
.green-don-card button { background: var(--green-deep); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; width: 100%; font-weight: 700; font-size: 0.9rem; transition: var(--transition); }
.green-don-card button:hover { background: var(--green-mid); }
.green-don-custom { border-top-color: #4a90e2; }
.green-don-custom .don-amount { color: #4a90e2; }
.green-don-custom button { background: #4a90e2; }
@media (max-width: 900px) {
.timeline-layout { grid-template-columns: 1fr; }
.timeline-sidebar { position: static; border-right: none; padding-right: 0; border-bottom: 2px solid var(--border-color); padding-bottom: 24px; margin-bottom: 24px; display: flex; gap: 24px; flex-wrap: wrap; }
.timeline-feed { padding-left: 28px; }
.tl-entry::before { left: -30px; }
.mission-banner-inner { grid-template-columns: 1fr; }
.green-donation-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.tl-entry { grid-template-columns: 1fr; }
.tl-date { font-size: 0.68rem; }
.green-donation-grid { grid-template-columns: 1fr; }
.species-grid { grid-template-columns: 1fr; }
}
/* ════ SKILL-STYLE HERO (shared by all pages) ════════════════════════════ */
.page-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.page-hero-bg {
position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.04) 0%, transparent 60%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.05) 100%);
z-index: 1;
}
.page-hero-inner {
position: relative; z-index: 2;
max-width: 1200px; margin: 0 auto;
padding: 120px 28px 80px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 60px;
align-items: center;
width: 100%;
}
.hero-tag-pill {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(245,166,35,0.2);
border: 1px solid rgba(245,166,35,0.5);
color: var(--amber, #f5a623);
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 7px 16px; border-radius: 50px;
margin-bottom: 22px;
animation: heroFadeUp 0.7s 0.1s ease both;
}
.hero-tag-pill .dot {
width: 6px; height: 6px;
background: var(--amber, #f5a623);
border-radius: 50%;
animation: heroPulse 2s infinite;
}
.page-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 5vw, 4.4rem);
font-weight: 900; color: white;
line-height: 1.06; margin-bottom: 20px;
animation: heroFadeUp 0.7s 0.25s ease both;
}
.page-hero h1 em { font-style: italic; color: var(--amber, #f5a623); }
.page-hero .hero-desc {
font-size: 1.1rem; color: rgba(255,255,255,0.82);
line-height: 1.78; max-width: 520px;
margin-bottom: 36px;
animation: heroFadeUp 0.7s 0.4s ease both;
}
.hero-actions {
display: flex; gap: 14px; flex-wrap: wrap;
animation: heroFadeUp 0.7s 0.55s ease both;
}
/* .btn-hero-primary {
display: inline-flex; align-items: center;
background: var(--amber, #f5a623); color: #1a1a1a;
padding: 14px 28px; border-radius: 8px;
font-weight: 700; font-size: 0.95rem;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(245,166,35,0.4); }
.btn-hero-outline {
display: inline-flex; align-items: center;
border: 2px solid rgba(255,255,255,0.5); color: white;
padding: 13px 28px; border-radius: 8px;
font-weight: 600; font-size: 0.95rem;
text-decoration: none; background: transparent;
transition: background 0.2s, border-color 0.2s;
}
.btn-hero-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); } */
/* stat cluster */
.hero-stat-cluster {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
animation: heroFadeUp 0.8s 0.3s ease both;
}
.hero-stat-box {
background: rgba(255,255,255,0.09);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px; padding: 26px 20px;
text-align: center;
transition: background 0.2s, transform 0.2s;
}
.hero-stat-box:hover { background: rgba(255,255,255,0.16); transform: translateY(-4px); }
.hero-stat-box.accent-box { background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.35); }
.hst-icon { font-size: 1.7rem; margin-bottom: 8px; }
.hst-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.8rem; color: var(--amber, #f5a623);
line-height: 1; margin-bottom: 4px;
}
.hero-stat-box.accent-box .hst-num { color: white; }
.hst-label {
font-size: 0.7rem; font-weight: 600;
color: rgba(255,255,255,0.62);
text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.35;
}
/* scroll cue */
.hero-scroll-cue {
position: absolute; bottom: 34px; left: 50%;
transform: translateX(-50%);
z-index: 10; display: flex; flex-direction: column;
align-items: center; gap: 6px;
color: rgba(255,255,255,0.45);
font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-scroll-line {
width: 1px; height: 42px;
background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
animation: heroScrollLine 2s ease-in-out infinite;
}
/* breadcrumb strip */
.breadcrumb-strip {
background: var(--bg-light, #f8f9fa);
padding: 12px 0;
border-bottom: 1px solid var(--border-color, #e9ecef);
}
.bc-list {
display: flex; align-items: center; gap: 6px;
font-size: 0.82rem; color: var(--text-light, #666);
font-weight: 500; list-style: none;
}
.bc-list a { text-decoration: none; }
.bc-list a:hover { text-decoration: underline; }
.bc-sep { opacity: 0.4; }
/* animations */
@keyframes heroFadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes heroScrollLine { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.4} }
/* responsive */
@media (max-width: 1024px) {
.page-hero-inner { grid-template-columns: 1fr; padding: 120px 28px 60px; }
.page-hero .hero-desc { max-width: 100%; }
}
@media (max-width: 768px) {
.page-hero h1 { font-size: 2.6rem; }
.hero-stat-cluster { grid-template-columns: 1fr 1fr; }
.hero-actions { flex-direction: column; }
.btn-hero-primary, .btn-hero-outline { width: 100%; justify-content: center; }
}
/* ═══════════════════════════════════════════════
Disaster Relief PAGE — CUSTOM STYLES
═══════════════════════════════════════════════ */
/* Override accent for this page */
.dis-accent { color: var(--red-mid); }
.dis-tag {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--red-mid);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 14px;
}
.dis-tag::before { content: ''; width: 24px; height: 2px; background: var(--red-light); border-radius: 2px; }
/* Bento grid */
.bento-section { padding: 80px 0; background: var(--cream); }
.bento-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px;
}
.bento-card {
background: var(--bg-white);
border-radius: 20px;
padding: 32px 28px;
border: 1px solid rgba(0,0,0,0.04);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.bento-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(to right, var(--red-light), var(--red-mid));
transform: scaleX(0);
transition: transform 0.4s;
transform-origin: left;
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-deep); }
.bento-card:hover::after { transform: scaleX(1); }
.bento-card.wide { grid-column: span 2; }
.bento-card.dark {
background: var(--red-deep);
border-color: var(--red-deep);
color: #fff;
}
.bento-card.dark h3 { color: #fff; }
.bento-card.dark p { color: rgba(255,255,255,0.72); }
.bento-card.dark .bento-icon { background: rgba(255,255,255,0.12); }
.bento-icon {
width: 52px; height: 52px;
background: #fee2e2;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
margin-bottom: 18px;
transition: var(--transition);
}
.bento-card:hover .bento-icon { background: var(--red-light); transform: rotate(-5deg) scale(1.08); }
.bento-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem; font-weight: 700;
color: var(--charcoal); margin-bottom: 10px;
}
.bento-card p { font-size: 0.88rem; color: var(--slate); line-height: 1.7; margin: 0; }
.bento-highlights { margin-top: 14px; list-style: none; }
.bento-highlights li {
font-size: 0.83rem; color: var(--slate);
padding: 4px 0;
display: flex; align-items: flex-start; gap: 8px;
}
.bento-highlights li::before { content: '✓'; color: var(--red-mid); font-weight: 700; flex-shrink: 0; }
.bento-card.dark .bento-highlights li { color: rgba(255,255,255,0.7); }
.bento-card.dark .bento-highlights li::before { color: #fca5a5; }
/* Volunteer power section */
.volunteer-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 3rem;
}
.vol-card {
background: white;
border-radius: 16px;
padding: 1.8rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
border-left: 5px solid var(--red-light);
}
.vol-card:nth-child(2) { border-left-color: var(--red-mid); }
.vol-card:nth-child(3) { border-left-color: #dc2626; }
.vol-card:nth-child(4) { border-left-color: #b91c1c; }
.vol-card:nth-child(5) { border-left-color: #991b1b; }
.vol-card:nth-child(6) { border-left-color: var(--red-deep); }
.vol-card .vol-emoji { font-size: 2rem; margin-bottom: 0.8rem; }
.vol-card h3 { color: var(--red-deep); font-size: 1rem; margin-bottom: 0.6rem; }
.vol-card p { color: #555; line-height: 1.7; font-size: 0.88rem; margin: 0; }
/* Preparedness values */
.prep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }
.prep-card {
background: var(--bg-white);
padding: 1.5rem;
border-radius: 12px;
border-left: 4px solid var(--red-light);
}
.prep-card h3 { color: var(--red-deep); font-size: 1.05rem; margin-bottom: 0.5rem; }
.prep-card p { color: var(--text-medium); line-height: 1.7; font-size: 0.92rem; margin: 0; }
/* Donation cards with red theme */
.dis-don-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
}
.dis-don-card {
background: white;
border-radius: 14px;
padding: 1.8rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
border-top: 5px solid var(--red-light);
text-align: center;
cursor: pointer;
transition: var(--transition);
}
.dis-don-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.dis-don-card .don-emoji { font-size: 2rem; margin-bottom: 0.5rem; }
.dis-don-card .don-amount { font-size: 2.2rem; font-weight: 800; color: var(--red-mid); margin-bottom: 0.5rem; line-height: 1; }
.dis-don-card h4 { color: var(--red-deep); margin-bottom: 0.7rem; font-size: 0.98rem; }
.dis-don-card p { color: #666; line-height: 1.6; font-size: 0.88rem; margin-bottom: 1.2rem; }
.dis-don-card button { background: var(--red-mid); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; width: 100%; font-weight: 700; font-size: 0.9rem; transition: var(--transition); }
.dis-don-card button:hover { background: var(--red-deep); }
/* Quote banner */
.quote-banner {
background: linear-gradient(135deg, var(--red-deep), var(--red-mid));
border-radius: 20px;
padding: 2.5rem;
text-align: center;
color: white;
margin-top: 3rem;
}
.quote-banner .q-mark { font-size: 2.5rem; font-style: italic; opacity: 0.4; line-height: 1; margin-bottom: 0.5rem; }
.quote-banner p { font-size: 1.1rem; font-style: italic; line-height: 1.7; max-width: 700px; margin: 0 auto 1rem; opacity: 0.95; }
.quote-banner .q-attr { font-size: 0.82rem; opacity: 0.7; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 1024px) {
.bento-grid { grid-template-columns: repeat(2, 1fr); }
.bento-card.wide { grid-column: span 1; }
.volunteer-bento { grid-template-columns: repeat(2, 1fr); }
.dis-don-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.bento-grid { grid-template-columns: 1fr; }
.volunteer-bento { grid-template-columns: 1fr; }
.dis-don-grid { grid-template-columns: 1fr; }
.prep-grid { grid-template-columns: 1fr; }
}
/* ════ SKILL-STYLE HERO (shared by all pages) ════════════════════════════ */
.page-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.page-hero-bg {
position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.04) 0%, transparent 60%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.05) 100%);
z-index: 1;
}
.page-hero-inner {
position: relative; z-index: 2;
max-width: 1200px; margin: 0 auto;
padding: 120px 28px 80px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 60px;
align-items: center;
width: 100%;
}
.hero-tag-pill {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(245,166,35,0.2);
border: 1px solid rgba(245,166,35,0.5);
color: var(--amber, #f5a623);
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 7px 16px; border-radius: 50px;
margin-bottom: 22px;
animation: heroFadeUp 0.7s 0.1s ease both;
}
.hero-tag-pill .dot {
width: 6px; height: 6px;
background: var(--amber, #f5a623);
border-radius: 50%;
animation: heroPulse 2s infinite;
}
.page-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 5vw, 4.4rem);
font-weight: 900; color: white;
line-height: 1.06; margin-bottom: 20px;
animation: heroFadeUp 0.7s 0.25s ease both;
}
.page-hero h1 em { font-style: italic; color: var(--amber, #f5a623); }
.page-hero .hero-desc {
font-size: 1.1rem; color: rgba(255,255,255,0.82);
line-height: 1.78; max-width: 520px;
margin-bottom: 36px;
animation: heroFadeUp 0.7s 0.4s ease both;
}
.hero-actions {
display: flex; gap: 14px; flex-wrap: wrap;
animation: heroFadeUp 0.7s 0.55s ease both;
}
/* .btn-hero-primary {
display: inline-flex; align-items: center;
background: var(--amber, #f5a623); color: #1a1a1a;
padding: 14px 28px; border-radius: 8px;
font-weight: 700; font-size: 0.95rem;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(245,166,35,0.4); }
.btn-hero-outline {
display: inline-flex; align-items: center;
border: 2px solid rgba(255,255,255,0.5); color: white;
padding: 13px 28px; border-radius: 8px;
font-weight: 600; font-size: 0.95rem;
text-decoration: none; background: transparent;
transition: background 0.2s, border-color 0.2s;
}
.btn-hero-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); } */
/* stat cluster */
.hero-stat-cluster {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
animation: heroFadeUp 0.8s 0.3s ease both;
}
.hero-stat-box {
background: rgba(255,255,255,0.09);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px; padding: 26px 20px;
text-align: center;
transition: background 0.2s, transform 0.2s;
}
.hero-stat-box:hover { background: rgba(255,255,255,0.16); transform: translateY(-4px); }
.hero-stat-box.accent-box { background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.35); }
.hst-icon { font-size: 1.7rem; margin-bottom: 8px; }
.hst-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.8rem; color: var(--amber, #f5a623);
line-height: 1; margin-bottom: 4px;
}
.hero-stat-box.accent-box .hst-num { color: white; }
.hst-label {
font-size: 0.7rem; font-weight: 600;
color: rgba(255,255,255,0.62);
text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.35;
}
/* scroll cue */
.hero-scroll-cue {
position: absolute; bottom: 34px; left: 50%;
transform: translateX(-50%);
z-index: 10; display: flex; flex-direction: column;
align-items: center; gap: 6px;
color: rgba(255,255,255,0.45);
font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-scroll-line {
width: 1px; height: 42px;
background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
animation: heroScrollLine 2s ease-in-out infinite;
}
/* breadcrumb strip */
.breadcrumb-strip {
background: var(--bg-light, #f8f9fa);
padding: 12px 0;
border-bottom: 1px solid var(--border-color, #e9ecef);
}
.bc-list {
display: flex; align-items: center; gap: 6px;
font-size: 0.82rem; color: var(--text-light, #666);
font-weight: 500; list-style: none;
}
.bc-list a { text-decoration: none; }
.bc-list a:hover { text-decoration: underline; }
.bc-sep { opacity: 0.4; }
/* animations */
@keyframes heroFadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes heroScrollLine { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.4} }
/* responsive */
@media (max-width: 1024px) {
.page-hero-inner { grid-template-columns: 1fr; padding: 120px 28px 60px; }
.page-hero .hero-desc { max-width: 100%; }
}
@media (max-width: 768px) {
.page-hero h1 { font-size: 2.6rem; }
.hero-stat-cluster { grid-template-columns: 1fr 1fr; }
.hero-actions { flex-direction: column; }
.btn-hero-primary, .btn-hero-outline { width: 100%; justify-content: center; }
}
/* ═══════════════════════════════════════════════
CELEBRATION PAGE — CUSTOM STYLES
═══════════════════════════════════════════════ */
.cel-tag {
display: inline-block;
background: #fef3c7; border: 1px solid #fcd34d;
border-radius: 30px; padding: 5px 18px;
font-size: 0.72rem; font-weight: 700; letter-spacing: 2px;
text-transform: uppercase; color: #78350f; margin-bottom: 0.9rem;
}
/* ── MAGAZINE HERO SPLIT ── */
.mag-hero {
padding: 100px 0 60px;
background: var(--amber-pale);
position: relative;
overflow: hidden;
}
.mag-hero::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 40%;
height: 100%;
background: linear-gradient(160deg, #fcd34d22, #f97316 11%);
clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
z-index: 0;
}
.mag-hero-inner {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1fr 420px;
gap: 3rem;
align-items: center;
}
.mag-hero-text .cel-tag { background: #78350f; color: white; border-color: #78350f; }
.mag-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.4rem, 4.5vw, 3.8rem);
font-weight: 900; color: #78350f;
line-height: 1.1; margin-bottom: 1.2rem;
}
.mag-hero h1 em { font-style: italic; color: var(--amber-light); }
.mag-hero p.lead { font-size: 1.05rem; color: #555; line-height: 1.8; max-width: 480px; margin-bottom: 2rem; }
.mag-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
/* Stats card floating */
.mag-stats-card {
background: #78350f;
border-radius: 20px;
padding: 2rem;
color: white;
box-shadow: 0 16px 40px rgba(120,53,15,0.3);
}
.mag-stat-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 1.2rem;
}
.mag-stat-item { text-align: center; }
.mag-stat-num { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 900; color: #fde68a; line-height: 1; }
.mag-stat-label { font-size: 0.78rem; color: rgba(255,255,255,0.75); margin-top: 4px; font-weight: 500; }
.mag-stat-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 1rem 0; }
.mag-cta-mini { text-align: center; margin-top: 1rem; }
.mag-cta-mini a {
display: inline-block;
background: #fde68a; color: #78350f;
padding: 10px 24px; border-radius: 30px;
font-weight: 700; text-decoration: none; font-size: 0.9rem;
}
/* ── OVERVIEW SPLIT ── */
.overview-split {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
align-items: center;
padding: 80px 0;
}
.occ-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.occ-tile {
background: #fffbeb; border: 1px solid #fde68a;
border-radius: 14px; padding: 1.4rem; text-align: center;
transition: var(--transition);
}
.occ-tile:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(180,83,9,.1); }
.occ-tile .oi { font-size: 1.9rem; margin-bottom: 0.5rem; }
.occ-tile p { font-weight: 700; color: #78350f; font-size: 0.9rem; margin: 0; }
/* ── CELEBRATION TYPES — magazine card row ── */
.ctype-section { padding: 80px 0; background: var(--amber-pale); }
.ctype-header { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-bottom: 3rem; }
.ctype-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
}
.ctype-card {
background: white; border-left: 4px solid var(--amber-light);
border-radius: 14px; padding: 1.5rem;
box-shadow: 0 3px 14px rgba(0,0,0,.06);
transition: var(--transition);
}
.ctype-card:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.1); }
.ctype-card .ci { font-size: 1.9rem; margin-bottom: .6rem; }
.ctype-card h3 { font-size: .97rem; font-weight: 700; color: #78350f; margin: 0 0 .45rem; }
.ctype-card p { font-size: .88rem; color: #555; line-height: 1.7; margin: 0 0 .7rem; }
.ctype-card ul { margin: 0; padding-left: 1rem; }
.ctype-card ul li { font-size: .83rem; color: #666; line-height: 1.85; }
/* Steps — editorial vertical */
.steps-col { display: flex; flex-direction: column; gap: 1.2rem; }
.step-row { display: flex; gap: 1.1rem; align-items: flex-start; }
.step-n {
flex-shrink: 0; width: 42px; height: 42px;
background: linear-gradient(135deg, #b45309, #d97706);
border-radius: 12px; display: flex; align-items: center;
justify-content: center; font-size: 1.1rem; font-weight: 800; color: #fff;
}
.step-b h3 { font-size: 1rem; font-weight: 700; color: #78350f; margin: 0 0 .3rem; }
.step-b p { font-size: .88rem; color: #555; line-height: 1.75; margin: 0; }
/* ── CONTRIBUTIONS — masonry-like asymmetric grid ── */
.contrib-section { padding: 80px 0; background: white; }
.contrib-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 1.4rem;
margin-top: 2.5rem;
}
.contrib-card {
background: #fffbeb;
border-radius: 18px;
padding: 1.8rem 1.6rem;
box-shadow: 0 4px 20px rgba(0,0,0,.06);
border-top: 4px solid var(--amber-light);
position: relative;
transition: var(--transition);
}
.contrib-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contrib-card.wide { grid-column: span 2; }
.contrib-card.featured { background: linear-gradient(135deg, #78350f, #b45309); border-top-color: #fde68a; }
.contrib-card.featured h3 { color: #fde68a; }
.contrib-card.featured p { color: rgba(255,255,255,0.82); }
.contrib-card.featured .contrib-badge { background: rgba(255,255,255,0.2); color: white; }
.contrib-icon { font-size: 2rem; margin-bottom: 0.8rem; }
.contrib-card h3 { font-size: 1rem; font-weight: 700; color: #78350f; margin-bottom: 0.4rem; }
.contrib-card h3 span { display: block; font-size: 0.75rem; font-weight: 500; color: #9a6e3a; opacity: 0.8; margin-top: 2px; }
.contrib-card.featured h3 span { color: rgba(255,255,255,0.6); }
.contrib-card p { font-size: .88rem; color: #555; line-height: 1.7; margin: 0; }
.contrib-badge {
position: absolute; top: 14px; right: 14px;
background: #fef3c7; color: #78350f;
font-size: 0.68rem; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
padding: 3px 10px; border-radius: 20px;
}
.note-bar {
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 14px;
padding: 1.2rem 1.6rem;
margin-top: 2rem;
display: flex; align-items: flex-start; gap: 1rem;
font-size: 0.88rem; color: #555; line-height: 1.7;
}
.note-bar .ni { font-size: 1.4rem; flex-shrink: 0; }
/* ── PACKAGES — 3-col cards ── */
.pkg-section { padding: 80px 0; background: var(--amber-pale); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.5rem; }
.pkg {
background: white; border-radius: 20px; padding: 2rem 1.8rem;
box-shadow: 0 4px 24px rgba(0,0,0,.08);
display: flex; flex-direction: column; gap: .9rem;
border: 2px solid #fde68a;
transition: var(--transition);
}
.pkg:hover { border-color: #d97706; box-shadow: 0 10px 36px rgba(180,83,9,.13); }
.pkg--hot { border-color: #b45309; background: linear-gradient(160deg, #fffbeb 0%, #fff 100%); }
.pkg-ic { font-size: 2.2rem; }
.pkg-badge { display: inline-block; background: #fef3c7; color: #78350f; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; width: fit-content; }
.pkg-badge--hot { background: #b45309; color: #fff; }
.pkg h3 { font-size: 1.15rem; font-weight: 700; color: #78350f; margin: 0; }
.pkg > p { font-size: .9rem; color: #555; line-height: 1.7; margin: 0; }
.pkg-price { font-size: 1.35rem; font-weight: 800; color: #b45309; }
.pkg-price span { font-size: .83rem; font-weight: 500; color: #888; }
.pkg-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pkg-feats li { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; color: #444; }
.pkg-feats li::before { content: "✓"; color: #d97706; font-weight: 800; flex-shrink: 0; }
.pkg-cta { margin-top: auto; }
.btn-full { width: 100%; text-align: center; display: block; box-sizing: border-box; }
/* ── DONATION ── */
.cel-don-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
margin-top: 2.5rem;
}
.cel-don-card {
background: white; border-radius: 16px; padding: 1.8rem;
text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.06);
border-top: 5px solid var(--amber-light); cursor: pointer; transition: var(--transition);
}
.cel-don-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.cel-don-card .don-icon { width: 55px; height: 55px; background: #fff7ed; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 0.7rem; }
.cel-don-card .don-amount { font-size: 2.1rem; font-weight: 800; color: var(--amber-cel); margin-bottom: 0.5rem; line-height: 1; }
.cel-don-card h4 { color: #7c2d12; margin-bottom: 0.6rem; font-size: 0.98rem; }
.cel-don-card p { color: #666; line-height: 1.55; font-size: 0.86rem; margin-bottom: 1.1rem; }
.cel-don-card button { background: var(--amber-cel); color: white; border: none; padding: 10px 18px; border-radius: 8px; cursor: pointer; width: 100%; font-weight: 700; font-size: 0.9rem; transition: var(--transition); }
.cel-don-card button:hover { background: #78350f; }
/* ── FAQ ── */
.faq-list { max-width: 820px; margin: 2rem auto 0; display: flex; flex-direction: column; gap: .9rem; }
.faq-item { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.06); overflow: hidden; }
.faq-item summary { padding: 1.3rem 1.6rem; font-weight: 700; color: #78350f; font-size: .95rem; list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { font-size: 1.25rem; color: #d97706; flex-shrink: 0; transition: transform .2s; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-body { padding: 0 1.6rem 1.3rem; color: #555; line-height: 1.8; font-size: .92rem; }
@media (max-width: 1024px) {
.mag-hero-inner { grid-template-columns: 1fr; }
.mag-hero::after { display: none; }
.mag-stats-card { max-width: 400px; }
.overview-split { grid-template-columns: 1fr; gap: 2.5rem; }
.ctype-header { grid-template-columns: 1fr; }
.contrib-layout { grid-template-columns: repeat(2, 1fr); }
.contrib-card.wide { grid-column: span 1; }
.pkg-grid { grid-template-columns: 1fr; }
.cel-don-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
.ctype-grid { grid-template-columns: 1fr; }
.occ-tiles { grid-template-columns: 1fr 1fr; }
.contrib-layout { grid-template-columns: 1fr; }
.cel-don-grid { grid-template-columns: 1fr; }
}
/* ════ SKILL-STYLE HERO (shared by all pages) ════════════════════════════ */
.page-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.page-hero-bg {
position: absolute; inset: 0;
background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.04) 0%, transparent 60%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.05) 100%);
z-index: 1;
}
.page-hero-inner {
position: relative; z-index: 2;
max-width: 1200px; margin: 0 auto;
padding: 120px 28px 80px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 60px;
align-items: center;
width: 100%;
}
.hero-tag-pill {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(245,166,35,0.2);
border: 1px solid rgba(245,166,35,0.5);
color: var(--amber, #f5a623);
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 7px 16px; border-radius: 50px;
margin-bottom: 22px;
animation: heroFadeUp 0.7s 0.1s ease both;
}
.hero-tag-pill .dot {
width: 6px; height: 6px;
background: var(--amber, #f5a623);
border-radius: 50%;
animation: heroPulse 2s infinite;
}
.page-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 5vw, 4.4rem);
font-weight: 900; color: white;
line-height: 1.06; margin-bottom: 20px;
animation: heroFadeUp 0.7s 0.25s ease both;
}
.page-hero h1 em { font-style: italic; color: var(--amber, #f5a623); }
.page-hero .hero-desc {
font-size: 1.1rem; color: rgba(255,255,255,0.82);
line-height: 1.78; max-width: 520px;
margin-bottom: 36px;
animation: heroFadeUp 0.7s 0.4s ease both;
}
.hero-actions {
display: flex; gap: 14px; flex-wrap: wrap;
animation: heroFadeUp 0.7s 0.55s ease both;
}
/* .btn-hero-primary {
display: inline-flex; align-items: center;
background: var(--amber, #f5a623); color: #1a1a1a;
padding: 14px 28px; border-radius: 8px;
font-weight: 700; font-size: 0.95rem;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(245,166,35,0.4); }
.btn-hero-outline {
display: inline-flex; align-items: center;
border: 2px solid rgba(255,255,255,0.5); color: white;
padding: 13px 28px; border-radius: 8px;
font-weight: 600; font-size: 0.95rem;
text-decoration: none; background: transparent;
transition: background 0.2s, border-color 0.2s;
}
.btn-hero-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.8); } */
.hero-stat-cluster {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
animation: heroFadeUp 0.8s 0.3s ease both;
}
.hero-stat-box {
background: rgba(255,255,255,0.09);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px; padding: 26px 20px;
text-align: center;
transition: background 0.2s, transform 0.2s;
}
.hero-stat-box:hover { background: rgba(255,255,255,0.16); transform: translateY(-4px); }
.hero-stat-box.accent-box { background: rgba(245,166,35,0.18); border-color: rgba(245,166,35,0.35); }
.hst-icon { font-size: 1.7rem; margin-bottom: 8px; }
.hst-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.8rem; color: var(--amber, #f5a623);
line-height: 1; margin-bottom: 4px;
}
.hero-stat-box.accent-box .hst-num { color: white; }
.hst-label {
font-size: 0.7rem; font-weight: 600;
color: rgba(255,255,255,0.62);
text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.35;
}
.hero-scroll-cue {
position: absolute; bottom: 34px; left: 50%;
transform: translateX(-50%);
z-index: 10; display: flex; flex-direction: column;
align-items: center; gap: 6px;
color: rgba(255,255,255,0.45);
font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-scroll-line {
width: 1px; height: 42px;
background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
animation: heroScrollLine 2s ease-in-out infinite;
}
.breadcrumb-strip {
background: var(--bg-light, #f8f9fa);
padding: 12px 0;
border-bottom: 1px solid var(--border-color, #e9ecef);
}
.bc-list {
display: flex; align-items: center; gap: 6px;
font-size: 0.82rem; color: var(--text-light, #666);
font-weight: 500; list-style: none;
}
.bc-list a { text-decoration: none; }
.bc-list a:hover { text-decoration: underline; }
.bc-sep { opacity: 0.4; }
@keyframes heroFadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes heroScrollLine { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.4} }
@media (max-width: 1024px) {
.page-hero-inner { grid-template-columns: 1fr; padding: 120px 28px 60px; }
.page-hero .hero-desc { max-width: 100%; }
}
@media (max-width: 768px) {
.page-hero h1 { font-size: 2.6rem; }
.hero-stat-cluster { grid-template-columns: 1fr 1fr; }
.hero-actions { flex-direction: column; }
.btn-hero-primary, .btn-hero-outline { width: 100%; justify-content: center; }
}
/* ═══════════════════════════════════════════════════════════
AMBASSADOR PAGE — UNIQUE STYLES
═══════════════════════════════════════════════════════════ */
/* ── HERO ────────────────────────────────────────────────── */
.amb-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #0f2b4a 100%);
}
.amb-hero-bg {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 75% 30%, rgba(99,102,241,0.12) 0%, transparent 55%),
radial-gradient(circle at 15% 70%, rgba(245,166,35,0.08) 0%, transparent 45%),
url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Floating decorative rings */
.amb-hero-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(99,102,241,0.18);
pointer-events: none;
animation: ringPulse 8s ease-in-out infinite;
}
.amb-hero-ring:nth-child(1) { width: 600px; height: 600px; top: -200px; right: -100px; animation-delay: 0s; }
.amb-hero-ring:nth-child(2) { width: 400px; height: 400px; top: -50px; right: 50px; border-color: rgba(245,166,35,0.12); animation-delay: 2s; }
.amb-hero-ring:nth-child(3) { width: 800px; height: 800px; bottom: -300px; left: -200px; border-color: rgba(99,102,241,0.07); animation-delay: 4s; }
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.04);opacity:0.6} }
.amb-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 65%, rgba(0,0,0,0) 100%);
z-index: 1;
}
.amb-hero-inner {
position: relative; z-index: 2;
max-width: 1200px; margin: 0 auto;
padding: 120px 28px 80px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
width: 100%;
}
.amb-hero-tag {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(99,102,241,0.2);
border: 1px solid rgba(99,102,241,0.45);
color: #a5b4fc;
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 7px 16px; border-radius: 50px;
margin-bottom: 22px;
animation: ambFadeUp 0.7s 0.1s ease both;
}
.amb-hero-tag .dot {
width: 6px; height: 6px;
background: #818cf8;
border-radius: 50%;
animation: ambPulse 2s infinite;
}
@keyframes ambPulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.amb-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.8rem, 5vw, 4.8rem);
font-weight: 900; color: white;
line-height: 1.04; margin-bottom: 22px;
animation: ambFadeUp 0.7s 0.25s ease both;
}
.amb-hero h1 em { font-style: italic; color: var(--amber, #f5a623); }
.amb-hero .hero-desc {
font-size: 1.1rem; color: rgba(255,255,255,0.78);
line-height: 1.8; max-width: 520px;
margin-bottom: 38px;
animation: ambFadeUp 0.7s 0.4s ease both;
}
.amb-hero-actions {
display: flex; gap: 14px; flex-wrap: wrap;
animation: ambFadeUp 0.7s 0.55s ease both;
}
.btn-amb-primary {
display: inline-flex; align-items: center; gap: 8px;
background: linear-gradient(135deg, #6366f1, #818cf8);
color: white; padding: 14px 30px; border-radius: 8px;
font-weight: 700; font-size: 0.95rem;
text-decoration: none;
box-shadow: 0 8px 24px rgba(99,102,241,0.35);
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-amb-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(99,102,241,0.5); }
.btn-amb-outline {
display: inline-flex; align-items: center; gap: 8px;
border: 2px solid rgba(255,255,255,0.4); color: white;
padding: 13px 28px; border-radius: 8px;
font-weight: 600; font-size: 0.95rem;
text-decoration: none; background: transparent;
transition: background 0.2s, border-color 0.2s;
}
.btn-amb-outline:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.75); }
/* Hero right – floating ambassador cards */
.amb-hero-right {
animation: ambFadeUp 0.8s 0.3s ease both;
display: flex;
flex-direction: column;
gap: 14px;
}
.amb-preview-card {
background: rgba(255,255,255,0.07);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px; padding: 20px 24px;
display: flex; align-items: center; gap: 16px;
transition: background 0.2s, transform 0.2s;
}
.amb-preview-card:hover { background: rgba(255,255,255,0.13); transform: translateX(-4px); }
.amb-preview-card.indigo-card { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.12); }
.amb-prev-avatar {
width: 52px; height: 52px; border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #a78bfa);
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; flex-shrink: 0;
box-shadow: 0 4px 16px rgba(99,102,241,0.35);
}
.amb-prev-avatar.gold { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 4px 16px rgba(245,159,11,0.35); }
.amb-prev-avatar.teal { background: linear-gradient(135deg, #14b8a6, #2dd4bf); box-shadow: 0 4px 16px rgba(20,184,166,0.35); }
.amb-prev-name { font-weight: 700; color: white; font-size: 0.95rem; margin-bottom: 2px; }
.amb-prev-role { font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.amb-prev-badge {
margin-left: auto; flex-shrink: 0;
background: rgba(245,166,35,0.2);
border: 1px solid rgba(245,166,35,0.4);
color: #fbbf24; font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 4px 12px; border-radius: 50px;
}
.amb-hero-stat-row {
display: flex; gap: 22px; margin-top: 8px;
}
.amb-hst {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px; padding: 18px 20px;
text-align: center; flex: 1;
}
.amb-hst-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.4rem; color: var(--amber, #f5a623); line-height: 1;
}
.amb-hst-label {
font-size: 0.68rem; font-weight: 600;
color: rgba(255,255,255,0.5); text-transform: uppercase;
letter-spacing: 0.08em; margin-top: 4px;
}
/* Scroll cue */
.amb-scroll-cue {
position: absolute; bottom: 34px; left: 50%;
transform: translateX(-50%); z-index: 10;
display: flex; flex-direction: column; align-items: center; gap: 6px;
color: rgba(255,255,255,0.4); font-size: 0.68rem;
letter-spacing: 0.12em; text-transform: uppercase;
}
.amb-scroll-line {
width: 1px; height: 42px;
background: linear-gradient(to bottom, rgba(255,255,255,0.45), transparent);
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.4} }
@keyframes ambFadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb-strip {
background: var(--bg-light, #f8f9fa);
padding: 12px 0;
border-bottom: 1px solid var(--border-color, #e9ecef);
}
.bc-list {
display: flex; align-items: center; gap: 6px;
font-size: 0.82rem; color: var(--text-light, #666);
font-weight: 500; list-style: none;
}
.bc-list a { text-decoration: none; color: #6366f1; }
.bc-list a:hover { text-decoration: underline; }
.bc-sep { opacity: 0.4; }
/* ── WHAT IS AN AMBASSADOR ───────────────────────────────── */
.about-amb-section {
padding: 90px 0;
background: var(--bg-white, #fff);
}
.about-amb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.about-amb-sticky { position: sticky; top: 110px; }
.amb-visual-block {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
border-radius: 28px;
display: flex; align-items: center; justify-content: center;
font-size: 5rem;
box-shadow: 0 24px 70px rgba(99,102,241,0.25);
position: relative;
overflow: hidden;
}
.amb-visual-block::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 30% 40%, rgba(165,180,252,0.15) 0%, transparent 60%);
}
.amb-vis-float-1 {
position: absolute; top: -16px; right: -16px;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #1a1a1a; border-radius: 14px;
padding: 16px 22px; box-shadow: 0 12px 32px rgba(245,159,11,0.4);
text-align: center;
}
.amb-vis-float-1 .big { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 900; line-height: 1; }
.amb-vis-float-1 .small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 3px; }
.amb-vis-float-2 {
position: absolute; bottom: -14px; left: -14px;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 14px; padding: 14px 18px;
color: white; font-size: 0.85rem; font-weight: 600;
}
.about-amb-text .story-lede {
font-size: 1.18rem; color: var(--charcoal, #333);
font-weight: 500; line-height: 1.78;
border-left: 4px solid #818cf8;
padding-left: 20px; margin-bottom: 24px;
}
.about-amb-text p { color: var(--text-medium, #555); line-height: 1.85; margin-bottom: 16px; }
/* ── AMBASSADOR TIERS ────────────────────────────────────── */
.tiers-section {
padding: 90px 0;
background: #0f172a;
color: white;
}
.tiers-header { text-align: center; margin-bottom: 56px; }
.tiers-header .section-tag { color: var(--amber, #f5a623); }
.tiers-header .section-title { color: white; }
.tiers-header .section-subtitle { color: rgba(255,255,255,0.55); }
.tiers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.tier-card {
border-radius: 22px;
padding: 38px 30px;
position: relative;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
transition: transform 0.25s, box-shadow 0.25s;
}
.tier-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.tier-card.tier-gold {
background: linear-gradient(145deg, rgba(245,159,11,0.12) 0%, rgba(251,191,36,0.06) 100%);
border-color: rgba(245,159,11,0.35);
}
.tier-card.tier-silver {
background: linear-gradient(145deg, rgba(148,163,184,0.1) 0%, rgba(100,116,139,0.05) 100%);
border-color: rgba(148,163,184,0.3);
}
.tier-card.tier-rising {
background: linear-gradient(145deg, rgba(99,102,241,0.12) 0%, rgba(129,140,248,0.06) 100%);
border-color: rgba(99,102,241,0.3);
}
.tier-bg-num {
position: absolute; top: 12px; right: 20px;
font-family: 'Bebas Neue', sans-serif;
font-size: 8rem; opacity: 0.04; line-height: 1; color: white;
pointer-events: none;
}
.tier-icon { font-size: 2.4rem; margin-bottom: 16px; }
.tier-badge {
display: inline-block;
font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 4px 14px; border-radius: 50px;
margin-bottom: 16px;
}
.tier-card.tier-gold .tier-badge { background: rgba(245,159,11,0.25); color: #fbbf24; border: 1px solid rgba(245,159,11,0.4); }
.tier-card.tier-silver .tier-badge { background: rgba(148,163,184,0.2); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.35); }
.tier-card.tier-rising .tier-badge { background: rgba(99,102,241,0.25); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.4); }
.tier-title { font-size: 1.4rem; font-weight: 700; color: white; margin-bottom: 10px; }
/* .tier-desc { font-size: 0.88rem; color: rgba(255,255,255,0.6); line-height: 1.75; margin-bottom: 20px; } */
.tier-perks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tier-perks li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 0.84rem; color: rgba(255,255,255,0.75); line-height: 1.5;
}
.tier-perks li::before {
content: '✦';
font-size: 0.65rem; margin-top: 3px; flex-shrink: 0;
}
.tier-card.tier-gold .tier-perks li::before { color: #fbbf24; }
.tier-card.tier-silver .tier-perks li::before { color: #94a3b8; }
.tier-card.tier-rising .tier-perks li::before { color: #818cf8; }
/* ── AMBASSADOR PORTFOLIO GRID ───────────────────────────── */
.portfolio-section {
padding: 90px 0;
background: var(--cream, #f9f6f0);
}
.portfolio-header { text-align: center; margin-bottom: 56px; }
/* Filter pills */
.filter-pills {
display: flex; justify-content: center;
gap: 10px; flex-wrap: wrap;
margin-bottom: 46px;
}
.filter-pill {
background: white;
border: 2px solid #e2e8f0;
color: #64748b;
font-weight: 600; font-size: 0.84rem;
padding: 8px 22px; border-radius: 50px;
cursor: pointer; transition: all 0.2s;
font-family: 'DM Sans', sans-serif;
}
.filter-pill:hover { border-color: #6366f1; color: #6366f1; }
.filter-pill.active { background: #6366f1; border-color: #6366f1; color: white; }
/* Portfolio masonry-style grid */
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.amb-card {
background: white;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.07);
transition: transform 0.25s, box-shadow 0.25s;
position: relative;
}
.amb-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,0.13); }
.amb-card.card-featured {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
}
.amb-card-img {
background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%);
min-height: 240px;
display: flex; align-items: center; justify-content: center;
font-size: 5rem; position: relative;
overflow: hidden;
}
.amb-card.card-featured .amb-card-img { min-height: 100%; }
.amb-card-img::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
}
/* Different gradient colours per card */
.amb-card:nth-child(1) .amb-card-img { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); }
.amb-card:nth-child(2) .amb-card-img { background: linear-gradient(135deg, #1a0533 0%, #6b21a8 100%); }
.amb-card:nth-child(3) .amb-card-img { background: linear-gradient(135deg, #0c2340 0%, #1d4ed8 100%); }
.amb-card:nth-child(4) .amb-card-img { background: linear-gradient(135deg, #0d3d30 0%, #059669 100%); }
.amb-card:nth-child(5) .amb-card-img { background: linear-gradient(135deg, #3d1515 0%, #b91c1c 100%); }
.amb-card:nth-child(6) .amb-card-img { background: linear-gradient(135deg, #1a1400 0%, #b45309 100%); }
.amb-card:nth-child(7) .amb-card-img { background: linear-gradient(135deg, #0c1a3d 0%, #1d4ed8 100%); }
.amb-card:nth-child(8) .amb-card-img { background: linear-gradient(135deg, #0f2b22 0%, #047857 100%); }
.amb-card-avatar {
width: 80px; height: 80px; border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 3px solid rgba(255,255,255,0.3);
display: flex; align-items: center; justify-content: center;
font-size: 2rem; position: relative; z-index: 2;
}
.amb-card-tier-tag {
position: absolute; top: 16px; left: 16px; z-index: 3;
font-size: 0.65rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 4px 12px; border-radius: 50px;
}
.tag-gold { background: rgba(245,159,11,0.9); color: #1a1a1a; }
.tag-silver { background: rgba(148,163,184,0.9); color: #0f172a; }
.tag-rising { background: rgba(99,102,241,0.9); color: white; }
.amb-card-body { padding: 24px 24px 28px; }
.amb-card.card-featured .amb-card-body {
padding: 36px 36px; display: flex;
flex-direction: column; justify-content: center;
}
.amb-name {
font-family: 'Playfair Display', serif;
font-size: 1.25rem; font-weight: 700;
color: var(--text-dark, #1a1a1a); margin-bottom: 4px;
}
.amb-card.card-featured .amb-name { font-size: 1.7rem; }
.amb-role {
font-size: 0.78rem; font-weight: 600;
color: #6366f1; text-transform: uppercase;
letter-spacing: 0.08em; margin-bottom: 14px;
}
.amb-card.card-featured .amb-role { font-size: 0.85rem; margin-bottom: 18px; }
.amb-bio {
font-size: 0.86rem; color: var(--text-medium, #555);
line-height: 1.75; margin-bottom: 18px;
}
.amb-card.card-featured .amb-bio { font-size: 0.95rem; margin-bottom: 24px; }
.amb-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.amb-tag {
background: #f0f0ff; color: #6366f1;
font-size: 0.72rem; font-weight: 600;
padding: 4px 12px; border-radius: 50px;
}
.amb-stats-row {
display: flex; gap: 14px;
padding-top: 16px;
border-top: 1px solid #f1f5f9;
}
.amb-stat { text-align: center; flex: 1; }
.amb-stat-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.8rem; color: #6366f1; line-height: 1;
}
.amb-stat-label {
font-size: 0.65rem; color: #94a3b8;
text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
}
.amb-social {
display: flex; gap: 8px; margin-top: 20px;
}
.amb-social-btn {
width: 34px; height: 34px; border-radius: 8px;
background: #f1f5f9; border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem; color: #64748b;
transition: background 0.2s, color 0.2s;
text-decoration: none;
}
.amb-social-btn:hover { background: #6366f1; color: white; }
/* ── HOW TO BECOME AN AMBASSADOR ────────────────────────── */
.become-section {
padding: 90px 0;
background: white;
}
.become-inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
}
.become-steps { display: flex; flex-direction: column; gap: 0; }
.become-step {
display: flex; gap: 24px; align-items: flex-start;
padding-bottom: 36px; position: relative;
}
.become-step:not(:last-child)::after {
content: '';
position: absolute;
left: 23px; top: 52px;
width: 2px;
height: calc(100% - 52px);
background: linear-gradient(to bottom, #6366f1 0%, rgba(99,102,241,0.1) 100%);
}
.step-num-circle {
width: 46px; height: 46px; border-radius: 50%;
background: linear-gradient(135deg, #6366f1, #818cf8);
color: white; font-weight: 800; font-size: 1.05rem;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(99,102,241,0.35);
}
.step-content h4 { font-size: 1.1rem; color: var(--text-dark, #1a1a1a); margin-bottom: 6px; }
.step-content p { font-size: 0.88rem; color: var(--text-medium, #555); line-height: 1.75; margin: 0; }
/* Application form card */
.amb-apply-card {
background: linear-gradient(145deg, #1e1b4b 0%, #312e81 100%);
border-radius: 26px;
padding: 44px 40px;
color: white;
box-shadow: 0 24px 60px rgba(99,102,241,0.25);
position: sticky;
top: 110px;
}
.apply-card-tag {
display: inline-block;
background: rgba(245,166,35,0.2);
border: 1px solid rgba(245,166,35,0.4);
color: #fbbf24; font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 5px 14px; border-radius: 50px; margin-bottom: 18px;
}
.apply-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.9rem; font-weight: 900;
color: white; line-height: 1.15; margin-bottom: 14px;
}
.apply-card h3 em { font-style: italic; color: var(--amber, #f5a623); }
.apply-card p { color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 28px; font-size: 0.95rem; }
.apply-form { display: flex; flex-direction: column; gap: 14px; }
.apply-input {
width: 100%; padding: 13px 16px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px; color: white;
font-family: 'DM Sans', sans-serif;
font-size: 0.92rem; outline: none;
transition: border-color 0.2s, background 0.2s;
box-sizing: border-box;
}
.apply-input::placeholder { color: rgba(255,255,255,0.4); }
.apply-input:focus { border-color: #818cf8; background: rgba(255,255,255,0.12); }
.apply-select {
width: 100%; padding: 13px 16px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px; color: white;
font-family: 'DM Sans', sans-serif;
font-size: 0.92rem; outline: none; cursor: pointer;
transition: border-color 0.2s;
box-sizing: border-box;
}
.apply-select option { background: #1e1b4b; color: white; }
.apply-textarea {
width: 100%; padding: 13px 16px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 10px; color: white;
font-family: 'DM Sans', sans-serif;
font-size: 0.92rem; outline: none; resize: vertical;
min-height: 90px; transition: border-color 0.2s;
box-sizing: border-box;
}
.apply-textarea::placeholder { color: rgba(255,255,255,0.4); }
.apply-textarea:focus { border-color: #818cf8; }
.apply-submit {
width: 100%; padding: 15px;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #1a1a1a; border: none;
border-radius: 10px; font-weight: 800;
font-size: 0.95rem; cursor: pointer;
font-family: 'DM Sans', sans-serif;
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 4px;
}
.apply-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(245,159,11,0.4); }
.apply-note {
font-size: 0.76rem; color: rgba(255,255,255,0.45);
text-align: center; margin-top: 10px; line-height: 1.5;
}
/* ── AMBASSADOR RESPONSIBILITIES ─────────────────────────── */
.responsibilities-section {
padding: 90px 0;
background: #0f172a;
color: white;
}
.resp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 52px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 22px;
overflow: hidden;
}
.resp-cell {
padding: 36px 28px;
border-right: 1px solid rgba(255,255,255,0.07);
transition: background 0.2s;
position: relative;
}
.resp-cell:last-child { border-right: none; }
.resp-cell:hover { background: rgba(255,255,255,0.05); }
.resp-cell-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 5.5rem; color: rgba(99,102,241,0.08);
line-height: 1; position: absolute; top: 10px; right: 14px;
}
.resp-icon { font-size: 2rem; margin-bottom: 14px; }
.resp-cell h4 { font-size: 1rem; color: white; margin-bottom: 8px; }
.resp-cell p { font-size: 0.83rem; color: rgba(255,255,255,0.8); line-height: 1.72; margin: 0; }
/* ── IMPACT LEADERBOARD ──────────────────────────────────── */
.leaderboard-section {
padding: 90px 0;
background: var(--bg-light, #f8f9fa);
}
.leaderboard-table {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 40px rgba(0,0,0,0.08);
margin-top: 48px;
}
.lb-header-row {
display: grid;
grid-template-columns: 60px 1fr 140px 120px 120px 100px;
gap: 0;
background: #0f172a;
padding: 16px 28px;
font-size: 0.72rem; font-weight: 700;
color: rgba(255,255,255,0.5);
text-transform: uppercase; letter-spacing: 0.1em;
}
.lb-row {
display: grid;
grid-template-columns: 60px 1fr 140px 120px 120px 100px;
gap: 0; padding: 18px 28px;
border-bottom: 1px solid #f1f5f9;
align-items: center;
transition: background 0.15s;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: #f8f9ff; }
.lb-rank {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.5rem; color: #cbd5e1;
}
.lb-row.rank-1 .lb-rank { color: #f59e0b; }
.lb-row.rank-2 .lb-rank { color: #94a3b8; }
.lb-row.rank-3 .lb-rank { color: #c2845e; }
.lb-amb-cell { display: flex; align-items: center; gap: 14px; }
.lb-mini-avatar {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; flex-shrink: 0;
}
.lb-amb-name { font-weight: 700; font-size: 0.92rem; color: #1a1a1a; margin-bottom: 2px; }
.lb-amb-loc { font-size: 0.75rem; color: #94a3b8; }
.lb-badge {
display: inline-block; font-size: 0.65rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 4px 12px; border-radius: 50px;
}
.lb-badge.gold { background: #fef3c7; color: #92400e; }
.lb-badge.silver { background: #f1f5f9; color: #475569; }
.lb-badge.rising { background: #ede9fe; color: #5b21b6; }
.lb-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.4rem; color: #6366f1;
}
.lb-score { font-size: 0.88rem; font-weight: 700; color: #1a1a1a; }
.lb-score span { font-size: 0.72rem; color: #94a3b8; font-weight: 400; }
/* ── TESTIMONIALS ────────────────────────────────────────── */
/* reuses .testimonials-section .testimonial-card */
/* ── CTA ─────────────────────────────────────────────────── */
.amb-cta-section {
padding: 100px 0;
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e3a5f 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.amb-cta-section::before {
content: '';
position: absolute; top: -120px; right: -80px;
width: 450px; height: 450px;
border-radius: 50%;
background: rgba(99,102,241,0.1);
pointer-events: none;
}
.amb-cta-section::after {
content: '';
position: absolute; bottom: -100px; left: -60px;
width: 350px; height: 350px;
border-radius: 50%;
background: rgba(245,166,35,0.06);
pointer-events: none;
}
.amb-cta-inner { position: relative; z-index: 2; }
.amb-cta-section .section-tag { color: var(--amber, #f5a623); justify-content: center; margin-bottom: 18px; }
.amb-cta-section h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 900; color: white;
line-height: 1.12; margin-bottom: 18px;
}
.amb-cta-section h2 em { font-style: italic; color: var(--amber, #f5a623); }
.amb-cta-section p { color: rgba(255,255,255,0.7); font-size: 1.05rem; line-height: 1.8; max-width: 560px; margin: 0 auto 36px; }
.amb-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
.amb-hero-inner { grid-template-columns: 1fr; }
.about-amb-grid { grid-template-columns: 1fr; gap: 40px; }
.about-amb-sticky { position: static; }
.tiers-grid { grid-template-columns: 1fr; gap: 16px; }
.portfolio-grid { grid-template-columns: 1fr 1fr; }
.amb-card.card-featured { grid-column: span 2; }
.become-inner { grid-template-columns: 1fr; gap: 50px; }
.amb-apply-card { position: static; }
.resp-grid { grid-template-columns: 1fr 1fr; }
.resp-cell:nth-child(2) { border-right: none; }
.resp-cell:nth-child(3),
.resp-cell:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.07); }
.lb-header-row,
.lb-row { grid-template-columns: 50px 1fr 120px 100px 100px 90px; }
}
@media (max-width: 768px) {
.amb-hero h1 { font-size: 2.8rem; }
.portfolio-grid { grid-template-columns: 1fr; }
.amb-card.card-featured { grid-column: span 1; grid-template-columns: 1fr; }
.tiers-grid { grid-template-columns: 1fr; }
.resp-grid { grid-template-columns: 1fr; }
.resp-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
.lb-header-row,
.lb-row { grid-template-columns: 40px 1fr 90px 80px; }
.lb-header-row > span:nth-child(4),
.lb-header-row > span:nth-child(6),
.lb-row > div:nth-child(4),
.lb-row > div:nth-child(6) { display: none; }
.amb-hero-actions { flex-direction: column; }
.btn-amb-primary, .btn-amb-outline { width: 100%; justify-content: center; }
.amb-cta-btns { flex-direction: column; align-items: center; }
}
@media (max-width: 500px) {
.portfolio-grid { grid-template-columns: 1fr; }
.amb-apply-card { padding: 28px 22px; }
}
/* ── Page Hero ── */
.page-hero {
background: linear-gradient(135deg, var(--green-deep) 0%, var(--primary-dark) 60%, var(--primary-color) 100%);
padding: 50px 0 50px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* .page-hero .breadcrumb { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; font-size: 0.9rem; color: rgba(255,255,255,0.7); } */
.page-hero .breadcrumb a { color: rgba(255,255,255,0.7); } .page-hero .breadcrumb a:hover { color: #fff; }
.page-hero h1 { color: #fff; font-size: 3.2rem; margin-bottom: 16px; position: relative; }
.page-hero h1 em { color: var(--amber); font-style: normal; }
.page-hero p { color: rgba(255,255,255,0.85); font-size: 1.15rem; max-width: 600px; margin: 0 auto; position: relative; }
/* ── Section shared ── */
.media-section { padding: 80px 0; }
.media-section:nth-child(even) { background: var(--bg-light); }
/* .section-tag {
display: inline-flex; align-items: center; gap: 8px;
background: var(--green-pale); color: var(--green-deep);
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
padding: 6px 16px; border-radius: 50px; margin-bottom: 14px;
} */
.section-title { font-size: 2.2rem; color: var(--charcoal); margin-bottom: 12px; }
.section-subtitle { color: var(--text-light); font-size: 1.05rem; max-width: 640px; margin-bottom: 48px; }
/* ── Newspaper Cuttings Grid ── */
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 28px;
}
.news-card {
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: var(--transition);
border: 1px solid var(--border-color);
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); }
.news-card-img {
width: 100%; height: 220px; object-fit: cover;
background: linear-gradient(135deg, #e9ecef, #dee2e6);
display: flex; align-items: center; justify-content: center;
font-size: 3rem; color: #adb5bd;
}
.news-card-img img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { padding: 20px; }
.news-date { font-size: 0.78rem; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.news-headline { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--charcoal); line-height: 1.4; margin-bottom: 10px; }
.news-source { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--primary-color); font-weight: 600; }
.news-source::before { content: '📰'; font-size: 0.9rem; }
/* Placeholder card styling */
.news-card-placeholder { background: linear-gradient(135deg, var(--green-pale) 0%, #dff0e8 100%); height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--green-deep); }
.news-card-placeholder .icon { font-size: 2.5rem; }
.news-card-placeholder p { font-size: 0.85rem; font-weight: 600; opacity: 0.7; margin: 0; text-align: center; padding: 0 16px; }
/* ── Photo Gallery ── */
.photo-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 12px;
}
.gallery-item {
border-radius: 12px;
overflow: hidden;
position: relative;
cursor: pointer;
background: linear-gradient(135deg, #e9ecef, #dee2e6);
}
.gallery-item:nth-child(1), .gallery-item:nth-child(6) { grid-column: span 2; grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-overlay {
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 60%);
opacity: 0; transition: opacity 0.3s ease;
display: flex; align-items: flex-end; padding: 16px;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-overlay span { color: #fff; font-size: 0.85rem; font-weight: 600; }
/* Gallery placeholder */
.gallery-placeholder {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; color: var(--text-light); font-size: 0.85rem; padding: 20px; text-align: center;
}
.gallery-placeholder .icon { font-size: 2rem; color: var(--border-color); }
/* ── YouTube Section ── */
.video-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; }
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 28px;
}
.video-card {
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: var(--transition);
}
.video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-deep); }
.video-thumb {
position: relative;
width: 100%;
padding-top: 56.25%;
background: var(--charcoal);
overflow: hidden;
}
.video-thumb iframe {
position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}
.video-thumb-placeholder {
position: absolute; inset: 0;
background: linear-gradient(135deg, #1a1a2e, #16213e);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; color: rgba(255,255,255,0.6);
}
.play-btn {
width: 60px; height: 60px; border-radius: 50%;
background: var(--amber); display: flex; align-items: center; justify-content: center;
font-size: 1.4rem; color: var(--charcoal); box-shadow: 0 4px 20px rgba(245,166,35,0.5);
}
.video-card-body { padding: 20px; }
.video-title { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--charcoal); margin-bottom: 8px; line-height: 1.4; }
.video-meta { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--text-light); }
.video-meta span::before { margin-right: 4px; }
/* ── Upload CTA ── */
.upload-cta {
background: linear-gradient(135deg, var(--green-pale), #fff);
border: 2px dashed var(--green-light);
border-radius: var(--radius);
padding: 40px;
text-align: center;
margin-top: 40px;
}
.upload-cta h3 { color: var(--green-deep); margin-bottom: 10px; font-size: 1.3rem; }
.upload-cta p { color: var(--text-light); margin-bottom: 20px; }
@media (max-width: 768px) {
.page-hero h1 { font-size: 2.2rem; }
.photo-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
.gallery-item:nth-child(1), .gallery-item:nth-child(6) { grid-column: span 1; grid-row: span 1; }
.video-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════
CONTACT PAGE — CUSTOM STYLES
═══════════════════════════════════════════════════════════ */
/* ── HERO: Asymmetric full-bleed with floating cards ── */
.contact-hero {
position: relative;
min-height: 100vh;
background: linear-gradient(145deg, #0D5C3A 0%, #1A7A4E 45%, #0A3D25 100%);
display: flex;
align-items: center;
overflow: hidden;
padding-top: 80px; /* navbar offset */
}
/* Decorative geometry */
.contact-hero::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 560px; height: 560px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,166,35,0.12) 0%, transparent 70%);
pointer-events: none;
}
.contact-hero::after {
content: '';
position: absolute;
bottom: -80px; left: -80px;
width: 380px; height: 380px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
pointer-events: none;
}
/* Subtle grid pattern */
.hero-pattern {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M32 32m-4 0a4 4 0 1 0 8 0a4 4 0 1 0-8 0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
/* Diagonal light slice */
.hero-slice {
position: absolute;
top: 0; right: 0;
width: 42%;
height: 100%;
background: rgba(255,255,255,0.03);
clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
pointer-events: none;
}
.hero-inner-wrap {
position: relative;
z-index: 4;
width: 100%;
}
.hero-layout {
display: grid;
grid-template-columns: 1fr 420px;
gap: 72px;
align-items: center;
}
/* Left: copy */
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(245,166,35,0.15);
border: 1px solid rgba(245,166,35,0.4);
color: #F5A623;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 7px 18px;
border-radius: 50px;
margin-bottom: 28px;
opacity: 0;
animation: heroFadeUp 0.7s 0.2s ease forwards;
}
.hero-eyebrow-dot {
width: 7px; height: 7px;
background: #F5A623;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.4); }
}
.hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 4.8vw, 4.2rem);
font-weight: 900;
color: #ffffff;
line-height: 1.1;
margin-bottom: 22px;
opacity: 0;
animation: heroFadeUp 0.7s 0.4s ease forwards;
}
.hero-h1 em { font-style: italic; color: #F5A623; }
.hero-lead {
font-size: 1.1rem;
color: rgba(255,255,255,0.78);
line-height: 1.85;
max-width: 520px;
margin-bottom: 40px;
opacity: 0;
animation: heroFadeUp 0.7s 0.6s ease forwards;
}
.hero-cta-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
opacity: 0;
animation: heroFadeUp 0.7s 0.8s ease forwards;
}
/* Quick-contact pills strip */
.hero-quick-strip {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 48px;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,0.12);
opacity: 0;
animation: heroFadeUp 0.7s 1s ease forwards;
}
.quick-pill {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50px;
padding: 10px 20px;
color: rgba(255,255,255,0.88);
font-size: 0.84rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(6px);
}
.quick-pill:hover {
background: rgba(245,166,35,0.2);
border-color: rgba(245,166,35,0.5);
color: #F5A623;
transform: translateY(-2px);
}
.quick-pill-icon { font-size: 1rem; }
/* Right: floating contact cards stack */
.hero-cards-stack {
display: flex;
flex-direction: column;
gap: 14px;
opacity: 0;
animation: heroFadeRight 0.8s 0.5s ease forwards;
}
.hc-card {
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 18px;
padding: 22px 26px;
display: flex;
align-items: center;
gap: 18px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.hc-card:hover {
background: rgba(255,255,255,0.15);
transform: translateX(-6px);
border-color: rgba(245,166,35,0.4);
}
.hc-icon-box {
width: 50px; height: 50px;
border-radius: 14px;
background: rgba(245,166,35,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
transition: background 0.3s ease;
}
.hc-card:hover .hc-icon-box { background: rgba(245,166,35,0.35); }
.hc-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.55);
margin-bottom: 3px;
}
.hc-value {
font-size: 0.95rem;
font-weight: 600;
color: #ffffff;
text-decoration: none;
}
.hc-value a {
color: #ffffff;
text-decoration: none;
transition: color 0.2s;
}
.hc-value a:hover { color: #F5A623; }
/* Scroll cue */
.hero-scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.45);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
z-index: 10;
opacity: 0;
animation: heroFadeUp 1s 1.2s ease forwards;
}
.hero-scroll-line {
width: 1px; height: 44px;
background: linear-gradient(to bottom, rgba(255,255,255,0.45), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { transform: scaleY(1); opacity: 1; }
50% { transform: scaleY(0.4); opacity: 0.3; }
}
@keyframes heroFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeRight {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
/* ── BREADCRUMB ── */
.breadcrumb-bar {
background: var(--bg-white);
border-bottom: 1px solid var(--border-color);
padding: 13px 0;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.84rem;
color: var(--slate);
}
.breadcrumb a { color: var(--green-mid); font-weight: 500; }
.breadcrumb a:hover { color: var(--green-deep); }
.bc-sep { color: #CBD5E0; }
/* ── INTRO BAND ── */
.intro-band {
background: var(--cream);
padding: 80px 0 64px;
}
.intro-band-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.intro-band-text .section-tag { margin-bottom: 16px; }
.intro-band-text h2 {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
font-weight: 900;
color: var(--charcoal);
line-height: 1.2;
margin-bottom: 20px;
}
.intro-band-text h2 em { font-style: italic; color: var(--green-deep); }
.intro-band-text p {
color: var(--slate);
line-height: 1.85;
font-size: 0.97rem;
margin-bottom: 0;
}
.intro-reasons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.reason-chip {
background: var(--bg-white);
border-radius: 14px;
padding: 20px 18px;
border-left: 3px solid;
transition: all 0.3s ease;
box-shadow: var(--shadow-soft);
}
.reason-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.reason-chip:nth-child(1) { border-left-color: var(--green-deep); }
.reason-chip:nth-child(2) { border-left-color: var(--amber); }
.reason-chip:nth-child(3) { border-left-color: #e91e63; }
.reason-chip:nth-child(4) { border-left-color: #667eea; }
.reason-icon { font-size: 1.5rem; margin-bottom: 8px; }
.reason-chip h4 {
font-family: 'Playfair Display', serif;
font-size: 0.97rem;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 4px;
}
.reason-chip p {
font-size: 0.8rem;
color: var(--slate);
line-height: 1.6;
margin: 0;
}
/* ── CONTACT DETAILS — 3-col bento ── */
.contact-details-section {
padding: 80px 0;
background: var(--bg-white);
}
.contact-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-top: 52px;
}
.cb-card {
background: var(--cream);
border-radius: 20px;
padding: 36px 30px;
border: 1px solid rgba(0,0,0,0.05);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.cb-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(to right, var(--green-light), var(--amber));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.cb-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); background: var(--bg-white); }
.cb-card:hover::after { transform: scaleX(1); }
.cb-icon-wrap {
width: 58px; height: 58px;
border-radius: 16px;
background: var(--green-pale);
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
margin-bottom: 22px;
transition: all 0.3s ease;
}
.cb-card:hover .cb-icon-wrap { background: var(--green-deep); transform: rotate(-6deg) scale(1.08); }
.cb-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 14px;
}
.cb-detail {
font-size: 0.87rem;
color: var(--slate);
line-height: 1.75;
margin: 0;
}
.cb-detail a {
color: var(--green-mid);
font-weight: 500;
display: block;
margin-top: 4px;
transition: color 0.2s;
}
.cb-detail a:hover { color: var(--green-deep); }
.cb-detail strong { color: var(--charcoal); }
/* Social icons card */
.social-icons-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 18px;
}
.soc-btn {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--bg-white);
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--border-color);
transition: all 0.3s ease;
text-decoration: none;
box-shadow: var(--shadow-sm);
}
.soc-btn:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.soc-btn.li:hover { background: #0077B5; border-color: #0077B5; color: white; }
.soc-btn.yt:hover { background: #FF0000; border-color: #FF0000; color: white; }
.soc-btn.fb:hover { background: #1877F2; border-color: #1877F2; color: white; }
.soc-btn.tw:hover { background: #000; border-color: #000; color: white; }
.soc-btn.ig:hover { background: linear-gradient(45deg, #f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; color: white; }
.soc-btn.pi:hover { background: #BD081C; border-color: #BD081C; color: white; }
.soc-btn svg { transition: fill 0.3s ease; }
.soc-btn:hover svg { fill: white; }
/* ── MAP SECTION ── */
.map-section {
padding: 80px 0;
background: var(--cream);
}
.map-wrap {
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-deep);
margin-top: 48px;
position: relative;
}
.map-placeholder {
width: 100%;
height: 320px;
background: linear-gradient(135deg, var(--green-pale) 0%, #d0ede0 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.map-placeholder-icon { font-size: 3.5rem; }
.map-placeholder h4 {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--green-deep);
margin: 0;
}
.map-placeholder p { color: var(--slate); font-size: 0.9rem; margin: 0; }
.map-placeholder a {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--green-deep);
color: white;
padding: 12px 26px;
border-radius: 50px;
font-weight: 600;
font-size: 0.88rem;
text-decoration: none;
margin-top: 8px;
transition: all 0.3s ease;
}
.map-placeholder a:hover { background: var(--green-mid); transform: translateY(-2px); color: white; }
.map-address-bar {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 28px;
background: var(--green-deep);
color: white;
}
.map-address-bar .addr-icon { font-size: 1.2rem; }
.map-address-bar .addr-text { font-size: 0.9rem; color: rgba(255,255,255,0.88); }
.map-address-bar .addr-text strong { color: white; }
/* ── INQUIRY REASONS ── */
.inquiry-section {
padding: 80px 0;
background: var(--green-deep);
position: relative;
overflow: hidden;
}
.inquiry-section::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(47,169,106,0.15) 0%, transparent 70%);
}
.inquiry-section .section-tag { color: var(--amber); }
.inquiry-section .section-tag::before { background: var(--amber); }
.inquiry-section .section-title { color: #fff; }
.inquiry-section .section-subtitle { color: rgba(255,255,255,0.7); }
.inquiry-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 52px;
}
.inq-card {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
padding: 30px 24px;
text-align: center;
transition: all 0.35s ease;
backdrop-filter: blur(4px);
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
}
.inq-card:hover {
background: rgba(255,255,255,0.14);
transform: translateY(-6px);
border-color: rgba(245,166,35,0.45);
}
.inq-icon {
width: 60px; height: 60px;
background: rgba(245,166,35,0.15);
border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem;
margin-bottom: 18px;
transition: background 0.3s ease;
}
.inq-card:hover .inq-icon { background: rgba(245,166,35,0.35); }
.inq-card h4 {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 8px;
}
.inq-card p {
font-size: 0.81rem;
color: rgba(255,255,255,0.65);
line-height: 1.6;
margin: 0;
}
.inq-arrow {
margin-top: 16px;
font-size: 0.8rem;
color: var(--amber);
font-weight: 600;
opacity: 0;
transform: translateX(-6px);
transition: all 0.3s ease;
}
.inq-card:hover .inq-arrow { opacity: 1; transform: translateX(0); }
/* ── FAQ BAND ── */
.faq-band {
padding: 80px 0;
background: var(--bg-white);
}
.faq-layout {
display: grid;
grid-template-columns: 380px 1fr;
gap: 80px;
align-items: start;
margin-top: 52px;
}
.faq-sidebar {
position: sticky;
top: 100px;
}
.faq-sidebar h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--charcoal);
margin-bottom: 16px;
}
.faq-sidebar p {
color: var(--slate);
font-size: 0.9rem;
line-height: 1.75;
margin-bottom: 28px;
}
.faq-contact-mini {
background: var(--cream);
border-radius: 16px;
padding: 24px;
border-left: 4px solid var(--green-deep);
}
.faq-contact-mini h5 {
font-size: 0.88rem;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 6px;
}
.faq-contact-mini p {
font-size: 0.82rem;
color: var(--slate);
margin-bottom: 12px;
}
.faq-contact-mini a {
color: var(--green-mid);
font-weight: 600;
font-size: 0.88rem;
}
.faq-list { display: grid; gap: 14px; }
.faq-item {
background: var(--cream);
border-radius: 16px;
border: 1px solid transparent;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover { border-color: var(--border-color); }
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
cursor: pointer;
font-weight: 600;
font-size: 0.92rem;
color: var(--charcoal);
gap: 12px;
user-select: none;
transition: background 0.2s ease;
}
.faq-q:hover { background: rgba(13,92,58,0.04); }
.faq-item.open .faq-q { color: var(--green-deep); background: rgba(13,92,58,0.04); }
.faq-chevron {
width: 22px; height: 22px;
background: var(--green-pale);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 0.65rem;
flex-shrink: 0;
transition: all 0.3s ease;
color: var(--green-deep);
}
.faq-item.open .faq-chevron { background: var(--green-deep); color: white; transform: rotate(180deg); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
padding: 0 24px;
}
.faq-item.open .faq-a { max-height: 300px; padding: 0 24px 20px; }
.faq-a p { font-size: 0.88rem; color: var(--slate); line-height: 1.8; margin: 0; }
/* ── CTA FINAL ── */
.contact-cta {
padding: 100px 0;
background: linear-gradient(135deg, var(--green-deep) 0%, #0A4229 55%, #1A5C3A 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.contact-cta::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 450px; height: 450px;
border-radius: 50%;
background: rgba(245,166,35,0.07);
}
.contact-cta::after {
content: '';
position: absolute;
bottom: -100px; left: -100px;
width: 350px; height: 350px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
}
.contact-cta .cta-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.contact-cta h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
color: #ffffff;
margin-bottom: 18px;
line-height: 1.15;
}
.contact-cta h2 em { font-style: italic; color: var(--amber); }
.contact-cta p { color: rgba(255,255,255,0.72); font-size: 1.05rem; line-height: 1.75; margin-bottom: 40px; }
.cta-btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.hero-layout { grid-template-columns: 1fr; gap: 48px; }
.hero-cards-stack { display: grid; grid-template-columns: 1fr 1fr; }
.contact-hero { padding-bottom: 80px; }
.intro-band-grid { grid-template-columns: 1fr; gap: 48px; }
.inquiry-cards { grid-template-columns: repeat(2, 1fr); }
.faq-layout { grid-template-columns: 1fr; gap: 40px; }
.faq-sidebar { position: static; }
.contact-bento { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.hero-cards-stack { grid-template-columns: 1fr; }
.contact-hero { min-height: auto; padding: 110px 0 72px; }
.hero-slice { display: none; }
.contact-bento { grid-template-columns: 1fr; }
.intro-reasons { grid-template-columns: 1fr; }
.inquiry-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.inquiry-cards { grid-template-columns: 1fr; }
.hero-quick-strip { flex-direction: column; }
.quick-pill { justify-content: center; }
}
/* ═══════════════════════════════════════════════
Commitments PAGE — CUSTOM STYLES
═══════════════════════════════════════════════ */
.page-hero {
min-height: 52vh;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #2c1a0e 0%, #7a3d0a 40%, #4a2005 100%);
color: #fff; text-align: center;
padding: 140px 20px 80px; position: relative; overflow: hidden;
}
.page-hero::before {
content: ''; position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero-tag {
display: inline-block;
background: rgba(245,166,35,0.18); color: #F5A623;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
padding: 7px 20px; border-radius: 50px; margin-bottom: 20px;
border: 1px solid rgba(245,166,35,0.3);
}
.page-hero h1 { font-size: 3.2rem; color: #fff; margin-bottom: 1rem; }
.page-hero p { font-size: 1.15rem; opacity: 0.85; max-width: 640px; margin: 0 auto; }
/* ── Breadcrumb ── */
.breadcrumb { background: var(--bg-light); padding: 14px 0; border-bottom: 1px solid var(--border-color); }
.breadcrumb a { color: var(--green-mid); font-size: 0.9rem; }
.breadcrumb span { color: var(--text-light); font-size: 0.9rem; margin: 0 8px; }
.breadcrumb strong { color: var(--text-dark); font-size: 0.9rem; font-weight: 600; }
/* ── Commitment Nav (sticky jump nav) ── */
.commit-nav {
background: var(--bg-white);
border-bottom: 1px solid var(--border-color);
position: sticky; top: 70px; z-index: 100;
padding: 0;
}
.commit-nav-inner {
display: flex; gap: 0; overflow-x: auto;
}
.commit-nav-link {
display: flex; align-items: center; gap: 8px;
padding: 18px 28px; font-size: 0.88rem; font-weight: 600;
color: var(--text-medium); text-decoration: none;
border-bottom: 3px solid transparent; white-space: nowrap;
transition: var(--transition);
}
.commit-nav-link:hover, .commit-nav-link.active {
color: var(--green-deep); border-bottom-color: var(--green-deep);
}
/* ── Commitment section shared ── */
.commitment-section { padding: 90px 0; }
.commitment-section:nth-child(even) { background: var(--bg-light); }
/* ── Section Hero Banner ── */
.commit-banner {
border-radius: 24px;
padding: 56px 48px;
margin-bottom: 56px;
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
position: relative; overflow: hidden;
}
.commit-banner::before {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/svg%3E");
}
.commit-banner-content { position: relative; z-index: 2; }
.commit-banner-tag {
display: inline-block;
background: rgba(255,255,255,0.18); color: #fff;
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
padding: 5px 16px; border-radius: 50px; margin-bottom: 16px;
border: 1px solid rgba(255,255,255,0.25);
}
.commit-banner h2 { color: #fff; font-size: 2.2rem; margin-bottom: 12px; }
.commit-banner p { color: rgba(255,255,255,0.8); font-size: 1rem; max-width: 560px; margin: 0; line-height: 1.7; }
.commit-banner-icon {
font-size: 5rem; position: relative; z-index: 2;
opacity: 0.9;
}
@media (max-width: 768px) {
.commit-banner { grid-template-columns: 1fr; padding: 40px 28px; }
.commit-banner-icon { display: none; }
.commit-banner h2 { font-size: 1.8rem; }
}
.banner-green { background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%); }
.banner-blue { background: linear-gradient(135deg, #1a3a5c 0%, #2a6090 100%); }
.banner-orange { background: linear-gradient(135deg, #5c3010 0%, #9b5a20 100%); }
/* ── Committee Table ── */
.committee-wrap {
background: var(--bg-white);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
margin-top: 32px;
}
.committee-table-header {
padding: 22px 32px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 2px solid var(--border-color);
}
.committee-table-header h3 { margin: 0; font-size: 1.15rem; color: var(--text-dark); }
.member-count-badge {
background: var(--green-pale); color: var(--green-deep);
font-size: 0.78rem; font-weight: 700; padding: 5px 16px; border-radius: 50px;
}
.committee-table { width: 100%; border-collapse: collapse; }
.committee-table thead tr { background: var(--green-deep); }
.committee-table thead th {
padding: 14px 20px;
color: #fff; font-size: 0.82rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
text-align: left;
}
.committee-table tbody tr { border-bottom: 1px solid var(--border-color); transition: background 0.2s; }
.committee-table tbody tr:last-child { border-bottom: none; }
.committee-table tbody tr:hover { background: var(--green-pale); }
.committee-table tbody td {
padding: 16px 20px; font-size: 0.9rem; color: var(--text-dark);
vertical-align: top;
}
.committee-table tbody td:first-child { width: 50px; color: var(--text-light); font-weight: 600; text-align: center; }
.member-name { font-weight: 700; color: var(--text-dark); margin-bottom: 2px; }
.member-role { font-size: 0.8rem; color: var(--text-medium); }
.role-badge {
display: inline-block;
font-size: 0.72rem; font-weight: 700; padding: 3px 12px; border-radius: 50px;
white-space: nowrap;
}
.role-primary { background: rgba(0,119,182,0.1); color: var(--primary-color); }
.role-secondary { background: rgba(13,92,58,0.1); color: var(--green-deep); }
.role-support { background: rgba(247,127,0,0.1); color: var(--secondary-color); }
.role-member { background: rgba(100,100,100,0.1); color: var(--text-medium); }
.role-govt { background: rgba(139,0,0,0.1); color: #8b0000; }
.role-fellow { background: rgba(0,100,100,0.1); color: #006464; }
/* ── Overview Info Cards ── */
.info-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
margin-top: 40px;
}
.info-card {
background: var(--bg-white);
border-radius: 16px; padding: 28px 24px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.info-card-icon { font-size: 2rem; margin-bottom: 14px; display: block; }
.info-card h4 { font-size: 0.95rem; color: var(--text-dark); margin-bottom: 8px; }
.info-card p { font-size: 0.84rem; color: var(--text-medium); line-height: 1.6; margin: 0; }
.info-card strong { color: var(--green-deep); }
/* ── Institutions list ── */
.institutions-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
margin-top: 32px;
}
.institution-item {
display: flex; align-items: flex-start; gap: 14px;
background: var(--bg-white);
border-radius: 14px; padding: 20px 22px;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.institution-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--green-light); }
.inst-num {
width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
background: var(--green-deep); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 0.82rem; font-weight: 800;
}
.inst-name { font-size: 0.88rem; font-weight: 600; color: var(--text-dark); line-height: 1.4; }
.inst-location { font-size: 0.76rem; color: var(--text-light); margin-top: 3px; }
/* ── Impact strip ── */
.impact-strip {
background: linear-gradient(135deg, var(--amber), #e88d00);
border-radius: 16px; padding: 36px 40px;
display: flex; align-items: center; gap: 40px;
flex-wrap: wrap; margin-top: 40px;
}
.impact-strip-item { text-align: center; flex: 1; min-width: 120px; }
.impact-num { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 900; color: var(--charcoal); line-height: 1; }
.impact-lbl { font-size: 0.82rem; color: rgba(0,0,0,0.6); font-weight: 600; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
/* ── Mission Members (Plantation) ── */
.mission-members {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 24px;
margin-top: 40px;
}
.mission-member-card {
background: var(--bg-white);
border-radius: 18px; padding: 30px 28px;
text-align: center;
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-color);
transition: var(--transition);
position: relative; overflow: hidden;
}
.mission-member-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(to right, var(--green-light), var(--amber));
}
.mission-member-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.member-avatar {
width: 70px; height: 70px; border-radius: 50%;
background: linear-gradient(135deg, var(--green-pale), #d4edda);
margin: 0 auto 16px;
display: flex; align-items: center; justify-content: center;
font-size: 2rem; border: 3px solid var(--green-light);
}
.mission-member-card h4 { font-size: 1rem; color: var(--text-dark); margin-bottom: 6px; }
.mission-member-card .org { font-size: 0.82rem; color: var(--text-medium); margin-bottom: 12px; }
/* ── Quote block ── */
.quote-block {
background: var(--green-pale);
border-left: 4px solid var(--green-mid);
border-radius: 0 16px 16px 0;
padding: 28px 32px;
margin: 40px 0;
}
.quote-block p { font-family: 'Crimson Pro', Georgia, serif; font-size: 1.25rem; font-style: italic; color: var(--green-deep); margin: 0; line-height: 1.65; }
.quote-block cite { display: block; margin-top: 12px; font-size: 0.82rem; color: var(--text-light); font-style: normal; font-weight: 600; }
/* Responsive */
@media (max-width: 768px) {
.page-hero h1 { font-size: 2.2rem; }
.commit-nav-link { padding: 16px 18px; }
}
/* ═══════════════════════════════════════════════
FOOD PAGE — CUSTOM STYLES
═══════════════════════════════════════════════ */
/* HERO */
.food-hero {
position: relative;
min-height: 92vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #0D3B1E 0%, #1A5C35 45%, #0D5C3A 100%);
overflow: hidden;
padding-top: 80px;
}
.food-hero::before {
content: '';
position: absolute;
inset: 0;
background: url('assets/food-hero-bg.jpg') center/cover no-repeat;
opacity: 0.18;
mix-blend-mode: luminosity;
}
.food-hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
.blob-amber { width: 500px; height: 500px; background: rgba(245,166,35,0.15); top: -100px; right: -150px; }
.blob-green { width: 400px; height: 400px; background: rgba(47,169,106,0.12); bottom: -100px; left: -100px; }
.food-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
padding: 60px 0;
}
.food-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(245,166,35,0.15);
border: 1px solid rgba(245,166,35,0.35);
color: #F5A623;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 50px;
margin-bottom: 24px;
}
.food-hero-badge span { width: 6px; height: 6px; background: #F5A623; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.5; transform:scale(1.4); } }
.food-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 5vw, 4rem);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
}
.food-hero-title em { color: #F5A623; font-style: normal; }
.food-hero-desc {
font-size: 1.1rem;
color: rgba(255,255,255,0.75);
line-height: 1.8;
margin-bottom: 36px;
max-width: 520px;
}
.hero-action-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.hero-trust-note {
font-size: 0.82rem;
color: rgba(255,255,255,0.5);
display: flex;
align-items: center;
gap: 6px;
}
.hero-trust-note svg { flex-shrink: 0; }
/* Hero right — floating stats card */
.hero-stats-card {
background: rgba(255,255,255,0.07);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 24px;
padding: 40px;
}
.hero-stat-item {
padding: 20px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-stat-item:last-child { border-bottom: none; padding-bottom: 0; }
.hero-stat-item:first-child { padding-top: 0; }
.hero-stat-num {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 900;
color: #F5A623;
line-height: 1;
}
.hero-stat-label { font-size: 0.88rem; color: rgba(255,255,255,0.65); margin-top: 4px; }
/* IMPACT TICKER */
.impact-ticker {
background: #F5A623;
padding: 14px 0;
overflow: hidden;
white-space: nowrap;
}
.ticker-track {
display: inline-flex;
animation: tickerMove 30s linear infinite;
gap: 0;
}
/* .ticker-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 40px;
font-size: 0.88rem;
font-weight: 700;
color: #1C1C1C;
letter-spacing: 0.04em;
text-transform: uppercase;
} */
.ticker-dot { width: 5px; height: 5px; background: rgba(0,0,0,0.3); border-radius: 50%; flex-shrink: 0; }
@keyframes tickerMove { 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }
/* MISSION STRIP */
.mission-strip {
padding: 80px 0;
background: var(--cream);
}
.mission-strip-inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--green-mid);
margin-bottom: 16px;
}
.section-eyebrow::before {
content: '';
width: 32px;
height: 2px;
background: var(--green-mid);
flex-shrink: 0;
}
.mission-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 700;
color: var(--charcoal);
line-height: 1.15;
margin-bottom: 20px;
}
.mission-title span { color: var(--green-mid); }
.mission-body { font-size: 1.05rem; color: var(--slate); line-height: 1.8; }
.mission-quote {
background: var(--green-deep);
border-radius: 20px;
padding: 44px 40px;
color: #fff;
position: relative;
overflow: hidden;
}
.mission-quote::before {
content: '"';
font-family: 'Playfair Display', serif;
font-size: 8rem;
color: rgba(255,255,255,0.06);
position: absolute;
top: -20px;
right: 20px;
line-height: 1;
}
.mission-quote blockquote {
font-family: 'Playfair Display', serif;
font-size: 1.35rem;
font-style: italic;
line-height: 1.6;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.mission-quote cite { font-size: 0.85rem; color: rgba(255,255,255,0.6); font-style: normal; }
/* PROGRAMS */
.programs-section {
padding: 90px 0;
background: #fff;
}
.programs-header { text-align: center; max-width: 620px; margin: 0 auto 60px; }
.programs-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.prog-card {
background: var(--cream);
border-radius: 20px;
padding: 36px 28px;
border: 1px solid rgba(0,0,0,0.06);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.prog-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--green-mid), var(--amber));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.prog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); background: #fff; }
.prog-card:hover::after { transform: scaleX(1); }
.prog-icon-wrap {
width: 60px; height: 60px;
background: var(--green-pale);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 20px;
}
.prog-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
color: var(--charcoal);
margin-bottom: 12px;
}
.prog-card p { font-size: 0.9rem; color: var(--slate); line-height: 1.7; margin-bottom: 20px; }
.prog-meta { display: flex; flex-direction: column; gap: 6px; }
.prog-meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: var(--green-mid);
font-weight: 600;
}
.prog-meta-item::before { content: '→'; }
/* DONATION IMPACT */
.impact-section {
padding: 90px 0;
background: linear-gradient(135deg, var(--green-deep) 0%, #0A3D25 100%);
position: relative;
overflow: hidden;
}
.impact-section::before {
content: '';
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
background: rgba(245,166,35,0.06);
top: -200px; right: -200px;
}
/* .impact-header { text-align: center; margin-bottom: 60px; } */
.impact-header .section-eyebrow { color: #F5A623; }
.impact-header .section-eyebrow::before { background: #F5A623; }
.impact-header h2 { color: #fff; }
.donation-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
position: relative;
z-index: 1;
}
.don-card {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 36px 28px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.don-card:hover, .don-card.featured {
background: rgba(255,255,255,0.14);
border-color: #F5A623;
transform: translateY(-6px);
}
.don-card.featured { border-color: #F5A623; position: relative; }
.don-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: #F5A623;
color: #1C1C1C;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 50px;
white-space: nowrap;
}
.don-amount {
font-family: "Bebas Neue", sans-serif;
font-size: 3.8rem;
color: var(--primary-color);
line-height: 1;
margin-bottom: 10px;
}
/* .don-desc { font-size: 0.9rem; color: rgba(255,255,255,0.65); margin-bottom: 24px; line-height: 1.5; } */
.don-card .btn-donate-card {
display: inline-block;
background: #F5A623;
color: #1C1C1C;
font-weight: 700;
font-size: 0.88rem;
padding: 12px 28px;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
.don-card .btn-donate-card:hover { background: #D4891A; transform: scale(1.04); }
.custom-amount-wrap { margin-bottom: 16px; }
.custom-amount-wrap input {
width: 100%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 10px;
padding: 12px 16px;
color: #fff;
font-size: 1rem;
text-align: center;
outline: none;
}
.custom-amount-wrap input::placeholder { color: rgba(255,255,255,0.4); }
.custom-amount-wrap input:focus { border-color: #F5A623; }
/* YEAR-WISE GALLERY */
/* .gallery-section {
padding: 90px 0;
background: var(--cream);
} */
.gallery-header { text-align: center; max-width: 600px; margin: 0 auto 50px; }
.year-tabs {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 48px;
}
.year-tab {
background: #fff;
border: 2px solid var(--border-color);
color: var(--slate);
font-size: 0.9rem;
font-weight: 700;
padding: 10px 24px;
border-radius: 50px;
cursor: pointer;
transition: all 0.25s ease;
}
.year-tab:hover { border-color: var(--green-mid); color: var(--green-mid); }
.year-tab.active { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.gallery-panel { display: none; }
.gallery-panel.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }
.gallery-year-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.gallery-year-title {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--charcoal);
}
.gallery-year-stats {
display: flex;
gap: 24px;
}
.gy-stat { text-align: center; }
.gy-stat-num { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; color: var(--green-mid); line-height: 1; }
.gy-stat-lbl { font-size: 0.75rem; color: var(--slate); margin-top: 2px; }
.photo-masonry {
columns: 3;
column-gap: 16px;
}
.photo-item {
break-inside: avoid;
margin-bottom: 16px;
border-radius: 16px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.photo-item:hover .photo-overlay { opacity: 1; }
.photo-placeholder {
width: 100%;
background: linear-gradient(135deg, var(--green-pale), #d4edda);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--green-mid);
font-size: 0.82rem;
font-weight: 600;
}
.photo-placeholder.h-short { height: 180px; }
.photo-placeholder.h-tall { height: 280px; }
.photo-placeholder.h-med { height: 230px; }
.photo-placeholder-icon { font-size: 2rem; opacity: 0.5; }
.photo-overlay {
position: absolute;
inset: 0;
background: rgba(13,60,30,0.6);
display: flex;
align-items: flex-end;
padding: 16px;
opacity: 0;
transition: opacity 0.3s ease;
}
.photo-caption {
color: #fff;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.3;
}
/* LIGHTBOX */
.lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
z-index: 9999;
align-items: center;
justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-close {
position: absolute;
top: 20px; right: 28px;
font-size: 2rem;
color: #fff;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-img-wrap {
max-width: 90vw;
max-height: 85vh;
border-radius: 16px;
overflow: hidden;
background: var(--green-pale);
width: 700px;
height: 480px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
color: var(--green-mid);
font-size: 1rem;
}
.lightbox-img-icon { font-size: 3rem; }
/* VOLUNTEER / CTA STRIP */
.cta-strip {
background: var(--green-deep);
padding: 70px 0;
position: relative;
overflow: hidden;
}
.cta-strip::before {
content: '';
position: absolute;
width: 400px; height: 400px;
border-radius: 50%;
background: rgba(245,166,35,0.08);
bottom: -150px; right: -100px;
}
.cta-strip-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.cta-strip h2 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
color: #fff;
margin-bottom: 12px;
}
.cta-strip p { color: rgba(255,255,255,0.7); font-size: 1rem; margin: 0; }
.cta-strip-btns { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
/* MODAL (inherit existing donation.css, just add food-specific overrides) */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9000; align-items: center; justify-content: center; }
.modal.active { display: flex; }
/* RESPONSIVE */
@media (max-width: 1024px) {
.food-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.hero-stats-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.hero-stat-item { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08); padding: 20px; }
.hero-stat-item:last-child { border-right: none; }
.mission-strip-inner { grid-template-columns: 1fr; gap: 40px; }
.programs-bento { grid-template-columns: repeat(2, 1fr); }
.donation-grid { grid-template-columns: repeat(2, 1fr); }
.photo-masonry { columns: 2; }
}
@media (max-width: 768px) {
.food-hero { min-height: auto; padding-top: 100px; }
.food-hero-title { font-size: 2.2rem; }
.programs-bento { grid-template-columns: 1fr; }
.donation-grid { grid-template-columns: 1fr; }
.cta-strip-inner { grid-template-columns: 1fr; gap: 28px; }
.gallery-year-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.photo-masonry { columns: 1; }
}
/* ═══════════════════════════════════════════════
HEALTHCARE PAGE — CUSTOM STYLES
═══════════════════════════════════════════════ */
.hc-hero {
position: relative;
min-height: 94vh;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 80px;
background: #03111F;
}
.hc-hero-bg {
position: absolute; inset: 0;
background: url('assets/healthcare-hero.jpg') center/cover no-repeat;
opacity: 0.18;
}
.hc-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(120deg,
rgba(0,55,100,0.97) 0%,
rgba(0,55,100,0.88) 44%,
rgba(0,0,0,0.25) 100%);
}
.hc-blob1 {
position: absolute;
width: 550px; height: 550px; border-radius: 50%;
background: radial-gradient(circle, rgba(0,150,160,0.15) 0%, transparent 70%);
bottom: -150px; right: 3%; pointer-events: none;
}
.hc-blob2 {
position: absolute;
width: 300px; height: 300px; border-radius: 50%;
background: radial-gradient(circle, rgba(239,108,156,0.1) 0%, transparent 70%);
top: 100px; right: 28%; pointer-events: none;
}
.hc-hero-inner {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 64px;
align-items: center;
position: relative;
z-index: 2;
padding: 70px 0;
}
.hc-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(0,150,160,0.15);
border: 1px solid rgba(0,150,160,0.35);
color: #00c8d5;
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 50px;
margin-bottom: 26px;
}
.hc-badge-dot {
width: 6px; height: 6px;
background: #00c8d5; border-radius: 50%;
animation: hcPulse 2s ease-in-out infinite;
}
@keyframes hcPulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(1.5);} }
.hc-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 5vw, 4.2rem);
font-weight: 900;
color: #fff;
line-height: 1.08;
margin-bottom: 24px;
}
.hc-hero-title em { color: #F5A623; font-style: normal; }
.hc-hero-desc {
font-size: 1.08rem;
color: rgba(255,255,255,0.72);
line-height: 1.85;
max-width: 530px;
margin-bottom: 38px;
}
.hc-btn-row {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap; margin-bottom: 40px;
}
/* right panel */
.hc-hero-panel {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border: 1px solid rgba(255,255,255,0.11);
border-radius: 24px;
padding: 38px 34px;
}
.hc-panel-stat {
display: flex; align-items: center; gap: 18px;
padding: 18px 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hc-panel-stat:first-child { padding-top: 0; }
.hc-panel-stat:last-child { border-bottom: none; padding-bottom: 0; }
.hc-stat-icon {
width: 48px; height: 48px; border-radius: 12px;
background: rgba(0,150,160,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem; flex-shrink: 0;
}
.hc-stat-num {
font-family: 'Playfair Display', serif;
font-size: 1.9rem; font-weight: 900;
color: #F5A623; line-height: 1;
}
.hc-stat-lbl { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-top: 2px; }
/* ── TICKER ── */
.hc-ticker {
background: var(--hc-blue);
padding: 13px 0; overflow: hidden; white-space: nowrap;
}
.hc-ticker .ticker-track {
display: inline-flex;
animation: hcTickerRun 34s linear infinite;
}
.hc-ticker .ticker-item {
display: inline-flex; align-items: center; gap: 12px;
padding: 0 38px;
font-size: 0.84rem; font-weight: 700;
color: #fff; letter-spacing: 0.05em; text-transform: uppercase;
}
/* .ticker-sep { width: 4px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 50%; flex-shrink: 0; } */
@keyframes hcTickerRun { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
/* ── EYEBROW ── */
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: 0.73rem; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--hc-blue); margin-bottom: 14px;
}
.eyebrow::before {
content: ''; width: 28px; height: 2px;
background: var(--hc-blue); flex-shrink: 0;
}
.eyebrow.amber { color: #F5A623; }
.eyebrow.amber::before { background: #F5A623; }
.eyebrow.teal { color: #00c8d5; }
.eyebrow.teal::before { background: #00c8d5; }
/* ── MISSION STRIP ── */
.hc-mission {
padding: 90px 0;
background: var(--cream);
}
.hc-mission-inner {
display: grid; grid-template-columns: 1.2fr 1fr;
gap: 80px; align-items: center;
}
.hc-mission-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem,3.5vw,2.8rem);
color: var(--charcoal); line-height: 1.15; margin-bottom: 20px;
}
.hc-mission-title span { color: var(--hc-blue); }
.hc-mission-body { font-size: 1.02rem; color: var(--slate); line-height: 1.85; margin-bottom: 16px; }
.hc-quote-card {
background: var(--hc-blue);
border-radius: 22px; padding: 44px 40px;
color: #fff; position: relative; overflow: hidden;
}
.hc-quote-card::before {
content: '"';
font-family: 'Playfair Display', serif;
font-size: 9rem; color: rgba(255,255,255,0.06);
position: absolute; top: -28px; right: 20px; line-height: 1;
}
.hc-quote-card blockquote {
font-family: 'Playfair Display', serif;
font-size: 1.32rem; font-style: italic;
line-height: 1.65; margin-bottom: 20px;
position: relative; z-index: 1;
}
.hc-quote-card cite { font-size: 0.85rem; color: rgba(255,255,255,0.6); font-style: normal; }
/* ── SERVICES BENTO ── */
.services-section {
padding: 90px 0; background: #fff;
}
.services-header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.services-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,2.8rem); color: var(--charcoal); }
.services-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.svc-card {
background: var(--cream);
border-radius: 20px; padding: 36px 30px;
border: 1px solid rgba(0,0,0,0.06);
transition: all 0.35s ease;
position: relative; overflow: hidden;
}
.svc-card::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--hc-blue), var(--hc-teal));
transform: scaleX(0); transform-origin: left;
transition: transform 0.35s ease;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); background: #fff; }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card.featured {
background: var(--hc-blue);
border-color: var(--hc-blue);
}
.svc-card.featured::after { background: linear-gradient(90deg,#F5A623,#ffcc66); }
.svc-card.featured h3 { color: #fff; }
.svc-card.featured p { color: rgba(255,255,255,0.72); }
.svc-card.featured .svc-icon-wrap { background: rgba(255,255,255,0.12); }
.svc-card.featured .svc-meta-item { color: rgba(255,255,255,0.7); }
.svc-card.featured .svc-meta-item::before { color: #F5A623; }
.svc-icon-wrap {
width: 60px; height: 60px; border-radius: 16px;
background: var(--hc-blue-pale);
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem; margin-bottom: 20px;
}
.svc-card h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--charcoal); margin-bottom: 12px; }
.svc-card p { font-size: 0.9rem; color: var(--slate); line-height: 1.7; margin-bottom: 18px; }
.svc-meta { display: flex; flex-direction: column; gap: 6px; }
.svc-meta-item {
font-size: 0.8rem; color: var(--hc-blue);
font-weight: 600;
}
.svc-meta-item::before { content: '→ '; }
/* ── SPECIALIZED PROGRAMS ── */
.specials-section {
padding: 90px 0; background: var(--cream);
}
.specials-header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.specials-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,2.8rem); color: var(--charcoal); }
.specials-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.special-card {
border-radius: 22px; overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
display: flex; flex-direction: column;
}
.special-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-deep); }
.special-card-head {
padding: 36px 32px 28px;
position: relative;
}
.special-card-head.women { background: linear-gradient(135deg,#b52f73,#e6498a); }
.special-card-head.child { background: linear-gradient(135deg,#1565c0,#2196f3); }
.special-card-head.insurance { background: linear-gradient(135deg,#1b5e20,#388e3c); }
.sc-icon { font-size: 2.8rem; margin-bottom: 14px; }
.special-card-head h3 {
font-family: 'Playfair Display', serif;
font-size: 1.3rem; color: #fff; margin-bottom: 6px;
}
.special-card-head p { font-size: 0.88rem; color: rgba(255,255,255,0.75); margin: 0; }
.special-card-body {
background: #fff; padding: 28px 32px; flex-grow: 1;
}
.special-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.special-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 0.88rem; color: var(--slate); line-height: 1.5;
}
.sl-dot {
width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.6rem; font-weight: 900; flex-shrink: 0; margin-top: 1px;
}
.women .sl-dot { background: rgba(181,47,115,0.12); color: #b52f73; }
.child .sl-dot { background: rgba(21,101,192,0.12); color: #1565c0; }
.insurance .sl-dot { background: rgba(27,94,32,0.12); color: #1b5e20; }
/* ── CMCHIS INFO STRIP ── */
.cmchis-strip {
padding: 80px 0;
background: linear-gradient(135deg, #003366 0%, #004d99 100%);
position: relative; overflow: hidden;
}
.cmchis-strip::before {
content: '';
position: absolute; width: 550px; height: 550px; border-radius: 50%;
background: rgba(245,166,35,0.06);
top: -200px; right: -150px; pointer-events: none;
}
.cmchis-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
align-items: start; position: relative; z-index: 1;
}
.cmchis-copy h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: #fff; margin-bottom: 14px; }
.cmchis-copy p { color: rgba(255,255,255,0.7); font-size: 1rem; line-height: 1.8; }
.cmchis-stat-big {
font-family: 'Playfair Display', serif;
font-size: 3.5rem; font-weight: 900; color: #F5A623;
line-height: 1; margin: 24px 0 6px;
}
.cmchis-stat-sub { font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.cmchis-cards { display: flex; flex-direction: column; gap: 16px; }
.cmchis-card {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px; padding: 22px 24px;
transition: all 0.3s ease;
}
.cmchis-card:hover { background: rgba(255,255,255,0.14); transform: translateX(6px); }
.cmchis-card h4 { font-size: 0.88rem; font-weight: 700; color: #F5A623; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.cmchis-card p { font-size: 0.88rem; color: rgba(255,255,255,0.68); margin: 0; line-height: 1.6; }
/* ── DONATION IMPACT ── */
.hc-donate-section {
padding: 90px 0;
background: #fff;
}
.hc-donate-header { text-align: center; max-width: 620px; margin: 0 auto 60px; }
.hc-donate-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,2.8rem); color: var(--charcoal); }
.hc-donate-grid {
display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;
}
.hc-don-card {
background: var(--cream);
border-radius: 20px; padding: 34px 26px;
text-align: center; border: 2px solid transparent;
transition: all 0.3s ease; cursor: pointer;
}
.hc-don-card:hover, .hc-don-card.featured {
border-color: var(--hc-blue);
background: #fff; box-shadow: var(--shadow-deep);
transform: translateY(-6px);
}
.hc-don-card.featured { position: relative; }
.hc-don-badge {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: var(--hc-blue); color: #fff;
font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase; padding: 4px 14px; border-radius: 50px; white-space: nowrap;
}
.hc-don-amount {
font-family: 'Playfair Display', serif;
font-size: 2.2rem; font-weight: 900; color: var(--hc-blue); margin-bottom: 10px;
}
.hc-don-desc { font-size: 0.9rem; color: var(--slate); line-height: 1.5; margin-bottom: 24px; }
.hc-don-btn {
display: inline-block; background: var(--hc-blue); color: #fff;
font-weight: 700; font-size: 0.88rem; padding: 12px 28px;
border-radius: 50px; border: none; cursor: pointer; transition: all 0.3s ease; width: 100%;
}
.hc-don-btn:hover { background: var(--hc-blue-dark); transform: scale(1.04); color: #fff; }
.custom-inp {
width: 100%; background: #fff; border: 2px solid var(--border-color);
border-radius: 10px; padding: 12px 16px;
font-size: 1rem; text-align: center;
outline: none; margin-bottom: 14px; color: var(--charcoal);
}
.custom-inp:focus { border-color: var(--hc-blue); }
/* ── UPCOMING CAMPS ── */
.camps-section {
padding: 90px 0; background: var(--hc-blue-pale);
}
.camps-header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.camps-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,2.8rem); color: var(--charcoal); }
.camps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.camp-card {
background: #fff; border-radius: 22px;
overflow: hidden; box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.camp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); }
.camp-card-head {
padding: 24px 28px 20px;
display: flex; align-items: center; gap: 16px;
}
.camp-card-head.general { background: linear-gradient(135deg,#1a6b40,#2d9157); }
.camp-card-head.eye { background: linear-gradient(135deg,#5533aa,#7b59d4); }
.camp-card-head.women { background: linear-gradient(135deg,#b52060,#e0427e); }
.camp-head-icon { font-size: 2.4rem; }
.camp-head-title h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: #fff; margin-bottom: 2px; }
.camp-head-title p { font-size: 0.78rem; color: rgba(255,255,255,0.75); margin: 0; }
.camp-card-body { padding: 24px 28px; }
.camp-detail {
display: flex; align-items: flex-start; gap: 12px;
padding: 8px 0; border-bottom: 1px solid var(--border-color);
font-size: 0.88rem;
}
.camp-detail:last-child { border-bottom: none; }
.camp-detail-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.camp-detail strong { color: var(--charcoal); }
.camp-detail span { color: var(--slate); margin-left: 4px; }
.camps-notice {
margin-top: 44px; background: #fff;
border-left: 5px solid #F5A623;
border-radius: 16px; padding: 24px 32px;
display: flex; align-items: center; gap: 20px;
box-shadow: var(--shadow-sm);
}
.camps-notice-icon { font-size: 2rem; flex-shrink: 0; }
.camps-notice p { font-size: 1rem; color: var(--charcoal); margin: 0; }
.camps-notice strong { color: #856404; }
/* ══════════════════════════════════════════════
YEAR-WISE GALLERY SECTION
══════════════════════════════════════════════ */
/* .gallery-section {
padding: 90px 0; background: var(--cream);
} */
.gallery-header { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.gallery-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,2.8rem); color: var(--charcoal); }
/* Year tabs */
.year-tabs {
display: flex; justify-content: center;
gap: 10px; flex-wrap: wrap; margin-bottom: 48px;
}
.year-tab {
background: #fff; border: 2px solid var(--border-color);
color: var(--slate); font-size: 0.9rem; font-weight: 700;
padding: 10px 26px; border-radius: 50px; cursor: pointer;
transition: all 0.25s ease;
}
/* .year-tab:hover { border-color: var(--hc-blue); color: var(--hc-blue); } */
/* .year-tab.active {
background: var(--hc-blue); border-color: var(--hc-blue); color: #fff;
} */
/* Gallery panels */
.gallery-panel { display: none; }
.gallery-panel.active { display: block; animation: galFade 0.4s ease; }
@keyframes galFade { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
.gallery-year-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 28px; padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
flex-wrap: wrap; gap: 16px;
}
.gallery-year-title {
font-family: 'Playfair Display', serif;
font-size: 1.8rem; color: var(--charcoal);
}
.gallery-year-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.gy-stat { text-align: center; }
.gy-stat-num { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; color: var(--hc-blue); line-height: 1; }
.gy-stat-lbl { font-size: 0.73rem; color: var(--slate); margin-top: 2px; }
/* Masonry grid */
.ph-short { height: 170px; }
.ph-med { height: 240px; }
.ph-tall { height: 300px; }
/* Lightbox */
.lightbox {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.92); z-index: 9999;
align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lb-close {
position: absolute; top: 20px; right: 28px;
font-size: 2.2rem; color: #fff; cursor: pointer;
opacity: 0.7; transition: opacity 0.2s; line-height: 1; border: none; background: none;
}
.lb-close:hover { opacity: 1; }
.lb-content {
width: 680px; max-width: 90vw; max-height: 82vh;
background: var(--hc-blue-pale); border-radius: 18px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 14px; padding: 48px 32px;
}
.lb-icon { font-size: 3.5rem; }
.lb-caption { color: var(--hc-blue); font-size: 1rem; font-weight: 600; text-align: center; }
.lb-note { color: var(--slate); font-size: 0.82rem; text-align: center; }
/* Upload CTA */
.gallery-upload-cta {
margin-top: 48px; text-align: center;
padding: 40px; background: #fff;
border-radius: 20px; border: 2px dashed var(--border-color);
}
/* ── CTA STRIP ── */
.hc-cta-strip {
padding: 80px 0;
background: linear-gradient(135deg, var(--hc-blue-dark) 0%, #003366 100%);
position: relative; overflow: hidden;
}
.hc-cta-strip::before {
content: '';
position: absolute; width: 480px; height: 480px; border-radius: 50%;
background: rgba(245,166,35,0.07);
bottom: -200px; right: -100px; pointer-events: none;
}
.hc-cta-inner {
display: grid; grid-template-columns: 1fr auto;
gap: 60px; align-items: center; position: relative; z-index: 1;
}
.hc-cta-inner h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: #fff; margin-bottom: 10px; }
.hc-cta-inner p { color: rgba(255,255,255,0.68); margin: 0; }
.hc-cta-btns { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
/* ── MODAL ── */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9000; align-items: center; justify-content: center; }
.modal.active { display: flex; }
/* ════════════════════════════════════════════
ZERO FOOD WASTE — PAGE-SPECIFIC STYLES
════════════════════════════════════════════ */
/* ── HERO ── */
.zfw-hero {
position: relative;
min-height: 94vh;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 80px;
background: #050E05;
}
.zfw-hero-bg {
position: absolute;
inset: 0;
background: url('assets/zerofoodwaste-hero.jpg') center/cover no-repeat;
opacity: 0.22;
}
/* Diagonal colour split overlay */
.zfw-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(118deg,
rgba(13,60,30,0.97) 0%,
rgba(13,60,30,0.88) 42%,
rgba(0,0,0,0.30) 100%);
}
.zfw-hero-accent {
position: absolute;
width: 520px; height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(47,169,106,0.18) 0%, transparent 70%);
bottom: -120px; right: 5%;
pointer-events: none;
}
.zfw-hero-accent2 {
position: absolute;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245,166,35,0.12) 0%, transparent 70%);
top: 80px; right: 30%;
pointer-events: none;
}
.zfw-hero-inner {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
padding: 70px 0;
}
.zfw-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(47,169,106,0.15);
border: 1px solid rgba(47,169,106,0.35);
color: #2FA96A;
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 50px;
margin-bottom: 26px;
}
.zfw-badge-dot {
width: 6px; height: 6px;
background: #2FA96A;
border-radius: 50%;
animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
0%,100% { opacity:1; transform:scale(1); }
50% { opacity:.4; transform:scale(1.5); }
}
.zfw-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 5vw, 4.2rem);
font-weight: 900;
color: #fff;
line-height: 1.08;
margin-bottom: 24px;
}
.zfw-hero-title em { color: #F5A623; font-style: normal; }
.zfw-hero-desc {
font-size: 1.08rem;
color: rgba(255,255,255,0.72);
line-height: 1.85;
max-width: 530px;
margin-bottom: 38px;
}
.hero-btn-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 44px;
}
.zfw-hotline-pill {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
padding: 14px 22px;
border-radius: 14px;
transition: background 0.3s;
}
.zfw-hotline-pill:hover { background: rgba(255,255,255,0.1); }
.zfw-hotline-icon {
width: 40px; height: 40px;
background: #2FA96A;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.zfw-hotline-label { font-size: 0.72rem; color: rgba(255,255,255,0.5); letter-spacing: .05em; text-transform: uppercase; }
.zfw-hotline-num { font-size: 1.05rem; font-weight: 700; color: #fff; }
/* hero right — floating info panel */
.zfw-hero-panel {
background: rgba(255,255,255,0.06);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border: 1px solid rgba(255,255,255,0.11);
border-radius: 24px;
padding: 38px 36px;
display: flex;
flex-direction: column;
gap: 0;
}
.zfw-panel-stat {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.zfw-panel-stat:first-child { padding-top: 0; }
.zfw-panel-stat:last-child { border-bottom: none; padding-bottom: 0; }
.zfw-stat-icon {
width: 48px; height: 48px;
background: rgba(47,169,106,0.18);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.zfw-stat-num {
font-family: 'Playfair Display', serif;
font-size: 1.9rem;
font-weight: 900;
color: #F5A623;
line-height: 1;
}
.zfw-stat-lbl { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-top: 2px; }
/* ── SCROLLING TICKER ── */
.zfw-ticker {
background: #2FA96A;
padding: 13px 0;
overflow: hidden;
white-space: nowrap;
}
.ticker-track {
display: inline-flex;
animation: tickerRun 32s linear infinite;
}
/* .ticker-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 38px;
font-size: 0.84rem;
font-weight: 700;
color: #fff;
letter-spacing: 0.05em;
text-transform: uppercase;
} */
/* .ticker-sep { width: 4px; height: 4px; background: rgba(255,255,255,0.4); border-radius: 50%; flex-shrink: 0; } */
@keyframes tickerRun { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
/* ── SECTION EYEBROW ── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--green-mid);
margin-bottom: 14px;
}
.eyebrow::before {
content: '';
width: 28px; height: 2px;
background: var(--green-mid);
flex-shrink: 0;
}
.eyebrow.light { color: #F5A623; }
.eyebrow.light::before { background: #F5A623; }
/* ── PARADOX SPLIT SECTION ── */
.paradox-section {
padding: 90px 0;
background: #fff;
}
.paradox-header { text-align: center; max-width: 680px; margin: 0 auto 64px; }
.paradox-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,2.8rem); color: var(--charcoal); line-height: 1.15; margin-bottom: 16px; }
.paradox-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.paradox-side {
padding: 52px 48px;
}
.paradox-side.problem { background: #1C1C1C; }
.paradox-side.solution { background: var(--green-deep); }
.paradox-tag {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.73rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: 50px;
margin-bottom: 28px;
}
.paradox-tag.problem-tag { background: rgba(255,80,80,0.15); color: #ff7070; }
.paradox-tag.solution-tag { background: rgba(47,169,106,0.25); color: #2FA96A; }
.paradox-side h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: #fff;
margin-bottom: 28px;
}
.paradox-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.paradox-list li {
display: flex;
align-items: flex-start;
gap: 12px;
color: rgba(255,255,255,0.78);
font-size: 0.95rem;
line-height: 1.5;
}
.p-icon-cross {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,80,80,0.2);
color: #ff7070;
font-size: 0.65rem; font-weight: 900;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px;
}
.p-icon-check {
width: 22px; height: 22px; border-radius: 50%;
background: rgba(47,169,106,0.25);
color: #2FA96A;
font-size: 0.65rem; font-weight: 900;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px;
}
/* ── HOW IT WORKS — NUMBERED PROCESS ── */
.process-section {
padding: 90px 0;
background: var(--cream);
}
.process-header { text-align: center; max-width: 600px; margin: 0 auto 64px; }
.process-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,2.8rem); color: var(--charcoal); }
.process-track {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
}
/* connecting line */
.process-track::before {
content: '';
position: absolute;
top: 38px;
left: calc(12.5%);
right: calc(12.5%);
height: 2px;
background: linear-gradient(90deg, var(--green-mid), var(--amber));
z-index: 0;
}
.process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 20px 40px;
position: relative;
z-index: 1;
}
.process-num {
width: 76px; height: 76px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--green-mid);
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 900;
color: var(--green-deep);
margin-bottom: 28px;
box-shadow: 0 0 0 6px rgba(47,169,106,0.1);
transition: all 0.3s ease;
}
.process-step:hover .process-num {
background: var(--green-deep);
color: #fff;
border-color: var(--green-deep);
transform: scale(1.08);
}
.process-emoji { font-size: 1.5rem; margin-bottom: 12px; }
.process-step h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--charcoal); margin-bottom: 10px; }
.process-step p { font-size: 0.88rem; color: var(--slate); line-height: 1.7; }
.process-time {
display: inline-block;
background: var(--green-pale);
color: var(--green-deep);
font-size: 0.73rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 4px 12px;
border-radius: 50px;
margin-top: 10px;
}
/* ── FOOD SOURCES & BENEFICIARIES ── */
.sources-section {
padding: 90px 0;
background: #fff;
}
.sources-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}
.source-card {
border-radius: 22px;
padding: 44px 40px;
height: 100%;
}
.source-card.donors { background: var(--cream); border: 1px solid var(--border-color); }
.source-card.beneficiaries { background: var(--green-deep); }
.source-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.55rem;
margin-bottom: 28px;
}
.source-card.donors h3 { color: var(--charcoal); }
.source-card.beneficiaries h3 { color: #fff; }
.source-list { display: flex; flex-direction: column; gap: 16px; }
.source-item {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
border-radius: 14px;
transition: all 0.25s ease;
}
.source-card.donors .source-item { background: #fff; }
.source-card.donors .source-item:hover { box-shadow: var(--shadow-sm); transform: translateX(4px); }
.source-card.beneficiaries .source-item { background: rgba(255,255,255,0.08); }
.source-card.beneficiaries .source-item:hover { background: rgba(255,255,255,0.14); }
.source-icon-wrap {
width: 46px; height: 46px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.source-card.donors .source-icon-wrap { background: var(--green-pale); }
.source-card.beneficiaries .source-icon-wrap { background: rgba(47,169,106,0.22); }
.source-item-title { font-size: 0.9rem; font-weight: 700; }
.source-card.donors .source-item-title { color: var(--charcoal); }
.source-card.beneficiaries .source-item-title { color: #fff; }
.source-item-sub { font-size: 0.8rem; margin-top: 2px; }
.source-card.donors .source-item-sub { color: var(--slate); }
.source-card.beneficiaries .source-item-sub { color: rgba(255,255,255,0.55); }
/* ── FOOD SAFETY SECTION ── */
.safety-section {
padding: 90px 0;
background: var(--cream);
}
.safety-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.safety-text h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.9rem, 3vw, 2.6rem);
color: var(--charcoal);
margin-bottom: 18px;
line-height: 1.15;
}
.safety-text p { font-size: 1rem; color: var(--slate); line-height: 1.8; margin-bottom: 16px; }
.safety-cards { display: flex; flex-direction: column; gap: 16px; }
.safety-card {
background: #fff;
border-radius: 16px;
padding: 24px 26px;
border-left: 4px solid transparent;
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
}
.safety-card.accept { border-left-color: #2FA96A; }
.safety-card.reject { border-left-color: #e74c3c; }
.safety-card.protocol{ border-left-color: #F5A623; }
.safety-card:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }
.safety-card h4 {
font-size: 0.88rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
}
.safety-card.accept h4 { color: #2FA96A; }
.safety-card.reject h4 { color: #e74c3c; }
.safety-card.protocol h4 { color: #F5A623; }
.safety-card p { font-size: 0.87rem; color: var(--slate); line-height: 1.7; margin: 0; }
/* ── ENVIRONMENTAL IMPACT ── */
.env-section {
padding: 90px 0;
background: var(--green-deep);
position: relative;
overflow: hidden;
}
.env-section::before {
content: '';
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
background: rgba(245,166,35,0.05);
top: -250px; right: -200px;
pointer-events: none;
}
.env-header { text-align: center; max-width: 620px; margin: 0 auto 60px; }
.env-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,2.8rem); color: #fff; }
.env-header p { color: rgba(255,255,255,0.65); margin-top: 12px; }
.env-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
position: relative;
z-index: 1;
}
.env-card {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 34px 26px;
transition: all 0.3s ease;
}
.env-card:hover {
background: rgba(255,255,255,0.13);
transform: translateY(-6px);
border-color: rgba(245,166,35,0.4);
}
.env-card-icon { font-size: 2.2rem; margin-bottom: 16px; }
.env-card h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: #fff; margin-bottom: 10px; }
.env-card p { font-size: 0.88rem; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0; }
/* ── JOIN THE MOVEMENT — 3 ACTION CARDS ── */
.join-section {
padding: 90px 0;
background: #fff;
}
.join-header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.join-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem,3.5vw,2.8rem); color: var(--charcoal); }
.join-header p { color: var(--slate); margin-top: 12px; font-size: 1.05rem; }
.join-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.join-card {
border-radius: 22px;
padding: 44px 36px;
border: 1px solid var(--border-color);
background: var(--cream);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.join-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--green-mid), var(--amber));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.join-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-deep); background: #fff; }
.join-card:hover::after { transform: scaleX(1); }
.join-card-icon {
font-size: 2.4rem;
margin-bottom: 20px;
}
.join-card h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--charcoal); margin-bottom: 14px; }
.join-card p { font-size: 0.92rem; color: var(--slate); line-height: 1.75; flex-grow: 1; margin-bottom: 22px; }
.join-card-list { list-style: none; padding: 0; margin-bottom: 28px; display: flex; flex-direction: column; gap: 8px; }
.join-card-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.86rem;
color: var(--slate);
}
.join-card-list li::before {
content: '→';
color: var(--green-mid);
font-weight: 700;
flex-shrink: 0;
}
/* ── PLEDGE BANNER ── */
.pledge-banner {
background: linear-gradient(135deg, #0D3B1E 0%, #0A5028 100%);
border-radius: 22px;
padding: 52px 60px;
text-align: center;
position: relative;
overflow: hidden;
margin-top: 52px;
}
.pledge-banner::before {
content: '"';
font-family: 'Playfair Display', serif;
font-size: 14rem;
color: rgba(255,255,255,0.04);
position: absolute;
top: -60px; right: 40px;
line-height: 1;
pointer-events: none;
}
.pledge-banner h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #fff; margin-bottom: 16px; }
.pledge-banner blockquote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.2rem; color: rgba(255,255,255,0.8); max-width: 700px; margin: 0 auto 22px; line-height: 1.6; }
.pledge-tag { display: inline-block; background: rgba(245,166,35,0.2); color: #F5A623; font-size: 1rem; font-weight: 700; padding: 8px 24px; border-radius: 50px; letter-spacing: 0.04em; }
/* ── HOTLINE SECTION ── */
.hotline-section {
padding: 70px 0;
background: #EBF9F1;
}
.hotline-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
background: #fff;
border-radius: 24px;
padding: 52px 60px;
border: 2px solid rgba(47,169,106,0.2);
box-shadow: var(--shadow-md);
}
.hotline-copy h2 { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--charcoal); margin-bottom: 10px; }
.hotline-copy p { color: var(--slate); font-size: 1rem; line-height: 1.7; max-width: 480px; }
.hotline-cta { text-align: center; flex-shrink: 0; }
.hotline-num-big {
display: flex;
align-items: center;
gap: 14px;
background: var(--green-deep);
color: #fff;
font-size: 1.5rem;
font-weight: 700;
padding: 20px 36px;
border-radius: 16px;
text-decoration: none;
transition: all 0.3s ease;
margin-bottom: 12px;
white-space: nowrap;
}
.hotline-num-big:hover { background: var(--green-mid); transform: translateY(-3px); box-shadow: var(--shadow-md); color: #fff; }
.hotline-avail { font-size: 0.8rem; color: var(--slate); display: flex; align-items: center; gap: 6px; justify-content: center; }
.avail-dot { width: 8px; height: 8px; background: #2FA96A; border-radius: 50%; animation: heroPulse 2s infinite; }
/* ── CTA STRIP ── */
.cta-strip {
padding: 80px 0;
background: linear-gradient(135deg, var(--green-deep), #0A3D22);
position: relative;
overflow: hidden;
}
.cta-strip::before {
content: '';
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
background: rgba(245,166,35,0.07);
bottom: -200px; right: -100px;
pointer-events: none;
}
.cta-strip-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.cta-strip h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: #fff; margin-bottom: 10px; }
.cta-strip p { color: rgba(255,255,255,0.68); font-size: 1rem; margin: 0; }
.cta-strip-btns { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
/* ── PAGE-SPECIFIC STYLES ── */
/* FOOD Donation Page */
.food-hero {
position: relative;
min-height: 92vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #0D3B1E 0%, #1A5C35 45%, #0D5C3A 100%);
overflow: hidden;
padding-top: 80px;
}
.food-hero::before {
content: '';
position: absolute;
inset: 0;
background: url('assets/food-hero-bg.jpg') center/cover no-repeat;
opacity: 0.18;
mix-blend-mode: luminosity;
}
.food-hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
.blob-amber { width: 500px; height: 500px; background: rgba(245,166,35,0.15); top: -100px; right: -150px; }
.blob-green { width: 400px; height: 400px; background: rgba(47,169,106,0.12); bottom: -100px; left: -100px; }
.food-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
padding: 60px 0;
}
.food-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(245,166,35,0.15);
border: 1px solid rgba(245,166,35,0.35);
color: #F5A623;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 50px;
margin-bottom: 24px;
}
.food-hero-badge span { width: 6px; height: 6px; background: #F5A623; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.5; transform:scale(1.4); } }
.food-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.6rem, 5vw, 4rem);
font-weight: 900;
color: #fff;
line-height: 1.1;
margin-bottom: 24px;
}
.food-hero-title em { color: #F5A623; font-style: normal; }
.food-hero-desc {
font-size: 1.1rem;
color: rgba(255,255,255,0.75);
line-height: 1.8;
margin-bottom: 36px;
max-width: 520px;
}
.hero-action-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.hero-trust-note {
font-size: 0.82rem;
color: rgba(255,255,255,0.5);
display: flex;
align-items: center;
gap: 6px;
}
.hero-trust-note svg { flex-shrink: 0; }
/* Hero right — floating stats card */
.hero-stats-card {
background: rgba(255,255,255,0.07);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 24px;
padding: 40px;
}
.hero-stat-item {
padding: 20px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-stat-item:last-child { border-bottom: none; padding-bottom: 0; }
.hero-stat-item:first-child { padding-top: 0; }
.hero-stat-num {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 900;
color: #F5A623;
line-height: 1;
}
.hero-stat-label { font-size: 0.88rem; color: rgba(255,255,255,0.65); margin-top: 4px; }
/* IMPACT TICKER */
.impact-ticker {
background: #F5A623;
padding: 14px 0;
overflow: hidden;
white-space: nowrap;
}
.ticker-track {
display: inline-flex;
animation: tickerMove 30s linear infinite;
gap: 0;
}
/* .ticker-item {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 40px;
font-size: 0.88rem;
font-weight: 700;
color: #1C1C1C;
letter-spacing: 0.04em;
text-transform: uppercase;
} */
.ticker-dot { width: 5px; height: 5px; background: rgba(0,0,0,0.3); border-radius: 50%; flex-shrink: 0; }
@keyframes tickerMove { 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }
/* MISSION STRIP */
.mission-strip {
padding: 80px 0;
background: var(--cream);
}
.mission-strip-inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
}
.section-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--green-mid);
margin-bottom: 16px;
}
.section-eyebrow::before {
content: '';
width: 32px;
height: 2px;
background: var(--green-mid);
flex-shrink: 0;
}
.mission-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 3.5vw, 2.8rem);
font-weight: 700;
color: var(--charcoal);
line-height: 1.15;
margin-bottom: 20px;
}
.mission-title span { color: var(--green-mid); }
.mission-body { font-size: 1.05rem; color: var(--slate); line-height: 1.8; }
.mission-quote {
background: var(--green-deep);
border-radius: 20px;
padding: 44px 40px;
color: #fff;
position: relative;
overflow: hidden;
}
.mission-quote::before {
content: '"';
font-family: 'Playfair Display', serif;
font-size: 8rem;
color: rgba(255,255,255,0.06);
position: absolute;
top: -20px;
right: 20px;
line-height: 1;
}
.mission-quote blockquote {
font-family: 'Playfair Display', serif;
font-size: 1.35rem;
font-style: italic;
line-height: 1.6;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.mission-quote cite { font-size: 0.85rem; color: rgba(255,255,255,0.6); font-style: normal; }
/* PROGRAMS */
.programs-section {
padding: 90px 0;
background: #fff;
}
/* .programs-header { text-align: center; max-width: 620px; margin: 0 auto 60px; } */
.programs-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.prog-card {
background: var(--cream);
border-radius: 20px;
padding: 36px 28px;
border: 1px solid rgba(0,0,0,0.06);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
.prog-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--green-mid), var(--amber));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
}
.prog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-deep); background: #fff; }
.prog-card:hover::after { transform: scaleX(1); }
.prog-icon-wrap {
width: 60px; height: 60px;
background: var(--green-pale);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 20px;
}
.prog-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
color: var(--charcoal);
margin-bottom: 12px;
}
.prog-card p { font-size: 0.9rem; color: var(--slate); line-height: 1.7; margin-bottom: 20px; }
.prog-meta { display: flex; flex-direction: column; gap: 6px; }
.prog-meta-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
color: var(--green-mid);
font-weight: 600;
}
.prog-meta-item::before { content: '→'; }
/* DONATION IMPACT */
/* .impact-section {
padding: 90px 0;
background: linear-gradient(135deg, var(--green-deep) 0%, #0A3D25 100%);
position: relative;
overflow: hidden;
}
.impact-section::before {
content: '';
position: absolute;
width: 600px; height: 600px;
border-radius: 50%;
background: rgba(245,166,35,0.06);
top: -200px; right: -200px;
} */
/* .impact-header { text-align: center; margin-bottom: 60px; }
.impact-header .section-eyebrow { color: #F5A623; }
.impact-header .section-eyebrow::before { background: #F5A623; } */
/* .impact-header h2 { color: #fff; } */
.donation-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
position: relative;
z-index: 1;
}
.don-card {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 20px;
padding: 36px 28px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
/* .don-card:hover, .don-card.featured {
background: rgba(255,255,255,0.14);
border-color: #F5A623;
transform: translateY(-6px);
} */
.don-card.featured { border-color: #F5A623; position: relative; }
/* .don-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: #F5A623;
color: #1C1C1C;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 14px;
border-radius: 50px;
white-space: nowrap;
} */
/* .don-amount {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 900;
color: #F5A623;
margin-bottom: 10px;
} */
/* .don-desc { font-size: 0.9rem; color: rgba(255,255,255,0.65); margin-bottom: 24px; line-height: 1.5; } */
/* .don-card .btn-donate-card {
display: inline-block;
background: #F5A623;
color: #1C1C1C;
font-weight: 700;
font-size: 0.88rem;
padding: 12px 28px;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.don-card .btn-donate-card:hover { background: #D4891A; transform: scale(1.04); } */
.custom-amount-wrap { margin-bottom: 16px; }
.custom-amount-wrap input {
width: 100%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 10px;
padding: 12px 16px;
color: #fff;
font-size: 1rem;
text-align: center;
outline: none;
}
.custom-amount-wrap input::placeholder { color: rgba(255,255,255,0.4); }
.custom-amount-wrap input:focus { border-color: #F5A623; }
/* YEAR-WISE GALLERY */
/* .gallery-section {
padding: 90px 0;
background: var(--cream);
} */
.gallery-header { text-align: center; max-width: 600px; margin: 0 auto 50px; }
.year-tabs {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 48px;
}
.year-tab {
background: #fff;
border: 2px solid var(--border-color);
color: var(--slate);
font-size: 0.9rem;
font-weight: 700;
padding: 10px 24px;
border-radius: 50px;
cursor: pointer;
transition: all 0.25s ease;
}
/* .year-tab:hover { border-color: var(--green-mid); color: var(--green-mid); } */
/* .year-tab.active { background: var(--green-deep); border-color: var(--green-deep); color: #fff; } */
.gallery-panel { display: none; }
.gallery-panel.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }
.gallery-year-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.gallery-year-title {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--charcoal);
}
.gallery-year-stats {
display: flex;
gap: 24px;
}
.gy-stat { text-align: center; }
.gy-stat-num { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; color: var(--green-mid); line-height: 1; }
.gy-stat-lbl { font-size: 0.75rem; color: var(--slate); margin-top: 2px; }
/* LIGHTBOX */
.lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
z-index: 9999;
align-items: center;
justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-close {
position: absolute;
top: 20px; right: 28px;
font-size: 2rem;
color: #fff;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-img-wrap {
max-width: 90vw;
max-height: 85vh;
border-radius: 16px;
overflow: hidden;
background: var(--green-pale);
width: 700px;
height: 480px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
color: var(--green-mid);
font-size: 1rem;
}
.lightbox-img-icon { font-size: 3rem; }
/* VOLUNTEER / CTA STRIP */
.cta-strip {
background: var(--green-deep);
padding: 70px 0;
position: relative;
overflow: hidden;
}
.cta-strip::before {
content: '';
position: absolute;
width: 400px; height: 400px;
border-radius: 50%;
background: rgba(245,166,35,0.08);
bottom: -150px; right: -100px;
}
.cta-strip-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.cta-strip h2 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
color: #fff;
margin-bottom: 12px;
}
.cta-strip p { color: rgba(255,255,255,0.7); font-size: 1rem; margin: 0; }
.cta-strip-btns { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
/* MODAL (inherit existing donation.css, just add food-specific overrides) */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9000; align-items: center; justify-content: center; }
.modal.active { display: flex; }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.hero-inner-grid { grid-template-columns: 1fr; gap: 40px; }
.overview-grid { grid-template-columns: 1fr; gap: 48px; }
.facts-split { grid-template-columns: 1fr; gap: 48px; }
.bento-grid { grid-template-columns: repeat(2, 1fr); }
.bento-card.featured { grid-column: span 2; }
.donation-cards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.stats-row { grid-template-columns: repeat(2, 1fr); }
.stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
.testi-row { grid-template-columns: 1fr; }
.join-grid { grid-template-columns: 1fr; }
.photo-grid { grid-template-columns: repeat(2, 1fr); }
.photo-item:nth-child(1) { grid-column: span 2; grid-row: span 1; min-height: 200px; }
.donation-cards-grid { grid-template-columns: repeat(2, 1fr); }
.facts-grid { grid-template-columns: 1fr; }
.bento-grid { grid-template-columns: 1fr; }
.bento-card.featured { grid-column: span 1; }
.gallery-year-tabs { gap: 8px; }
.year-tab { padding: 8px 16px; font-size: 0.82rem; }
}
@media (max-width: 480px) {
.hero-inner-grid { padding: 80px 0 60px; }
.donation-cards-grid { grid-template-columns: 1fr 1fr; }
.photo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
.hc-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.hc-hero-panel { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; }
.hc-panel-stat { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.07); padding: 16px 18px; }
.hc-panel-stat:nth-child(2n) { border-right: none; }
.hc-mission-inner { grid-template-columns: 1fr; gap: 40px; }
.services-bento { grid-template-columns: repeat(2,1fr); }
.specials-grid { grid-template-columns: 1fr; gap: 24px; }
.cmchis-inner { grid-template-columns: 1fr; gap: 40px; }
.hc-donate-grid { grid-template-columns: repeat(2,1fr); }
.camps-grid { grid-template-columns: 1fr; }
.photo-masonry { columns: 2; }
.hc-cta-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
.hc-hero { min-height: auto; padding-top: 100px; }
.hc-hero-panel { grid-template-columns: 1fr; }
.hc-panel-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
.services-bento { grid-template-columns: 1fr; }
.hc-donate-grid { grid-template-columns: 1fr; }
.photo-masonry { columns: 1; }
.specials-grid { grid-template-columns: 1fr; }
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.zfw-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.zfw-hero-panel { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; padding: 28px; }
.zfw-panel-stat { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.07); padding: 16px 20px; }
.zfw-panel-stat:nth-child(2n) { border-right: none; }
.paradox-grid { grid-template-columns: 1fr; }
.process-track { grid-template-columns: repeat(2,1fr); }
.process-track::before { display: none; }
.sources-inner { grid-template-columns: 1fr; }
.safety-inner { grid-template-columns: 1fr; gap: 40px; }
.env-bento { grid-template-columns: repeat(2,1fr); }
.join-grid { grid-template-columns: repeat(2,1fr); }
.hotline-inner { grid-template-columns: 1fr; gap: 32px; }
.cta-strip-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
.zfw-hero { min-height: auto; padding-top: 100px; }
.zfw-hero-panel { grid-template-columns: 1fr; }
.zfw-panel-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
.env-bento { grid-template-columns: 1fr; }
.join-grid { grid-template-columns: 1fr; }
.process-track { grid-template-columns: 1fr; }
.pledge-banner { padding: 40px 28px; }
.hotline-inner { padding: 36px 28px; text-align: center; }
.hotline-copy p { max-width: 100%; }
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.food-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.hero-stats-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.hero-stat-item { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08); padding: 20px; }
.hero-stat-item:last-child { border-right: none; }
.mission-strip-inner { grid-template-columns: 1fr; gap: 40px; }
.programs-bento { grid-template-columns: repeat(2, 1fr); }
.donation-grid { grid-template-columns: repeat(2, 1fr); }
.photo-masonry { columns: 2; }
}
@media (max-width: 768px) {
.food-hero { min-height: auto; padding-top: 100px; }
.food-hero-title { font-size: 2.2rem; }
.programs-bento { grid-template-columns: 1fr; }
.donation-grid { grid-template-columns: 1fr; }
.cta-strip-inner { grid-template-columns: 1fr; gap: 28px; }
.gallery-year-header { flex-direction: column; align-items: flex-start; gap: 16px; }
.photo-masonry { columns: 1; }
}
/* ──────────────────────────────────────────────────────────────
20. RESPONSIVE
────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hero-inner { grid-template-columns: 1fr; min-height: auto; }
.about-hero::before{ display: none; }
.hero-copy { padding: 60px 0 40px; }
.hero-visual { padding: 0 0 60px; }
.hero-img-badge { bottom: -16px; left: -10px; }
.hero-tag-float { display: none; }
.story-layout { grid-template-columns: 1fr; gap: 40px; }
.story-left { position: static; }
.founder-layout { grid-template-columns: 1fr; }
.founder-card-dark { position: static; max-width: 320px; margin: 0 auto 40px; }
.mv-split { grid-template-columns: 1fr; }
.mv-panel { padding: 40px 32px; }
.values-bento { grid-template-columns: repeat(2, 1fr); }
.vb-card.wide { grid-column: span 2; }
.team-cards { grid-template-columns: repeat(2, 1fr); }
.legal-duo { grid-template-columns: 1fr; }
.partner-cards { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 768px) {
.about-h1 { font-size: 2.4rem; }
.values-bento { grid-template-columns: 1fr; }
.vb-card.wide { grid-column: span 1; }
.team-cards { grid-template-columns: 1fr; }
.hero-btns { flex-direction: column; }
.hero-btns .btn { width: 100%; text-align: center; }
}
@media (min-width: 769px) {
.navbar { position: fixed; top: 0; z-index: 1000; }
}
@media (max-width: 1024px) {
.impact-section .stats-grid { grid-template-columns: repeat(3, 1fr); }
.impact-section .stat-card:nth-child(3)::after { display: none; }
.programs-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
.help-section .help-grid { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid,
.testi-grid { grid-template-columns: repeat(2, 1fr); }
.mega-menu { display: none; }
}
@media (max-width: 968px) {
.nav-menu { display: none; position: absolute; top: 85px; left: 0; right: 0; background-color: var(--bg-white); flex-direction: column; align-items: flex-start; padding: 2rem; box-shadow: var(--shadow-md); gap: 15px; }
.nav-menu.active { display: flex; z-index: 9999; }
.nav-menu a { color: var(--text-dark); }
.mobile-toggle { display: flex;}
.mobile-toggle span { background-color: var(--text-dark); }
.nav-menu li.mega-dropdown { position: relative; width: 100%; }
.mega-menu { position: static !important; width: 100%; box-shadow: none; border-top: none; border-left: 3px solid var(--primary-color); display: none; opacity: 1; visibility: visible; transform: none; padding: 0 0 0 10px; background: #f9f9f9; margin-top: 10px; }
.nav-menu li.mega-dropdown:hover .mega-menu { display: none; }
.nav-menu li.mega-dropdown.active-dropdown .mega-menu { display: block; }
.mega-content-container { grid-template-columns: 1fr; gap: 0; padding: 0.5rem 1rem; }
.mega-column { margin-bottom: 0; border-bottom: 1px solid #eee; }
.mega-column:last-child { border-bottom: none; }
.mega-column h3 { font-size: 1rem !important; margin: 0; padding: 15px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text-dark); }
.mega-column h3::after { content: '▼'; font-size: 0.7rem; color: var(--primary-color); transition: transform 0.3s ease; }
.mega-column.active-col h3::after { transform: rotate(180deg); }
.mega-column.active-col h3 { color: var(--primary-color); }
.mega-column ul { display: none; padding-bottom: 15px; padding-left: 10px; }
.mega-column.active-col ul { display: block; }
.mega-cta { display: none; }
.dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0; margin: 0; display: none; min-width: 100%; }
.dropdown.active .dropdown-menu { display: block; background: rgba(255,255,255,0.05); border-radius: 8px; margin-top: 10px; padding: 10px 0; }
.dropdown-menu li a { color: var(--text-dark); padding: 10px 20px; border-left: none; }
.founder-content, .mv-grid, .legal-grid, .contact-grid { grid-template-columns: 1fr; }
.founder-image { position: static; }
.hero-title { font-size: 2.5rem; }
.mission-content { grid-template-columns: 1fr; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
}
@media (max-width: 768px) {
section { padding: 72px 0; }
.navbar { position: static; }
.impact-section .stats-grid { grid-template-columns: repeat(2, 1fr); }
.impact-section .stat-card::after { display: none !important; }
.programs-grid, .why-grid,
.help-section .help-grid,
.testi-grid, .testimonials-grid { grid-template-columns: 1fr; }
.trust-divider { display: none; }
.trust-inner { gap: 20px; justify-content: flex-start; overflow-x: auto; }
.slider-arrow { display: none; }
.scroll-cue { display: none; }
.footer-bottom { flex-direction: column; text-align: center; }
.mission-values { grid-template-columns: 1fr; }
.donation-form-container { padding: 2rem 1.5rem; }
.form-row { grid-template-columns: 1fr; }
.amount-options { grid-template-columns: repeat(2, 1fr); }
.csr-benefits { grid-template-columns: 1fr; }
.community-photo-placeholder { height: 300px; font-size: 1.2rem; }
.stories-grid, .support-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.hero-title, .page-title { font-size: 2rem; }
.hero-subtitle, .page-subtitle { font-size: 1rem; }
.hero-buttons { flex-direction: column; }
.hero-buttons .btn { width: 100%; }
.section-title { font-size: 2rem; }
.stat-number { font-size: 2rem; }
}
/* ════════════════════════════════════════════════════════════════════
GALLERY SECTION
════════════════════════════════════════════════════════════════════ */
/* .gallery-section {
padding: 100px 0;
background: #f8f9fa;
position: relative;
overflow: hidden;
} */
.gallery-section::before {
content: '';
position: absolute;
top: -80px; left: -80px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(47,169,106,0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.gallery-header {
text-align: center;
margin-bottom: 2.5rem;
}
.gallery-header .section-subtitle {
max-width: 600px;
margin: 0 auto;
}
/* Filter Tabs */
.gallery-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 2.5rem;
}
.gal-tab {
padding: 0.5rem 1.25rem;
border: 2px solid #dee2e6;
border-radius: 100px;
background: #fff;
color: #495057;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
font-family: inherit;
}
.gal-tab:hover {
border-color: #2fa96a;
color: #2fa96a;
}
.gal-tab.active {
background: #2fa96a;
border-color: #2fa96a;
color: #fff;
box-shadow: 0 4px 14px rgba(47,169,106,0.3);
}
/* Gallery Grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
margin-bottom: 2rem;
}
@media (max-width: 900px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.gallery-grid { grid-template-columns: 1fr; }
}
.gal-item {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
animation: galFadeIn 0.5s ease forwards;
}
.gal-item:hover {
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(0,0,0,0.14);
}
@keyframes galFadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.gal-img-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(135deg, #e9ecef, #dee2e6);
}
.gal-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.gal-item:hover .gal-img-wrap img {
transform: scale(1.06);
}
/* Placeholder when image missing */
.gal-img-wrap.img-placeholder {
background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
}
.gal-img-wrap.img-placeholder::before {
content: '🖼️';
opacity: 0.4;
}
/* Overlay */
.gal-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 55%);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: flex-end;
padding: 1.25rem;
}
.gal-item:hover .gal-overlay { opacity: 1; }
.gal-overlay-content { color: #fff; }
.gal-overlay-content p {
margin: 0.25rem 0 0.1rem;
font-weight: 600;
font-size: 0.95rem;
}
.gal-overlay-content small {
font-size: 0.78rem;
opacity: 0.8;
}
.gal-category-badge {
display: inline-block;
padding: 0.2rem 0.65rem;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(4px);
border-radius: 100px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid rgba(255,255,255,0.3);
}
.gallery-cta {
text-align: center;
margin-top: 1rem;
}
/* ════════════════════════════════════════════════════════════════════
SOCIAL FOLLOW SECTION
════════════════════════════════════════════════════════════════════ */
.social-follow-section {
padding: 90px 0;
background: linear-gradient(135deg, #0a1628 0%, #112240 50%, #0a1628 100%);
position: relative;
overflow: hidden;
}
.social-follow-section::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(47,169,106,0.08) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.social-follow-section::after {
content: '';
position: absolute;
bottom: -100px; left: -50px;
width: 350px; height: 350px;
background: radial-gradient(circle, rgba(0,119,182,0.08) 0%, transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.social-follow-inner {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 900px) {
.social-follow-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
text-align: center;
}
}
.social-follow-text .section-tag {
color: #2fa96a;
background: rgba(47,169,106,0.12);
border: 1px solid rgba(47,169,106,0.25);
}
.social-follow-text .section-title {
color: #fff;
margin: 0.75rem 0 1rem;
font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.social-follow-text p {
color: rgba(255,255,255,0.65);
line-height: 1.7;
font-size: 1rem;
}
/* Social Cards Grid */
.social-follow-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (max-width: 900px) {
.social-follow-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.social-follow-cards { grid-template-columns: 1fr 1fr; }
}
.soc-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
padding: 1.25rem 1.1rem 1.1rem;
border-radius: 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
position: relative;
overflow: hidden;
}
.soc-card::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
border-radius: inherit;
}
.soc-card:hover {
transform: translateY(-5px);
border-color: rgba(255,255,255,0.2);
box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.soc-card:hover::before { opacity: 1; }
/* Per-platform accent colours */
.soc-facebook .soc-icon { color: #1877f2; }
.soc-facebook:hover { background: rgba(24,119,242,0.12); border-color: rgba(24,119,242,0.4); }
.soc-facebook::before { background: linear-gradient(135deg, rgba(24,119,242,0.05), transparent); }
.soc-instagram .soc-icon { color: #e1306c; }
.soc-instagram:hover { background: rgba(225,48,108,0.12); border-color: rgba(225,48,108,0.4); }
.soc-instagram::before { background: linear-gradient(135deg, rgba(225,48,108,0.05), transparent); }
.soc-youtube .soc-icon { color: #ff0000; }
.soc-youtube:hover { background: rgba(255,0,0,0.12); border-color: rgba(255,0,0,0.4); }
.soc-youtube::before { background: linear-gradient(135deg, rgba(255,0,0,0.05), transparent); }
.soc-linkedin .soc-icon { color: #0a66c2; }
.soc-linkedin:hover { background: rgba(10,102,194,0.12); border-color: rgba(10,102,194,0.4); }
.soc-linkedin::before { background: linear-gradient(135deg, rgba(10,102,194,0.05), transparent); }
.soc-whatsapp .soc-icon { color: #25d366; }
.soc-whatsapp:hover { background: rgba(37,211,102,0.12); border-color: rgba(37,211,102,0.4); }
.soc-whatsapp::before { background: linear-gradient(135deg, rgba(37,211,102,0.05), transparent); }
.soc-twitter .soc-icon { color: #fff; }
.soc-twitter:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
.soc-twitter::before { background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent); }
.soc-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.soc-icon svg { width: 22px; height: 22px; }
.soc-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.soc-name {
font-size: 0.95rem;
font-weight: 700;
color: #fff;
}
.soc-handle {
font-size: 0.75rem;
color: rgba(255,255,255,0.45);
}
.soc-action {
font-size: 0.78rem;
font-weight: 600;
color: rgba(255,255,255,0.6);
margin-top: 4px;
transition: color 0.2s ease;
}
.soc-card:hover .soc-action {
color: rgba(255,255,255,0.9);
}