/* VCS Mobile Intro block */
.vcs-mobile-intro {
  position: relative;
  width: 100%;
  display: block;
  /* Hide on desktop by default; show only up to 1024px via media queries */
}

.vcs-mobile-intro__inner {
  position: relative;
  background: #ffffff;
  padding: 16px 16px 48px; /* extra bottom space for overlapping image */
}

/* Typography: Open Sans for all */
.vcs-mobile-intro__inner,
.vcs-mobile-intro__inner * {
  font-family: "Open Sans", sans-serif;
  box-sizing: border-box;
}

/* Heading */
.vcs-mobile-intro__heading {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: var(--e-global-color-primary);
  margin: 0 0 8px 0;
}

/* Divider */
.vcs-mobile-intro__divider {
  width: 236px;
  height: 1px;
  background: var(--e-global-color-primary);
  margin-bottom: 12px;
}
.vcs-mobile-intro__divider .elementor-divider-separator { display: none; }

/* Paragraph */
.vcs-mobile-intro__text p {
  font-weight: 400;
  font-size: 0.75rem; /* 12px */
  line-height: 20px;
  text-align: justify;
  color: var(--e-global-color-text);
}

/* Image overlapping absolute */
.vcs-mobile-intro__image-wrap {
  position: absolute;
  right: 12px;
  bottom: -20px; /* overlap the container */
  width: 290px;
  height: 246px;
}
.vcs-mobile-intro__image-wrap--tablet { display: none; }
.vcs-mobile-intro__image-wrap--phone { display: block; }
.vcs-mobile-intro__image {
  width: 290px;
  height: 246px !important;
  object-fit: cover;
  display: block;
}

/* Visibility: Only phone and iPad */
/* Default: hide on larger than 1024px */
@media (min-width: 1025px) {
  .vcs-mobile-intro { display: none; }
}

/* iPad/tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .vcs-mobile-intro { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; background: #ffffff; }
  .vcs-mobile-intro__inner { padding: 20px 20px 20px; }
  .elementor-element.elementor-widget-text-editor.vcs-mobile-intro__text { width: 100%; }
  /* Show tablet image before inner; hide phone image; position image on the left */
  .vcs-mobile-intro__image-wrap--tablet { display: block; position: relative; right: -1rem; bottom: 1rem; margin: 0; flex: 0 0 290px; width: 290px; height: 246px; }
  .vcs-mobile-intro__image-wrap--phone { display: none; }
}

@media (min-width: 1024px) and (max-width: 1024px) {
  .elementor-element.elementor-widget-text-editor.vcs-mobile-intro__text { width: 100%; }
  .vcs-mobile-intro { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; margin-top: 2rem; background: #ffffff; height: 16vh; }
  .vcs-mobile-intro__image-wrap--tablet { display: block; position: relative; right: -1rem; bottom: 3rem; margin: 0; flex: 0 0 290px; width: 290px; height: 246px; }
  .vcs-mobile-intro__image-wrap--phone { display: none; }

}

/* Phone */
@media (max-width: 767.98px) {
  .vcs-mobile-intro { display: block; }
  .vcs-mobile-intro__inner { padding: 20px 27px 64px; }
  /* Show phone image inside inner; hide tablet image */
  .vcs-mobile-intro__image-wrap--tablet { display: none; }
  .vcs-mobile-intro__image-wrap--phone { display: block; right: 1.5rem; bottom: -12rem; }
}

@media (min-width: 400px) and (max-width: 430px) {
  .vcs-mobile-intro__image-wrap { right: 3rem;}
}
