:root{
  --primary:#eb9409;
  --accent:#7fb432;
  --ink:#0f172a;
  --paper:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,92vw);margin-inline:auto}
.grid{display:grid;gap:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.1rem;border-radius:999px;font-weight:700;letter-spacing:.2px;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:focus,.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:#fff;border-color:var(--primary);color:var(--primary)}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:rgba(14,165,166,.1);color:var(--primary);border:1px dashed var(--primary);padding:.4rem .7rem;border-radius:999px;font-weight:700;font-size:.85rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:#fff;padding:.4rem .7rem;border-radius:999px;font-weight:800;font-size:.8rem}
.section{padding-top:50px;padding-bottom:50px;}
.section.alt{background:linear-gradient(180deg,#f8fbfb, #fff)}
.title{font-size:clamp(1.6rem,4.5vw,2.4rem);line-height:1.2;margin:0 0 .6rem;font-weight:800}
.subtitle{font-size:clamp(1rem,2.5vw,1.125rem);opacity:.9;margin:0 0 1rem}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 10px 30px rgba(2,8,23,.06)}
.card.pad{padding:1rem}
.pill{background:rgba(15,23,42,.06);border-radius:999px;padding:.25rem .6rem;font-weight:700;font-size:.8rem;display:inline-block}
.kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.kpi .card{padding:1rem;text-align:center}
.kpi .num{font-weight:800;font-size:1.6rem}
.list{padding-left:1.5rem;list-style: disc;}
.list li{margin:.3rem 0}
.icon{width:22px;height:22px;flex:0 0 22px}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.compare .col{border:2px solid #e5e7eb;border-radius:14px;padding:1rem}
.compare .col.good{border-color:var(--primary);background:rgba(14,165,166,.04)}
.sticky-cta{position:sticky;bottom:10px;z-index:50}
.sticky-cta .bar{margin:0 auto; width:min(800px,92vw); background:var(--ink);color:#fff;border-radius:999px;display:flex;align-items:center;gap:.8rem;justify-content:center;padding:.5rem}
.ba-wrap{position:relative;border-radius:16px;overflow:hidden}
.ba-wrap input[type="range"]{position:absolute;inset:0;opacity:0;cursor:ew-resize}
.ba-outer{position:relative; height: 400px;}
.ba-img{display:block;width:100%;height: 100%;}
.ba-after{position:absolute;inset:0;overflow:hidden}
.ba-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 0 2px #fff;left:50%}
.ba-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--accent);color:#fff;border-radius:999px;padding:.3rem .6rem;font-size:.75rem;font-weight:800;border:2px solid #fff}
.form{display:grid;gap:.8rem}
.input{width:100%;padding:.8rem 1rem;border:1.5px solid #e5e7eb;border-radius:12px;font:inherit}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,166,.15)}
footer{padding:40px 0;border-top:1px solid #e5e7eb;font-size:.95rem}
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:100px;align-items:center}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}

.image-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 30px 0px;
}

.image-box {
  flex: 1 1 calc(33.33% - 16px); /* 3 per row on desktop */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-box img {
  width: 100%;
  height: auto;   /* keeps proportions */
  border-radius: 8px;
  object-fit: cover;
}

/* -------- Responsive -------- */
@media (max-width: 768px) {
  .image-box {
    flex: 1 1 calc(50% - 12px); /* 2 per row on tablets */
  }
}

@media (max-width: 480px) {
  .image-box {
    flex: 1 1 100%; /* 1 per row on mobile */
  }

  .image-box img {
    max-width: 100%;
    height: auto;
  }
}


/* ----------------------------
   Mobile Responsive Styles
-----------------------------*/
@media (max-width: 768px) {
  .container {
    width: 94vw;
  }

  .grid,
  .grid-3,
  .kpi,
  .compare,
  .image-grid {
    grid-template-columns: 1fr !important; /* Stack items */
    gap: 1rem; /* Reduce gap */
  }

  .hero {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .title {
    font-size: 1.4rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .card {
    padding: 0.8rem;
  }

  .sticky-cta .bar {
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
  }

  .ba-outer {
    height: 250px; /* smaller before/after box */
  }

  .image-box img {
    width: 180px;
    height: 180px;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 20px;
    font-size: 17px;
  }

  .chip,
  .badge,
  .pill {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }

  footer {
    font-size: 0.85rem;
    text-align: center;
  }

  .image-box img {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 768px) {
  .card.pad {
    font-size: 18px !important;  /* smaller text for mobile */
    padding: 0.8rem !important;  /* reduce padding */
  }
}

@media (max-width: 480px) {
  .card.pad {
    font-size: 16px !important;  /* further reduce for small screens */
    line-height: 1.4;
    margin-inline: 10px;
     margin-top: 20px;       /* prevent edge-to-edge touch */
  }
}

@media (max-width: 768px) {
  #support .grid {
    grid-template-columns: 1fr !important;  /* stack into one column */
    font-size: 18px !important;             /* reduce text size */
    text-align: center;                     /* center text */
    gap: 1.2rem;
  }

  #support img {
    max-width: 80%;
    margin: 0 auto;                         /* center image */
    display: block;
  }

  #support blockquote {
    margin: 1rem auto 0;
    padding-left: 0;                        /* remove left border spacing */
    border-left: none;                      /* remove border for cleaner mobile look */
    font-size: 0.95rem;
    max-width: 90%;
  }

  #support .btn {
    margin-top: 1rem;
    width: 100%;                            /* full-width button */
    justify-content: center;
  }
}

@media (max-width: 480px) {
  #support .subtitle {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0 1rem;                        /* add padding so text doesn’t hit edges */
  }

  #support img {
    max-width: 80%;
  }
}

