/* ===========================
   JJ FOUNDATION - Cleaned CSS
   Paste-ready (replace existing)
   =========================== */

/* Base Styles & Variables */
:root{
  --primary: #2c3e50;      /* main dark blue */
  --secondary: #e74c3c;    /* accent (red) */
  --accent: #3498db;       /* secondary accent (blue) */
  --light: #ecf0f1;
  --dark: #1a252f;
  --success: #27ae60;
  --transition: all 0.45s cubic-bezier(0.65,0,0.35,1);
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --radius: 8px;
  --header-height: 80px; /* used for mobile offsets */
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

/* Base */
body{
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  color: var(--dark);
  background-color: var(--light);
  overflow-x: hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Typography */
h1,h2,h3,h4{ font-family: "Playfair Display", serif; font-weight:700; line-height:1.2; margin-bottom:1rem }
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.75rem}
h4{font-size:1.5rem}

p,a,li,span,input,button{ font-family: "Nunito", sans-serif }

a{ text-decoration:none; color:var(--secondary); transition:var(--transition) }

/* Utilities */
.container{ width:90%; max-width:1200px; margin:0 auto; padding:0 15px }

.btn{
  display:inline-block;
  padding:12px 30px;
  background:var(--secondary);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  transition:var(--transition);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow:var(--shadow);
}
.btn:hover{ background:var(--accent); transform:translateY(-3px) }
.btn-accent{ background:var(--accent) }
.btn-accent:hover{ background:var(--secondary) }

.section{ padding:100px 0; position:relative }
.section-title{ text-align:center; margin-bottom:60px; position:relative }
.section-title:after{
  content:''; display:block; width:80px; height:4px; background:var(--secondary); margin:20px auto; border-radius:2px
}
.text-center{ text-align:center }
.text-primary{ color:var(--primary) }
.text-secondary{ color:var(--secondary) }
.text-accent{ color:var(--accent) }
.bg-primary{ background-color:var(--primary) }
.bg-secondary{ background-color:var(--secondary) }
.bg-light{ background-color:var(--light) }
.bg-dark{ background-color:var(--dark) }

/* ============================
   Header & Navigation
   ============================ */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1100;
  background: rgba(44,62,80,0.9);
  backdrop-filter: blur(8px);
  transition: 0.3s ease;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  -webkit-backdrop-filter: blur(8px);
}

/* When scrolled if you use that class in JS */
header.scrolled{ background: rgba(44,62,80,0.98); box-shadow: 0 5px 30px rgba(0,0,0,0.12) }

.navbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 0;
}

/* Logo */
.logo{ font-size:1.8rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px }
.logo span{ color:var(--secondary) }

/* Nav Links (desktop) */
.nav-links{
  display:flex;
  list-style:none;
  gap: 28px;
  align-items:center;
}
.nav-links li{ margin-left:0 } /* gap used instead */
.nav-links a{
  color:white; font-weight:600; position:relative; padding:5px 0; display:inline-block;
}
.nav-links a:after{
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--accent); transition:0.28s ease;
}
.nav-links a:hover:after, .nav-links a.active:after{ width:100% }

/* Hamburger (mobile) */
.hamburger{
  display:none;
  width:36px;
  height:28px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  gap:3px;
}
.hamburger div{
  width:25px; height:3px; background:white; margin:0; transition:transform 0.28s ease, opacity 0.28s ease;
  border-radius:2px;
}

/* ============================
   HERO
   ============================ */
.hero{
  height:100vh;
  display:flex; align-items:center;
  background: linear-gradient(rgba(44,62,80,0.8), rgba(44,62,80,0.8)), url('aboutusimg/DSC_1728.JPG') no-repeat center center/cover;
  color:#fff; text-align:center; position:relative; overflow:hidden;
}
.hero-content{ max-width:800px; margin:0 auto; z-index:1; animation:fadeInUp 1s ease-out }
.hero h1{ font-size:3.5rem; margin-bottom:20px; text-transform:uppercase }
.hero p{ font-size:1.2rem; margin-bottom:30px }
.hero-btns{ display:flex; justify-content:center; gap:20px }

/* ============================
   About / Programs / Values
   ============================ */
