.before-after-comparison{margin:0 auto;max-width:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.before-after-comparison .before-after-container{border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.1);overflow:hidden;position:relative}.before-after-comparison .before-after-container img{display:block;height:auto;pointer-events:none;width:100%}.before-after-comparison .after-image,.before-after-comparison .before-image{position:relative}.before-after-comparison .after-image img,.before-after-comparison .before-image img{display:block;height:auto;width:100%}.before-after-comparison .after-image{height:100%;left:0;position:absolute;top:0;transition:clip-path .1s ease-out;width:100%}.before-after-comparison .image-label{background:rgba(0,0,0,.7);border-radius:20px;color:#fff;font-size:14px;font-weight:600;letter-spacing:1px;padding:8px 16px;pointer-events:none;position:absolute;text-transform:uppercase;top:20px;z-index:2}.before-after-comparison .image-label.before-label{left:20px}.before-after-comparison .image-label.after-label{right:20px}.before-after-comparison .slider-handle{cursor:ew-resize;height:100%;position:absolute;top:0;transform:translateX(-50%);z-index:3}.before-after-comparison .slider-handle .slider-line{background:#fff;box-shadow:0 0 10px rgba(0,0,0,.3);height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);width:2px}.before-after-comparison .slider-handle .slider-button{align-items:center;background:#fff;border-radius:50%;box-shadow:0 2px 15px rgba(0,0,0,.2);display:flex;height:44px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:all .2s ease;width:44px}.before-after-comparison .slider-handle .slider-button svg{color:#333;height:16px;width:16px}.before-after-comparison .slider-handle .slider-button svg:first-child{margin-right:-2px}.before-after-comparison .slider-handle .slider-button svg:last-child{margin-left:-2px}.before-after-comparison .slider-handle .slider-button:hover{box-shadow:0 4px 20px rgba(0,0,0,.3);transform:translate(-50%,-50%) scale(1.1)}@media(hover:none)and (pointer:coarse){.before-after-comparison .slider-handle .slider-button{height:50px;width:50px}.before-after-comparison .slider-handle .slider-button svg{height:18px;width:18px}}@media(max-width:768px){.before-after-comparison .image-label{font-size:12px;padding:6px 12px;top:15px}.before-after-comparison .image-label.before-label{left:15px}.before-after-comparison .image-label.after-label{right:15px}}.before-after-placeholder{background:#f5f5f5;border:2px dashed #ccc;border-radius:8px;color:#666;font-style:italic;padding:40px 20px;text-align:center}