/* Start custom CSS for html, class: .elementor-element-4458256 *//* =========================
   MOBILE TEXT SPACING FIX
   (for this blog template)
   ========================= */

/* Stop justification + weird spacing inside this template */
.blog-wrap,
.blog-wrap *{
  text-align: left !important;
  text-justify: auto !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

/* If the theme is forcing justify on paragraphs specifically */
.blog-wrap p,
.blog-wrap li,
.blog-wrap summary,
.blog-wrap details{
  text-align: left !important;
  text-align-last: left !important;
  text-justify: auto !important;
  word-spacing: normal !important;
  letter-spacing: normal !important;
}

/* Prevent awkward breaks on narrow screens */
.blog-wrap p,
.blog-wrap li{
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Mobile sizing + padding tweaks so it reads clean */
@media (max-width: 768px){
  :root{ --max: 100%; } /* keep container fluid on mobile */
  .blog-container{ padding: 14px 14px 34px; }

  p{ font-size: 16px; line-height: 1.7; }
  h2{ font-size: 20px; line-height: 1.25; }
  h3{ font-size: 15px; }

  .card.pad{ padding: 14px; }
  .callout{ padding: 12px; }
}

/* Optional: make the infographic not overflow if anything weird happens */
.inf-img{ max-width: 100%; }/* End custom CSS */