.elementor-56 .elementor-element.elementor-element-da87af5{--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:10%;--padding-bottom:10%;--padding-left:5%;--padding-right:5%;}.elementor-56 .elementor-element.elementor-element-da87af5:not(.elementor-motion-effects-element-type-background), .elementor-56 .elementor-element.elementor-element-da87af5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-2a05a55 );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-56 .elementor-element.elementor-element-53bc664 .elementor-button{background-color:#113B1A00;font-family:"Inter", Sans-serif;font-size:14px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-secondary );border-radius:30px 30px 30px 30px;padding:12px 30px 12px 30px;}.elementor-56 .elementor-element.elementor-element-53bc664.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-56 .elementor-element.elementor-element-6e116a0{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-56 .elementor-element.elementor-element-31a3cb9.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-56 .elementor-element.elementor-element-31a3cb9{text-align:center;}.elementor-56 .elementor-element.elementor-element-31a3cb9 .elementor-heading-title{font-size:40px;font-weight:300;color:var( --e-global-color-text );}.elementor-56 .elementor-element.elementor-element-c00b6d6{padding:2% 5% 2% 5%;}.elementor-56 .elementor-element.elementor-element-c00b6d6.xpro-widget-bg-overlay:before{transition:background 0.3s;}:root{--page-title-display:none;}@media(max-width:1023px){.elementor-56 .elementor-element.elementor-element-da87af5{--padding-top:30%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}}@media(max-width:767px){.elementor-56 .elementor-element.elementor-element-da87af5{--padding-top:45%;--padding-bottom:5%;--padding-left:4%;--padding-right:4%;}.elementor-56 .elementor-element.elementor-element-31a3cb9 .elementor-heading-title{font-size:28px;}}/* Start custom CSS for container, class: .elementor-element-6e116a0 *//* ===== Phase Section: slide-up title + animated line =====
   Add class "phase-section" to the section, and "phase-title" to the heading widget
   (Elementor heading markup: .elementor-widget-heading .elementor-heading-title)
   Customize colors / distances below if needed.
*/

/* container hover trigger */
.phase-section {
  position: relative;
  /* keep overflow visible so pseudo element can show */
  overflow: visible;
  --phase-accent: #d4b24a; /* gold color used in your images */
  --phase-duration: 420ms;
  --phase-ease: cubic-bezier(.2,.9,.3,1);
}

/* target the actual heading element used by Elementor */
.phase-section .phase-title,
.phase-section .phase-title.elementor-heading-title,
.phase-section .elementor-widget-heading .phase-title {
  display: inline-block; /* needed for transform */
  transform: translateY(16px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--phase-duration) var(--phase-ease),
              opacity 240ms ease,
              visibility 1ms linear;
  will-change: transform, opacity;
  /* styling fallback — preserve user's font and sizing; add spacing so pseudo-element positions nicely */
  margin-bottom: 18px;
  position: relative;
  z-index: 2;
}

/* slide-up line under the title (pseudo element on the heading) */
.phase-section .phase-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(10px); /* start slightly below the heading */
  width: clamp(120px, 28vw, 380px); /* responsive width, tweak as needed */

  opacity: 0;
  visibility: hidden;
  transition: transform var(--phase-duration) var(--phase-ease), opacity 240ms ease, visibility 1ms linear;
  z-index: 1;
  border-radius: 2px;
}

/* When the section is hovered or keyboard-focused, reveal the title + line */
.phase-section:hover .phase-title,
.phase-section:focus-within .phase-title {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* reveal the line slightly after the title (stagger) */
.phase-section:hover .phase-title::after,
.phase-section:focus-within .phase-title::after {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

/* optional: if your heading uses an H2/H3 element with default block sizing, ensure inline-block behaviors */
.phase-section .elementor-heading-title {
  /* keep user's typography; only adjust for animation */
}

/* Mobile/touch: if you prefer not to rely on hover, provide an explicit class to toggle (used by optional JS below) */
.phase-section.show-touch .phase-title,
.phase-section.show-touch .phase-title::after {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Accessibility / reduce motion */
@media (prefers-reduced-motion: reduce) {
  .phase-section .phase-title,
  .phase-section .phase-title::after {
    transition: none !important;
    transform: none !important;
  }
}/* End custom CSS */