:root{
  --brand-deep: #0b5b86;    /* slightly softer deep blue */
  --brand-accent: #ffd45a;  /* warm soft yellow */
  --muted: #6b7280;
  --bg: #f6f9fb;
  --container:1150px;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#0e1b2b;
  -webkit-font-smoothing:antialiased;
}

/* Container */
.container{width:92%; max-width:var(--container); margin:0 auto;}

/* Header */
.site-header{
  background:#fff;
  position:sticky; top:0; z-index:999;
  box-shadow:0 6px 18px rgba(11,38,60,0.06);
}
/* 🔍 Search Bar Styling */
.search-container {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e6eef6;
  border-radius: 20px;
  padding: 4px 8px;
  margin-left: 12px;
}

.search-input {
  border: none;
  outline: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 20px;
  width: 140px;
  color: #0e1b2b;
}

.search-button {
  background: var(--brand-deep);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s ease;
}

.search-button:hover {
  background: var(--brand-accent);
  color: var(--brand-deep);
}

/* Optional subtle animation */
.search-container:focus-within {
  box-shadow: 0 0 6px rgba(11, 91, 134, 0.25);
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .search-container {
    margin-top: 8px;
    justify-content: center;
    width: 100%;
  }
}

.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0;}
.brand img{height:56px; display:block}

/* Nav */
.main-nav ul{display:flex; gap:14px; list-style:none; margin:0; padding:0; align-items:center}
.main-nav a{color:var(--brand-deep); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px;}
.main-nav a:hover, .main-nav a.active{background:var(--brand-accent); color:var(--brand-deep)}

/* Hamburger */
.hamburger{display:none; background:transparent; border:0; font-size:1.15rem; cursor:pointer}

/* HERO */
.hero{min-height:56vh; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; padding:56px 0;}
.hero-bg{position:absolute; inset:0; background-image:url('https://i.ibb.co/BH2jjJgS/Whats-App-Image-2025-10-23-at-9-08-13-PM.jpg'); background-size:cover; background-position:center; filter:brightness(.45) contrast(.95); z-index:0}
.hero-inner{position:relative; z-index:2; color:#fff; max-width:900px; padding:20px;}
.hero h1{font-size:2.05rem; margin-bottom:12px; line-height:1.12}
.hero p{font-size:1rem; margin-bottom:16px; color:rgba(255,255,255,0.95)}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block; text-decoration:none; padding:10px 16px; border-radius:10px; font-weight:700}
.btn-soft{background:rgba(255,255,255,0.14); color:#fff; border:1px solid rgba(255,255,255,0.08)}
.btn-outline{background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.12)}
.btn-primary{background:var(--brand-accent); color:var(--brand-deep)}
.pd-btn{background:#fff; color:var(--brand-deep)}
.pd-donate{background:var(--brand-accent); color:var(--brand-deep)}

/* Sections */
.section{padding:48px 0; text-align:center}
.section h2{color:var(--brand-deep); margin-bottom:8px}

/* Programs */
.programs-row{display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; margin-top:20px}
.program{background:#fff; padding:20px; border-radius:12px; flex:1 1 220px; box-shadow:0 8px 20px rgba(11,38,60,0.05)}
.program i{font-size:1.6rem; color:var(--brand-deep); margin-bottom:10px}

/* Impact */
.impact-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:20px}
.impact-card{background:#fff; padding:18px; border-radius:10px; min-width:160px; box-shadow:0 6px 18px rgba(11,38,60,0.05)}
.impact-card h3{color:var(--brand-deep); margin:0 0 8px}

/* Participate & Donate (bottom) */
.participate-donate-section{background:linear-gradient(90deg, rgba(11,91,134,0.96), rgba(6,28,45,0.96)); color:#fff; padding:36px 0; margin-top:18px}
.pd-inner{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.pd-left{flex:1 1 520px}
.pd-left h3{margin:0 0 8px}
.pd-left p{margin-bottom:14px; color:rgba(255,255,255,0.92)}
.pd-buttons{display:flex; gap:12px}
.pd-btn{padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none}
.pd-right{display:flex; gap:18px; align-items:center; flex:0 1 320px; justify-content:flex-end}
.qr-card{background:#fff; color:#000; padding:12px; border-radius:10px; text-align:center}
.qr-card img{max-width:150px; height:auto; display:block; margin:0 auto}
.qr-note{font-size:0.85rem; margin-top:8px; color:rgba(255,255,255,0.9)}
.pd-contact p{margin:6px 0; color:rgba(255,255,255,0.92)}

/* Card rows used on participate page */
.card-row{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.card{background:#fff; padding:18px; border-radius:12px; min-width:220px; box-shadow:0 6px 18px rgba(11,38,60,0.05); text-align:center}
.card i{font-size:1.6rem; color:var(--brand-deep); margin-bottom:10px}

/* QR / donation area */
.donation-qr{text-align:center; margin-top:30px}
.donation-qr img{max-width:220px; border-radius:8px}

/* Contact form styles */
.contact-form{max-width:720px; margin:20px auto 0; display:flex; flex-direction:column; gap:12px}
.contact-form input, .contact-form textarea{padding:12px; border-radius:8px; border:1px solid #e6eef6; font-size:1rem}

/* Footer */
.site-footer{background:#fff; color:var(--brand-deep); padding:18px 0; margin-top:18px; border-top:1px solid #e9f2f7}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.map-wrapper iframe{border-radius:8px}
.socials a{color:var(--brand-deep); margin-left:10px}

/* Small screens */
@media (max-width:900px){
  .programs-row{flex-direction:column}
  .impact-row{flex-direction:column}
  .pd-inner{flex-direction:column; align-items:flex-start}
  .pd-right{justify-content:flex-start}
  .hero h1{font-size:1.6rem}
  .header-inner{padding:8px 0}
  .brand img{height:48px}
  .main-nav ul{display:none}
  .main-nav.open ul{display:flex; flex-direction:column; gap:10px; padding:12px; background:#fff; position:absolute; top:70px; right:12px; border-radius:8px; box-shadow:0 6px 18px rgba(11,38,60,0.06)}
  .hamburger{display:block}
}