/* ---------- Variables ---------- */
:root {
  --pink:#f06292; /* primary */
  --dark:#222;
  --muted:#6b6b6b;
  --bg:#fff7fb;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.7);
  --max-width:1100px;
}

/* Dark mode */
.dark {
  --bg:#1a1a1a;
  --card:#222;
  --dark:#eee;
  --muted:#bbb;
}

/* ---------- Reset & base ---------- */
* { box-sizing:border-box; }
html, body { height:100%; margin:0; font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; line-height:1.5; -webkit-font-smoothing:antialiased; }
body { background: linear-gradient(180deg, var(--bg), #fff); color: var(--dark); }
a { color: var(--pink); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.container { max-width: var(--max-width); margin:0 auto; padding:24px; }
header { position: sticky; top:0; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.65)); z-index:50; border-bottom:1px solid rgba(0,0,0,0.04); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#ffd1e6,#ff9bc8); font-weight:700; color:#fff; }
nav ul { display:flex; gap:18px; list-style:none; margin:0; padding:0; }
.cta { background: var(--pink); color:#fff; padding:8px 14px; border-radius:10px; font-weight:600; }
.mobile-toggle { display:none; }

/* ---------- Hero ---------- */
.hero { display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:center; padding:48px 0; }
.hero h1 { font-size:clamp(1.6rem,3vw,2.4rem); margin:0 0 12px; }
.lead { color: var(--muted); margin-bottom:18px; }
.hero-card { background: var(--card); padding:18px; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,0.06); }
.stats { display:flex; gap:12px; margin-top:12px; }
.stat { flex:1; padding:12px; border-radius:10px; background: linear-gradient(180deg,#fff,#fff); text-align:center; }
.stat strong { display:block; font-size:1.25rem; color: var(--pink); }

/* ---------- Sections ---------- */
section { padding:28px 0; border-top:1px solid rgba(0,0,0,0.03); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card { background: var(--card); padding:18px; border-radius:12px; box-shadow:0 8px 18px rgba(0,0,0,0.04); }

/* ---------- Responsive ---------- */
@media (max-width:980px) {
  .hero { grid-template-columns:1fr; }
  nav ul { display:none; }
  .mobile-toggle { display:block; }
}
@media (max-width:720px) {
  .grid { grid-template-columns:1fr; }
  .container { padding:16px; }
}

/* ---------- Footer ---------- */
footer { padding:28px 0; color: var(--muted); }

/* ---------- Animations ---------- */
.reveal { opacity:0; transform:translateY(10px); transition:all .6s ease; }
.reveal.show { opacity:1; transform:none; }

/* ---------- Form ---------- */
.form-row { display:flex; gap:12px; }
.form-row input { flex:1; }
input, textarea, select { padding:10px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); font-size:0.95rem; }
textarea { min-height:110px; resize:vertical; }

/* ---------- Small helpers ---------- */
.muted { color:var(--muted); font-size:.95rem; }
.pill { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(240,200,220,0.6); font-weight:600; }

/* ---------- Mobile Drawer ---------- */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -260px;
  width: 260px;
  height: 100vh;
  background: #fff;
  padding: 40px 20px;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  transition: right .35s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 200;
}
.mobile-nav.open {
  right: 0;
}





/* Hero Section */
#hero {

  
  position: relative;
  width: 100%;
  height: 90vh;
  background: url('doc.fran.jpg') no-repeat center center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.hero-overlay {
  background: rgba(0, 0, 0, 0.55);
  padding: 40px;
  border-radius: 12px;
  max-width: 700px;
}

#hero h1 {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

#hero p {
  font-size: 1.2rem;
  line-height: 1.6;
}


.top-bar {
  background-color: var(--pink); /* same color as hero */
  color: #fff;
  padding: 3px 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.top-bar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 90%;
  max-width: 1200px;
}

.top-bar .brand {
  font-weight: bold;
  letter-spacing: 0.5px;
}

.top-bar .divider {
  margin: 0 5px;
  opacity: 0.6;
}

.top-bar .desc {
  font-style: italic;
  margin-right: 15px;
}

.top-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 6px;
  font-weight: 500;
  transition: opacity 0.3s;
}

.top-links a:hover {
  opacity: 0.8;
}

.top-bar {
  background: var(--pink);
  color: white;
  padding: 8px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}
.top-bar a { color: white; text-decoration: none; margin: 0 8px; }

a[aria-label="Chat on WhatsApp"]:hover {
  transform: scale(1.1);
  transition: transform 0.25s ease;
}

img {
  max-width: 100%;
  height: auto;
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

.footer {
  background: pink;
  color: #eee;
  padding: 40px 20px 10px;
  margin-top: 50px;
  font-size: 14px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-bottom: 20px;
}

.footer-section h3, .footer-section h4 {
  color: var(--dark);
  margin-bottom: 10px;
}

.footer-section p, .footer-section a {
  color: rgb(15, 22, 4);
  text-decoration: none;
  line-height: 1.6;
}

.footer-section a:hover {
  color: var(--pink);
}

.footer-bottom {
  border-top: 5px solid #333;
  text-align: center;
  padding-top: 25px;
  font-size: 13px;
  color: rgb(17, 19, 15);
}


/* Default: Desktop view */
body {
  font-family: Arial, sans-serif;
  margin: 0;
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #222;
  color: #fff;
}


.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: #fff;
}

/* HERO */
.hero {
  padding: 80px;
  text-align: center;
  background: #e0e0e0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 40px;
}

.box {
  background: #ddd;
  padding: 40px;
  text-align: center;
  font-size: 20px;
}

/* ------------------------------- */
/* 📱 MOBILE Layout – small screens */
/* ------------------------------- */
@media (max-width: 600px) {

  .navbar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .nav-links {
    flex-direction: column;
    gap: 10px;
  }

  .hero {
    padding: 40px;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------- */
/* 📲 TABLET Layout – medium screens */
/* --------------------------------------- */
@media (max-width: 900px) and (min-width: 601px) {

  .grid {
    grid-template-columns: 1fr 1fr;
  }
}









/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background-color: #222;
  color: #fff;
  position: relative;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav-links a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

/* Hamburger menu toggle */
.menu-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* ------------------ MEDIA QUERIES ------------------ */
@media (max-width: 600px) {
  .navbar {
    flex-direction: row; /* keep logo and toggle on same row */
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 60px;
    right: 0;
    background-color: #222;
    flex-direction: column;
    width: 100%;
    display: none; /* hide by default */
    text-align: center;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    padding: 15px 0;
  }

  /* Hero adjustments */
  .hero {
    padding: 50px 20px;
  }

  /* Grid adjustments */
  .grid {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .box {
    padding: 40px 0;
    font-size: 18px;
  }
}

#donate {
    width: 100%;
    margin: 0 !important;
    padding: 0;
    text-align: left;
    display: block;
}

.card {
    text-align: left !important;
}


.row-flex {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}





.row-flex {
    display: flex;
    align-items: flex-start;
    gap: 20px;       /* space between the two */
}

.card img {
    display: block;
    margin: 0;
    width: 300px;    /* adjust size as needed */
}






.row {
    display: flex;
    flex-wrap: nowrap; /* do NOT allow items to wrap vertically */
    gap: 20px;
}

.row img {
    width: 100%;
    max-width: 300px; /* limit width so they fit side-by-side */
}