*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Arial,"Noto Sans Bengali",sans-serif;background:#f8fafc;color:#111827;line-height:1.72;font-weight:600}a{text-decoration:none;color:inherit}.container{width:min(1080px,92%);margin:auto}header{background:#047857;color:white;position:sticky;top:0;z-index:20;box-shadow:0 4px 14px rgba(0,0,0,.15)}.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}.brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:17px}.brand img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:white;border:3px solid #fff}.menu{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:800}.menu a{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12)}.menu a:hover{background:white;color:#047857}.hero{background:linear-gradient(rgba(4,120,87,.85),rgba(127,29,29,.65)),url("https://i.postimg.cc/XJhtmkdJ/633949424-1320908040079150-9157625770026538517-n.jpg") center/cover;color:white;text-align:center;padding:80px 0}.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.25;margin-bottom:12px;font-weight:900}.hero p{max-width:720px;margin:auto;font-size:18px;font-weight:800}.btns{margin-top:22px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.btn{border:0;cursor:pointer;display:inline-block;padding:11px 18px;border-radius:999px;font-weight:900;background:white;color:#047857}.btn.red{background:#dc2626;color:white}.btn.blue{background:#1877f2;color:white}section{padding:48px 0}.white{background:white}.green{background:#ecfdf5}.title{text-align:center;margin-bottom:24px}.title h2{font-size:28px;color:#047857;font-weight:900}.title p{color:#475569;font-weight:800}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:white;padding:20px;border-radius:16px;box-shadow:0 8px 22px rgba(15,23,42,.08);border-top:4px solid #047857}.card h3{color:#991b1b;margin-bottom:8px;font-weight:900}.about-box{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center}.about-box img{width:100%;border-radius:18px;box-shadow:0 10px 26px rgba(0,0,0,.15)}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.gallery-card{height:215px;position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#047857,#991b1b);box-shadow:0 8px 20px rgba(0,0,0,.15)}.gallery-card img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}.gallery-card:hover img{transform:scale(1.07)}.gallery-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}.cap{position:absolute;left:12px;right:12px;bottom:10px;color:white;font-weight:900;z-index:2}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.sum-card{background:white;padding:18px;border-radius:16px;box-shadow:0 6px 18px rgba(15,23,42,.08);border-left:5px solid #047857}.sum-card:nth-child(2){border-left-color:#dc2626}.sum-card:nth-child(3){border-left-color:#2563eb}.sum-card:nth-child(4){border-left-color:#7c3aed}.sum-card small{color:#475569;font-weight:900}.sum-card h3{font-size:24px;color:#047857;margin-top:6px;font-weight:900}.sum-card:nth-child(2) h3{color:#dc2626}.sum-card:nth-child(3) h3{color:#2563eb}.sum-card:nth-child(4) h3{color:#7c3aed}.table-wrap{background:white;border-radius:16px;box-shadow:0 8px 22px rgba(15,23,42,.08);overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:760px}th{background:#047857;color:white;text-align:left;padding:12px;white-space:nowrap;font-weight:900}td{padding:12px;border-bottom:1px solid #e5e7eb;white-space:nowrap;font-weight:800}.donation-row{background:#ecfdf5}.expense-row{background:#fff1f2}tr:hover{background:#d1fae5}.in{color:#047857;font-weight:900}.out{color:#dc2626;font-weight:900}.bal{color:#1d4ed8;font-weight:900}.badge{background:#dcfce7;color:#047857;padding:4px 9px;border-radius:999px;font-weight:900;font-size:12px}.badge.redb{background:#fee2e2;color:#991b1b}.article-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.article-card{background:white;padding:22px;border-radius:16px;box-shadow:0 8px 22px rgba(15,23,42,.08);border-left:5px solid #047857}.article-card > img{display:none}.article-card h3{color:#991b1b;font-weight:900}.article-date{color:#64748b;font-size:13px;font-weight:900;margin:8px 0 10px}.donor-window{height:220px;overflow:hidden;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:16px;margin-top:18px}.donor-list{animation:scrollDonor 18s linear infinite}.donor-window:hover .donor-list{animation-play-state:paused}.donor-item{margin:10px;padding:12px 15px;background:white;border-radius:12px;border-left:5px solid #047857;display:flex;justify-content:space-between;gap:12px;box-shadow:0 4px 12px rgba(0,0,0,.06);font-weight:900}.donor-item strong{color:#047857}.donor-item span{color:#991b1b;font-weight:900}@keyframes scrollDonor{0%{transform:translateY(100%)}100%{transform:translateY(-100%)}}.note{margin-top:16px;background:#fff7ed;color:#7f1d1d;border-left:5px solid #dc2626;padding:14px;border-radius:12px;font-weight:900}.form-box{background:white;padding:22px;border-radius:16px;box-shadow:0 8px 22px rgba(15,23,42,.08);border-top:4px solid #047857}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:10px;font-weight:800}.form-grid textarea{min-height:100px;grid-column:1/-1}.invoice-card{background:white;padding:24px;border-radius:18px;box-shadow:0 8px 22px rgba(15,23,42,.08);border-top:5px solid #047857}.invoice-photo{width:100%;max-width:320px;border-radius:14px;margin:12px 0}.contact{background:#064e3b;color:white}.contact .title h2{color:white}.contact .title p{color:#d1fae5}.contact-box{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.contact-card{background:rgba(255,255,255,.1);padding:18px;border-radius:16px;font-weight:800}.fb-bottom{margin-top:18px;text-align:center}.fb-bottom a{display:inline-block;background:#1877f2;color:white;padding:10px 18px;border-radius:999px;font-weight:900;box-shadow:0 6px 16px rgba(0,0,0,.18)}footer{background:#022c22;color:white;text-align:center;padding:10px;font-size:13px;font-weight:700}@media(max-width:850px){.nav{flex-direction:column;text-align:center}.brand{flex-direction:column;font-size:15px}.brand img{width:78px;height:78px}.menu{justify-content:center;gap:7px}.menu a{font-size:13px;padding:6px 9px}.hero{padding:60px 0}.hero p{font-size:16px}section{padding:38px 0}.grid,.about-box,.gallery,.summary,.contact-box,.article-grid,.form-grid{grid-template-columns:1fr}.gallery-card{height:205px}.donor-item{flex-direction:column;align-items:flex-start}.btn{width:100%;max-width:280px;text-align:center}}
/* Fixed article image box - same size on desktop and mobile */
.article-img-box{
  width:100%;
  height:240px;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(135deg,#047857,#991b1b);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.article-img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.article-img-box.no-image::before{
  content:"Article Image";
  color:white;
  font-weight:900;
  font-size:18px;
}
.article-detail-img-box{
  width:100%;
  height:360px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg,#047857,#991b1b);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.article-detail-img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.article-detail-img-box.no-image::before{
  content:"Article Image";
  color:white;
  font-weight:900;
  font-size:22px;
}
@media(max-width:850px){
  .article-img-box{height:210px}
  .article-detail-img-box{height:240px}
}


/* =========================
   UNIVERSAL IMAGE FIX
   All uploaded images same size
========================= */

.image-box,
.gallery-card,
.article-img-box,
.article-detail-img-box{
  width:100%;
  height:240px;
  overflow:hidden;
  border-radius:18px;
  background:#f0fdf4;
  position:relative;
  border:1px solid #d1fae5;
}

.image-box img,
.gallery-card img,
.article-img-box img,
.article-detail-img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:.35s ease;
}

