.elementor-32 .elementor-element.elementor-element-9ab13e1{--display:flex;--min-height:360px;--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;--justify-content:center;--overlay-opacity:0.4;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-32 .elementor-element.elementor-element-9ab13e1:not(.elementor-motion-effects-element-type-background), .elementor-32 .elementor-element.elementor-element-9ab13e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://jcamposlawnandbrickllc.com/wp-content/uploads/2025/10/OUR-CORE-SERVICES-AT-J-CAMPOS-LAWN-BRICK-LLC-1.jpg");background-position:bottom center;background-repeat:no-repeat;background-size:cover;}.elementor-32 .elementor-element.elementor-element-9ab13e1::before, .elementor-32 .elementor-element.elementor-element-9ab13e1 > .elementor-background-video-container::before, .elementor-32 .elementor-element.elementor-element-9ab13e1 > .e-con-inner > .elementor-background-video-container::before, .elementor-32 .elementor-element.elementor-element-9ab13e1 > .elementor-background-slideshow::before, .elementor-32 .elementor-element.elementor-element-9ab13e1 > .e-con-inner > .elementor-background-slideshow::before, .elementor-32 .elementor-element.elementor-element-9ab13e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#001650;--background-overlay:'';}.elementor-32 .elementor-element.elementor-element-9ab13e1 > .elementor-shape-bottom svg, .elementor-32 .elementor-element.elementor-element-9ab13e1 > .e-con-inner > .elementor-shape-bottom svg{width:calc(240% + 1.3px);height:150px;transform:translateX(-50%) rotateY(180deg);}.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-32 .elementor-element.elementor-element-baf6d6c.elementor-element{--align-self:center;}.elementor-32 .elementor-element.elementor-element-baf6d6c .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:64px;font-weight:700;color:#FFFFFF;}.elementor-32 .elementor-element.elementor-element-eeba581{--display:flex;}.elementor-32 .elementor-element.elementor-element-1cbd824{--spacer-size:50px;}.elementor-32 .elementor-element.elementor-element-6a062fe{--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;--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-32 .elementor-element.elementor-element-a951e47{--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;}.elementor-32 .elementor-element.elementor-element-d9c9408{--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;--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-32 .elementor-element.elementor-element-9dbef0e{--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;}.elementor-32 .elementor-element.elementor-element-f297df6{--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;--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-32 .elementor-element.elementor-element-64ce28b{--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;}.elementor-32 .elementor-element.elementor-element-2b63c87{--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;--padding-top:25px;--padding-bottom:25px;--padding-left:25px;--padding-right:25px;}.elementor-32 .elementor-element.elementor-element-141bc10{--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;}.elementor-32 .elementor-element.elementor-element-0cae451{--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-32 .elementor-element.elementor-element-0cae451:not(.elementor-motion-effects-element-type-background), .elementor-32 .elementor-element.elementor-element-0cae451 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#142F75;}.elementor-32 .elementor-element.elementor-element-54f3d36{--display:flex;}.elementor-32 .elementor-element.elementor-element-70bdb45{text-align:center;}.elementor-32 .elementor-element.elementor-element-70bdb45 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:58px;font-weight:700;color:#FFFFFF;}.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-32 .elementor-element.elementor-element-28b7a29 .elementor-button{background-color:#61CE7000;font-family:"Roboto", Sans-serif;font-size:18px;font-weight:500;border-style:solid;border-width:3px 3px 3px 3px;border-color:#42A2E0;border-radius:30px 30px 30px 30px;}.elementor-32 .elementor-element.elementor-element-28b7a29 .elementor-button:hover, .elementor-32 .elementor-element.elementor-element-28b7a29 .elementor-button:focus{background-color:#42A2E0;}.elementor-32 .elementor-element.elementor-element-28b7a29 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-32 .elementor-element.elementor-element-28b7a29.elementor-element{--align-self:center;}.elementor-32 .elementor-element.elementor-element-28b7a29 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-32 .elementor-element.elementor-element-28b7a29 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-32 .elementor-element.elementor-element-bc13290{--spacer-size:5px;}.elementor-32 .elementor-element.elementor-element-b059fd7{--display:flex;--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;--align-items:center;--gap:25px 25px;--row-gap:25px;--column-gap:25px;--padding-top:040px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-32 .elementor-element.elementor-element-b059fd7:not(.elementor-motion-effects-element-type-background), .elementor-32 .elementor-element.elementor-element-b059fd7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E9F6FF;}.elementor-32 .elementor-element.elementor-element-86e41d2{width:var( --container-widget-width, 74.056% );max-width:74.056%;--container-widget-width:74.056%;--container-widget-flex-grow:0;text-align:center;}.elementor-32 .elementor-element.elementor-element-86e41d2.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-32 .elementor-element.elementor-element-86e41d2 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:60px;font-weight:700;color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );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-32 .elementor-element.elementor-element-4a7dfef{text-align:center;}.elementor-32 .elementor-element.elementor-element-e1d3e85 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Roboto", Sans-serif;font-size:18px;font-weight:500;border-radius:30px 30px 30px 30px;}.elementor-32 .elementor-element.elementor-element-e1d3e85 .elementor-button:hover, .elementor-32 .elementor-element.elementor-element-e1d3e85 .elementor-button:focus{background-color:#42A2E0;}.elementor-32 .elementor-element.elementor-element-e1d3e85 > .elementor-widget-container{padding:0px 0px 0px 10px;}.elementor-32 .elementor-element.elementor-element-e1d3e85 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-32 .elementor-element.elementor-element-e1d3e85 .elementor-button .elementor-button-content-wrapper{gap:10px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-32 .elementor-element.elementor-element-baf6d6c .elementor-heading-title{font-size:54px;}.elementor-32 .elementor-element.elementor-element-70bdb45 .elementor-heading-title{font-size:48px;}}@media(max-width:767px){.elementor-32 .elementor-element.elementor-element-70bdb45 .elementor-heading-title{font-size:32px;}.elementor-32 .elementor-element.elementor-element-86e41d2{width:var( --container-widget-width, 319.562px );max-width:319.562px;--container-widget-width:319.562px;--container-widget-flex-grow:0;}.elementor-32 .elementor-element.elementor-element-86e41d2 .elementor-heading-title{font-size:36px;}}/* Start custom CSS for html, class: .elementor-element-53c73e0 *//* Container for the flex layout of sliders */
.results-slider-container {
    display: flex;
    flex-wrap: wrap; /* Allows sliders to stack on smaller screens */
    gap: 80px; /* Space between sliders */
    justify-content: center;
    align-items: center; /* This will now work correctly */
}

/* Wrapper for each slider to position the labels */
.slider-wrapper {
    position: relative;
    flex: 1; /* Allows sliders to grow and fill space */
    min-width: 280px; /* Prevents sliders from getting too small */
}

/* Style for the slider component itself */
.styled-slider {
    border-radius: 18px;
    border: 3.5px solid #42A2E0; /* Light blue border */
    overflow: hidden; /* Ensures images stay inside rounded corners */

    /* --- THE FIX IS HERE --- */
    /* Force a consistent aspect ratio (e.g., 16:9). Change if needed. */
    aspect-ratio: 4 / 3; 
    width: 100%; /* Ensure it fills the flex container */
    
    /* --- SLIDER HANDLE & DIVIDER STYLING --- */
    --divider-color: #42A2E0; 
    --divider-width: 3.5px;
    --handle-size: 45px;
    --handle-color: #42A2E0; 
    --handle-background-color: #42A2E0;
}

/* Target the images INSIDE the slider */
.styled-slider img {
    width: 100%;
    height: 100%; /* Force image to fill the container's full height */
    object-fit: cover; /* This is the magic! Makes image cover the area without distortion */
    object-position: center; /* Centers the image, good if it's cropped */
}


/* Add the white border around the handle */
.styled-slider::part(handle) {
    border: 3px solid white;
}

/* Common styling for both BEFORE and AFTER labels */
.label {
    position: absolute;
    top: 15px;
    z-index: 10;
    background-color: #0b2c6d;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Position the "BEFORE" label on the left */
.before-label {
    left: 15px;
}

/* Position the "AFTER" label on the right */
.after-label {
    right: 15px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ade79fd *//* Container for the flex layout of sliders */
.results-slider-container {
    display: flex;
    flex-wrap: wrap; /* Allows sliders to stack on smaller screens */
    gap: 80px; /* Space between sliders */
    justify-content: center;
    align-items: center; /* This will now work correctly */
}

/* Wrapper for each slider to position the labels */
.slider-wrapper {
    position: relative;
    flex: 1; /* Allows sliders to grow and fill space */
    min-width: 280px; /* Prevents sliders from getting too small */
}

/* Style for the slider component itself */
.styled-slider {
    border-radius: 18px;
    border: 3.5px solid #42A2E0; /* Light blue border */
    overflow: hidden; /* Ensures images stay inside rounded corners */

    /* --- THE FIX IS HERE --- */
    /* Force a consistent aspect ratio (e.g., 16:9). Change if needed. */
    aspect-ratio: 4 / 3; 
    width: 100%; /* Ensure it fills the flex container */
    
    /* --- SLIDER HANDLE & DIVIDER STYLING --- */
    --divider-color: #42A2E0; 
    --divider-width: 3.5px;
    --handle-size: 45px;
    --handle-color: #42A2E0; 
    --handle-background-color: #42A2E0;
}

/* Target the images INSIDE the slider */
.styled-slider img {
    width: 100%;
    height: 100%; /* Force image to fill the container's full height */
    object-fit: cover; /* This is the magic! Makes image cover the area without distortion */
    object-position: center; /* Centers the image, good if it's cropped */
}


/* Add the white border around the handle */
.styled-slider::part(handle) {
    border: 3px solid white;
}

/* Common styling for both BEFORE and AFTER labels */
.label {
    position: absolute;
    top: 15px;
    z-index: 10;
    background-color: #0b2c6d;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Position the "BEFORE" label on the left */
.before-label {
    left: 15px;
}

/* Position the "AFTER" label on the right */
.after-label {
    right: 15px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a8d3467 *//* Container for the flex layout of sliders */
.results-slider-container {
    display: flex;
    flex-wrap: wrap; /* Allows sliders to stack on smaller screens */
    gap: 80px; /* Space between sliders */
    justify-content: center;
    align-items: center; /* This will now work correctly */
}

/* Wrapper for each slider to position the labels */
.slider-wrapper {
    position: relative;
    flex: 1; /* Allows sliders to grow and fill space */
    min-width: 280px; /* Prevents sliders from getting too small */
}

/* Style for the slider component itself */
.styled-slider {
    border-radius: 18px;
    border: 3.5px solid #42A2E0; /* Light blue border */
    overflow: hidden; /* Ensures images stay inside rounded corners */

    /* --- THE FIX IS HERE --- */
    /* Force a consistent aspect ratio (e.g., 16:9). Change if needed. */
    aspect-ratio: 4 / 3; 
    width: 100%; /* Ensure it fills the flex container */
    
    /* --- SLIDER HANDLE & DIVIDER STYLING --- */
    --divider-color: #42A2E0; 
    --divider-width: 3.5px;
    --handle-size: 45px;
    --handle-color: #42A2E0; 
    --handle-background-color: #42A2E0;
}

/* Target the images INSIDE the slider */
.styled-slider img {
    width: 100%;
    height: 100%; /* Force image to fill the container's full height */
    object-fit: cover; /* This is the magic! Makes image cover the area without distortion */
    object-position: center; /* Centers the image, good if it's cropped */
}


/* Add the white border around the handle */
.styled-slider::part(handle) {
    border: 3px solid white;
}

/* Common styling for both BEFORE and AFTER labels */
.label {
    position: absolute;
    top: 15px;
    z-index: 10;
    background-color: #0b2c6d;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Position the "BEFORE" label on the left */
.before-label {
    left: 15px;
}

/* Position the "AFTER" label on the right */
.after-label {
    right: 15px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8a8a916 *//* Container for the flex layout of sliders */
.results-slider-container {
    display: flex;
    flex-wrap: wrap; /* Allows sliders to stack on smaller screens */
    gap: 80px; /* Space between sliders */
    justify-content: center;
    align-items: center; /* This will now work correctly */
}

/* Wrapper for each slider to position the labels */
.slider-wrapper {
    position: relative;
    flex: 1; /* Allows sliders to grow and fill space */
    min-width: 280px; /* Prevents sliders from getting too small */
}

/* Style for the slider component itself */
.styled-slider {
    border-radius: 18px;
    border: 3.5px solid #42A2E0; /* Light blue border */
    overflow: hidden; /* Ensures images stay inside rounded corners */

    /* --- THE FIX IS HERE --- */
    /* Force a consistent aspect ratio (e.g., 16:9). Change if needed. */
    aspect-ratio: 4 / 3; 
    width: 100%; /* Ensure it fills the flex container */
    
    /* --- SLIDER HANDLE & DIVIDER STYLING --- */
    --divider-color: #42A2E0; 
    --divider-width: 3.5px;
    --handle-size: 45px;
    --handle-color: #42A2E0; 
    --handle-background-color: #42A2E0;
}

/* Target the images INSIDE the slider */
.styled-slider img {
    width: 100%;
    height: 100%; /* Force image to fill the container's full height */
    object-fit: cover; /* This is the magic! Makes image cover the area without distortion */
    object-position: center; /* Centers the image, good if it's cropped */
}


/* Add the white border around the handle */
.styled-slider::part(handle) {
    border: 3px solid white;
}

/* Common styling for both BEFORE and AFTER labels */
.label {
    position: absolute;
    top: 15px;
    z-index: 10;
    background-color: #0b2c6d;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 16px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Position the "BEFORE" label on the left */
.before-label {
    left: 15px;
}

/* Position the "AFTER" label on the right */
.after-label {
    right: 15px;
}/* End custom CSS */