.elementor-kit-37{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-37 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:850px;}.e-con{--container-max-width:850px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:300px;}.e-con{--container-max-width:300px;}}/* Start custom CSS *//* ===================================================================
   Mobile Responsive CSS
   (Applies to screens 600px wide or smaller)
=================================================================== */

@media (max-width: 600px) {

  /* --- 1. Make All Images Full-Width --- */
  /* This is the most important rule. 
    It prevents images from overflowing the screen.
  */
  .entry-content img,
  .post-content img,
  .widget img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;  /* Optional: centers images */
    margin-right: auto; /* Optional: centers images */
  }

  /* --- 2. Adjust Heading / Title Sizes --- */
  /* This makes your post/page titles smaller on mobile 
    to prevent awkward line breaks. 
    Adjust the 'font-size' values as needed.
  */
  .entry-content h1,
  .post-content h1 {
    font-size: 2.0rem;  /* Example: Was 3.0rem */
    line-height: 1.2;
  }

  .entry-content h2,
  .post-content h2 {
    font-size: 1.6rem;  /* Example: Was 2.2rem */
    line-height: 1.3;
  }

  .entry-content h3,
  .post-content h3 {
    font-size: 1.4rem; /* Example: Was 1.8rem */
  }

  /* --- 3. Make Content Text Readable --- */
  /* This sets a comfortable font size and line spacing 
    for all paragraphs and lists in your content.
  */
  .entry-content p,
  .post-content p,
  .entry-content li {
    font-size: 16px;
    line-height: 1.6; /* Adds more space between lines */
  }

  /* --- 4. Remove Extra Padding --- */
  /* Sometimes, your theme adds a lot of side padding.
    This reduces it so your content can use more of the screen.
  */
  body.page .entry-content,
  body.single-post .entry-content,
  .main-content {
    padding-left: 15px;
    padding-right: 15px;
  }
}/* End custom CSS */