.gallery-card:hover img,
.article-img-box:hover img,
.article-detail-img-box:hover img,
.image-box:hover img{
  transform:scale(1.06);
}

.article-img-box{
  margin-bottom:14px;
}

.article-detail-img-box{
  height:360px;
  margin-bottom:18px;
}

.photo-box{
  width:120px;
  height:150px;
  border-radius:18px;
  overflow:hidden;
  background:#f0fdf4;
  border:2px solid #d1fae5;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  flex-shrink:0;
}

.photo-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

@media(max-width:850px){
  .image-box,
  .gallery-card,
  .article-img-box{
    height:210px;
  }

  .article-detail-img-box{
    height:240px;
  }

  .photo-box{
    width:105px;
    height:130px;
  }
}

@media(max-width:480px){
  .image-box,
  .gallery-card,
  .article-img-box{
    height:190px;
    border-radius:14px;
  }

  .article-detail-img-box{
    height:220px;
    border-radius:14px;
  }

  .photo-box{
    width:95px;
    height:120px;
  }
}


/* =========================
   DONATION / EXPENSE COLORS
========================= */

tr.donation-row{
    background:#ecfdf5;
}

tr.donation-row td{
    color:#047857;
    font-weight:700;
}

tr.expense-row{
    background:#fef2f2;
}

tr.expense-row td{
    color:#991b1b;
    font-weight:700;
}

tr.donation-row:hover{
    background:#d1fae5;
}

tr.expense-row:hover{
    background:#fee2e2;
}

