.elementor-2062 .elementor-element.elementor-element-30724533{--display:flex;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:-5px;--margin-left:0px;--margin-right:0px;}.elementor-2062 .elementor-element.elementor-element-30724533:not(.elementor-motion-effects-element-type-background), .elementor-2062 .elementor-element.elementor-element-30724533 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-2062 .elementor-element.elementor-element-786cb54{background-color:#00B4D8;}.elementor-2062 .elementor-element.elementor-element-786cb54.elementor-element{--align-self:flex-start;}.elementor-2062 .elementor-element.elementor-element-786cb54 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:9px;font-weight:700;line-height:13px;}.elementor-2062 .elementor-element.elementor-element-4a9a5e4a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -6px) 0px;text-align:start;}.elementor-2062 .elementor-element.elementor-element-4a9a5e4a .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );color:#FFFFFF;}.elementor-2062 .elementor-element.elementor-element-3766c579{width:100%;max-width:100%;text-align:start;font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );color:#E8F0F8D9;}.elementor-2062 .elementor-element.elementor-element-3766c579.elementor-element{--align-self:center;}.elementor-2062 .elementor-element.elementor-element-4190a5c3{--display:flex;--margin-top:0px;--margin-bottom:-60px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:10px;--padding-right:10px;--z-index:3;}.elementor-2062 .elementor-element.elementor-element-4190a5c3:not(.elementor-motion-effects-element-type-background), .elementor-2062 .elementor-element.elementor-element-4190a5c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2062 .elementor-element.elementor-element-19fd0d1b{--display:flex;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-2062 .elementor-element.elementor-element-19fd0d1b:not(.elementor-motion-effects-element-type-background), .elementor-2062 .elementor-element.elementor-element-19fd0d1b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-8cf69a1 );}.elementor-2062 .elementor-element.elementor-element-3c9a3017{width:var( --container-widget-width, 850px );max-width:850px;--container-widget-width:850px;--container-widget-flex-grow:0;}.elementor-2062 .elementor-element.elementor-element-3c9a3017.elementor-element{--align-self:center;}@media(max-width:1366px){.elementor-2062 .elementor-element.elementor-element-4a9a5e4a .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-2062 .elementor-element.elementor-element-3766c579{font-size:var( --e-global-typography-accent-font-size );}}@media(max-width:1024px){.elementor-2062 .elementor-element.elementor-element-4a9a5e4a .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-2062 .elementor-element.elementor-element-3766c579{font-size:var( --e-global-typography-accent-font-size );}}@media(max-width:767px){.elementor-2062 .elementor-element.elementor-element-4a9a5e4a .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-2062 .elementor-element.elementor-element-3766c579{width:100%;max-width:100%;font-size:var( --e-global-typography-accent-font-size );}.elementor-2062 .elementor-element.elementor-element-4190a5c3{--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-2062 .elementor-element.elementor-element-19fd0d1b{--padding-top:30px;--padding-bottom:30px;--padding-left:10px;--padding-right:10px;}}@media(min-width:2400px){.elementor-2062 .elementor-element.elementor-element-4a9a5e4a .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-2062 .elementor-element.elementor-element-3766c579{font-size:var( --e-global-typography-accent-font-size );}}/* Start custom CSS for heading, class: .elementor-element-786cb54 */.b-building {
    background: #dbeafe;
    color: #1e40af;
}
.svc-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    margin-bottom: 8px;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-3c9a3017 */.section-heading {
    background: #0A1628;
    color: white;
    border-radius: 20px 10px 0px 0px;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 4px;
}
.section-heading p:before {
    content: '';
    border: 2px solid #00B4D8;
    margin-right: 15px;
}
.ff-default .ff-el-form-control {
    border: 1px solid #D6E0EF;
    padding: 15px;
}
.ff-default .ff-el-input--label label {
    display: inline-block;
    font-weight: 500;
    line-height: inherit;
    margin-bottom: 0;
    text-transform: uppercase;
    font-family: 'Inter';
    font-size: 11px;
    font-weight: 700;
    color: #1D3F6E;
    letter-spacing: 0.5px;
}

/* ==========================================
   FLUENT FORMS: EXACT PILL SELECTIONS
   ========================================== */

/* 1. HORIZONTAL FLEX WRAPPER */
.fluentform .ff-el-input-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-top: 8px !important;
}

/* 2. INACTIVE PILL CONTAINER STATE */
.fluentform .ff-el-form-check {
    
    display: inline-flex !important;
    align-items: center !important;
    background-color: #f4f6fa !important; /* Soft muted gray/blue background */
    border: 1px solid #dce4ec !important;   /* Subtle light border */
    border-radius: 10px !important;         /* Smooth rounded corners from mockup */
    padding: 14px 35px 14px 15px !important;   
    /* Generous padding */
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important;
        margin-right: 15px !important;
}

