/* =============================================
   responsive.css — Media Queries (Mobile First)
   ============================================= */

/* ---- ≤ 960px — Mobile Nav: show dropdowns inline ---- */
@media (max-width: 960px) {
  .nav-item                { width: 100%; }

  /* Show dropdown items inline in open mobile menu */
  .navbar.open .dropdown {
    display: block;
    position: static;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: auto;
    padding: 0 0 4px 16px;
    animation: none;
  }

  .navbar.open .dropdown li a {
    padding: 7px 20px;
    font-size: 12.5px;
    color: #999;
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }

  .navbar.open .dropdown li a:hover {
    color: #f58220;
    padding-left: 26px;
    background: rgba(245,130,32,0.06);
  }
}

/* ---- ≤ 1200px — Large Tablets / Small Laptops ---- */
@media (max-width: 1200px) {
  .initiatives-grid        { grid-template-columns: repeat(3, 1fr); }
  .sdg-tiles               { grid-template-columns: repeat(6, 1fr); }
  .site-footer-top         { grid-template-columns: 180px 1fr 1fr 1fr; gap: 24px; padding: 40px 32px 32px; }
  .impact-grid             { grid-template-columns: repeat(3, 1fr); }
  .initiatives-heading     { font-size: 48px; }
}

/* ---- ≤ 1100px — Tablets Landscape ---- */
@media (max-width: 1100px) {
  .cards-grid              { grid-template-columns: repeat(2, 1fr); }
  .impact-grid             { grid-template-columns: repeat(3, 1fr); }
  .sdg-grid                { grid-template-columns: repeat(4, 1fr); }
  .footer-grid             { grid-template-columns: 1fr 1fr; }
  .initiatives-grid        { grid-template-columns: repeat(2, 1fr); }
  .initiatives-grid--3     { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .impact-banner-heading   { font-size: 42px; }
}

/* ---- ≤ 960px — Tablets Portrait ---- */
@media (max-width: 960px) {
  .about-grid,
  .approach-grid,
  .contact-grid            { grid-template-columns: 1fr; gap: 40px; }
  .about-badge             { right: 10px; }
  .approach-img-wrap img   { height: 300px; }
  .approach-overlay-card   { left: 10px; }
  .testimonial-grid        { grid-template-columns: 1fr 1fr; }
  .sdg-tiles               { grid-template-columns: repeat(5, 1fr); }
  .site-footer-top         { grid-template-columns: 1fr 1fr; padding: 36px 24px 28px; gap: 24px; }
  .initiatives-grid        { grid-template-columns: repeat(2, 1fr); }
  .initiatives-grid--3     { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .our-approach-img-box    { height: 280px; }
  .contact-form-wrap       { padding: 24px; }
}

/* ---- ≤ 768px — Mobile ---- */
@media (max-width: 768px) {
  /* Hamburger visible — handled in navbar.css at 960px,
     keeping this for any legacy .hamburger references */
  .hamburger { display: flex; }

  /* Nav dropdown (legacy fallback) */
  .navbar.open { display: flex; }

  /* Hero */
  .hero-slider             { height: 60vw; min-height: 320px; }
  .hero { height: auto; padding-bottom: 60px; }
  .hero-flex { flex-direction: column; padding-top: 120px; }
  .hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-stat { min-width: 140px; }

  /* Typography */
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }

  /* Impact banner */
  .impact-banner           { padding: 40px 16px; }
  .impact-banner-heading   { font-size: 30px; letter-spacing: 0; }

  /* Initiatives */
  .initiatives-section     { background: linear-gradient(to bottom, var(--primary) 220px, #fff 220px); padding: 32px 0 50px; }
  .initiatives-heading     { font-size: 32px; margin-bottom: 14px; }
  .initiatives-grid        { grid-template-columns: 1fr 1fr; gap: 14px; }
  .initiatives-grid--3     { grid-template-columns: 1fr 1fr; max-width: 100%; }

  /* Impact numbers */
  .impact-grid             { grid-template-columns: repeat(2, 1fr); }
  .impact-stat h2          { font-size: 28px; }

  /* SDG */
  .sdg-tiles               { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .sdg-top-heading         { font-size: 26px; }
  .sdg-sub-heading         { font-size: 20px; }

  /* Approach */
  .approach-grid           { grid-template-columns: 1fr; gap: 30px; }
  .approach-img-wrap img   { height: 260px; }
  .approach-overlay-card   { position: static; margin-top: 16px; max-width: 100%; left: 0; }
  .our-approach-img-box    { height: 220px; }
  .our-approach-heading    { font-size: 28px; }
  .our-approach-inner      { align-items: center; }

  /* Testimonials */
  .testimonial-grid        { grid-template-columns: 1fr; }

  /* Contact */
  .contact-grid            { grid-template-columns: 1fr; gap: 28px; }
  .contact-form-wrap       { padding: 20px 16px; }
  .form-row                { grid-template-columns: 1fr; }

  /* Footer */
  .site-footer-top         { grid-template-columns: 1fr 1fr; padding: 28px 16px 24px; gap: 20px; }
  .footer-grid             { grid-template-columns: 1fr; padding: 40px 0 20px; }
  .footer-bottom-inner     { flex-direction: column; text-align: center; }
  .site-footer-bottom      { padding: 12px 16px; font-size: 11px; }

  /* Sections general */
  .cards-grid              { grid-template-columns: 1fr; }
  .section                 { padding: 50px 0; }
  .container               { width: 95%; }

  /* CTA */
  .cta-buttons             { flex-direction: column; align-items: center; }

  /* About */
  .about-inner             { padding: 0 16px; }
  .about-intro             { font-size: 14px; }
}

/* ---- ≤ 580px — Small Tablets ---- */
@media (max-width: 580px) {
  .initiatives-grid        { grid-template-columns: 1fr; }
  .initiatives-grid--3     { grid-template-columns: 1fr; }
  .sdg-tiles               { grid-template-columns: repeat(3, 1fr); }
  .site-footer-top         { grid-template-columns: 1fr; }
  .footer-bank-card        { flex-direction: column; align-items: flex-start; }
}

/* ---- ≤ 480px — Small Mobile ---- */
@media (max-width: 480px) {
  .sdg-grid                { grid-template-columns: repeat(2, 1fr); }
  .impact-grid             { grid-template-columns: repeat(2, 1fr); }
  .sdg-tiles               { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .form-row                { grid-template-columns: 1fr; }
  .newsletter-form         { flex-direction: column; }
  .partners-logos          { gap: 20px; }
  .impact-banner-heading   { font-size: 24px; }
  .initiatives-heading     { font-size: 26px; }
  .impact-stat h2          { font-size: 24px; }
  .hero-slider             { height: 70vw; min-height: 240px; }
  .slider-arrow            { width: 34px; height: 34px; font-size: 13px; }
  .cta-section             { padding: 50px 0; }
  .our-approach-img-box    { height: 180px; }
  .sdg-top-heading         { font-size: 22px; }
  .sdg-sub-heading         { font-size: 17px; }
  .section                 { padding: 40px 0; }
  .step h4                 { font-size: 15px; }
  .step p                  { font-size: 13px; }
}

/* ---- ≤ 360px — Very Small Phones ---- */
@media (max-width: 360px) {
  .impact-grid             { grid-template-columns: 1fr 1fr; }
  .sdg-tiles               { grid-template-columns: repeat(2, 1fr); }
  h1                       { font-size: 22px; }
  h2                       { font-size: 19px; }
  .impact-banner-heading   { font-size: 20px; }
}

/* ---- Logo responsive scaling (navbar height stays fixed) ---- */
@media (max-width: 992px) {
  .logo-img { height: 88px; }
}
@media (max-width: 768px) {
  .logo-img { height: 72px; }
}
@media (max-width: 480px) {
  .logo-img { height: 58px; }
}

/* =============================================
   INNER PAGES — ABOUT / ABOUT2 / ABOUT3 / WHOWEARE
   ============================================= */

/* ---- ≤ 960px — Tablets ---- */
@media (max-width: 960px) {
  /* Banner image */
  .about-page-banner-img       { height: 360px; }

  /* Large watermark headings */
  .about-impact-heading,
  .about-approach-heading,
  .about-values-heading,
  .whoweare-heading,
  .about3-heading              { font-size: 48px; }

  /* About3 layout: stack badge below text */
  .about3-heading-row          { flex-direction: column; align-items: flex-start; }
  .about3-badge-wrap           { align-self: flex-start; padding-top: 0; }
  .about3-badge-img            { width: 130px; }
  .about3-heading              { white-space: normal; }

  /* Underlines — fluid */
  .about-impact-underline,
  .about3-heading-left .about-impact-underline,
  .whoweare-inner .about-impact-underline { width: 100%; max-width: 440px; }
  .underline-gray,
  .about3-heading-left .underline-gray,
  .whoweare-inner .underline-gray         { width: 30%; }
  .underline-orange,
  .about3-heading-left .underline-orange,
  .whoweare-inner .underline-orange       { flex: 1; width: auto; }

  /* Friendly Milestones image */
  .fm-image-inner              { max-width: 100%; padding: 0 16px; }
  .fm-note-inner               { max-width: 100%; }

  /* Initiatives section on about.php */
  .about-initiatives-title     { font-size: 28px; }
  .about-edu-sub-heading       { font-size: 17px; }
}

/* ---- ≤ 768px — Mobile ---- */
@media (max-width: 768px) {
  /* Banner */
  .about-page-banner-img       { height: 260px; object-position: center center; }

  /* Watermark headings */
  .about-impact-heading,
  .about-approach-heading,
  .about-values-heading,
  .whoweare-heading,
  .about3-heading              { font-size: 36px; }

  /* Inner content padding */
  .about-impact-inner,
  .about-model-inner,
  .about-approach-inner,
  .about-principles-inner,
  .about-values-inner,
  .about-edu-inner,
  .about3-inner,
  .whoweare-inner              { padding: 0 16px; }

  /* Initiatives banner */
  .about-initiatives-banner    { padding: 28px 16px 50px; background-size: 100% 300px; }
  .about-initiatives-title     { font-size: 24px; }

  /* Education icon row */
  .about-edu-title-row         { gap: 10px; }
  .about-edu-heading           { font-size: 20px; }
  .about-edu-sub-heading       { font-size: 16px; }

  /* About approach / values */
  .about-approach-section,
  .about-principles-section,
  .about-values-section,
  .about-impact-section,
  .about-edu-section           { padding: 36px 0; }

  /* About3 badge image */
  .about3-badge-img            { width: 100px; }

  /* Friendly Milestones image */
  .fm-image-section            { padding: 10px 12px 40px; }
  .fm-image-inner              { padding: 0 8px; }
  .fm-note-section             { padding: 0 12px 40px; }
  .fm-note-inner p             { font-size: 13.5px; }

  /* WhoWeAre section */
  .whoweare-section            { padding: 36px 16px 50px; }

  /* About3 section */
  .about3-section              { padding: 36px 16px 50px; }
}

/* ---- ≤ 480px — Small Mobile ---- */
@media (max-width: 480px) {
  /* Banner */
  .about-page-banner-img       { height: 200px; }

  /* Watermark headings */
  .about-impact-heading,
  .about-approach-heading,
  .about-values-heading,
  .whoweare-heading,
  .about3-heading              { font-size: 28px; }

  /* Intro text */
  .about-intro-inner p         { font-size: 13.5px; }

  /* Lists */
  .about-edu-desc,
  .about-edu-list li,
  .about-edu-note,
  .about-model-list li,
  .about-principles-list li,
  .about-values-intro,
  .about-values-list li,
  .about-impact-inner p,
  .about-approach-inner p,
  .whoweare-inner p,
  .about3-inner > p,
  .about3-heading-left p       { font-size: 13.5px; }

  /* Orange heading labels */
  .about-model-heading,
  .about-principles-heading    { font-size: 21px; }
  .about-edu-heading           { font-size: 18px; }
  .about-edu-sub-heading       { font-size: 15px; }

  /* Initiatives banner */
  .about-initiatives-title     { font-size: 20px; }
  .about-initiatives-banner    { background-size: 100% 240px; }

  /* About3 badge */
  .about3-badge-img            { width: 80px; }

  /* Friendly Milestones image */
  .fm-image-section            { padding: 8px 8px 32px; }
  .fm-image-inner              { padding: 0 4px; }
  .fm-note-inner p             { font-size: 13px; }
}

/* =============================================
   CAMPAIGNS PAGE — RESPONSIVE
   ============================================= */

/* ---- ≤ 960px — Tablets ---- */
@media (max-width: 960px) {
  .campaign-banner-img         { height: 360px; }
  .cip-title-section           { padding: 36px 20px 0; }
  .cip-logo-text               { font-size: 48px; gap: 0 8px; }
  .indsup-heading              { font-size: 52px; }
  .cip-content-section         { padding: 32px 20px 16px; }
  .cip-support-section         { padding: 8px 20px 50px; }
  .ourwork-heading             { font-size: 52px; }
  .edu-initiatives-section     { padding: 10px 20px 50px; }
}

/* ---- ≤ 768px — Mobile ---- */
@media (max-width: 768px) {
  /* Banner */
  .campaign-banner-img         { height: 240px; }

  /* Title section */
  .cip-title-section           { padding: 28px 16px 0; }

  /* Our Work / Get Involved heading — allow wrap, reduce size */
  .ourwork-heading             { font-size: 36px; white-space: normal; letter-spacing: -0.5px; }
  .ourwork-icon                { font-size: 28px; }
  .ourwork-heading-row         { align-items: flex-start; gap: 10px; }
  .ourwork-divider             { margin-top: 10px; }

  /* Intro content blocks */
  .cip-content-section         { padding: 24px 16px 10px; }
  .cip-content-inner           { padding: 0; }
  .cip-content-inner p         { font-size: 13.5px; line-height: 1.75; }
  .cip-content-inner strong    { font-size: 13.5px; }

  /* Key initiatives list */
  .edu-initiatives-section     { padding: 8px 16px 40px; }
  .edu-initiatives-inner       { padding: 0; }
  .edu-initiatives-heading     { font-size: 19px; margin-bottom: 20px; }
  .edu-item-title              { font-size: 14px; }
  .edu-item-desc               { font-size: 13.5px; line-height: 1.75; margin-left: 18px; }

  /* whoweare-section used by art-culture, education, get-involved pages */
  .whoweare-inner p            { font-size: 13.5px; }
}

/* ---- ≤ 480px — Small Mobile ---- */
@media (max-width: 480px) {
  /* Banner */
  .campaign-banner-img         { height: 180px; }

  /* Heading */
  .ourwork-heading             { font-size: 26px; letter-spacing: 0; }
  .ourwork-icon                { font-size: 22px; }
  .ourwork-heading-row         { gap: 8px; }

  /* Intro content */
  .cip-content-inner p         { font-size: 13px; }

  /* Initiatives list */
  .edu-initiatives-heading     { font-size: 17px; }
  .edu-item-title              { font-size: 13.5px; }
  .edu-item-desc               { font-size: 13px; margin-left: 16px; }

  /* whoweare text */
  .whoweare-inner p            { font-size: 13px; }
}

/* =============================================
   CONTACT PAGE — RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .contact-page-section        { padding: 32px 16px 60px; }
  .contact-page-inner          { grid-template-columns: 1fr; gap: 32px; }
  .contact-form-wrap           { padding: 24px 20px; }
}

@media (max-width: 480px) {
  .contact-page-section        { padding: 24px 16px 50px; }
  .form-row                    { grid-template-columns: 1fr; }
  .contact-form-wrap           { padding: 20px 16px; }
}

/* ---- ≤ 768px — Mobile ---- */
@media (max-width: 768px) {
  .campaign-banner-img         { height: 260px; object-position: center top; }
  .cip-title-section           { padding: 28px 16px 0; }
  .cip-logo-text               { font-size: 36px; flex-wrap: wrap; gap: 0 6px; }
  .kalam-logo-text             { font-size: 36px; }
  .indsup-heading              { font-size: 36px; letter-spacing: 0; }
  .kalam-divider               { height: 4px; margin-top: 8px; }
  .cip-full-name               { font-size: 0.75em; }
  .cip-divider                 { margin-top: 10px; height: 4px; }
  .cip-div-navy                { width: 80px; }
  .cip-content-section         { padding: 24px 16px 12px; }
  .cip-subheading              { font-size: 18px; margin-bottom: 16px; }
  .cip-content-inner p         { font-size: 14.5px; line-height: 1.75; margin-bottom: 18px; }
  .cip-support-section         { padding: 6px 16px 40px; }
  .cip-support-heading         { font-size: 18px; }
  .cip-support-desc            { font-size: 14.5px; margin-bottom: 22px; }
  .btn-donate-cip              { font-size: 14px; padding: 11px 30px; }
  .corp-contact-line           { font-size: 13.5px; margin-top: 22px; }
  .corp-email-link             { font-size: 14px; }
  .ourwork-heading             { font-size: 36px; letter-spacing: 0; }
  .ourwork-icon                { font-size: 32px; }
  .ourwork-divider             { margin-top: 8px; height: 4px; }
  .edu-initiatives-section     { padding: 10px 16px 40px; }
  .edu-initiatives-heading     { font-size: 20px; margin-bottom: 20px; }
  .edu-item-title              { font-size: 14px; }
  .edu-item-desc               { font-size: 13.5px; }
}

/* ---- ≤ 480px — Small Mobile ---- */
@media (max-width: 480px) {
  .campaign-banner-img         { height: 200px; }
  .cip-logo-text               { font-size: 28px; }
  .kalam-logo-text             { font-size: 28px; }
  .indsup-heading              { font-size: 28px; }
  .kalam-divider               { height: 4px; }
  .cip-full-name               { font-size: 0.7em; }
  .cip-content-inner p,
  .cip-support-desc            { font-size: 13.5px; }
  .cip-subheading,
  .cip-support-heading         { font-size: 16px; }
  .btn-donate-cip              { font-size: 13px; padding: 10px 26px; width: 100%; text-align: center; }
  .corp-contact-line           { font-size: 13px; }
  .ourwork-heading             { font-size: 28px; }
  .edu-initiatives-section     { padding: 10px 14px 30px; }
}

/* ---- ≤ 360px — Very Small Phones ---- */
@media (max-width: 360px) {
  .campaign-banner-img         { height: 170px; }
  .cip-logo-text               { font-size: 24px; }
  .indsup-heading              { font-size: 24px; }
  .kalam-logo-text             { font-size: 24px; }
  .ourwork-heading             { font-size: 24px; }
}

/* =============================================
   NEW / UPDATED ELEMENTS — RESPONSIVE FIXES
   ============================================= */

/* ---- about.php Our Initiatives image strip ---- */
@media (max-width: 768px) {
  .about-init-img-wrap         { height: auto; }
  .about-initiatives-img-wrap  { height: 220px; }
}
@media (max-width: 480px) {
  .about-init-img-wrap         { height: auto; }
  .about-initiatives-img-wrap  { height: 170px; }
}

/* ---- hw-gray / hw-orange border-bottom spans (About Us headings) ---- */
@media (max-width: 768px) {
  .about-impact-heading .hw-gray,
  .about-approach-heading .hw-gray,
  .about-values-heading .hw-gray,
  .whoweare-heading .hw-gray,
  .about-impact-heading .hw-orange,
  .about-approach-heading .hw-orange,
  .about-values-heading .hw-orange,
  .whoweare-heading .hw-orange   { padding-bottom: 6px; border-bottom-width: 3px; }
}
@media (max-width: 480px) {
  .about-impact-heading .hw-gray,
  .about-approach-heading .hw-gray,
  .about-values-heading .hw-gray,
  .whoweare-heading .hw-gray,
  .about-impact-heading .hw-orange,
  .about-approach-heading .hw-orange,
  .about-values-heading .hw-orange,
  .whoweare-heading .hw-orange   { padding-bottom: 4px; border-bottom-width: 3px; }
}

/* ---- ourwork-title-wrap (Our Work pages heading + divider) ---- */
@media (max-width: 768px) {
  .ourwork-title-wrap          { width: 100%; }
  .ourwork-divider             { width: 100%; }
}

/* ---- ow-ul-gray / ow-ul-orange divider bars ---- */
@media (max-width: 768px) {
  .ow-ul-gray                  { width: 28px; height: 4px; }
  .ow-ul-orange                { height: 4px; }
}
@media (max-width: 480px) {
  .ow-ul-gray                  { width: 22px; height: 3px; }
  .ow-ul-orange                { height: 3px; }
}

/* ---- Donate button section ---- */
@media (max-width: 768px) {
  .donate-btn-section          { padding: 36px 16px 44px; }
  .donate-open-btn             { font-size: 16px; padding: 14px 36px; }
}
@media (max-width: 480px) {
  .donate-btn-section          { padding: 28px 16px 36px; }
  .donate-open-btn             { font-size: 14px; padding: 12px 28px; width: 100%; justify-content: center; }
}

/* ---- Auto donate popup ---- */
@media (max-width: 480px) {
  .auto-donate-box             { max-width: 270px; padding: 22px 16px 18px; }
  .auto-donate-qr              { width: 140px; height: 140px; }
  .auto-donate-title           { font-size: 16px; }
  .auto-donate-sub             { font-size: 12px; }
}