:root {
  /* Botton styles */
  --btn-background-color: #c61b3b;
  --btn-border-color: #c61b3b;
  --btn-hover-background-color: #e33152;
  --btn-hover-color: rgb(0, 112, 210);
  --btn-left-padding: 2em;
  --btn-top-padding: .5em;
  --btn-padding: .5em 2em;
  --btn-height: 37px;
  --btn-font-color: #fff;
  --btn-position: absolute;
  /* Font Styles */
  --font-family: "StJude Medium", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-color: #000;
  --font-effect-transform: inherit;
  --font-letter-spacing: inherit;
  --font-line-height: inherit;
  --font-text-decoration: inherit;
  --font-text-shadow: inherit;
  /* Image Component Padding */
  --pd-ptop: inherit;
  --pd-pright: inherit;
  --pd-pbottom: inherit;
  --pd-pleft: inherit;
  /* position abbsolute*/
  --custom-top: 10px;
  --custom-left: 10px;
  --custom-right: inherit;
  --custom-bottom: inherit;
  --custom-padding: inherit;

  /* Responsive Text*/
  --desktop-width: 768px; /* Desktop breakpoint to mobile */
  /* your design width */

  --font-size: 1.1em;
  /* Default font size*/
  --font-size-mobile: 6vw;
  /* viewport-based for mobile */
  --font-size-sub-mobile: 4vw;
  /* viewport-based for mobile */
  --font-size-cta-mobile: 5vw;
  /* viewport-based for mobile */
  /* Define base font sizes in any unit */
  --headline-desktop: calc(var(--font-size, 40px));
  /* could be px, rem, em, pt */
  --headline-mobile: calc(var(--font-size-mobile, 6vw));
  /* viewport-based for mobile */

  --subheadline-desktop: calc(var(--font-size, 24px));
  /* could be px, rem, em, pt */
  --subheadline-mobile: calc(var(--font-size-sub-mobile, 4vw));
  /* viewport-based for mobile */

  --btn-font-size: calc(var(--font-size, 1.1em));
  /* Default button font size */
  --btn-mobile: calc(var(--font-size-cta-mobile, 5vw));
  /* Mobile button font size */

  /* Optional: min/max bounds for safety */
  --font-desktop-min: 0.5rem;
  --font-desktop-max: 20rem;

  --font-mobile-min: 0.5rem;
  --font-mobile-max: 12rem;


}


.region:before {
  padding-top: 0 !important;
}

.component-figure {
  margin: 0;
  width: 100%;
  /* height: 100%; */
}

.component-image {
  width: 100%;
  height: auto;
  display: inline-block;
  position: relative;
  object-fit: cover;
  object-position: var(--focal-point-x) var(--focal-point-y);
}

.component-image-padding {
  padding-top: var(--pd-ptop) !important;
  padding-right: var(--pd-pright) !important;
  padding-bottom: var(--pd-pbottom) !important;
  padding-left: var(--pd-pleft) !important;
}


.custom-element-smoother {
  position: absolute;
  top: inherit !important;
  left: 1rem !important;
  right: initial !important;
  bottom: inherit !important;
  width: 90% !important;
  font-family: var(--font-family);
  font-size: var(--font-size) !important;
  color: var(--font-color) !important;
}


.layout-Top-Left {
  position: absolute;
  top: var(--custom-top, 1rem) !important;
  left: 1rem !important;
  bottom: inherit !important;
  right: inherit !important;
}

.layout-Top-Center {
  position: absolute;
  top: var(--custom-top, 1rem) !important;
  left: 50% !important;
  transform: translateX(-50%);
  bottom: inherit !important;
  right: inherit !important;
}

.layout-Top-Right {
  position: absolute;
  top: var(--custom-top, 1rem) !important;
  right: initial !important;
  bottom: inherit !important;
  left: 1rem !important;
}

.layout-Center-Left {
  position: absolute;
  top: 50% !important;
  left: 1rem !important;
  transform: translateY(-50%);
  bottom: inherit !important;
  right: inherit !important;
}

.layout-Center-Center {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  bottom: inherit !important;
  right: inherit !important;
}

.layout-Center-Right {
  position: absolute;
  top: 50% !important;
  right: initial !important;
  transform: translateY(-50%);
  bottom: inherit !important;
  left: 1rem !important;
}

.layout-Bottom-Left {
  position: absolute;
  bottom: var(--custom-bottom, 1rem) !important;
  left: 1rem !important;
  top: inherit !important;
  right: initial !important;
}

.layout-Bottom-Center {
  position: absolute;
  bottom: var(--custom-bottom, 1rem) !important;
  left: 50% !important;
  transform: translateX(-50%);
  top: inherit !important;
  right: initial !important;
}

.layout-Bottom-Right {
  position: absolute;
  bottom: var(--custom-bottom, 1rem) !important;
  right: initial !important;
  top: inherit !important;
  left: 1rem !important;
}

