.elementor-5664 .elementor-element.elementor-element-2d213e5{--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;--justify-content:center;--align-items:center;--gap:125px 125px;--row-gap:125px;--column-gap:125px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:50px;}.elementor-5664 .elementor-element.elementor-element-c997acf{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;color:var( --e-global-color-primary );}.elementor-5664 .elementor-element.elementor-element-3f83959 .elementor-heading-title{color:var( --e-global-color-e904f90 );}.elementor-5664 .elementor-element.elementor-element-28cd45b{text-align:end;}.elementor-5664 .elementor-element.elementor-element-28cd45b .elementor-heading-title{color:var( --e-global-color-e904f90 );}.elementor-5664 .elementor-element.elementor-element-c88fbac{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5664 .elementor-element.elementor-element-cd1c28a{text-align:start;color:var( --e-global-color-e904f90 );}.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-5664 .elementor-element.elementor-element-774e44e .elementor-button{background-color:var( --e-global-color-a41e9e5 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-e904f90 );}.elementor-5664 .elementor-element.elementor-element-774e44e .elementor-button:hover, .elementor-5664 .elementor-element.elementor-element-774e44e .elementor-button:focus{background-color:transparent;background-image:linear-gradient(82deg, #B9965D 18.4%, #FFEFD3 131.61%);border-color:var( --e-global-color-a41e9e5 );}.elementor-5664 .elementor-element.elementor-element-774e44e{margin:30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-5664 .elementor-element.elementor-element-054dfe7{--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;}@media(min-width:768px){.elementor-5664 .elementor-element.elementor-element-c997acf{--width:50%;}.elementor-5664 .elementor-element.elementor-element-c88fbac{--width:50%;}}@media(max-width:1366px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:1200px){.elementor-5664 .elementor-element.elementor-element-2d213e5{--gap:125px 50px;--row-gap:125px;--column-gap:50px;--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-5664 .elementor-element.elementor-element-2d213e5{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:30px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-5664 .elementor-element.elementor-element-cd1c28a{width:100%;max-width:100%;}.elementor-5664 .elementor-element.elementor-element-774e44e{margin:5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for container, class: .elementor-element-2d213e5 *//* =========================================
   DESKTOP (BASE) STYLES
   ========================================= */
.value-section {
    height: 100vh;
    background: #005f7c;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden; /* Prevents accidental scrollbars during pin */
}

#sequence {
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 1 / 1; /* Reserves space while images load */
    object-fit: contain; /* Prevents cropping */
    display: block;
    margin: 0 auto;
}

/* 3. Positioning the Text */
.left h2:not(.value-prop h2) {
    position: absolute;
    top: 20px;
    left: 0;
    color: #fff;
    margin: 0;
    z-index: 2; /* Keeps text above the image */
}

/* Targets the bottom text (handles both h3 and .value-prop h2 variations) */
.left h3,
.left .value-prop h2 {
    position: absolute;
    bottom: 20px;
    right: 0;
    color: #fff;
    font-style: italic;
    margin: 0;
    z-index: 2;
}

/* 4. Right Text Column */
.right {
    width: 50%;
    max-width: 600px;
    color: #fff;
    padding: 0 40px; /* Adds breathing room next to the image */
}

.right p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid #fff;
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
}

/* =========================================
   MOBILE RESPONSIVE FIXES
   ========================================= */
@media (max-width: 768px) {
    /* 1. Section Sizing */
    .value-section {
        height: auto !important;
        min-height: calc(100dvh - 80px); /* Subtract header height 
        flex-direction: column;
        justify-content: center;
       
    }

    /* 2. Left Column & Safe Space for Text */
    .left {
        width: 100%;
        max-width: 100%;
        /* Safe space so the absolute headings don't touch the image */
        padding-top:20px; 
        padding-bottom: 20px;
    }

    /* 3. Image Constraints */
    #sequence {
        max-width: 100%;
        /* Guarantees the image never takes up more than 45% of the screen height */
        max-height: 45vh; 
        aspect-ratio: auto; 
    }

    /* 4. Snap Text to absolute Top and Bottom */
    .left h2:not(.value-prop h2) {
        top: 0;
    }

    .left h3,
    .left .value-prop h2 {
        bottom: 0;
    }

    /* 5. Right Column Spacing */
    .right {
        width: 100%;
        padding: 0;
         Breathing room between image and paragraph */
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1f95a5f *//* Constrain the image inside the Elementor HTML widget */
#sequence {
    width: 100%;
    height: auto;
    object-fit: contain; /* Prevents cropping */
    display: block;
    margin: 0 auto;
    /* Optional: prevent it from getting too huge on big desktop screens */
    max-width: 500px; 
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    #sequence {
        max-width: 100%; /* Let it fill the column on mobile */
        /* Lock aspect ratio so the layout doesn't jump while loading */
        aspect-ratio: 1 / 1; 
    }
    
    /* Ensure the Elementor section gives enough room for text + image when pinned */
    .value-section {
        height: auto !important;
        min-height: 100dvh;
    }
}/* End custom CSS */