.elementor-1565 .elementor-element.elementor-element-4c16e50{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1565 .elementor-element.elementor-element-e1aacf4{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:5px;--padding-bottom:5px;--padding-left:0px;--padding-right:0px;}.elementor-1565 .elementor-element.elementor-element-e1aacf4:not(.elementor-motion-effects-element-type-background), .elementor-1565 .elementor-element.elementor-element-e1aacf4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E8E5E3;}.elementor-1565 .elementor-element.elementor-element-3d5aabf{--display:flex;}.elementor-1565 .elementor-element.elementor-element-8d10d6d{text-align:center;}.elementor-1565 .elementor-element.elementor-element-5d621c1{--display:flex;}.elementor-1565 .elementor-element.elementor-element-0fc76e8{text-align:center;}.elementor-1565 .elementor-element.elementor-element-8d80b48{--display:flex;}.elementor-1565 .elementor-element.elementor-element-6814583{text-align:center;}.elementor-1565 .elementor-element.elementor-element-4622fca{--display:flex;}.elementor-1565 .elementor-element.elementor-element-8ba7909{text-align:center;}.elementor-1565 .elementor-element.elementor-element-b712558{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1565 .elementor-element.elementor-element-bde6b2c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1565 .elementor-element.elementor-element-5386fb6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1565 .elementor-element.elementor-element-9577beb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1565 .elementor-element.elementor-element-a408247{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1565 .elementor-element.elementor-element-e1aacf4{--content-width:1280px;}}/* Start custom CSS for html, class: .elementor-element-40fa093 */.hero {
    --s: min(1, 100vw / 1466px);
    position: relative;
    width: 100%;
    height: calc(816px * var(--s));
    overflow: hidden;
    background: #B96400;
  }

  /* LAYER 1 — BACKGROUND IMAGE */
  .layer-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
  }

  /* LAYER 2 — ORANGE WASH OVERLAY */
  .layer-wash {
    position: absolute;
    inset: 0;
    background: rgba(185, 100, 0, 0.38);
    z-index: 2;
  }

  /* =============================================
     SCALE WRAPPER — 1456×816 canvas
  ============================================= */
  .hero__scale {
    position: absolute;
    top: 0;
       left: calc(50% + -13px);
    transform: translateX(-50%) scale(var(--s));
    transform-origin: top center;
    width: 1440px;
    height: 816px;
    z-index: 3;
    pointer-events: none;
  }




  .hero__scale button { pointer-events: all; }

  /* ─────────────────────────────────────────
     LAYER 3 — PURPLE SHAPES
  ───────────────────────────────────────── */

  /* Orange pill — heading background */
  .shape-purple-blob {
    position: absolute;
    top: 52px;
    left: 0;
    width: 750px;
    height: 310px;
    background: #5007B4;
    border-radius: 0 155px 155px 0;
    z-index: 4;
  }

  /* Purple filled circle — top right */
  .shape-circle-orange {
      position: absolute;
    top: 38px;
    left: 666px;
    width: 134px;
    height: 134px;
    background: #FF8F08;
    border-radius: 50%;
    z-index: 5;
  }

  /* Purple wedge — bottom right corner */
  .shape-purple-br {
    position: absolute;
    right: calc(0px - 27px);
    bottom: 0;
    width: 160px;
    height: 300px;
    background: #5007B4;
    border-radius: 130px 0 0 0;
    z-index: 4;
  }

  /* ─────────────────────────────────────────
     LAYER 4 — DECORATIVE VECTORS
  ───────────────────────────────────────── */

  /* Dashed arc — top left */
  .deco-dash-tl {
    position: absolute;
    top: 22px;
    left: 22px;
    width: 76px;
    height: 76px;
    border: 2.5px dashed rgba(255, 160, 0, 0.90);
    border-radius: 50%;
    z-index: 6;
  }

  /* Rounded rect outline — center divider */
  .deco-rect-outline {
  position: absolute;
    top: 384px;
    left: 200px;
    width: 420px;
    height: 70px;
    border: 2px solid rgba(255, 255, 255, 0.50);
    border-radius: 38px;
    z-index: 6;
  }

  /* White dot grid 5×5 — far right side */
  .deco-dots {
    position: absolute;
    top: 238px;
    right: 148px;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(5, 22px);
    grid-template-rows: repeat(5, 22px);
    gap: 6px;
  }
  .deco-dots span {
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.80);
    border-radius: 50%;
    margin: auto;
  }

  /* Orange arc outline — bottom right area */
  .deco-arc-br {
 position: absolute;
    bottom: 52px;
    right: 124px;
    transform: rotate(15deg);
    width: 76px;
    height: 76px;
    border: 2.5px dashed #FFF;
    border-radius: 50%;
    z-index: 6;
  }

  /* ─────────────────────────────────────────
     LAYER 5 — TEXT CONTENT
  ───────────────────────────────────────── */

  /* Heading sits over the purple blob */
  .hero-heading {
    position: absolute;
    top: 52px;
    left: 0;
    width: 750px;
    height: 310px;
    display: flex;
    align-items: center;
    padding: 0 64px 0 64px;
    z-index: 7;
  }

  .hero-heading h1 {
    font-size: 48px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.5px;
  }

  /* Bottom block — subtitle + buttons */
  .hero-lower {
     position: absolute;
    bottom: 150px;
    left: 64px;
    width: 100%;
    z-index: 7;
  }

  .hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.70;
    margin-bottom: 38px;
  }

  .hero-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
  }

  .elementor-kit-113 button.btn-primary {
    background: #ffffff;
    color: #FF6B07;
    border: 2.5px solid #ffffff;
    padding: 18px 36px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
  }

  .elementor-kit-113 button.btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 2.5px solid #ffffff;
    padding: 18px 36px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
  }

  .elementor-kit-113 button.btn-primary:hover  { background: #f5f5f5; }
  .elementor-kit-113 button.btn-secondary:hover { background: rgba(255,255,255,0.12); }

  /* ─────────────────────────────────────────
     LAYER 6 — WOMAN FOREGROUND PNG
  ───────────────────────────────────────── */
  .layer-woman {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom right;
    z-index: 2;
  }

      @media (min-width: 1441px) {
.hero__scale {
      width: 100%;
}
.shape-purple-br{
  right: calc(0px - 18px);
}

    }

  /* =============================================
     MOBILE RESPONSIVE OVERRIDES (≤ 767px)
  ============================================= */
  @media (max-width: 767px) {

    .hero {
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* Hide the scaled canvas — we use normal flow instead */
    .hero__scale {
      display: none;
    }

    /* Hide the woman image on mobile */
    .layer-woman {
      display: none;
    }


    /* Mobile content container */
    .hero-mobile {
      position: relative;
      z-index: 10;
      padding: 80px 24px 60px;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .hero-mobile h1 {
      font-size: 32px;
      font-weight: 800;
      color: #ffffff;
      line-height: 1.2;
      letter-spacing: -0.3px;
    }

    .hero-mobile p {
      font-size: 16px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.92);
      line-height: 1.65;
    }

    .hero-mobile .hero-buttons {
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: stretch;
    }

    .hero-mobile .btn-primary,
    .hero-mobile .btn-secondary {
      padding: 16px 24px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      border: 2.5px solid #ffffff;
      line-height: 1;
    }

    .hero-mobile .btn-primary {
      background: #ffffff;
      color: #FF6B07;
    }

    .hero-mobile .btn-secondary {
      background: transparent;
      color: #ffffff;
    }
  }

  /* Desktop — hide the mobile block */
  @media (min-width: 768px) {
    .hero-mobile {
      display: none;
    }
  }/* End custom CSS */