/* merged about styles (kept your design) */
.about{ background:white; padding:80px 0 }
.section-header{ text-align:center; margin-bottom:50px }
.section-title{ font-size:2.5rem; color:var(--primary); margin-bottom:15px; font-weight:700 }
.section-divider{ width:80px; height:4px; background:var(--secondary); margin:0 auto 15px }
.section-subtitle{ font-size:1.2rem; color:var(--dark); font-weight:400 }

.about-content{ display:flex; align-items:center; gap:50px; margin-bottom:60px }
.about-img{ flex:1; position:relative }
.img-frame{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transform:perspective(1000px) rotateY(-10deg); transition:var(--transition) }
.img-frame:hover{ transform:perspective(1000px) rotateY(0deg) }
.about-img img{ width:100%; height:auto; display:block; transition:var(--transition) }
.img-frame:hover img{ transform:scale(1.05) }

.about-text{ flex:1 }
.intro-box{ margin-bottom:30px }
.intro-box p{ font-size:1.1rem; line-height:1.7; color:var(--dark) }

.vision-mission{ display:flex; gap:20px; margin-bottom:30px }
.vm-card{ flex:1; background:var(--light); border-radius:var(--radius); padding:25px; display:flex; align-items:flex-start; gap:15px; transition:var(--transition) }
.vm-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow) }
.vm-icon{ font-size:1.5rem; color:var(--secondary); margin-top:5px }
.vm-content h3{ color:var(--primary); margin-bottom:10px; font-size:1.3rem }
.vm-content p{ color:var(--dark); line-height:1.6; font-size:0.95rem }

/* Values & programs grid */
.values-section, .programs-section{ margin-bottom:60px }
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:25px }
.value-item{ background:white; padding:30px 20px; border-radius:var(--radius); text-align:center; box-shadow:0 5px 15px rgba(0,0,0,0.05); transition:var(--transition); border:1px solid rgba(0,0,0,0.05) }
.value-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow) }
.value-icon{ width:60px; height:60px; background: rgba(231,76,60,0.08); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 15px }
.value-icon i{ font-size:1.8rem; color:var(--secondary) }
.value-item h4{ color:var(--primary); margin-bottom:10px; font-size:1.1rem }
.value-item p{ color:var(--dark); font-size:0.9rem; line-height:1.5 }

.programs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px }
.program-item{ background:white; padding:30px 20px; border-radius:var(--radius); text-align:center; box-shadow:0 5px 15px rgba(0,0,0,0.05); transition:var(--transition); border:1px solid rgba(0,0,0,0.05) }
.program-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow) }
.program-icon{ width:60px; height:60px; background: rgba(231,76,60,0.08); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 15px }
.program-icon i{ font-size:1.8rem; color:var(--secondary) }
.program-item h4{ color:var(--primary); margin-bottom:10px; font-size:1.1rem }
.program-item p{ color:var(--dark); font-size:0.9rem; line-height:1.5 }

