.elementor-10128 .elementor-element.elementor-element-ee4ff75{--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:20px 20px;--row-gap:20px;--column-gap:20px;--padding-top:100px;--padding-bottom:100px;--padding-left:100px;--padding-right:100px;}.elementor-10128 .elementor-element.elementor-element-2ad493b{--display:flex;}body:not(.rtl) .elementor-10128 .elementor-element.elementor-element-3f2ef4a{left:1px;}body.rtl .elementor-10128 .elementor-element.elementor-element-3f2ef4a{right:1px;}.elementor-10128 .elementor-element.elementor-element-3f2ef4a{top:144px;}.elementor-10128 .elementor-element.elementor-element-90829ef{--display:flex;}.elementor-10128 .elementor-element.elementor-element-61da753{--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(max-width:1024px){.elementor-10128 .elementor-element.elementor-element-ee4ff75{--flex-wrap:wrap;}}@media(max-width:767px){.elementor-10128 .elementor-element.elementor-element-ee4ff75{--padding-top:100px;--padding-bottom:100px;--padding-left:20px;--padding-right:20px;}.elementor-10128 .elementor-element.elementor-element-3f2ef4a{top:90px;}}@media(min-width:768px){.elementor-10128 .elementor-element.elementor-element-90829ef{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-10128 .elementor-element.elementor-element-90829ef{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-2ad493b */.before-after-container {
    
    position: relative;
    width: 500px; 
    max-width: 100vw; /* Adjust max width */
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    user-select: none;
}

.before-image,
.after-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.before-image img,
.after-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Clip path effect for after image */
.after-image {
    clip-path: inset(0 50% 0 0);
}

/* Draggable Slider Handle */
.slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 6px;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    cursor: ew-resize;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 3px;
}

/* Inner dragger handle */
.dragger-inner {
    width: 1rem;
    height: 5rem;
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    box-shadow: inset 0px 10px 15px -3px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .dragger-inner {
        width: 1rem;
        height: 4rem; /* Smaller handle */
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-90829ef */.before-after-container {
    
    position: relative;
    width: 500px; 
    max-width: 100vw; /* Adjust max width */
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    user-select: none;
}

.before-image,
.after-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.before-image img,
.after-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Clip path effect for after image */
.after-image {
    clip-path: inset(0 50% 0 0);
}

/* Draggable Slider Handle */
.slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 6px;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    cursor: ew-resize;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 3px;
}

/* Inner dragger handle */
.dragger-inner {
    width: 1rem;
    height: 5rem;
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    box-shadow: inset 0px 10px 15px -3px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .dragger-inner {
        width: 1rem;
        height: 4rem; /* Smaller handle */
    }
}/* End custom CSS */