.before-after-section{display:grid;grid-template-columns:1fr 1fr;width:100%;position:relative}.before-after-section[style*="direction: rtl"]{grid-template-columns:1fr 1fr}.before-after-section[style*="direction: rtl"] .before-after-image-side{order:2}.before-after-section[style*="direction: rtl"] .before-after-content-side{order:1}.before-after-image-side{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.before-after-container{position:relative;width:100%;height:100%;min-height:300px}.before-after-container img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}.before-image{z-index:1}.after-image{z-index:2;clip-path:inset(0 50% 0 0)}.slider-handle{position:absolute;top:0;left:50%;width:4px;height:100%;background:#fff;cursor:ew-resize;z-index:2;transform:translate(-50%);box-shadow:0 0 10px #0000004d}.slider-handle:before{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;background:#fff;border:2px solid #333;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 10px #0000004d}.slider-handle:after{content:"<>";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;color:#333;font-weight:700;pointer-events:none}.before-after-content-side{display:flex;flex-direction:column;justify-content:center}.before-after-content-side h2{line-height:1.2}.before-after-content-side p,.before-after-content-side div{line-height:1.6}.before-after-content-side .btn{display:inline-block;padding:10px 25px;text-decoration:none;transition:all .3s ease;font-weight:600;text-transform:uppercase;letter-spacing:1px;margin:0}.before-after-content-side .btn:hover{transform:translateY(-2px)}@media (max-width: 768px){.before-after-section{grid-template-columns:1fr;grid-template-rows:auto 300px;gap:20px}.before-after-content-side{order:1}.before-after-image-side{order:2}.before-after-section[style*="direction: rtl"] .before-after-image-side,.before-after-section[style*="direction: rtl"] .before-after-content-side{order:unset}.before-after-section[style*="direction: rtl"] .before-after-content-side{order:1}.before-after-section[style*="direction: rtl"] .before-after-image-side{order:2}}
/*# sourceMappingURL=/cdn/shop/t/28/assets/before-after-slider.css.map */