/* Impact section */
.impact-section{ background:var(--light); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.impact-content{ padding:40px }
.impact-content h3{ color:var(--primary); margin-bottom:20px; font-size:1.8rem; text-align:center }
.impact-content p{ color:var(--dark); font-size:1.1rem; line-height:1.7; text-align:center; max-width:800px; margin:0 auto }
.impact-stats{ display:flex; justify-content:space-around; background:white; padding:30px 20px; border-top:1px solid rgba(0,0,0,0.05) }
.stat-item{ text-align:center; padding:0 15px }
.stat-number{ font-size:2.5rem; font-weight:700; color:var(--secondary); margin-bottom:5px; display:inline-block; min-width:50px; text-align:center }
.stat-label{ font-size:1rem; color:var(--dark); font-weight:500 }

/* ============================
   Gallery
   ============================ */
.gallery{ background:var(--light) }
.gallery-filter{ display:flex; justify-content:center; margin-bottom:40px; flex-wrap:wrap }
.filter-btn{ padding:8px 20px; margin:0 10px 10px 0; background:white; border:none; border-radius:30px; cursor:pointer; transition:var(--transition); font-weight:600; box-shadow:0 3px 10px rgba(0,0,0,0.05) }
.filter-btn.active, .filter-btn:hover{ background:var(--secondary); color:#fff }

.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:25px }
.gallery-item{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); height:250px; display:block }
.gallery-item:hover{ transform:translateY(-10px); box-shadow:0 15px 40px rgba(0,0,0,0.15) }
.gallery-img{ width:100%; height:100%; object-fit:cover; transition:var(--transition) }
.gallery-item:hover .gallery-img{ transform:scale(1.05) }
.gallery-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to top, rgba(0,0,0,0.7), transparent); display:flex; flex-direction:column; justify-content:flex-end; padding:20px; opacity:0; transition:var(--transition) }
.gallery-item:hover .gallery-overlay{ opacity:1 }
.gallery-title{ color:#fff; font-size:1.2rem; margin-bottom:5px; transform:translateY(20px); transition:var(--transition) }
.gallery-category{ color:var(--secondary); font-size:0.9rem; transform:translateY(20px); transition:var(--transition) }
.gallery-item:hover .gallery-title, .gallery-item:hover .gallery-category{ transform:translateY(0) }

/* Load more button */
.load-more-btn{
  display:none;
  margin:40px auto 0;
  padding:12px 30px; background:var(--secondary); color:#fff; border:none; border-radius:30px; cursor:pointer; font-weight:600; transition:var(--transition)
}
.load-more-btn:hover{ background:var(--primary); transform:translateY(-3px) }

/* gallery hide class (JS will add/remove) */
.gallery-item.hidden{ display:none !important }

/* ============================
   Newspaper
   ============================ */
.newspaper-gallery{ background:white }
.newspaper-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:30px }
.newspaper-item{ background:white; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition) }
.newspaper-item:hover{ transform:translateY(-10px); box-shadow:0 15px 40px rgba(0,0,0,0.15) }
.newspaper-img{ width:100%; height:400px; object-fit:contain; border-bottom:1px solid #eee }
.newspaper-content{ padding:20px }
.newspaper-date{ font-size:0.9rem; color:var(--secondary); margin-bottom:10px }
.newspaper-title{ font-size:1.2rem; margin-bottom:10px }
.newspaper-excerpt{ color:#666; margin-bottom:15px }

/* ============================
   Contact
   ============================ */
.contact{ background:var(--light) }
.contact-container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:50px }
.contact-info{ display:flex; flex-direction:column }
.contact-item{ display:flex; align-items:flex-start; margin-bottom:25px }
.contact-icon{ font-size:1.5rem; color:var(--secondary); margin-right:20px; margin-top:5px }
.contact-text h3{ font-size:1.2rem; margin-bottom:5px }
.contact-form .form-group{ margin-bottom:20px }
.contact-form input, .contact-form textarea{ width:100%; padding:15px; border:1px solid #ddd; border-radius:var(--radius); font-family:inherit; font-size:1rem; transition:var(--transition) }
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--secondary); box-shadow:0 0 0 3px rgba(52,152,219,0.12) }
.contact-form textarea{ height:150px; resize:vertical }

/* ============================
   Donate / UPI / Modal
   ============================ */
