/*
 * Spark reusable responsive type classes.
 * Add these classes in Elementor's CSS Classes field.
 */

.spark-supporting-copy p,
.elementor-widget-text-editor.spark-supporting-copy {
  font-size: clamp(1.2rem, 1.35vw, 1.2rem) !important;
  line-height: 1.3 !important;
}

.spark-responsive-heading h1,
.spark-responsive-heading h2,
.spark-responsive-heading h3,
.spark-responsive-heading .ct-heading,
.spark-responsive-heading .case-heading,
.spark-responsive-heading .heading-title,
.spark-responsive-heading .title,
.elementor-widget-heading.spark-responsive-heading .elementor-heading-title {
  font-size: clamp(2.4rem, 3.5vw, 2.5rem) !important;
  line-height: 1.08 !important;
}

@media (max-width: 1024px) {
  .spark-responsive-heading h1,
  .spark-responsive-heading h2,
  .spark-responsive-heading h3,
  .spark-responsive-heading .ct-heading,
  .spark-responsive-heading .case-heading,
  .spark-responsive-heading .heading-title,
  .spark-responsive-heading .title,
  .elementor-widget-heading.spark-responsive-heading .elementor-heading-title {
    font-size: clamp(2.2rem, 5vw, 2.5rem) !important;
  }
}

@media (max-width: 767px) {
  .spark-supporting-copy p,
  .spark-supporting-copy .elementor-widget-container,
  .elementor-widget-text-editor.spark-supporting-copy {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  .spark-responsive-heading h1,
  .spark-responsive-heading h2,
  .spark-responsive-heading h3,
  .spark-responsive-heading .ct-heading,
  .spark-responsive-heading .case-heading,
  .spark-responsive-heading .heading-title,
  .spark-responsive-heading .title,
  .elementor-widget-heading.spark-responsive-heading .elementor-heading-title {
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 480px) {
  .spark-supporting-copy p,
  .spark-supporting-copy .elementor-widget-container,
  .elementor-widget-text-editor.spark-supporting-copy {
    font-size: 1.1rem !important;
  }

  .spark-responsive-heading h1,
  .spark-responsive-heading h2,
  .spark-responsive-heading h3,
  .spark-responsive-heading .ct-heading,
  .spark-responsive-heading .case-heading,
  .spark-responsive-heading .heading-title,
  .spark-responsive-heading .title,
  .elementor-widget-heading.spark-responsive-heading .elementor-heading-title {
    font-size: clamp(1.8rem, 9vw, 2.35rem) !important;
  }
}
