/* ================= HERO SECTION ================= */

/* ---- Base (mobile-first: 0–767px) ---- */
:root {
  --hero-section-padding-block: 2.5rem 1.5rem;
  --hero-banner-img-width: 0;
  --hero-font-weight-heading: 500;
  --hero-color-heading: var(--black);
  --hero-circle-dot-font-size: 80%; /* slightly smaller for mobile */
  --hero-circle-dot-top: 2px; /* tighter alignment */
  --hero-circle-dot-left: -1px; /* reduce negative spacing */
  --hero-top-page-spacing: 72px; /* smaller top spacing */
  --hero-text-gutter-offset: 0;
  --hero-color-circle-dot: var(--orange);
}

section.hero-section[class*="section"] {
  padding-block: var(--hero-section-padding-block);
  overflow: hidden;
}

.hero-section .hero-wrapper {
  position: relative;
}
.hero-section .lottie-wrapper {
  position: absolute;
  top: 0;
  right: 0;
}

.hero-section .hero-wrapper {
  position: relative;
  min-height: 40px;
  flex-wrap: wrap;
}

.hero-section .hdng-wrapper {
  position: relative;
  z-index: 1;
}

.hero-heading.heading-1 {
  color: var(--text-primary);
  font-weight: var(--fontWeightMedium);
}

.hero-heading .circle-dot {
  display: inline-block;
  color: var(--hero-color-circle-dot);
  line-height: 1;
  border-radius: 100%;
  vertical-align: bottom;
  font-size: var(--hero-circle-dot-font-size);
  position: relative;
  top: var(--hero-circle-dot-top);
  left: var(--hero-circle-dot-left);
  width: auto;
  height: auto;
}

.hdngs-separator {
  display: block;
  line-height: 0;
  padding: 0;
  margin-bottom: 0.3125rem;
  width: 100%; /* make it fluid across hero-wrapper */
}

.hero-section .svg-wrapper,
.hero-section .img-wrapper {
  display: none;
  position: absolute;
  right: 0;
  z-index: 0;
  line-height: 0;
}

.hero-section .hero-wrapper svg,
.hero-section .hero-wrapper .video-player,
.hero-section .hero-wrapper .dotlottie-player {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

/*--------------- Two Images Variant ---------------------*/
section.hero-section.hero-two-imgs-section .hero-two-imgs-section-inner-wrap {
    position: relative;
}
.hero-two-img {
    display: none;
}
.hero-section.hero-center .hdng-wrapper {
    flex: initial;
    max-width: 54rem;
}
.hero-section.hero-center {
    text-align: center;
}
.hero-section.hero-center .breadcrumb-list {
    justify-content: center;
}
.hero-section.hero-center .hero-wrapper {
    justify-content: center;
    text-align: center;
    display: flex;
}


/* ---- ≥768px (tablets portrait) ---- */
@media (min-width: 768px) {
  :root {
    --hero-section-padding-block: 2.5rem 1.875rem;
    --hero-banner-img-width: 373px;
    --hero-circle-dot-font-size: 65%;
    --hero-circle-dot-top: 2px;
    --hero-circle-dot-left: 0;
    --hero-top-page-spacing: 96px;
    --hero-text-gutter-offset: 10px;
  }

  .hero-section .hdng-wrapper {
    max-width: 70%;
    position: relative;
    z-index: 1;
  }
  .hero-section .svg-wrapper,
  .hero-section .img-wrapper,
  .hero-section .lottie-wrapper,
  .hero-section .video-wrapper {
    display: block;
    max-width: var(--hero-banner-img-width);
    flex: 0 var(--hero-banner-img-width);
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--containerFluidPadding));
    transform: translateY(-50%);
  }

    .hero-two-imgs-section .img-wrapper-left {
        left: 0;
        bottom: 10px;
    }
    
    .lottie-wrapper-left {
        left: calc(-1 * var(--hero-banner-img-width) / 2) !important;
        z-index: -1;
    }

    .hero-two-img.img-wrapper-left img {
        width: 13rem;
    }
    .hero-two-imgs-section .img-wrapper-right {
        right: 0;
        bottom: 2px;
    }
    .hero-two-img.img-wrapper-right img {
        width: 11rem;
    }

    /*--------------- Two Images Variant ---------------------*/

    .hero-two-img {
        display: block;
    }
    section.hero-section.hero-two-imgs-section {
        position: relative;
        /*overflow: visible;*/
    }
    .hero-two-img {
        position: absolute;
    }
    .hero-two-imgs-section .img-wrapper-left {
        left: 0;
        bottom: -30px;
    }
    .hero-two-imgs-section .img-wrapper-right {
        right: 0;
        bottom: -35px;
    }
}

/* ---- ≥1024px (tablet landscape / small laptop) ---- */
@media (min-width: 992px) {
  .hero-section .hero-wrapper {
    min-height: 60px;
  }
}

/* ---- ≥1366px (desktop) ---- */
@media (min-width: 1200px) {
  :root {
    --hero-section-padding-block: 5rem;
    --hero-banner-img-width: 540px /* 618px*/;
    --hero-circle-dot-font-size: 44%;
    --hero-circle-dot-top: 3px;
    --hero-circle-dot-left: -2px;
    --hero-top-page-spacing: 108px; /* back to default */
    --hero-text-gutter-offset: 20px;
  }

  .hero-section .svg-wrapper,
  .hero-section .img-wrapper {
    top: calc(var(--hero-top-page-spacing) * -1);
  }

    .hero-two-imgs-section .img-wrapper-left {
        /*left: -20px;*/
        bottom: 3px;
    }
    .hero-two-imgs-section .img-wrapper-left img {
        width: 19rem;
    }
    .hero-two-imgs-section .img-wrapper-right {
        /*right: -21px;*/
        bottom: -8px;
    }
    .hero-two-imgs-section .img-wrapper-right img {
        width: 18rem;
    }
}

/* ---- ≥1920px (widescreen) ---- */
@media (min-width: 1601px) {
  :root {
    --hero-banner-img-width: 700px;
    --hero-top-page-spacing: calc(108px - 10px);
    --hero-text-gutter-offset: 40px;
    --hero-circle-dot-font-size: 48%;
    --hero-circle-dot-top: 3px;
    --hero-circle-dot-left: -4px;
  }
  .hero-section .hero-wrapper {
    min-height: 100px;
  }
    .hero-two-imgs-section .hero-two-img img {
        width: auto;
    }
}

.hero-section.align-center .hdng-wrapper {margin:0 auto; text-align:center;}
.hero-section.align-center .breadcrumb-list{ justify-content: center;}