.donate{ background: linear-gradient(rgba(44,62,80,0.9), rgba(44,62,80,0.9)), url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; color:#fff; text-align:center }
.donate h2{ color:#fff }
.donate-options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:30px; margin-top:50px }
.donate-card{ background:rgba(255,255,255,0.08); backdrop-filter:blur(10px); border-radius:var(--radius); padding:40px 30px; transition:var(--transition); border:1px solid rgba(255,255,255,0.08) }
.donate-card:hover{ transform:translateY(-10px); background:rgba(255,255,255,0.12); box-shadow:0 10px 30px rgba(0,0,0,0.18) }
.donate-icon{ font-size:3rem; color:var(--secondary); margin-bottom:20px }
.donate-amount{ font-size:2rem; font-weight:700; margin-bottom:15px; color:var(--secondary) }
.donate-btn{ background:var(--accent); width:100% }
.donate-btn:hover{ background:var(--secondary) }
.custom-donate{ margin-top:50px; max-width:600px; margin-left:auto; margin-right:auto }
.custom-donate input{ width:100%; padding:15px; margin-bottom:20px; border:none; border-radius:var(--radius); font-size:1rem }

/* UPI button/fallback */
.upi-button{ display:inline-flex; align-items:center; gap:10px; background:#3F51B5; color:#fff; border:none; padding:12px 24px; border-radius:8px; font-weight:bold; cursor:pointer; transition:transform 0.3s }
.upi-button:hover{ transform:translateY(-3px); background:#303F9F }
.upi-button img{ width:24px; height:24px }
#upi-fallback{ background:#f8f9fa; padding:15px; border-radius:8px }
#upi-id{ padding:8px; border:1px solid #ddd; border-radius:4px; width:250px; margin-right:10px }

/* Modal */
.modal{ display:none; position:fixed; z-index:12000; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.85); backdrop-filter:blur(5px); animation:fadeIn 0.4s ease-out }
.modal-content{ background:#fff; margin:5% auto; width:450px; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.2); transform:translateY(-20px); opacity:0; animation:modalSlideIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275) forwards }
.modal-header{ background: linear-gradient(135deg,#6a11cb 0%,#2575fc 100%); color:#fff; padding:20px; position:relative; text-align:center }
.modal-header h3{ margin:0; font-size:1.5rem }
.close{ position:absolute; right:20px; top:20px; font-size:28px; font-weight:bold; cursor:pointer; transition:transform 0.3s }
.close:hover{ transform:rotate(90deg); color:#ffeb3b }

/* Tabs */
.tab-buttons{ display:flex; background:#f5f7fa; border-bottom:1px solid #e1e5eb }
.tab-btn{ flex:1; padding:15px; border:none; background:transparent; font-weight:600; color:#6c757d; cursor:pointer; transition:all 0.3s ease; position:relative }
.tab-btn.active{ color:#2575fc; background:#fff }
.tab-btn.active::after{ content:''; position:absolute; bottom:-1px; left:0; width:100%; height:3px; background:#2575fc; animation:underlineGrow 0.3s ease-out }
.tab-btn:hover:not(.active){ background:rgba(0,0,0,0.04); color:#495057 }

.tab-content{ display:none; padding:25px; animation:fadeIn 0.5s ease }
.tab-content.active{ display:block }

.qr-code{ width:250px; height:250px; margin:0 auto 20px; border:10px solid #fff; box-shadow:0 5px 15px rgba(0,0,0,0.1); border-radius:12px; display:block; transition:transform 0.3s }
.qr-code:hover{ transform:scale(1.03) }

.bank-details{ background:#f8f9fa; border-radius:10px; padding:20px; margin-bottom:20px }
.detail-item{ display:flex; margin-bottom:15px; align-items:center }
.detail-label{ font-weight:600; color:#495057; width:120px }
.detail-value{ background:#fff; padding:8px 12px; border-radius:6px; flex:1; box-shadow:0 2px 5px rgba(0,0,0,0.05) }

.upi-details{ text-align:center }
.upi-id{ background:#f8f9fa; padding:15px; border-radius:10px; margin-bottom:20px; font-size:1.2rem; font-weight:600; color:#2575fc }
.apps-list{ display:flex; justify-content:center; gap:15px }
.app-icon{ width:50px; height:50px; border-radius:50%; overflow:hidden; box-shadow:0 4px 8px rgba(0,0,0,0.1); transition:transform 0.3s }
.app-icon:hover{ transform:translateY(-5px) }
.app-icon img{ width:100%; height:100%; object-fit:contain }

.copy-btn{ background:#2575fc; color:#fff; border:none; padding:10px 20px; border-radius:6px; cursor:pointer; font-weight:600; margin-top:15px; transition:all 0.3s; display:inline-flex; align-items:center; gap:8px }
.copy-btn:hover{ background:#1a5cb8; box-shadow:0 4px 12px rgba(37,117,252,0.3) }
.copy-btn::before{ content:'📋' }
.copy-btn.copied{ background:#28a745 }
.copy-btn.copied::before{ content:'✓' }

.modal-footer{ text-align:center; padding:15px; background:#f8f9fa; color:#6c757d; font-size:0.9rem; border-top:1px solid #e1e5eb }

/* Animations */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px) } to{ opacity:1; transform:translateY(0) } }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-20px) } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes modalSlideIn{ from{ transform:translateY(-20px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
@keyframes underlineGrow{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
.floating{ animation:float 6s ease-in-out infinite }

/* Footer */
footer{ background:var(--dark); color:#fff; padding:60px 0 20px }
.footer-container{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:40px; margin-bottom:40px }
.footer-logo{ font-size:1.8rem; font-weight:700; margin-bottom:20px; display:inline-block }
.footer-logo span{ color:var(--secondary) }
.footer-about p{ margin-bottom:20px }
.social-links{ display:flex; gap:15px }
.social-link{ width:40px; height:40px; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; transition:var(--transition) }
.social-link:hover{ background:var(--secondary); transform:translateY(-3px) }
.footer-links h3, .footer-newsletter h3{ font-size:1.3rem; margin-bottom:20px; position:relative; padding-bottom:10px }
.footer-links h3:after, .footer-newsletter h3:after{ content:''; position:absolute; bottom:0; left:0; width:50px; height:2px; background:var(--secondary) }
.footer-links ul{ list-style:none }
.footer-links li{ margin-bottom:10px }
.footer-links a{ color:#ddd; transition:var(--transition) }
.footer-links a:hover{ color:var(--secondary); padding-left:5px }
.newsletter-form{ display:flex; margin-bottom:20px }
.newsletter-form input{ flex:1; padding:12px; border:none; border-radius:var(--radius) 0 0 var(--radius) }
.newsletter-form button{ padding:0 20px; background:var(--secondary); color:#fff; border:none; border-radius:0 var(--radius) var(--radius) 0; cursor:pointer; transition:var(--transition) }
.newsletter-form button:hover{ background:var(--accent) }
.footer-bottom{ text-align:center; padding-top:20px; border-top:1px solid rgba(255,255,255,0.08) }

/* ============================
   Responsive Breakpoints
   ============================ */
@media (max-width: 992px){
  .about-content{ flex-direction:column }
  .vision-mission{ flex-direction:column }
  .about-img{ margin-bottom:30px; max-width:600px; margin-left:auto; margin-right:auto }
}

/* CONSOLIDATED MOBILE NAVBAR - single version (no conflicts) */
@media (max-width: 768px){
  .hamburger{ display:flex }
  /* Make desktop nav behave as off-canvas panel on mobile */
  .nav-links{
    position:fixed;
    top:var(--header-height);
    right:-100%;
    width:75%;
    max-width:320px;
    height:calc(100vh - var(--header-height));
    background:var(--primary);
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding-top:30px;
    gap:18px;
    transition: right 0.32s ease-in-out;
    z-index:10000;
    display:flex; /* keep it flex so it can be measured & responsive */
  }
  .nav-links li{ margin:0 }
  .nav-links a{ color:white; font-size:1.02rem }
  /* ACTIVE class your JS toggles */
  .nav-links.nav-active{ right:0 }

  /* hamburger toggle animation (JS toggles 'toggle' class) */
  .hamburger.toggle div:nth-child(1){ transform: rotate(45deg) translate(5px, 5px) }
  .hamburger.toggle div:nth-child(2){ opacity:0 }
  .hamburger.toggle div:nth-child(3){ transform: rotate(-45deg) translate(5px, -5px) }

  /* Adjust hero / spacing on mobile */
  .hero h1{ font-size:2.5rem }
  .hero-btns{ flex-direction:column; align-items:center }
  .section{ padding:70px 0 }
  .stat-item{ flex:0 0 calc(50% - 30px); margin-bottom:20px }
}

/* small phones */
@media (max-width: 576px){
  .hero h1{ font-size:2rem }
  .hero p{ font-size:1rem }
  .section-title{ margin-bottom:40px }
  .stat-item{ flex:0 0 100% }
  .gallery-grid{ grid-template-columns:1fr }
  .newspaper-grid{ grid-template-columns:1fr }
  .modal-content{ width:90%; margin:10% auto }
  .tab-buttons{ flex-direction:column }
  .qr-code{ width:200px; height:200px }
}

/* END */