/* Inactive Text Style */
.fluentform .ff-el-form-check label.ff-el-form-check-label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #4a5d78 !important; /* Semi-muted slate text */
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    
}

/* 3. THE CIRCULAR INDICATOR DOT */
.fluentform .ff-el-form-check-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background-color: #cbd7e6 !important;
    margin: 4px 12px 0 0 !important;
    position: relative !important;
    cursor: pointer !important;
    display: inline-block !important;
    border: none !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* 4. ACTIVE SELECTED PILL STATE */
/* Targets the parent wrapper specifically when the internal input is checked */
 .fluentform .ff-el-form-check label.ff-el-form-check-label {
    font-size: 14px !important;
}
.fluentform .ff-el-form-check:has(.ff-el-form-check-input:checked),
.fluentform .ff-el-form-check.ff_item_selected {
    background-color: #e3f8ff !important; /* Bright, light cyan background */
    border: 1px solid #00b4d8 !important;   /* Vivid teal thick border */
}

/* Moves text position to compensate for the 2px border jump */
.fluentform .ff-el-form-check:has(.ff-el-form-check-input:checked) label.ff-el-form-check-label,
 .fluentform .ff-el-form-check.ff_item_selected label.ff-el-form-check-label {
    color: #0b2240 !important; /* Bold deep navy text */
    font-weight: 700 !important;
}

/* Active Circular Indicator Dot color shift */
.fluentform .ff-el-form-check-input:checked {
    background-color: #00b4d8 !important; /* Pure vibrant cyan dot */
}

/* Suppress default Fluent Forms checkmark font icons/pseudo-elements */
.fluentform .ff-el-form-check-input:checked::after,
 .fluentform .ff-el-form-check-input:checked::before {
    display: none !important;
    content: none !important;
}


/* 5. HOVER EFFECTS FOR UNSELECTED PILLS */
.fluentform .ff-el-form-check:not(.ff_item_selected):hover {
    background-color: #ebeff5 !important;
    border-color: #cbd5
}

.ff-default .ff-btn-secondary:not(.ff_btn_no_style) {
    background-color: #009ca9;
    border-color: #009ca9;
    color: #fff;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 40px;
    border-radius: 6px;
}
button.ff-btn.ff-btn-submit.ff-btn-md.ff_btn_style {
    background-color: #009ca9;
    border-color: #009ca9;
    color: #fff;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 6px;
}
button.ff-float-right.ff-btn.ff-btn-next.ff-btn-secondary {
    padding: 12px 55px;
}


/* ==========================================
   FLUENT FORMS: CUSTOM LOOK RANGE SLIDER
   ========================================== */

/* 1. CONTAINER LAYOUT RESTRUCTURE */
.fluentform .ff_slider_wrapper {
    display: flex !important;
    flex-direction: column-reverse !important; /* Pushes the input track down, value text up */
    align-items: flex-start !important;
   
    position: relative !important;
}
.rangeslider__fill {
    background: #00B4D8 !important;
    position: absolute;
}

/* 2. THE BIG TYPOGRAPHY DISPLAY (£25,000 Style) */
.fluentform .ff_range_value {
    font-size: 38px !important; /* Large premium size from Figma */
    font-weight: 800 !important;
    color: #0b2240 !important;  /* Deep Navy color */
    margin-bottom: 12px !important;
    display: inline-block !important;
    font-family: inter;
}

/* Custom addition to prefix the currency symbol dynamically if needed */
.fluentform .ff_range_value::before {
    content: "£" !important; /* Hardcoded Currency Symbol to match layout */
    margin-right: 2px;
}


/* 3. THE SLIDER MAIN TRACK INPUT BACKGROUND */
.fluentform .ff_slider_wrapper input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 6px !important; /* Flat thin sleek track bar */
    border-radius: 4px !important;
    background: #cbd7e6 !important; /* Muted light gray/blue track background */
    outline: none !important;
    margin: 15px 0 !important;
}


/* 4. CHROME / SAFARI / EDGE SLIDER THUMB BUTTON ACCENT */
.fluentform .ff_slider_wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #0b2240 !important; /* Deep dark blue color matching the knob indicator */
    cursor: pointer !important;
    border: none !important;
    transition: transform 0.1s ease;
}

.fluentform .ff_slider_wrapper input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15); /* Soft premium micro-interaction on hover */
}


/* 5. MOZILLA FIREFOX SLIDER THUMB BUTTON ACCENT */
.fluentform .ff_slider_wrapper input[type="range"]::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #0b2240 !important;
    cursor: pointer !important;
    border: none !important;
    transition: transform 0.1s ease;
}

