:root{
  --orange:#ff7a00;
  --green:#16a085;
  --dark:#17202a;
  --muted:#6b6f76;
  --card:#ffffff;
  --soft:#f4f7fb;
}
*{box-sizing:border-box}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; margin:0; color:#2b2f33; background:white; overflow-x:hidden}
a{color:inherit; text-decoration:none}
html{scroll-behavior:smooth}

/* NAVBAR */
.nav{position:fixed; left:0; right:0; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:12px 28px; background:rgba(255,255,255,0.95); box-shadow:0 2px 6px rgba(10,10,10,0.05); backdrop-filter:blur(10px); transition:all 0.3s ease}
.nav.scrolled{padding:8px 28px; background:rgba(255,255,255,0.98)}
.logo{display:flex; align-items:center; gap:12px; transition:transform 0.3s ease}
.logo:hover{transform:scale(1.05)}
.logo img{width:48px; height:48px; border-radius:6px; transition:all 0.3s ease}
.menu{display:flex; gap:22px; align-items:center}
.menu a{font-weight:600; color:#2e3740; position:relative; transition:color 0.3s ease; padding:4px 0}
.menu a::after{content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--green); transition:width 0.3s ease}
.menu a:hover{color:var(--green)}
.menu a:hover::after{width:100%}
.donate{background:linear-gradient(180deg,var(--orange),#ff6a00); color:white; padding:10px 18px; border-radius:26px; box-shadow:0 6px 18px rgba(255,122,0,0.22); font-weight:700; transition:all 0.3s ease; cursor:pointer; border:none}
.donate:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,122,0,0.35)}

/* Mobile */
.hamb{display:none; background:transparent; border:0; font-size:22px}
@media(max-width:900px){
  .menu{display:none}
  .hamb{display:inline-block}
}

/* HERO */
.hero {
  height: 78vh;
  min-height: 420px;
  background-image: url('header.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-attachment: fixed;
}

.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,7,7,0.45), rgba(7,7,7,0.6)); animation:fadeIn 0.8s ease}
.hero-inner{position:relative; color:white; text-align:center; max-width:1000px; padding:24px; animation:slideUp 1s ease; z-index:1}
.kicker{font-weight:700; font-size:48px; line-height:1; letter-spacing:-0.5px; animation:fadeInUp 1.2s ease}
.lead{margin-top:14px; font-size:18px; color:rgba(255,255,255,0.92); animation:fadeInUp 1.4s ease}
.hero-cta{margin-top:26px; animation:fadeInUp 1.6s ease}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0; transform:translateY(30px)}to{opacity:1; transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0; transform:translateY(20px)}to{opacity:1; transform:translateY(0)}}

/* SECTIONS */
.wrap{max-width:1100px; margin:48px auto; padding:0 20px}
.center{text-align:center}
h2{font-size:34px; margin:10px 0 8px}
.muted{color:var(--muted)}

