.logo-img {
  height: 55px;   /* adjust between 30px - 50px for best look */
  width: auto;    /* keeps aspect ratio */
}




:root{
  --galaxy-purple: #6B4BBE;
  --eco-green: #3BB273;
  --earth-blue: #2E7D9C;
  --space-black: #1a738e;
  --muted: #6b7280;
  --glass: rgba(255,255,255,0.06);
}

/* Global */
*{box-sizing:border-box}
body{font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#111827; background: linear-gradient(180deg,#fbfdff,#f7f9fc);}
a{text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* NAVBAR */
.agf-navbar{background:linear-gradient(90deg,var(--space-black), #0e1220); padding:.6rem 0; box-shadow: 0 6px 18px rgba(14,18,32,.36);}
.agf-navbar .navbar-brand img{border-radius:10px; box-shadow:0 6px 18px rgba(75,60,170,.14)}
.agf-navbar .btn-donate{background:linear-gradient(90deg,var(--eco-green), #35b186); color:#fff; border-radius: 999px; padding:.45rem 1rem; box-shadow: 0 6px 20px rgba(59,178,115,.12);}

/* HERO */
.hero-section{position:relative; overflow:hidden; color:#000000ab;}
.hero-section .hero-content{z-index:5; padding-top:4rem; padding-bottom:4rem;}
.hero-section::after{content:"";position:absolute; inset:auto 0 0 0; height:200px; background:linear-gradient(180deg, rgba(15,18,25,0), rgba(15,18,25,0.06)); pointer-events:none;}

/* glow text */
.glow{text-shadow:0 8px 40px rgba(107,75,190,0.12); letter-spacing:.2px}
.accent{background:linear-gradient(90deg,var(--eco-green),var(--galaxy-purple)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700}

/* glass card */
.glass-card{background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border-radius:16px; backdrop-filter: blur(6px); transition: transform .35s ease, box-shadow .35s ease;}
.glass-card:hover{transform: translateY(-8px) rotate(-.5deg); box-shadow: 0 20px 50px rgba(46,125,156,0.12)}

/* program cards */
.program-card{background:#fff;border-radius:12px; transition:transform .28s ease, box-shadow .28s ease; padding:30px;}
.program-card:hover{transform:translateY(-8px); box-shadow:0 28px 60px rgba(40,40,80,0.08)}
.program-card .icon-wrap{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg,var(--galaxy-purple),var(--earth-blue)); display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;}

/* donation box */
.donation-box{border-radius:12px; background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid rgba(20,20,30,0.04);}

/* gradient block */
.bg-gradient-2{background: linear-gradient(135deg, rgba(107,75,190,0.95), rgba(59,178,115,0.95)); border-radius:12px; padding:26px; color:#fff}

/* footer */
.agf-footer{background:linear-gradient(180deg,#0b0d10,#0f1114); color:#cbd5e1;}

/* QR image */
.qr-img{border-radius:8px; background:#fff; padding:6px}

/* small responsive tweaks */
@media (max-width: 991px){
  .hero-section .hero-content{padding-top:3rem;padding-bottom:3rem}
  .glass-card{display:none}
}

/* small magical stars (for fallback including when tsParticles off) */
.magic-stars{position:absolute; inset:0; pointer-events:none; opacity:.25}


/* ---------------- Responsive Fixes ---------------- */

/* Make all images scale properly on mobile */
img {
  max-width: 100%;
  height: auto;
}

/* Fix logo size */
.logo-img {
  max-height: 48px;
  width: auto;
}

/* QR image responsive */
.qr-img {
  max-width: 120px;
  height: auto;
}

/* Adjust hero section text on small screens */
@media (max-width: 767.98px) {
  .hero-section h1 {
    font-size: 1.8rem;
    line-height: 1.3;
  }
  .hero-section p.lead {
    font-size: 1rem;
  }
  .hero-content {
    text-align: center;
  }
  .hero-content .btn {
    margin-bottom: 0.5rem;
  }
  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Adjust cards and donation box padding on small screens */
@media (max-width: 575.98px) {
  .glass-card, 
  .donation-box, 
  .program-card {
    padding: 1rem !important;
  }
}




/* Compact Footer */
.agf-footer {
  background: linear-gradient(180deg,#0b0d10,#0f1114); /* keep your theme */
  color: #cbd5e1;
  padding: 15px 10px;    /* reduce space */
  font-size: 0.9rem;     /* slightly smaller text */
  line-height: 1.4;
  text-align: center;
}