.elementor-4292 .elementor-element.elementor-element-d042bbf{--display:flex;}.elementor-4292 .elementor-element.elementor-element-c85d30a{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-4292 .elementor-element.elementor-element-f965da5 img{width:60%;}.elementor-4292 .elementor-element.elementor-element-bc10cc1{--display:flex;}@media(max-width:767px){.elementor-4292 .elementor-element.elementor-element-f965da5 img{width:100%;}}@media(min-width:768px){.elementor-4292 .elementor-element.elementor-element-d042bbf{--content-width:900px;}.elementor-4292 .elementor-element.elementor-element-c85d30a{--content-width:900px;}}/* Start custom CSS for html, class: .elementor-element-5c73266 */<style>
  /* Blog layout wrapper */
  .blog-article {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 20px 60px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111827;
    line-height: 1.7;
  }

  /* Main title */
  .blog-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0b666a; /* you can change to your brand color */
    margin-bottom: 10px;
  }

  /* Subtitle / kicker above title (optional) */
  .blog-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: #6b7280;
    margin-bottom: 4px;
  }

  /* Meta info (date, reading time, category) */
  .blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 24px;
  }

  .blog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .blog-meta-badge {
    background-color: #e0f2f7;
    color: #0b666a;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
  }

  /* Paragraphs */
  .blog-body p {
    margin-bottom: 16px;
    font-size: 1rem;
  }

  .blog-body p strong {
    font-weight: 600;
  }

  /* Headings inside the article */
  .blog-body h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 32px 0 12px;
    color: #111827;
  }

  .blog-body h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 24px 0 10px;
    color: #111827;
  }

  /* Lists */
  .blog-body ul,
  .blog-body ol {
    margin: 12px 0 16px 20px;
    padding-left: 12px;
  }

  .blog-body li {
    margin-bottom: 8px;
  }

  /* Images with caption */
  .blog-image {
    margin: 24px 0;
    text-align: center;
  }

  .blog-image img {
    max-width: 100%;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
  }

  .blog-image-caption {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 6px;
  }

  /* Highlight / callout box */
  .blog-callout {
    border-left: 4px solid #0b666a;
    background: #f8f6f4;
    padding: 12px 16px;
    border-radius: 10px;
    margin: 24px 0;
    font-size: 0.95rem;
  }

  /* Links */
  .blog-body a {
    color: #0b666a;
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  .blog-body a:hover {
    text-decoration-thickness: 2px;
  }
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4f1a49f */<style>
  .blog-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    font-family: Arial, sans-serif;
    color: #333;
  }

  /* === BODY TEXT CUSTOMIZATION === */
  .blog-wrapper p {
    font-size: 17px;        /* change text size */
    line-height: 1.75;       /* change spacing */
    margin-bottom: 20px;     /* paragraph spacing */
    color: #333;             /* body color */
  }

  /* Headings */
  .blog-wrapper h2 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 6px;
  }

  .blog-wrapper h3 {
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 12px;
  }

  /* Lists */
  .blog-wrapper ul {
    padding-left: 20px;
    line-height: 1.8;
    margin-bottom: 20px;
  }

  /* Colored boxes (callouts) */
  .callout {
    padding: 12px 16px;
    margin-bottom: 24px;
    border-radius: 6px;
  }

  .pink    { background: #fce4ec; border-left: 4px solid #d81b60; }
  .green   { background: #f1f8e9; border-left: 4px solid #689f38; }
  .orange  { background: #fff3e0; border-left: 4px solid #ef6c00; }
  .purple  { background: #f3e5f5; border-left: 4px solid #8e24aa; }
  .teal    { background: #e0f2f1; border-left: 4px solid #00897b; }
  .yellow  { background: #fff8e1; border-left: 4px solid #ffb300; }
  .blue    { background: #e3f2fd; border-left: 4px solid #1976d2; }
</style>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d50bd2e */<style>
  .blog-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    font-family: Arial, sans-serif;
    color: #333;
  }

  /* === BODY TEXT CUSTOMIZATION === */
  .blog-wrapper p {
    font-size: 17px;        /* change text size */
    line-height: 1.75;       /* change spacing */
    margin-bottom: 20px;     /* paragraph spacing */
    color: #333;             /* body color */
  }

  /* Headings */
  .blog-wrapper h2 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 6px;
  }

  .blog-wrapper h3 {
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 12px;
  }

  /* Lists */
  .blog-wrapper ul {
    padding-left: 20px;
    line-height: 1.8;
    margin-bottom: 20px;
  }

  /* Colored boxes (callouts) */
  .callout {
    padding: 12px 16px;
    margin-bottom: 24px;
    border-radius: 6px;
  }

  .pink    { background: #fce4ec; border-left: 4px solid #d81b60; }
  .green   { background: #f1f8e9; border-left: 4px solid #689f38; }
  .orange  { background: #fff3e0; border-left: 4px solid #ef6c00; }
  .purple  { background: #f3e5f5; border-left: 4px solid #8e24aa; }
  .teal    { background: #e0f2f1; border-left: 4px solid #00897b; }
  .yellow  { background: #fff8e1; border-left: 4px solid #ffb300; }
  .blue    { background: #e3f2fd; border-left: 4px solid #1976d2; }
</style>/* End custom CSS */