/* PROGRAM CARDS */
.programs{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px}
.card{background:var(--card); border-radius:12px; padding:20px; box-shadow:0 6px 22px rgba(20,30,40,0.05); transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity:0; transform:translateY(30px)}
.card.visible{opacity:1; transform:translateY(0)}
.card:hover{transform:translateY(-8px); box-shadow:0 12px 35px rgba(20,30,40,0.12)}
.icon-circle{width:60px; height:60px; border-radius:50%; background:#eafaf1; display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--green); margin-bottom:12px; transition:all 0.3s ease}
.card:hover .icon-circle{transform:scale(1.1) rotate(5deg); background:var(--green); color:white}
.card h3{margin:6px 0 6px; transition:color 0.3s ease}
.card:hover h3{color:var(--green)}
.card p{color:var(--muted); font-size:15px}
@media(max-width:900px){.programs{grid-template-columns:repeat(1,1fr)}}

/* NEWS */
.news-grid{display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-top:26px}
.news-item img{width:100%; border-radius:10px}
.news-body{background:var(--card); padding:18px; border-radius:10px}
@media(max-width:900px){.news-grid{grid-template-columns:1fr}}

/* GALLERY */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.gallery img{width:100%; height:220px; object-fit:cover; border-radius:10px; cursor:pointer; transition:all 0.4s ease; filter:grayscale(20%); opacity:0; transform:scale(0.95)}
.gallery img.visible{opacity:1; transform:scale(1)}
.gallery img:hover{transform:scale(1.05); filter:grayscale(0%); box-shadow:0 8px 25px rgba(0,0,0,0.15)}
@media(max-width:1000px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.gallery{grid-template-columns:repeat(1,1fr)}}

/* CONTACT */
.contact-box{background:var(--card); padding:28px; border-radius:12px; display:flex; gap:24px; justify-content:space-between; align-items:center; box-shadow:0 10px 28px rgba(20,30,40,0.05)}
.contact-item{text-align:center; flex:1}
.contact-item .ico{width:54px; height:54px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#eafcf6; color:var(--green); margin-bottom:8px}

/* FOOTER */
footer{background:var(--dark); color:#c9d2d6; padding:48px 20px}
.footer-inner{max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; gap:20px}
.social a{margin-right:10px; display:inline-block; width:36px; height:36px; background:rgba(255,255,255,0.06); border-radius:50%; text-align:center; line-height:36px; color:#e9f0f2}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:200; backdrop-filter:blur(5px); animation:fadeIn 0.3s ease}
.modal.open{display:flex}
.modal-card{background:white; padding:20px; border-radius:12px; width:420px; max-width:95%; animation:modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.close{float:right; border:0; background:transparent; font-weight:700; font-size:18px; cursor:pointer; transition:all 0.3s ease; color:#999; width:30px; height:30px; border-radius:50%}
.close:hover{background:#f0f0f0; color:#333; transform:rotate(90deg)}

@keyframes modalSlideIn{from{opacity:0; transform:scale(0.8) translateY(-20px)}to{opacity:1; transform:scale(1) translateY(0)}}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:300; cursor:pointer; animation:fadeIn 0.3s ease}
.lightbox.open{display:flex}
.lightbox img{max-width:90%; max-height:90%; border-radius:8px; animation:zoomIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow:0 20px 80px rgba(0,0,0,0.5)}

@keyframes zoomIn{from{opacity:0; transform:scale(0.5)}to{opacity:1; transform:scale(1)}}

/* small tweaks */
.muted-small{color:#9aa3a9; font-size:14px}
.divider{height:4px; width:60px; background:var(--green); margin:16px auto; border-radius:2px}
.btn{display:inline-block; padding:10px 16px; border-radius:24px; text-decoration:none; transition:all 0.3s ease}

/* Progress Bar */
.progress-bar{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg, var(--green), var(--orange)); z-index:100; transition:width 0.1s ease}

/* Scroll reveal animations */
.fade-in{opacity:0; transform:translateY(30px); transition:all 0.6s ease}
.fade-in.visible{opacity:1; transform:translateY(0)}

/* Contact box animation */
.contact-item{transition:transform 0.3s ease}
.contact-item:hover{transform:translateY(-5px)}
.contact-item .ico{transition:all 0.3s ease}
.contact-item:hover .ico{transform:scale(1.1); background:var(--green); color:white}

/* News items */
.news-item{overflow:hidden; border-radius:10px}
.news-item img{transition:transform 0.5s ease}
.news-item:hover img{transform:scale(1.08)}

/* Input styling */
input, select, textarea{transition:all 0.3s ease}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--green) !important; box-shadow:0 0 0 3px rgba(22,160,133,0.1)}

/* About Section Styles */
.about-content{text-align:left; margin-top:30px}
.about-section{margin-bottom:40px; padding:24px; background:var(--card); border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.05)}
.about-section h3{color:var(--green); margin-bottom:16px}

/* Timeline */
.timeline{margin-top:20px}
.timeline-item{display:flex; gap:16px; margin-bottom:16px; padding:12px; background:#f8fafb; border-radius:8px; border-left:4px solid var(--green); transition:all 0.3s ease}
.timeline-item:hover{transform:translateX(5px); background:#eafaf1}
.timeline-year{font-weight:700; color:var(--green); min-width:60px; font-size:18px}
.timeline-content{color:#555}

/* Vision Mission */
.vision-mission{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:16px}
.vm-card{background:#f8fafb; padding:20px; border-radius:10px; border-top:4px solid var(--green)}
.vm-card h4{color:var(--green); margin-bottom:10px}
.vm-card ul{margin:10px 0; padding-left:20px}
.vm-card li{margin-bottom:8px; color:#555}
@media(max-width:768px){.vision-mission{grid-template-columns:1fr}}

/* Organization Structure */
.org-structure{margin-top:24px; padding:20px; background:#f8fafb; border-radius:12px}
.org-level{display:flex; justify-content:center; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.org-box{background:white; padding:16px 20px; border-radius:10px; text-align:center; min-width:180px; box-shadow:0 4px 12px rgba(0,0,0,0.08); transition:all 0.3s ease; border:2px solid #e0e0e0}
.org-box:hover{transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.12); border-color:var(--green)}
.org-box.highlight{border:2px solid var(--green); background:linear-gradient(135deg, #eafaf1, #fff)}
.org-box.small{min-width:140px; padding:12px 16px}
.org-title{font-weight:700; color:var(--green); font-size:14px; margin-bottom:6px}
.org-name{color:#555; font-size:13px}

/* Wakaf Section */
.wakaf-intro{text-align:center; max-width:800px; margin:24px auto; font-size:16px; color:#555; padding:20px; background:#f0f9f7; border-radius:10px}
.wakaf-types{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px}
.wakaf-benefit{margin-top:14px; padding:10px; background:#f0f9f7; border-radius:8px; font-size:14px; color:var(--green)}
.benefit-list{list-style:none; padding:0}
.benefit-list li{padding:8px 0; color:#555; font-size:15px}
@media(max-width:900px){.wakaf-types{grid-template-columns:1fr}}

/* Feedback Form */
.feedback-section{margin-top:40px}

/* Receipt Box */
.receipt-box{background:#f8fafb; padding:20px; border-radius:10px; margin:20px 0; text-align:left}
.receipt-box h4{color:var(--green); margin-bottom:14px; text-align:center}
.receipt-item{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e6e9ec}
.receipt-item:last-child{border-bottom:none}

/* Footer tweaks */
footer a{color:#c9d2d6; transition:color 0.3s ease}
footer a:hover{color:var(--green)}