@media (max-width: 768px) {
  .sticky-cta .bar {
    flex-direction: column;       /* stack text & button */
    text-align: center;           /* center content */
    padding: 0.8rem 1rem;         /* more breathing room */
    gap: 0.6rem;                  /* space between text & button */
  }

  .sticky-cta span {
    font-size: 0.95rem;           /* smaller text */
    line-height: 1.4;
  }

  .sticky-cta .btn {
    width: 70%;                  /* full width button */
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .sticky-cta span {
    font-size: 0.85rem;
	  padding: 0px 10px;
  }

  .sticky-cta .btn {
    padding: 0.6rem;              /* compact button */
  }
}

.grid img {
  width: 100%;          /* take full width of grid cell */
  height: 300px;        /* fixed equal height */
  object-fit: fill;    /* crop instead of stretching */
  border-radius: 8px;   /* optional: rounded corners */
}



.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #fff;
}

.logo-container img {
  height: 70px;
  width: auto;
}

/* Right side container */
.right-side {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Telephone box */
.tel-box a {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
  color: #333;
}

.tel-box a:hover {
  color: #7fb432;
}

.tel-icon {
  width: 18px;
  height: 18px;
  color: #7fb432;
}

/* Announcement Chip */
.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  background: #f5f5f5;
  font-size: 14px;
  color: #333;
}

.chip .icon {
  width: 18px;
  height: 18px;
  color: #555;
}


/* ------------------- Responsive ------------------- */
@media (max-width: 768px) {
  .top-header {
    flex-direction: column;
    align-items: center;   /* center horizontally */
    gap: 12px;
    text-align: center;
  }

  .right-side {
    flex-direction: column;
    align-items: center;   /* center items */
    gap: 10px;
    width: 100%;
  }

  .tel-box a {
    font-size: 14px;
    justify-content: center;  /* center inside flex */
  }

  .chip {
    font-size: 13px;
    width: auto;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .logo-container img {
    height: 45px;
  }

  .tel-box a {
    font-size: 13px;
  }

  .chip {
    font-size: 12px;
    padding: 4px 10px;
  }
}


/* Grid container */
.donate-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* text + image */
  align-items: center;
  gap: 60px;
  font-size: 20px;
  margin: 45px 40px;
}

/* Left text block */
.donate-text p {
  margin-bottom: 1rem;
}

.donate-quote {
  margin: 1rem 0 0;
  border-left: 4px solid var(--primary, #7fb432);
  padding-left: 0.6rem;
  font-style: italic;
  color: #444;
}

/* Image */
.donate-image img {
  width: 85%;
  height: 85%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  object-fit: fill;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .donate-grid {
    grid-template-columns: 1fr;  /* stack */
    text-align: center;
    gap: 30px;
  }

  .donate-text {
    order: 1; /* keep text first */
  }

  .donate-image {
    order: 2;
  }

  .donate-quote {
    margin: 1rem auto 0;
    max-width: 90%;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .donate-grid {
    font-size: 16px;
    gap: 20px;
  }

  .donate-quote {
    font-size: 14px;
  }
}