:root {
  --primary: #1976d2;
  --primary-dark: #003174;
  --accent: #ffb300;
  --background: #f2f7fa;
  --text: #1a1a1a;
  --light: #fff;
}

body {
  margin: 0; padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--text);
  background: var(--background);
  line-height: 1.6;
}

header { background: var(--primary); color: var(--light); padding: 1.4em 0 0 0;}
nav {
  display: flex; justify-content: space-between; align-items: center; max-width: 1200px;
  margin: 0 auto; padding: 0 1em; flex-wrap: wrap;
}
.logo {
  display: flex; align-items: center; gap: 6px;
}
.logo img { height: 48px; width: auto; }
.trustname { font-size:1.1em;font-weight:400; letter-spacing:0.7px; margin:0;}
.titles { margin-left:12px; display: flex; flex-direction: column; }
.titles h1 { font-size:1.4em; font-weight:700; margin:0; }
.nav-links {
  list-style: none;
  display: flex; gap:1em; flex-wrap: wrap;
}
.nav-links li { margin: 0;}
.nav-links a {
  color: var(--light); text-decoration: none; font-weight: 500; padding: 0.5em 1em; border-radius: 12px;
  transition: background 0.3s;
  letter-spacing: 0.3px;
}
.nav-links a:hover, .nav-links a:focus { background: rgba(255,255,255,0.17);}
.donate-btn {
  background: var(--accent); color: #000!important; border: none; border-radius: 8px; padding: 0.67em 1.4em;
  margin-left: 1em; font-weight:700; font-size: 1.07em; text-decoration: none; transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.donate-btn:hover, .donate-btn:focus { background: #ffd54f; }
main { max-width: 1100px; margin: 0 auto; padding: 0 1em;}
/* Hero section */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 2em; justify-content: space-between; margin-top: 2em;}
.hero-content { max-width: 540px; }
.hero-content h2 { font-size: 2.1em; color: var(--primary-dark);}
.hero-content p { margin: 1.1em 0 1.3em 0; }
.cta-large { display: inline-block; background: var(--primary); color: #fff; padding: 1em 2em; border-radius: 10px; font-size: 1.22em; font-weight:600; box-shadow: 0 2px 8px rgba(25, 76, 134, 0.10);}
.cta-large:hover, .cta-large:focus { background: var(--primary-dark);}
.hero-image img { max-width: 280px; min-width: 190px; border-radius: 16px; box-shadow: 0 4px 20px rgba(25,76,134,0.09);}
@media (max-width: 900px) {
  .hero { flex-direction: column; text-align: center; gap:1.5em;}
  .hero-image { margin-bottom: 2em;}
}

/* Impact section */
.impact { background: #e9f1fa; padding: 2em 1em; border-radius: 14px; margin: 2.5em 0;}
.impact h3 { margin-top: 0; text-align: center;}
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1.5em; text-align: center; margin-top: 1.6em;}
.impact-grid div {
  background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(25,76,134,0.04); padding: 1.6em 1em;
  font-size: 1.08em; font-weight: 600; color: #185386;
}
.impact-grid strong { font-size: 1.7em; display: block; color: var(--primary-dark);}
.impact-grid span { font-weight:400; font-size:1em; color: #444;}

/* About section */
.about { margin: 3em 0; text-align: center; }
.about h3 { margin-bottom: 0.5em;}
.about a { color: var(--primary); text-decoration: underline;}
.about a:hover { color: var(--accent); }

/* Donate */
.donate-section { background: #fffeec; border-radius: 14px; padding: 2.2em 1.3em 2em 1.3em; margin: 3em auto; max-width: 670px;}
.donate-section h3 { margin-top: 0;}
.donate-options { display: flex; flex-wrap: wrap; gap: 2.2em; justify-content: center; margin-top:2em;}
.bank-details, .qr-donate {
  background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(25,76,134,0.04); padding: 1.5em 1.6em;
  flex:1 1 210px; min-width: 220px; text-align:center;
}
.bank-details h4, .qr-donate h4 { margin: 0 0 0.7em 0; font-size:1.1em;}
.bank-details p { font-size: 1em; color: #113;}
.qr-donate p { margin: 0.8em 0 0 0;}
.tax-note { text-align: center; margin-top:2em;}
.tax-note small { color: #288164; display:block; }

/* Testimonials */
.testimonials { padding: 2em 0 1em;}
.testimonials h3 { text-align: center;}
.testimonial-cards { display: flex; gap: 2em; justify-content: center; flex-wrap: wrap;}
.testimonial { background:#fff; border-radius: 12px; padding:1.4em 1.2em; font-style: italic; box-shadow:0 2px 8px rgba(25,76,134,0.06); max-width: 320px;}
.testimonial cite { font-style: normal; color: #1976d2; font-weight: 500; display:block; margin-top: .9em; }

/* Contact */
.contact { padding: 2em 1em; background: #f7f7fa; border-radius: 13px; margin: 3em 0 2em;}
.contact h3 { text-align: center;}
address { font-style: normal; text-align: center; color: #333; font-size: 1.04em;}
.social-links { display: flex; gap: 1.1em; justify-content: center; margin-top: 1.2em;}
.social-links img { width: 32px; height: 32px; border-radius: 50%; }

/* Footer */
footer { background: var(--primary-dark); color: #f1f1f1; text-align: center; padding: 1.5em 1em 1em 1em; border-radius: 0 0 16px 16px;}
footer p { margin:0.7em; font-size:1em; }

/* Mobile responsiveness */
@media (max-width: 700px) {
  nav, header, main { padding: 0 0.3em;}
  .hero, .about, .donate-section, .impact, .contact, .testimonials { margin:1.3em 0;}
  .nav-links { flex-direction: column; gap:0.35em;}
  .donate-btn { margin:.7em 0 0 0;}
  .impact-grid { grid-template-columns: 1fr; }
  .testimonial-cards { flex-direction: column; gap:1em;}
  .donate-options { flex-direction: column; gap: 1.2em;}
  .logo img { height:38px;}
}

/* Stronger focus on main donate action mobile */
@media (max-width:480px) {
  .titles h1 { font-size: 1.08em; }
  .hero-content h2 { font-size: 1.08em;}
  .donate-section { padding: 1.1em 0.7em;}
}