.fluentform .ff_slider_wrapper input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.15);
}


/* 6. CLEANUP LEGACY PLUGINS STYLES INTERFERENCE */
/* Suppress secondary background fill wrapper divs injected by Fluent UI styles */
.fluentform .rangeslider, 
.fluentform  {
    box-shadow: none !important;
    border: none !important;
}

.rangeslider__handle {
    background: #142e55 !important;
    border: none;
    cursor: pointer;
    display: inline-block;
    width: 30px !important;
    height: 30px !important;
       box-shadow: none !important;
}
.rangeslider {
    background: #D6E0EF !important;
}
.rangeslider--horizontal {
    height: 10px !important;
}



/*Custom checkbox css*/
.checkbox-4 .ff-el-form-check.ff-el-form-check-

 {
    background: none !important;
    margin-right: 0px !important;
    padding: 0px !important;
    border: none !important;
}
/* ==========================================
   FLUENT FORMS: YES / NO / N/A BUTTON ROW
   ========================================== */

/* 1. FORCE THE INLINE ROW DIRECTION WITH CLEAN SPACING */
.fluentform .ff-el-group.ff_list_buttons .ff-el-input-content {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* 2. BASE RESET FOR THE BUTTON WRAPPERS */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 115px !important;              /* Set explicit structural width */
    height: 42px !important;              /* Set uniform structural height */
    padding: 0 !important;                /* Clear default padding to prevent text shifting */
    margin: 0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    position: relative !important;
    background-color: #f4f6fa !important; /* Default unselected gray fallback */
    transition: all 0.2s ease-in-out !important;
        color: #1A8040;
    font-weight: 700;
    font-family: inherit;
}

/* Completely strip out native checkboxes or radio circles inside this specific section */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-input {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 3. CLEAN LABEL TEXT ALIGNMENT RECONFIGURATIONS */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    cursor: pointer !important;
}

.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check-label span {
    background: transparent !important;   /* Kill the white block element backgrounds */
    border: none !important;              /* Strip out overlapping border masks */
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
}


/* ==========================================
   4. APPLY EXACT STRUCTURAL STYLES BY BUTTON POSITION
   ========================================== */

/* --- FIRST ITEM: YES (GREEN) --- */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:nth-child(1) {
    border: 2px solid #2ECC70 !important;
    color: #2ECC70 !important;
}
/* Active Selected State */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:nth-child(1):has(.ff-el-form-check-input:checked),
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:nth-child(1).ff_item_selected {
    background-color: #2ECC70 !important;
    color: #ffffff !important;
}

/* --- SECOND ITEM: NO (RED) --- */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:nth-child(2) {
    border: 2px solid #E54D40 !important;
    color: #E54D40 !important;
}
/* Active Selected State */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:nth-child(2):has(.ff-el-form-check-input:checked),
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:nth-child(2).ff_item_selected {
    background-color: #E54D40 !important;
    color: #ffffff !important;
}

/* --- THIRD ITEM: N/A (BLUE) --- */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:nth-child(3) {
    border: 2px solid #6B8CCF !important;
    color: #6B8CCF !important;
}
/* Active Selected State */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:nth-child(3):has(.ff-el-form-check-input:checked),
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:nth-child(3).ff_item_selected {
    background-color: #6B8CCF !important;
    color: #ffffff !important;
}


/* ==========================================
   5. HANDLE TEXT COLOR FOR ACTIVE LABELS
   ========================================== */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:has(.ff-el-form-check-input:checked) .ff-el-form-check-label,
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected .ff-el-form-check-label {
    color: #ffffff !important;
}
.checkbox-4 .ff-el-input--content {
    margin-right: 10px !important;
    display: flex;
    gap: 8px !important;
}
/* ==========================================
   6.Steps
   ========================================== */



.fluentform .ff-step-titles li.ff_active:before, .fluentform .ff-step-titles li.ff_completed:before {
    background: #1D3F6E !important;
 color: white !important;
    padding: 6px 4px ;
    width: 32px;
    border-radius: 24px !important;
    font-weight: 700;
    border: none !important;
}

.fluentform .ff-step-titles li:before{
      background: #D6E0EF !important;
 color:#5A6A82 !important;
      padding: 6px 4px;
    width: 32px;
    border-radius: 24px !important;
    font-weight: 700;
    border: none !important;
    left: -25px;
}
.fluentform .ff-step-titles li:before {
    
    font-size: 12px;
}
.fluentform .ff-step-titles li.ff_active, .fluentform .ff-step-titles li.ff_completed {
    color: #1D3F6E;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter';
}
.fluentform .ff-step-titles li{
      color: #5A6A82;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter';


}
.fluentform .ff-step-titles li:after {
    background: #D6E0EF;
    content: "";
    height: 4px;
    border-radius: 2px;
    left: -200px;
    position: absolute;
    top: 51px;
    width: 500px;
    z-index: 1;
}
span.ff-step-title-text {
    position: relative;
    left: 40px;
    bottom: 32px !important;
        z-index: 3;
}