.layout-hidden {
  display: none !important;
}

.component-header-text {
  position: absolute;
  color: var(--font-color);
  letter-spacing: var(--font-letter-spacing);
  line-height: var(--font-line-height);
  text-decoration: var(--font-text-decoration);
  text-shadow: var(--font-text-shadow);
  font-size: clamp(var(--font-mobile-min),
      var(--font-size-mobile, 4vw),
      var(--font-mobile-max)) !important;
}

.component-subheader-text {
  position: absolute;
  color: var(--font-color);
  letter-spacing: var(--font-letter-spacing);
  line-height: var(--font-line-height);
  text-decoration: var(--font-text-decoration);
  text-shadow: var(--font-text-shadow);
  font-size: clamp(var(--font-mobile-min),
      var(--font-size-mobile, 4vw),
      var(--font-mobile-max)) !important;
}

.component-header-text p,
.component-subheader-text p {
  line-height: var(--font-line-height) !important;
  font-size: inherit !important;
  margin: inherit !important;
}

a.custom-button-pd:hover,
button.custom-button-pd:hover {
  text-decoration: none;
  color: var(--btn-font-color) !important;
  background-color: var(--btn-hover-background-color, #e33152);
}

a.custom-button-pd,
button.custom-button-pd {
  display: block;
  position: var(--btn-position);
  width: fit-content !important;
  margin: auto;
  cursor: pointer;
  padding: var(--btn-padding, .5em 2em);
  /*min-height: 37px;*/
  border-radius: 4px;
  /*line-height: 1.875rem;*/
  background-color: var(--btn-background-color, #c61b3b);
  color: var(--btn-font-color) !important;
  user-select: none;
  text-decoration: none;
  border: 1px solid var(--btn-border-color, #c61b3b);
  font-family: var(--font-family);
  font-size: clamp(var(--font-mobile-min),
      var(--font-size-mobile, 4vw),
      var(--font-mobile-max)) !important;
}

.experience-component .region_landscape-large:before,
.experience-component .region_square:before,
.experience-component .region_landscape-small:before {
  padding-top: 0 !important;
}

.experience-component {
  position: relative !important;
  left: 0px !important;
}

.custom-button:hover {
  background-color: rgb(244, 246, 249);
  color: rgb(0, 112, 210);
}

.page-designer-reference a {
  color: var(--font-color, inherit);
}

.page-designer-reference a:hover {
  color: var(--font-color, inherit);
}

.font-family-abril {
  font-family: "Abril Fatface", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.font-family-beloved {
  font-family: "Beloved Script", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media (min-width: 768px) {
  .component-header-text {
    position: absolute;
    top: var(--custom-top) !important;
    /* var(--focal-point-y)!important;*/
    left: var(--custom-left);
    /*var(--focal-point-x);*/
    font-size: clamp(var(--font-desktop-min),
        var(--font-size, 1rem),
        var(--font-desktop-max)) !important;
  }

  .component-subheader-text {
    font-size: clamp(var(--font-desktop-min),
        var(--font-size, 1rem),
        var(--font-desktop-max)) !important;
  }

  a.custom-button-pd,
  button.custom-button-pd {
    font-size: clamp(var(--font-desktop-min),
        var(--font-size, 1rem),
        var(--font-desktop-max)) !important;
  }


  .custom-element-smoother {
    position: absolute;
    top: var(--custom-top);
    left: var(--custom-left);
    padding: var(--custom-padding);

    width: inherit !important;
  }

  .layout-Top-Left {
    top: var(--custom-top, 1rem) !important;
    left: var(--custom-left, 1rem) !important;
    bottom: inherit !important;
    right: inherit !important;
  }

  .layout-Top-Center {
    top: var(--custom-top, 1rem) !important;

    bottom: inherit !important;
    right: inherit !important;
  }

  .layout-Top-Right {

    top: var(--custom-top, 1rem) !important;
    right: var(--custom-right, 1rem) !important;
    bottom: inherit !important;
    left: inherit !important;
  }

  .layout-Center-Left {

    bottom: inherit !important;
    right: inherit !important;
  }

  .layout-Center-Center {
    bottom: inherit !important;
    right: inherit !important;
  }

  .layout-Center-Right {
    top: 50% !important;
    right: var(--custom-right, 1rem) !important;
    transform: translateY(-50%);
    bottom: inherit !important;
    left: inherit !important;
  }

  .layout-Bottom-Left {
    bottom: var(--custom-bottom, 1rem) !important;
    left: var(--custom-left, 1rem) !important;
    top: inherit !important;
    right: inherit !important;
  }

  .layout-Bottom-Center {
    top: inherit !important;
    right: inherit !important;
  }

  .layout-Bottom-Right {
    bottom: var(--custom-bottom, 1rem) !important;
    right: var(--custom-right, 1rem) !important;
    top: inherit !important;
    left: inherit !important;
  }

}