/* ==========================================================================
   Mobile Fixes  -  loaded LAST so it wins the cascade.

   Why this file exists:
   - Hero titles across pages use clamp(46px, 6vw, 82px). On a phone 6vw is
     ~22px, so they bottom out at the 46px min - too big, they overflow.
   - Section titles bottom out at 34px; stat numbers are FIXED at 42-54px and
     never scale; the theme's small-screen breakpoints were empty.
   This layer caps headings, stat numbers, icons and spacing for real phones.
   Desktop/tablet layout is untouched (everything is inside phone media
   queries, except the universal overflow guards which are always safe).
   ========================================================================== */

/* ---- Universal safety guards (all widths) ---- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   PHONES  <= 600px
   ========================================================================== */
@media only screen and (max-width: 600px) {

  h1 { font-size: 36px !important; line-height: 1.15 !important; letter-spacing: -0.5px !important; word-break: break-word; }
  h2 { font-size: 28px !important; line-height: 1.2  !important; }
  h3 { font-size: 22px !important; line-height: 1.3  !important; }
  h4 { font-size: 19px !important; line-height: 1.35 !important; }
  h5 { font-size: 17px !important; line-height: 1.4  !important; }
  h6 { font-size: 15px !important; line-height: 1.5  !important; }

  p, li, body { font-size: 15px !important; line-height: 1.7 !important; }

  .hero-eyebrow, .hero-tag, .program-tag,
  .section-title-center span, .section-title-left span,
  .section-title span, .sub__title h6 { font-size: 12px !important; }

  .premium-home-hero h1 { font-size: 40px !important; }
  .premium-home-hero { min-height: 600px !important; height: auto !important; }
  .premium-home-hero .hero-content { padding: 110px 0 70px !important; }
  .premium-home-hero p { font-size: 15px !important; }

  .hero-badge strong { font-size: 30px !important; }
  .journey-number, .work-number, .process-number,
  [class*="-number"] { font-size: 30px !important; line-height: 1.1 !important; }
  .impact-box { padding-left: 18px !important; margin-bottom: 26px !important; }

  .quote-box { font-size: 18px !important; line-height: 1.55 !important; padding-left: 16px !important; }

  .btn-1, .btn-2, .hero-outline,
  .premium-home-hero .btn-main, .premium-home-hero .btn-outline {
    font-size: 14px !important;
    padding: 12px 22px !important;
  }

  .partner-card i { width: 48px !important; height: 48px !important; font-size: 20px !important; }
  .service-icon, .home-three-service .service-icon { font-size: 32px !important; }
  .menu-area .mobile-nav-toggler,
  .nav-outer .mobile-nav-toggler { font-size: 26px !important; line-height: 34px !important; }
  .testimonial .owl-nav span, .owl-nav span, .btn-close i { font-size: 24px !important; }
  .team-icon, .main-gallery .team-icon {
    width: 60px !important; height: 60px !important; line-height: 60px !important;
    font-size: 22px !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .section-padding, .premium-hero,
  section, .contact-us { padding: 55px 0 !important; }
  .impact-band { padding: 45px 0 !important; }
  .cta-premium { padding: 60px 0 !important; }
  .cta-premium p, .section-title-center p, .section-title-left p,
  .section-title p { font-size: 15px !important; }
  .program-card img, .story-img img, .hero-image-wrap img { height: auto !important; max-height: 340px !important; object-fit: cover; }
  .program-content { padding: 24px !important; }
  .partner-card { padding: 28px 22px !important; }
  .section-title-center, .section-title-left, .section-title { margin-bottom: 34px !important; }

  [class$="-hero"] { padding: 90px 0 55px !important; }
  .about-hero-content, .donate-hero-content, .hero-content { padding-top: 0 !important; }

  .common-banner { padding: 55px 0 !important; }
  .common-banner-title h3 { font-size: 28px !important; line-height: 36px !important; }
  .common-banner-title a, .common-banner-title span { font-size: 14px !important; }
  .align-title h3, .common-title h3, .sec-title h2, .call-title h2 {
    font-size: 26px !important; line-height: 1.25 !important;
  }
  .sec-title h2:after { width: 120px !important; background-size: contain !important; }
  .mission-video-text h2 { font-size: 38px !important; line-height: 1.15 !important; }
  .funfact-block-two .inner-box .count-outer,
  .funfact-block-two .inner-box .count-outer span { font-size: 32px !important; line-height: 1.2 !important; }
  .causes-content a, .blog .causes-content a, .event-content a,
  .event-rilated-title h3 { font-size: 22px !important; line-height: 1.3 !important; }
  .causes-content h5 { font-size: 20px !important; line-height: 1.3 !important; }
  .volunteers-info h5 { font-size: 22px !important; margin-bottom: 10px !important; }
  .volunteers-info p  { font-size: 15px !important; }
  .fun-fact-container { padding: 40px 0 !important; border-radius: 30px !important; }
  .event-image, .about-volunteer .volunteers-image,
  .team-container .volunteers-image, .causes-page .event-details-image,
  .team-three-image { height: auto !important; min-height: 360px !important; }
  .faq { height: auto !important; }
  .map { margin-bottom: 0 !important; }
  .news_letter_content { padding: 40px 18px !important; }
}

/* ==========================================================================
   SMALL PHONES  <= 400px  (extra trim)
   ========================================================================== */
@media only screen and (max-width: 400px) {

  h1 { font-size: 31px !important; }
  h2 { font-size: 25px !important; }
  h3 { font-size: 21px !important; }

  .premium-home-hero h1 { font-size: 34px !important; }

  .hero-badge strong,
  .journey-number, .work-number, .process-number,
  [class*="-number"] { font-size: 26px !important; }

  .common-banner-title h3 { font-size: 25px !important; }
  .align-title h3, .common-title h3, .sec-title h2, .call-title h2 { font-size: 23px !important; }
  .mission-video-text h2 { font-size: 32px !important; }
  .causes-content a, .event-content a { font-size: 20px !important; }

  .btn-1, .btn-2, .hero-outline,
  .premium-home-hero .btn-main, .premium-home-hero .btn-outline {
    font-size: 13px !important; padding: 11px 18px !important;
  }
}