:root {
--red:#e51b35;
--red2:#ff445d;
--navy:#061d36;
--navy2:#0b2d55;
--yellow:#ffdf00;
--green:#18b66b;
--text:#13233a;
--muted:#667085;
--soft:#f5f8fc
}
* {
	margin:0;
	padding:0;
	box-sizing:border-box
}
html {
	scroll-behavior:smooth
}
body {
	font-family:Arial, Helvetica, sans-serif;
	color:var(--text);
	background:#fff;
	overflow-x:hidden
}
a {
	text-decoration:none;
	color:inherit
}
ul {
	list-style:none
}
.container {
	width:92%;
	max-width:1200px;
	margin:auto
}
img {
	max-width:100%;
	display:block
}
.topbar {
	background:linear-gradient(90deg, var(--navy), #0d3f76);
	color:#fff;
	font-size:13px;
	padding:10px 0
}
.topbar-flex {
	display:flex;
	justify-content:space-between;
	align-items:center
}
.topbar i {
	color:var(--yellow);
	margin-right:6px
}
.topbar span {
	opacity:.4;
	margin:0 12px
}
.top-social a {
	width:28px;
	height:28px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-left:7px;
	background:rgba(255, 255, 255, .12);
transition:.3s
}
.top-social a:hover {
	background:var(--yellow);
	color:#111;
	transform:translateY(-3px)
}
.header {
	background:rgba(255, 255, 255, .92);
	backdrop-filter:blur(14px);
	position:sticky;
	top:0;
	z-index:999;
	box-shadow:0 12px 35px rgba(6, 29, 54, .12)
}
.nav {
	height:82px;
	display:flex;
	align-items:center;
	justify-content:space-between
}
.logo {
	display:flex;
	align-items:center;
	gap:10px
}
.logo img {
	width:58px;
	height:58px;
	border-radius:50%;
	object-fit:cover;
	box-shadow:0 8px 18px rgba(229, 27, 53, .24)
}
.logo h2 {
	font-size:22px;
	line-height:.95;
	color:var(--red)
}
.logo span {
	font-size:11px;
	color:var(--navy);
	font-weight:900;
	letter-spacing:1.5px
}
.menu {
	display:flex;
	align-items:center;
	gap:26px
}
.menu>li {
	position:relative;
	font-weight:900;
	font-size:14px;
	text-transform:uppercase
}
.menu>li>a {
	padding:31px 0;
	display:block;
transition:.3s
}
.menu>li>a:hover, .menu .active {
	color:var(--red)
}
.dropdown {
	position:absolute;
	top:84px;
	left:-16px;
	width:230px;
	background:#fff;
	border-radius:16px;
	box-shadow:0 18px 45px rgba(6, 29, 54, .18);
	opacity:0;
	visibility:hidden;
	transform:translateY(14px);
transition:.35s;
	padding:12px;
	border:1px solid rgba(229, 27, 53, .08)
}
.dropdown:before {
	content:"";
	position:absolute;
	top:-8px;
	left:30px;
	width:16px;
	height:16px;
	background:#fff;
	transform:rotate(45deg)
}
.dropdown a {
	display:block;
	padding:12px;
	border-radius:10px;
	font-size:13px;
	text-transform:none
}
.dropdown a:hover {
	background:#fff1f3;
	color:var(--red);
	padding-left:18px
}
.menu li:hover .dropdown {
	opacity:1;
	visibility:visible;
	transform:translateY(0)
}
.donate-btn, .btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	border:0;
	cursor:pointer;
	font-weight:900;
transition:.35s
}
.donate-btn {
	background:linear-gradient(135deg, var(--yellow), #ffb800);
	color:#111;
	padding:14px 24px;
	border-radius:40px;
	box-shadow:0 12px 28px rgba(255, 223, 0, .36)
}
.donate-btn:hover, .btn:hover {
	transform:translateY(-4px);
	box-shadow:0 16px 35px rgba(229, 27, 53, .25)
}
.mobile-btn {
	display:none;
	border:0;
	background:var(--navy);
	color:#fff;
	width:44px;
	height:44px;
	border-radius:12px;
	font-size:20px
}
.hero {
	height:640px;
	position:relative
}
.hero .swiper, .hero .swiper-slide {
	height:100%
}
.hero-slide {
	background-size:cover;
	background-position:center;
	position:relative;
	display:flex;
	align-items:center
}
.hero-slide:before {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg, rgba(3, 16, 31, .88), rgba(6, 29, 54, .45), rgba(229, 27, 53, .18))
}
.hero-content {
	position:relative;
	color:#fff;
	width:58%;
	animation:fadeUp 1s ease
}
.hero-content small, .section-head small, .about-text small {
	color:var(--yellow);
	font-weight:900;
	letter-spacing:2px
}
.hero-content h1 {
	font-size:64px;
	line-height:1.03;
	margin:16px 0;
	text-transform:uppercase
}
.hero-content h1 span {
	color:var(--yellow)
}
.hero-content p {
	font-size:18px;
	line-height:1.8;
	margin-bottom:28px;
	color:#eef4ff
}
.btn {
	padding:15px 28px;
	border-radius:9px
}
.btn-red {
	background:linear-gradient(135deg, var(--red), var(--red2));
	color:#fff
}
.btn-glass {
	border:1px solid rgba(255, 255, 255, .55);
	color:#fff;
	background:rgba(255, 255, 255, .12);
	backdrop-filter:blur(10px)
}
.btn-yellow {
	background:linear-gradient(135deg, var(--yellow), #ffbb00);
	color:#111
}
.glass-card {
	position:absolute;
	right:8%;
	bottom:115px;
	z-index:3;
	background:rgba(255, 255, 255, .16);
	border:1px solid rgba(255, 255, 255, .28);
	backdrop-filter:blur(12px);
	color:#fff;
	border-radius:18px;
	padding:18px 24px;
	display:grid;
	gap:4px;
	animation:float 4s ease-in-out infinite
}
.hero-badge i {
	font-size:34px;
	color:var(--yellow)
}
.swiper-button-prev, .swiper-button-next {
	width:52px!important;
	height:52px!important;
	border-radius:50%;
	background:rgba(255, 255, 255, .2);
	backdrop-filter:blur(8px);
	color:#fff!important;
transition:.3s
}
.swiper-button-prev:after, .swiper-button-next:after {
	font-size:18px!important;
	font-weight:900
}
.swiper-button-prev:hover, .swiper-button-next:hover {
	background:var(--red)
}
.swiper-pagination-bullet-active {
	background:var(--red)!important
}
.service-strip {
	margin-top:-70px;
	position:relative;
	z-index:5
}
.service-box {
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	background:#fff;
	border-radius:22px;
	overflow:hidden;
	box-shadow:0 24px 60px rgba(6, 29, 54, .16)
}
.service-item {
	text-align:center;
	padding:32px 14px;
	border-right:1px solid #eef1f5;
transition:.35s;
	position:relative;
	overflow:hidden
}
.service-item:before {
	content:"";
	position:absolute;
	inset:auto 0 0 0;
	height:0;
	background:linear-gradient(135deg, var(--red), var(--navy));
transition:.35s;
	z-index:0
}
.service-item>* {
	position:relative;
	z-index:1
}
.service-item i {
	font-size:38px;
	margin-bottom:13px;
	color:var(--red);
transition:.35s
}
.service-item h4 {
	font-size:15px
}
.service-item p {
	font-size:13px;
	color:var(--muted);
	margin-top:6px
}
.service-item:hover {
	transform:translateY(-8px)
}
.service-item:hover:before {
	height:100%
}
.service-item:hover, .service-item:hover p, .service-item:hover i {
	color:#fff
}
.section {
	padding:85px 0
}
.soft-bg {
	background:linear-gradient(180deg, #f7faff, #fff)
}
.section-head {
	display:flex;
	align-items:end;
	justify-content:space-between;
	gap:20px;
	margin-bottom:34px
}
.section-head.center {
	display:block;
	text-align:center
}
.section-head.mini {
	display:flex;
	margin-bottom:20px
}
.section-head h2 {
	font-size:38px;
	line-height:1.2;
	max-width:680px
}
.section-head small {
	color:var(--red);
	display:block;
	margin-bottom:8px
}
.slider-controls {
	display:flex;
	gap:10px;
	flex-shrink:0
}
.slider-controls button {
	width:44px;
	height:44px;
	border:0;
	border-radius:50%;
	background:#fff;
	color:var(--red);
	box-shadow:0 8px 22px rgba(6, 29, 54, .12);
	cursor:pointer;
transition:.3s
}
.slider-controls button:hover {
	background:var(--red);
	color:#fff;
	transform:translateY(-3px)
}
.controlled {
	padding:6px 4px 45px!important
}
.flip-card {
	height:345px;
	perspective:1000px
}
.flip-inner {
	position:relative;
	width:100%;
	height:100%;
transition:.7s;
	transform-style:preserve-3d
}
.flip-card:hover .flip-inner {
	transform:rotateY(180deg)
}
.flip-front, .flip-back {
	position:absolute;
	inset:0;
	border-radius:20px;
	overflow:hidden;
	backface-visibility:hidden;
	box-shadow:0 18px 45px rgba(6, 29, 54, .12)
}
.flip-front {
	background:#fff
}
.flip-front img {
	height:220px;
	width:100%;
	object-fit:cover;
transition:.4s
}
.flip-front h3 {
	padding:34px 22px 0;
	font-size:21px
}
.cause-icon {
	position:absolute;
	left:24px;
	top:190px;
	width:62px;
	height:62px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	color:var(--red);
	font-size:26px;
	box-shadow:0 10px 24px rgba(6, 29, 54, .15)
}
.flip-back {
	background:linear-gradient(135deg, var(--navy), var(--red));
	color:#fff;
	transform:rotateY(180deg);
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	padding:28px
}
.flip-back h3 {
	font-size:25px;
	margin-bottom:12px
}
.flip-back p {
	line-height:1.75;
	color:#eef4ff
}
.flip-back a {
	margin-top:18px;
	background:#fff;
	color:var(--red);
	padding:12px 20px;
	border-radius:30px;
	font-weight:900
}
.stats {
	background:linear-gradient(90deg, var(--navy), #092d55);
	color:#fff;
	padding:42px 0;
	position:relative;
	overflow:hidden
}
.stats:before {
	content:"";
	position:absolute;
	width:320px;
	height:320px;
	border-radius:50%;
	background:rgba(255, 223, 0, .14);
	filter:blur(10px);
	right:-90px;
	top:-120px
}
.stats-grid {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:25px;
	text-align:center
}
.stat {
	position:relative;
	padding:10px
}
.stat i {
	font-size:34px;
	color:var(--yellow);
	margin-bottom:10px
}
.stat h2 {
	font-size:34px
}
.about-split {
	display:grid;
	grid-template-columns:1fr 1.1fr;
	gap:55px;
	align-items:center
}
.about-text h2 {
	font-size:42px;
	margin:10px 0 18px
}
.about-text p {
	color:var(--muted);
	line-height:1.85;
	margin-bottom:18px
}
.check li {
	margin:12px 0
}
.check i {
	color:var(--green);
	margin-right:8px
}
.photo-stack {
	position:relative;
	min-height:430px
}
.photo-stack img {
	object-fit:cover;
	border-radius:22px;
	box-shadow:0 22px 55px rgba(6, 29, 54, .16);
	cursor:pointer
}
.photo-stack .main {
	width:78%;
	height:390px
}
.photo-stack .small {
	position:absolute;
	width:220px;
	height:160px;
	border:8px solid #fff
}
.photo-stack .one {
	right:0;
	top:35px
}
.photo-stack .two {
	right:70px;
	bottom:5px
}
.donation-blur {
	padding:80px 0;
	background:linear-gradient(rgba(6, 29, 54, .65), rgba(6, 29, 54, .65)), url('images/hero-2.jpg') center/cover fixed;
	position:relative
}
.donation-glass {
	display:grid;
	grid-template-columns:1.3fr 1fr auto;
	gap:24px;
	align-items:center;
	color:#fff;
	background:rgba(255, 255, 255, .12);
	border:1px solid rgba(255, 255, 255, .25);
	backdrop-filter:blur(12px);
	padding:34px;
	border-radius:24px
}
.donation-glass small {
	color:var(--yellow);
	font-weight:900
}
.donation-glass h2 {
	font-size:34px;
	margin:7px 0
}
.donation-glass p {
	color:#eef4ff
}
.impact-pills {
	display:flex;
	flex-wrap:wrap;
	gap:10px
}
.impact-pills span {
	background:rgba(255, 255, 255, .16);
	border:1px solid rgba(255, 255, 255, .22);
	padding:10px 13px;
	border-radius:30px
}
.gallery-grid {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:16px
}
.gallery-grid img {
	height:220px;
	width:100%;
	object-fit:cover;
	border-radius:18px;
	cursor:pointer;
transition:.35s;
	box-shadow:0 12px 28px rgba(6, 29, 54, .12)
}
.gallery-grid img:hover {
	transform:scale(1.04) rotate(1deg);
	filter:saturate(1.15)
}
.news-card {
	background:#fff;
	border-radius:22px;
	overflow:hidden;
	box-shadow:0 16px 40px rgba(6, 29, 54, .11);
	height:100%;
transition:.35s
}
.news-card:hover {
	transform:translateY(-8px)
}
.news-img {
	position:relative;
	height:205px;
	overflow:hidden
}
.news-img img {
	width:100%;
	height:100%;
	object-fit:cover;
transition:.5s
}
.news-card:hover .news-img img {
	transform:scale(1.1)
}
.news-img span {
	position:absolute;
	left:16px;
	top:16px;
	background:var(--yellow);
	color:#111;
	border-radius:30px;
	padding:8px 13px;
	font-size:12px;
	font-weight:900
}
.news-body {
	padding:22px
}
.meta {
	font-size:13px;
	color:var(--red);
	font-weight:800;
	margin-bottom:10px
}
.news-body h3 {
	font-size:20px;
	line-height:1.35;
	margin-bottom:10px
}
.news-body p {
	color:var(--muted);
	line-height:1.7
}
.news-body a {
	display:inline-block;
	margin-top:15px;
	color:var(--red);
	font-weight:900
}
.media-layout {
	display:grid;
grid-template-columns:1.25fr .75fr;
	gap:34px
}
.video-card {
	background:#fff;
	border-radius:20px;
	overflow:hidden;
	box-shadow:0 16px 40px rgba(6, 29, 54, .12);
	position:relative
}
.video-card img {
	height:240px;
	width:100%;
	object-fit:cover
}
.video-card h4 {
	padding:17px;
	font-size:17px
}
.vplay {
	position:absolute;
	top:40%;
	left:50%;
	transform:translate(-50%, -50%);
	width:62px;
	height:62px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	color:var(--red);
	font-size:22px;
	box-shadow:0 0 0 12px rgba(255, 255, 255, .25);
transition:.35s
}
.video-card:hover .vplay {
	background:var(--red);
	color:#fff;
	transform:translate(-50%, -50%) scale(1.08)
}
.testimonial-panel {
	background:linear-gradient(135deg, var(--navy), #0a3564);
	padding:28px;
	border-radius:24px;
	color:#fff;
	box-shadow:0 20px 50px rgba(6, 29, 54, .2)
}
.testimonial {
	background:rgba(255, 255, 255, .1);
	border:1px solid rgba(255, 255, 255, .18);
	border-radius:18px;
	padding:26px;
	min-height:250px
}
.testimonial p {
	font-size:17px;
	line-height:1.8;
	color:#fff;
	font-style:italic
}
.stars {
	color:var(--yellow);
	margin:15px 0
}
.test-user {
	display:flex;
	align-items:center;
	gap:12px
}
.test-user img {
	width:60px;
	height:60px;
	border-radius:50%;
	object-fit:cover
}
.team-grid {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:22px
}
.team-card {
	background:#fff;
	border-radius:22px;
	text-align:center;
	overflow:hidden;
	box-shadow:0 16px 40px rgba(6, 29, 54, .12);
transition:.35s
}
.team-card:hover {
	transform:translateY(-8px)
}
.team-card img {
	height:230px;
	width:100%;
	object-fit:cover;
	cursor:pointer
}
.team-card h3 {
	margin-top:18px
}
.team-card p {
	color:var(--red);
	font-weight:900;
	margin:5px 0 14px
}
.team-social {
	display:flex;
	justify-content:center;
	gap:9px;
	margin-bottom:20px
}
.team-social a {
	width:34px;
	height:34px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#f0f3f7;
	color:var(--navy);
transition:.3s
}
.team-social a:hover {
	background:var(--red);
	color:#fff
}
.volunteer-wrap {
	display:grid;
grid-template-columns:.9fr 1.1fr;
	gap:35px;
	align-items:center
}
.volunteer-img {
	position:relative
}
.volunteer-img img {
	border-radius:24px;
	height:420px;
	width:100%;
	object-fit:cover;
	box-shadow:0 20px 45px rgba(6, 29, 54, .14)
}
.volunteer-note {
	position:absolute;
	left:24px;
	bottom:24px;
	background:rgba(255, 255, 255, .16);
	color:#fff;
	border:1px solid rgba(255, 255, 255, .28);
	backdrop-filter:blur(10px);
	padding:16px 20px;
	border-radius:16px
}
.volunteer-note span {
	display:block;
	font-size:13px;
	color:#eef4ff
}
.contact-form {
	background:linear-gradient(135deg, var(--navy), #0a3564);
	color:#fff;
	border-radius:24px;
	padding:34px;
	box-shadow:0 20px 50px rgba(6, 29, 54, .2)
}
.white small {
	color:var(--yellow)
}
.form-grid {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:15px
}
input, select, textarea {
	width:100%;
	padding:15px;
	border:0;
	border-radius:12px;
	outline:none;
	font-size:15px
}
textarea {
	grid-column:1/3;
	height:120px
}
.cta {
	background:linear-gradient(135deg, var(--red), #981127);
	color:#fff;
	text-align:center;
	padding:65px 0;
	position:relative;
	overflow:hidden
}
.cta:before {
	content:"";
	position:absolute;
	inset:0;
	background:url('images/poster-2.jpg') center/cover;
	opacity:.12;
	filter:blur(1px)
}
.cta .container {
	position:relative
}
.cta h2 {
	font-size:40px;
	margin-bottom:10px
}
.footer {
	position:relative;
	background:#03182d;
	color:#fff;
	padding:70px 0 18px;
	overflow:hidden
}
.footer-bg {
	position:absolute;
	inset:0;
	background:radial-gradient(circle at 15% 15%, rgba(229, 27, 53, .22), transparent 32%), radial-gradient(circle at 85% 30%, rgba(255, 223, 0, .14), transparent 28%)
}
.footer-grid {
	position:relative;
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr 1.15fr;
	gap:35px
}
.footer h3 {
	margin-bottom:20px;
	font-size:20px
}
.footer p, .footer li, .footer a {
	color:#d2deed;
	font-size:14px;
	line-height:1.95
}
.footer li a:hover, .footer li:hover {
	color:var(--yellow)
}
.footer-logo h2 {
	color:#fff
}
.footer-logo span {
	color:var(--yellow)
}
.footer-social {
	display:flex;
	gap:10px;
	margin-top:18px
}
.footer-social a {
	width:40px;
	height:40px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(255, 255, 255, .1);
	color:#fff;
transition:.3s
}
.footer-social a:hover {
	background:var(--yellow);
	color:#111;
	transform:translateY(-4px)
}
.footer-donate {
	display:inline-block;
	background:var(--red);
	color:#fff!important;
	padding:12px 18px;
	border-radius:30px;
	margin-top:12px;
	font-weight:900
}
.copy {
	position:relative;
	text-align:center;
	border-top:1px solid rgba(255, 255, 255, .12);
	padding-top:18px;
	margin-top:38px;
	color:#b9c7d8;
	font-size:13px
}
.page-hero {
	padding:105px 0;
	background:linear-gradient(rgba(6, 29, 54, .75), rgba(6, 29, 54, .8)), url('images/hero-2.jpg') center/cover;
	color:#fff;
	text-align:center
}
.page-hero h1 {
	font-size:48px
}
.page-hero p {
	margin-top:10px;
	color:#e7eef8
}
.content-card {
	background:#fff;
	border-radius:22px;
	box-shadow:0 15px 40px rgba(6, 29, 54, .1);
	padding:32px
}
.donation-box {
	max-width:860px;
	margin:auto;
	background:#fff;
	border-radius:24px;
	box-shadow:0 18px 45px rgba(6, 29, 54, .15);
	padding:36px
}
.amounts {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:13px;
	margin:20px 0
}
.amounts label {
	border:2px solid #edf0f5;
	border-radius:14px;
	padding:15px;
	text-align:center;
	font-weight:900;
	cursor:pointer;
transition:.3s
}
.amounts input {
	display:none
}
.amounts label:hover, .amounts input:checked+span {
	color:var(--red)
}
.reveal {
	opacity:0;
	transform:translateY(45px);
	transition:1s
}
.reveal.show {
	opacity:1;
	transform:translateY(0)
}
.lightbox {
	position:fixed;
	inset:0;
	background:rgba(0, 0, 0, .9);
	z-index:9999;
	display:none;
	align-items:center;
	justify-content:center
}
.lightbox.show {
	display:flex
}
.lightbox img {
	max-width:86%;
	max-height:82%;
	border-radius:16px;
	box-shadow:0 0 0 8px rgba(255, 255, 255, .08)
}
.lightbox button {
	position:absolute;
	background:#fff;
	border:0;
	border-radius:50%;
	width:48px;
	height:48px;
	font-size:24px;
	cursor:pointer
}
.lightbox .close {
	top:25px;
	right:35px
}
.lightbox .prev {
	left:35px
}
.lightbox .next {
	right:35px
}
@keyframes fadeUp {
from {
opacity:0;
transform:translateY(35px)
}
to {
	opacity:1;
	transform:translateY(0)
}
}
@keyframes float {
0%, 100% {
transform:translateY(0)
}
50% {
transform:translateY(-16px)
}
}
@media(max-width:1180px) {
.menu {
gap:14px
}
.menu>li {
font-size:12px
}
.hero-content h1 {
font-size:52px
}
.service-box {
grid-template-columns:repeat(3, 1fr)
}
.team-grid {
grid-template-columns:repeat(2, 1fr)
}
.gallery-grid {
grid-template-columns:repeat(3, 1fr)
}
.footer-grid {
grid-template-columns:1fr 1fr
}
.donation-glass {
grid-template-columns:1fr
}
}
@media(max-width:900px) {
.topbar {
display:none
}
.nav {
height:70px
}
.logo img {
width:48px;
height:48px
}
.logo h2 {
font-size:17px
}
.logo span {
font-size:9px
}
.mobile-btn {
display:flex;
align-items:center;
justify-content:center;
z-index:1003
}
.menu {
position:fixed;
top:70px;
left:-105%;
width:84%;
max-width:340px;
height:calc(100vh - 70px);
display:block;
background:#fff;
padding:18px;
box-shadow:12px 0 35px rgba(0, 0, 0, .22);
overflow:auto;
transition:.35s;
z-index:1002
}
.menu.open {
left:0
}
.menu>li {
border-bottom:1px solid #edf0f4;
font-size:14px
}
.menu>li>a {
padding:15px 6px;
display:flex;
justify-content:space-between
}
.dropdown {
position:static;
display:none;
width:100%;
opacity:1;
visibility:visible;
transform:none;
box-shadow:none;
background:#f7f9fc;
margin-bottom:10px
}
.dropdown:before {
display:none
}
.menu li:hover .dropdown, .menu li:focus-within .dropdown {
display:block
}
.donate-btn {
display:none
}
.hero {
height:520px
}
.hero-content {
width:100%
}
.hero-content h1 {
font-size:36px
}
.hero-content p {
font-size:15px
}
.glass-card {
display:none
}
.swiper-button-prev, .swiper-button-next {
display:none!important
}
.service-strip {
margin-top:-38px
}
.service-box {
grid-template-columns:repeat(2, 1fr)
}
.service-item {
padding:24px 12px;
border-bottom:1px solid #eef1f5
}
.section {
padding:58px 0
}
.section-head, .section-head.mini {
align-items:flex-start
}
.section-head h2 {
font-size:28px
}
.slider-controls button {
width:40px;
height:40px
}
.stats-grid {
grid-template-columns:repeat(2, 1fr)
}
.about-split, .media-layout, .volunteer-wrap {
grid-template-columns:1fr;
gap:28px
}
.photo-stack {
min-height:auto
}
.photo-stack .main {
width:100%;
height:310px
}
.photo-stack .small {
display:none
}
.donation-glass {
padding:24px
}
.donation-glass h2 {
font-size:26px
}
.gallery-grid {
grid-template-columns:repeat(2, 1fr)
}
.gallery-grid img {
height:170px
}
.team-grid {
grid-template-columns:1fr
}
.video-card img {
height:210px
}
.volunteer-img img {
height:300px
}
.form-grid {
grid-template-columns:1fr
}
textarea {
grid-column:1
}
.footer-grid {
grid-template-columns:1fr
}
.page-hero {
padding:75px 0
}
.page-hero h1 {
font-size:34px
}
.amounts {
grid-template-columns:repeat(2, 1fr)
}
}
@media(max-width:520px) {
.container {
width:92%
}
.hero {
height:480px
}
.hero-content h1 {
font-size:29px
}
.btns {
display:flex;
gap:10px;
flex-wrap:wrap
}
.btn {
padding:12px 16px;
font-size:13px
}
.service-box {
grid-template-columns:1fr
}
.stats-grid {
grid-template-columns:1fr
}
.gallery-grid {
grid-template-columns:1fr
}
.gallery-grid img {
height:220px
}
.section-head {
display:block
}
.slider-controls {
margin-top:14px
}
.amounts {
grid-template-columns:1fr
}
.cta h2 {
font-size:30px
}
.lightbox img {
max-width:92%;
max-height:72%
}
.lightbox .prev {
left:12px
}
.lightbox .next {
right:12px
}
.lightbox .close {
right:16px;
top:16px
}
}
/* GET NGO final polish - same template with better professional finish */
body {
	font-family:Arial, Helvetica, sans-serif!important;
}
.logo img {
	object-fit:contain;
	background:#fff;
	border-radius:50%;
	padding:3px;
	box-shadow:0 8px 24px rgba(0, 0, 0, .12)
}
.header {
	border-bottom:1px solid rgba(15, 23, 42, .08)
}
.header.sticky {
	box-shadow:0 12px 35px rgba(15, 23, 42, .12)
}
.hero-content h1 span, .section-head small, .about-text small {
	color:#d71920!important
}
.donate-btn, .btn-red {
	background:linear-gradient(135deg, #d71920, #f58634)!important;
	border:0!important
}
.service-item:hover, .news-card:hover, .team-card:hover {
	transform:translateY(-8px);
	box-shadow:0 18px 45px rgba(15, 23, 42, .13)
}
.flip-back {
	background:linear-gradient(135deg, #173e7a, #d71920)!important
}
.stats {
	background:linear-gradient(135deg, #173e7a, #0b1f3a)!important
}
.footer {
	background:#07172e!important
}
.footer-brand .logo img {
	border-radius:16px;
	width:82px;
	height:82px
}
.topbar {
	background:linear-gradient(90deg, #173e7a, #d71920)!important
}
@media(max-width:575px) {
.logo div h2 {
font-size:20px!important
}
.logo div span {
font-size:10px!important
}
.hero-content h1 {
font-size:34px!important
}
.service-box {
margin-top:-35px
}
.topbar-flex {
font-size:12px
}
.slider-controls {
display:flex!important
}
.hero-slide {
min-height:620px
}
}