/* Support4u v9 — BEFORE / AFTER slider */

.before-after{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(56,189,248,.22);
  background:#071126;
  aspect-ratio:16/10;
  box-shadow:0 20px 70px rgba(0,0,0,.35);
}

.before-after img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  user-select:none;
  pointer-events:none;
}

.before-after-after{
  clip-path:inset(0 0 0 50%);
}

.before-after-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  background:#fff;
  transform:translateX(-50%);
  box-shadow:0 0 18px rgba(255,255,255,.4);
  z-index:4;
}

.before-after-handle{
  position:absolute;
  top:50%;
  left:50%;
  width:58px;
  height:58px;
  border-radius:999px;
  border:3px solid #fff;
  background:rgba(2,8,23,.82);
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:24px;
  font-weight:900;
  backdrop-filter:blur(12px);
  z-index:5;
}

.before-after-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
  z-index:6;
}

.before-after-label{
  position:absolute;
  top:18px;
  z-index:3;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(2,8,23,.75);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

.before-label{left:18px}
.after-label{right:18px}
.before-after-demo{margin-top:26px}

@media(max-width:700px){
  .before-after{aspect-ratio:4/3}
}