.income-badge{
    background:#047857;
    color:white;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.expense-badge{
    background:#dc2626;
    color:white;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}


/* =========================
   NEW CLEAN ACCOUNT SECTION
========================= */
.account-section{background:#ecfdf5}
.account-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.account-summary-card{background:white;border-radius:18px;padding:20px;box-shadow:0 8px 22px rgba(15,23,42,.08);border-left:6px solid #047857}
.account-summary-card small{color:#475569;font-size:14px;font-weight:900}
.account-summary-card h3{margin-top:8px;font-size:28px;font-weight:900}
.account-summary-card p{margin-top:4px;font-weight:800;color:#64748b}
.account-summary-card.capital{border-left-color:#7c3aed}.account-summary-card.capital h3{color:#7c3aed}
.account-summary-card.income{border-left-color:#047857}.account-summary-card.income h3{color:#047857}
.account-summary-card.expense{border-left-color:#dc2626}.account-summary-card.expense h3{color:#dc2626}
.account-summary-card.balance{border-left-color:#2563eb}.account-summary-card.balance h3{color:#2563eb}
.account-table-box{background:white;border-radius:22px;overflow:hidden;box-shadow:0 10px 26px rgba(15,23,42,.10)}
.account-table-title{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;background:#064e3b;color:white}
.account-table-title h3{font-size:20px;font-weight:900}
.account-table-title span{background:rgba(255,255,255,.16);padding:6px 12px;border-radius:999px;font-weight:900;font-size:13px}
.account-table-wrap{overflow-x:auto}
.new-account-table{width:100%;border-collapse:collapse;min-width:760px}
.new-account-table th{background:#047857;color:white;padding:15px;text-align:left;font-size:15px;font-weight:900;white-space:nowrap}
.new-account-table td{padding:15px;border-bottom:1px solid #e5e7eb;font-size:15px;font-weight:900;white-space:nowrap}
.new-account-table .income-row{background:#ecfdf5}
.new-account-table .income-row td{color:#047857}
.new-account-table .expense-row{background:#fef2f2}
.new-account-table .expense-row td{color:#dc2626}
.new-account-table .income-row:hover{background:#d1fae5}
.new-account-table .expense-row:hover{background:#fee2e2}
.income-badge,.expense-badge{display:inline-block;padding:5px 11px;border-radius:999px;color:white;font-size:12px;font-weight:900}
.income-badge{background:#047857}
.expense-badge{background:#dc2626}
@media(max-width:850px){
  .account-summary{grid-template-columns:1fr}
  .account-table-title{flex-direction:column;align-items:flex-start}
  .new-account-table th,.new-account-table td{padding:13px;font-size:14px}
}


/* =========================
   PUBLIC ACCOUNT COLOR FIX
   Donation = Green / Expense = Red
========================= */

#accounts .new-account-table tr.income-row,
#accounts .account-table tr.income-row,
#accounts table tr.income-row{
  background:#ecfdf5 !important;
}

#accounts .new-account-table tr.income-row td,
#accounts .account-table tr.income-row td,
#accounts table tr.income-row td{
  color:#047857 !important;
  font-weight:900 !important;
}

#accounts .new-account-table tr.expense-row,
#accounts .account-table tr.expense-row,
#accounts table tr.expense-row{
  background:#fef2f2 !important;
}

#accounts .new-account-table tr.expense-row td,
#accounts .account-table tr.expense-row td,
#accounts table tr.expense-row td{
  color:#dc2626 !important;
  font-weight:900 !important;
}

#accounts .income-badge{
  background:#047857 !important;
  color:#ffffff !important;
}

#accounts .expense-badge{
  background:#dc2626 !important;
  color:#ffffff !important;
}

#accounts .new-account-table tr.income-row:hover,
#accounts table tr.income-row:hover{
  background:#d1fae5 !important;
}

#accounts .new-account-table tr.expense-row:hover,
#accounts table tr.expense-row:hover{
  background:#fee2e2 !important;
}


/* =========================
   DASHBOARD ACCOUNT UPGRADE
========================= */
.account-dashboard-section{background:#ecfdf5}
.account-dash-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.dash-card{background:white;border-radius:16px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 8px 22px rgba(15,23,42,.08);border:1px solid transparent}
.dash-card small{font-weight:900;color:#334155;font-size:14px}
.dash-card h3{font-size:30px;font-weight:900;margin-top:8px}
.dash-card p{font-size:12px;font-weight:800;color:#64748b;margin-top:4px}
.dash-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:900}
.dash-income{border-color:#bbf7d0;background:linear-gradient(135deg,#ffffff,#f0fdf4)}.dash-income h3{color:#047857}.dash-income .dash-icon{background:#dcfce7;color:#047857}
.dash-expense{border-color:#fecaca;background:linear-gradient(135deg,#ffffff,#fff1f2)}.dash-expense h3{color:#dc2626}.dash-expense .dash-icon{background:#fee2e2;color:#dc2626}
.dash-cash{border-color:#bfdbfe;background:linear-gradient(135deg,#ffffff,#eff6ff)}.dash-cash h3{color:#2563eb}.dash-cash .dash-icon{background:#dbeafe;color:#2563eb}
.dash-capital{border-color:#ddd6fe;background:linear-gradient(135deg,#ffffff,#f5f3ff)}.dash-capital h3{color:#7c3aed}.dash-capital .dash-icon{background:#ede9fe;color:#7c3aed}
.ledger-box{background:white;border-radius:16px;overflow:hidden;box-shadow:0 10px 26px rgba(15,23,42,.10);margin-top:16px;border:1px solid #d1fae5}
.ledger-title{padding:12px 16px;color:white}
.ledger-title h3{font-size:21px;font-weight:900}
.green-title{background:linear-gradient(135deg,#047857,#16a34a)}
.red-title{background:linear-gradient(135deg,#dc2626,#ef4444)}
.ledger-table-wrap{overflow-x:auto}
.dashboard-ledger{width:100%;border-collapse:collapse;min-width:980px}
.dashboard-ledger th{padding:12px 14px;text-align:center;font-size:14px;font-weight:900;white-space:nowrap}
.dashboard-ledger td{padding:10px 14px;text-align:center;font-size:14px;font-weight:800;border-bottom:1px solid #dbe7df;white-space:nowrap}
.donor-ledger th{background:#f0fdf4;color:#047857;border:1px solid #bbf7d0}
.donor-ledger td{background:#fbfffc;color:#0f172a;border:1px solid #bbf7d0}
.donor-ledger tbody tr:hover td{background:#ecfdf5}
.expense-ledger th{background:#fff1f2;color:#dc2626;border:1px solid #fecaca}
.expense-ledger td{background:#fffafa;color:#0f172a;border:1px solid #fecaca}
.expense-ledger tbody tr:hover td{background:#fef2f2}
.dashboard-ledger td:nth-child(8){font-size:16px;font-weight:900}
.donor-ledger td:nth-child(8){color:#047857}
.expense-ledger td:nth-child(8){color:#dc2626}
.p-badge,.d-badge{display:inline-block;min-width:34px;padding:4px 10px;border-radius:999px;color:white;font-weight:900;font-size:13px}
.p-badge{background:#047857}.d-badge{background:#dc2626}
.ledger-total-row td{background:#f0fdf4!important;color:#047857!important;font-weight:900!important;font-size:16px!important}
.red-total td{background:#fff1f2!important;color:#dc2626!important}
.cash-final-box{margin-top:18px;background:linear-gradient(135deg,#ffffff,#eff6ff);border:1px solid #bfdbfe;border-radius:16px;padding:18px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;box-shadow:0 8px 22px rgba(15,23,42,.08);text-align:center}
.cash-final-box span{font-size:30px}.cash-final-box strong{font-size:20px;color:#1d4ed8}.cash-final-box p{font-weight:800;color:#334155}.cash-final-box h3{font-size:28px;color:#2563eb;font-weight:900}
@media(max-width:900px){
  .account-dash-summary{grid-template-columns:1fr}
  .dash-card h3{font-size:26px}
  .ledger-title h3{font-size:18px}
  .dashboard-ledger th,.dashboard-ledger td{padding:10px;font-size:13px}
  .cash-final-box{flex-direction:column}
}


/* =========================
   CONNECTED PAID DONOR SCROLL
========================= */

  100%{transform:translateY(-50%)}
}
@media(max-width:768px){
  100%{transform:translateY(-100%)}}
@media(max-width:900px){.account-dash-summary{grid-template-columns:1fr}.dash-card h3{font-size:26px}.dashboard-ledger th,.dashboard-ledger td{padding:10px;font-size:13px}}




/* =========================
   MOBILE HEADER SCROLL FIX
   Header will not cover content on mobile
========================= */

@media(max-width:850px){
  header{
    position:relative !important;
    top:auto !important;
    z-index:5 !important;
  }

  .nav{
    position:relative !important;
  }

  body{
    padding-top:0 !important;
  }

  section{
    scroll-margin-top:10px !important;
  }

  .brand img{
    width:62px !important;
    height:62px !important;
  }

  .brand span{
    font-size:15px !important;
    line-height:1.35 !important;
  }

  .menu{
    max-height:none !important;
    overflow:visible !important;
  }
}