.elementor-3549 .elementor-element.elementor-element-3eb4b3c{--display:flex;}.elementor-3549 .elementor-element.elementor-element-02dbe7b .elementor-heading-title{font-size:1.1em;}.elementor-3549 .elementor-element.elementor-element-780ddfb{--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;}.elementor-3549 .elementor-element.elementor-element-aa5ca2c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-3549 .elementor-element.elementor-element-aa5ca2c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3549 .elementor-element.elementor-element-d5f5ced{--display:flex;}.elementor-3549 .elementor-element.elementor-element-d5f5ced.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-3549 .elementor-element.elementor-element-23bc81e{--display:flex;--min-height:28vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--overlay-opacity:0;}.elementor-3549 .elementor-element.elementor-element-23bc81e:not(.elementor-motion-effects-element-type-background), .elementor-3549 .elementor-element.elementor-element-23bc81e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://forgeacton.com/wp-content/uploads/2025/12/letsConnect-scaled.jpg");background-position:center right;background-repeat:no-repeat;background-size:cover;}.elementor-3549 .elementor-element.elementor-element-23bc81e::before, .elementor-3549 .elementor-element.elementor-element-23bc81e > .elementor-background-video-container::before, .elementor-3549 .elementor-element.elementor-element-23bc81e > .e-con-inner > .elementor-background-video-container::before, .elementor-3549 .elementor-element.elementor-element-23bc81e > .elementor-background-slideshow::before, .elementor-3549 .elementor-element.elementor-element-23bc81e > .e-con-inner > .elementor-background-slideshow::before, .elementor-3549 .elementor-element.elementor-element-23bc81e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-3549 .elementor-element.elementor-element-23bc81e.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-3549 .elementor-element.elementor-element-819a31b{--display:flex;--min-height:46vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--overlay-opacity:0;}.elementor-3549 .elementor-element.elementor-element-819a31b::before, .elementor-3549 .elementor-element.elementor-element-819a31b > .elementor-background-video-container::before, .elementor-3549 .elementor-element.elementor-element-819a31b > .e-con-inner > .elementor-background-video-container::before, .elementor-3549 .elementor-element.elementor-element-819a31b > .elementor-background-slideshow::before, .elementor-3549 .elementor-element.elementor-element-819a31b > .e-con-inner > .elementor-background-slideshow::before, .elementor-3549 .elementor-element.elementor-element-819a31b > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-3549 .elementor-element.elementor-element-819a31b.e-con{--align-self:flex-end;--flex-grow:0;--flex-shrink:0;}.elementor-3549 .elementor-element.elementor-element-f7a9f3b{width:var( --container-widget-width, 98.078% );max-width:98.078%;--container-widget-width:98.078%;--container-widget-flex-grow:0;text-align:end;}.elementor-3549 .elementor-element.elementor-element-f7a9f3b.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-3549 .elementor-element.elementor-element-f7a9f3b .elementor-heading-title{font-size:3.5em;}.elementor-3549 .elementor-element.elementor-element-44eef66{width:var( --container-widget-width, 98.768% );max-width:98.768%;--container-widget-width:98.768%;--container-widget-flex-grow:0;text-align:end;font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-3549 .elementor-element.elementor-element-44eef66.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-3549 .elementor-element.elementor-element-053e2d2{width:100%;max-width:100%;}.elementor-3549 .elementor-element.elementor-element-46ac917{--display:flex;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#B3B3B3;--border-color:#B3B3B3;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-3549 .elementor-element.elementor-element-46ac917:not(.elementor-motion-effects-element-type-background), .elementor-3549 .elementor-element.elementor-element-46ac917 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF7A;}:root{--page-title-display:none;}body.elementor-page-3549{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-3549 .elementor-element.elementor-element-aa5ca2c{--width:100%;}.elementor-3549 .elementor-element.elementor-element-d5f5ced{--width:45%;}.elementor-3549 .elementor-element.elementor-element-23bc81e{--width:97.372%;}.elementor-3549 .elementor-element.elementor-element-819a31b{--width:97.372%;}.elementor-3549 .elementor-element.elementor-element-46ac917{--width:45%;}}/* Start custom CSS for html, class: .elementor-element-053e2d2 *//* SCOPED CSS for #process-flow-widget */
#process-flow-widget {
    /* CMYK Palette */
    --pf-color-1: #0ea5e9; /* Cyan */
    --pf-color-2: #d946ef; /* Magenta */
    --pf-color-3: #eab308; /* Yellow (Gold for visibility) */
    --pf-color-4: #1a1a1a; /* Key (Black) */
    --pf-ink: #1a1a1a;
    --pf-paper: transparent;

    position: relative;
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
    font-family: 'Roboto Slab', serif;
    container-type: inline-size;
    background-color: var(--pf-paper);
}

#process-flow-widget .flow-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    gap: 20px;
}

/* The Connecting Line Layer (Desktop) */
#process-flow-widget .flow-line-layer {
    position: absolute;
    top: 40px; /* Aligns with circle centers */
    left: 50px;
    right: 50px;
    height: 2px;
    z-index: 0; /* Behind blobs */
    pointer-events: none;
}

#process-flow-widget .dashed-line {
    width: 100%;
    height: 100%;
    border-top: 3px dashed #ccc;
}

/* The Single Traveling Arrow */
#process-flow-widget .traveling-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 15px;
    height: 15px;
    background-color: #666;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%);
    transform: translateY(-50%);
    animation: moveArrow 8s linear infinite;
    transition: opacity 0.3s ease;
}