.fluentform .ff-step-titles li:not(:first-child) span.ff-step-title-text:after  {
    content: '';
    border: 1px solid #D6E0EF;
    width: 50px !important;
    display: flex;
    position: absolute;
    left: 100px;
    top: 9px;
}
.ff_active span.ff-step-title-text:after {
    content: '';
    border: 1px solid #D6E0EF;
    width: 50px !important;
    display: flex;
    position: absolute;
    left: 80px;
    top: 9px;
}
.ff_completed span.ff-step-title-text:after {
    content: '';
    border: 1px solid #D6E0EF;
    width: 50px !important;
    display: flex;
    position: absolute;
    left: 80px;
    top: 9px;
}
.fluentform .ff-step-titles li.ff_active:after, .fluentform .ff-step-titles li.ff_completed:after {
    background: #00B4D8 !important;
}
p {
    margin-block-end: 0;
}
.button-column p {
    font-family: 'Inter';
    font-size: 13px;
    font-weight: 700;
}
.ff-el-group.checkbox-4.ff_list_buttons {
    margin-bottom: 10px !important;
}

/* ==========================================
   FLUENT FORMS: PREMIUM SEPARATED CARD LAYOUT
   ========================================== */

/* 1. APPLY THE SOFT LIGHT BACKGROUND TO THE ENTIRE FORM CONTAINER AREA */


/* 2. RECONFIGURE THE PANEL INTO A FLOATING WHITE CARD */
.fluentform .fluentform-step {
    background-color: #ffffff !important;   /* Solid crisp white background */
    border: 1px solid #e6ecf5 !important;     /* Light subtle border border outline */
    border-radius: 16px !important;           /* Clean rounded corners matching mockup */
    
    /* Internal spacing inside the white box */
    padding: 45px 24px !important;            
    
    /* Elegant soft shadow to elevate the card from the background */
    box-shadow: 0 10px 30px rgba(11, 34, 64, 0.05) !important; 
    
    /* Margin fixes to keep panels cleanly centered */
    margin: 0 auto 25px auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. ENSURE INNER INPUT ROW LAYOUTS EXTEND FULL WIDTH CLEANLY */
.fluentform .fluentform-step .ff-t-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 4. FIX CORNER RADIUS FOR THE TOP DARK HEADER HEADER STRIP */
/* If your "About You" header bar is an HTML block inside the step, this keeps corners tracking perfectly */
.fluentform .ff-custom_html.section-heading {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    margin: -45px -40px 30px -40px !important; /* Pulls header flush to top/sides of card padding */
    padding: 20px 40px !important;
}


.button-column .ff-t-cell.ff-t-column-1 {
    background: #F4F7FB;
    padding: 10px;
    border: 1.5px solid #D6E0EF;
    border-radius: 8px;
}


.button-column .ff-t-cell.ff-t-column-2 {
    background: #F4F7FB;
    padding: 10px;
    border: 1.5px solid #D6E0EF;
    border-radius: 8px;
}









@media screen and (max-width: 768px) {
    .fluentform .ff-step-titles li.ff_active:before, .fluentform .ff-step-titles li.ff_completed:before {
     padding: 3px 4px;
    width: 27px;
}
.fluentform .ff-step-titles li:before {
      padding: 3px 4px;
    width: 27px;
}
span.ff-step-title-text {
    position: relative;
    left: 0px;
    bottom: 0;
    font-size: 9px;
}
.fluentform .ff-step-titles li:before {
  
    left: 0;
}
.fluentform .ff-step-titles li:after {
    content: "";
    height: 4px;
    border-radius: 2px;
    left: -74px;
    position: absolute;
    top: 46px;
    width: 121px;
    z-index: 1;
}
span.ff-step-title-text {
    position: relative;
    left: 0px;
           bottom: 6px !important;
    font-size: 9px;
}
.fluentform .ff-step-titles li span.ff-step-title-text:after {

    visibility: hidden;
}
    .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label>span {
        
        border: none !important;
    }
    .fluentform .ff-el-form-check {
  
    padding: 9px 18px 9px 7px !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    position: relative !important;
    margin-right: 7px !important;
            margin-bottom: 7px !important;
   
}
.fluentform .fluentform-step {

    padding: 45px 14px !important;
}
.button-column .ff-t-cell.ff-t-column-1 {
 
        margin-bottom: 15px;
}
.button-column .ff-t-cell.ff-t-column-2 {
 
        margin-bottom: 15px;
}

}/* End custom CSS */