@keyframes moveArrow {
    0% { left: 0%; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Step Card */
#process-flow-widget .flow-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 1;
    transition: transform 0.3s ease;
    cursor: default;
}

/* Link Wrapper for Clickable Steps (JotForm) */
#process-flow-widget .step-link-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    color: inherit; /* Inherit color from parent */
}

/* Blob Morphing Animation */
@keyframes flowBlob {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1) rotate(-3deg); }
    25% { transform: scale(1.02) rotate(3deg); }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.05) rotate(-3deg); }
    75% { transform: scale(1.02) rotate(3deg); }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1) rotate(-3deg); }
}

@keyframes flowBlobAlt {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: scale(1) rotate(3deg); }
    25% { transform: scale(1.02) rotate(-3deg); }
    50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1.05) rotate(3deg); }
    75% { transform: scale(1.02) rotate(-3deg); }
    100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: scale(1) rotate(3deg); }
}

/* Number Circle (The Blob) */
#process-flow-widget .step-number {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border: 3px solid var(--step-color);
    border-radius: 50% 60% 50% 40% / 60% 50% 60% 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Cedarville Cursive', cursive;
    font-size: 2rem;
    color: var(--step-color);
    margin-bottom: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
    /* Just the morph animation - lighting handled by JS highlight-step class */
    animation: flowBlob 8s ease-in-out infinite; 
}

/* ACTIVE STATE (Triggered by JS Hitbox) */
#process-flow-widget .step-number.highlight-step {
    background-color: var(--step-color);
    color: #fff;
    box-shadow: 0 0 15px var(--step-color);
    transition: all 0.1s ease-out; /* Snap on fast */
}

/* Staggered Morphing logic */
#process-flow-widget .flow-step:nth-child(2) .step-number { /* Step 1 */
    animation-delay: 0s; 
}
#process-flow-widget .flow-step:nth-child(3) .step-number { /* Step 2 */
    animation-name: flowBlobAlt;
    animation-delay: -2s; 
}
#process-flow-widget .flow-step:nth-child(4) .step-number { /* Step 3 */
    animation-delay: -5s; 
}
#process-flow-widget .flow-step:nth-child(5) .step-number { /* Step 4 */
    animation-name: flowBlobAlt;
    animation-delay: -1s; 
}

/* Step Content */
#process-flow-widget .step-content {
    background: transparent;
    padding: 5px 0 0 0;
    border: none;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

#process-flow-widget .step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pf-ink);
    margin: 0;
    line-height: 1.2;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#process-flow-widget .step-sub {
    font-size: 0.9rem;
    color: #666;
    margin-top: 3px;
    font-weight: 300;
    transition: color 0.3s ease;
}

/* INTERACTION: Hover State */
#process-flow-widget:hover .traveling-arrow {
    opacity: 0;
    animation-play-state: paused;
}

#process-flow-widget:hover .step-number {
    /* If widget is hovered, remove JS highlight styling so CSS hover works */
    background-color: #fff;
    color: var(--step-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

#process-flow-widget .flow-step:hover {
    transform: translateY(-5px);
}

#process-flow-widget .flow-step:hover .step-number {
    background-color: var(--step-color) !important;
    color: #fff !important;
    box-shadow: 0 0 15px var(--step-color) !important;
}

#process-flow-widget .flow-step:hover .step-title {
    color: var(--step-color);
    text-shadow: 0 0 1px var(--step-color);
}

#process-flow-widget .flow-step:hover .step-sub {
    color: var(--pf-ink);
}

/* Animation */
#process-flow-widget .flow-step {
    opacity: 0;
    animation: flowFadeIn 0.8s ease-out forwards;
}
#process-flow-widget .flow-step:nth-child(2) { animation-delay: 0.2s; }
#process-flow-widget .flow-step:nth-child(3) { animation-delay: 0.5s; }
#process-flow-widget .flow-step:nth-child(4) { animation-delay: 0.8s; }
#process-flow-widget .flow-step:nth-child(5) { animation-delay: 1.1s; }

@keyframes flowFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Layout */
@media (max-width: 768px) {
    #process-flow-widget .flow-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    
    #process-flow-widget .flow-line-layer {
        top: 40px;
        bottom: 40px;
        left: 50%;
        width: 2px;
        height: auto;
        right: auto;
        margin-left: -1px;
        border-left: 3px dashed #ccc;
        border-top: none;
    }

    #process-flow-widget .traveling-arrow {
        top: 0;
        left: 50%;
        margin-left: -7px;
        transform: rotate(90deg);
        animation: moveArrowMobile 8s linear infinite;
    }

    @keyframes moveArrowMobile {
        0% { top: 0%; opacity: 0; }
        5% { opacity: 1; }
        95% { opacity: 1; }
        100% { top: 100%; opacity: 0; }
    }
}
/* =========================================
   PERMANENT "ACTIVE" STATE FOR STEP 2
   ========================================= */

/* 1. Force the Bubble to be filled (Magenta) & White Text */
#process-flow-widget .flow-step:nth-child(3) .step-number {
    background-color: var(--pf-color-2) !important;
    color: #fff !important;
    box-shadow: 0 0 15px var(--pf-color-2) !important;
}

/* 2. Force the Title to be Magenta */
#process-flow-widget .flow-step:nth-child(3) .step-title {
    color: var(--pf-color-2) !important;
    text-shadow: 0 0 1px var(--pf-color-2) !important;
}

/* 3. Force the Subtext to be dark Black (instead of gray) */
#process-flow-widget .flow-step:nth-child(3) .step-sub {
    color: var(--pf-ink) !important;
}

/* 4. (Optional) Lift the card up slightly like a hover? 
   Remove this specific block if you want it aligned with the others. */
#process-flow-widget .flow-step:nth-child(3) {
    transform: translateY(-5px); 
}/* End custom CSS */