.baf-slider{
  position:relative;
  width:100%;
  aspect-ratio: 21 / 9;
  overflow:hidden;
  border-radius:18px;
  background:transparent;
  cursor:ew-resize;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.baf-slider *{ box-sizing:border-box; user-select:none; -webkit-user-select:none; }

/* Base "after" layer, always full width */
.baf-slider .baf-after{
  position:absolute; inset:0;
  z-index:1;
}
.baf-slider .baf-after > img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
	border-radius: 18px!important;
}

/* "Before" layer, clipped by an actual shrinking width */
.baf-slider .baf-before{
  position:absolute; top:0; left:0; bottom:0;
  width:50%;
  overflow:hidden;
  z-index:2;
}
.baf-slider .baf-before-img{
  position:absolute; top:0; left:0;
  height:100%;
  display:block;
}

/* Red X overlay */

.baf-slider .baf-x{
  position:absolute;
  left:35%; right:10%; top:45%; 
  pointer-events:none;
  background-image:url("https://engle.devhubstagings.com/wp-content/uploads/2026/07/Group.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
	width: 153px!important;
	height: 153px!important;
}



/* While actively dragging, nudge it to 43% */
.baf-slider.is-dragging .baf-x {
  left: 43%;
}

/* .baf-slider .baf-x::before{ transform: translateY(-50%) rotate(35deg); }
.baf-slider .baf-x::after{ transform: translateY(-50%) rotate(-35deg); } */

/* Wrap that sits to the right of the divider, sized to remaining space */
.baf-slider .baf-caption-right-wrap{
  position:absolute;
  left:50%; width:50%;
	top: 0;
  z-index:3;
  pointer-events:none;
}

/* Caption card, centered within whichever wrap contains it */
.baf-slider .baf-caption{
  position:absolute;
  left:50%;
  top:45px;
  transform:translateX(-50%);
  width:clamp(150px, 82%, 320px);
  background:#faf6ec;
  border-radius:4px;
  padding:16px 18px 18px;
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:width .35s ease;
  pointer-events:auto;
  font-family: Georgia, 'Times New Roman', serif;
}
.baf-slider .baf-caption .badge{
  width:44px; height:44px;
  margin:0 auto 8px;
  border-radius:6px;
  background:#cfc6ad;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.baf-slider .baf-caption h3{
  margin:0 0 6px;
  font-style:italic;
  font-weight:400;
  color:#8a6d3b;
  font-size:clamp(14px, 2vw, 20px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.baf-slider .baf-caption p{
  margin:0;
  color:#4a4636;
  font-size:clamp(11px, 1.3vw, 13.5px);
  line-height:1.4;
}

/* Divider + handle */
.baf-slider .baf-divider{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:2px;
  background:rgba(255,255,255,.9);
  transform:translateX(-50%);
  z-index:4;
  pointer-events:none;
}
.baf-slider .baf-handle{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  gap:2px;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  pointer-events:auto;
  cursor:ew-resize;
}
.baf-slider .baf-handle svg{ width:9px; height:9px; fill:#3a3626; }

/* Smooth animation when position changes WITHOUT active dragging
   (arrow/keyboard nudges, initial load). Dragging strips this so the
   handle tracks the pointer 1:1. */
.baf-slider:not(.is-dragging) .baf-before,
.baf-slider:not(.is-dragging) .baf-caption-right-wrap,
.baf-slider:not(.is-dragging) .baf-divider{
  transition: left .45s cubic-bezier(.22,.61,.36,1), width .45s cubic-bezier(.22,.61,.36,1);
}

.baf-slider:focus-visible{ outline:3px solid #6aa9ff; outline-offset:-3px; }



.baf-caption {
    border-radius: 8px !important;
	width: 332px !important;
}

.badge {
    margin-top: -40px !important;
    margin-bottom: 20px !important;
	background-color: rgba(201, 186, 160, 0.4)!important;
	border: 0.88px solid rgba(201, 186, 160, 1)!important;
	backdrop-filter: blur(20px)!important;
}

img.badge-icon {
    width: 24px;
    height: 24px;
}

.baf-caption p {
    font-family: 'Montserrat';
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}



/* Stays at 43% permanently once the user has dragged at least once */
.baf-slider.baf-dragged .baf-x{
  left: 43%;
}


@media(max-width: 1024px){
	
.baf-slider .baf-x{
	width: 80px!important;
	height: 80px!important;
	left: 38%;
    top: 64%;
}

.baf-caption {
    width: 280px !important;
}
	
	.baf-caption h3{
    font-size: 24px !important;
}
	
}


@media(max-width: 768px){
	.baf-caption h3 {
        font-size: 16px !important;
    }
		.baf-caption p {
        font-size: 8px !important;
    }
	.baf-caption {
        width: 140px !important;
		padding: 6px 8px 8px!important;
    }
	.badge {
    margin-top: -28px !important;
    margin-bottom: 0px !important;
	}
	img.badge-icon {
    width: 16px;
    height: 16px;
}
	.baf-slider .baf-caption .badge {
    width: 32px;
    height: 32px;
	}
	.baf-slider .baf-caption{
		top: 27px;
	}
	div#baf-a08612d {
    height: 280px;
}
	.baf-slider .baf-handle {
    width: 23px;
    height: 23px;
	}
	.baf-slider .baf-handle svg {
    width: 8px;
    height: 8px;
}
	.baf-slider .baf-x {
        width: 50px !important;
        height: 50px !important;
        left: 33%;
        top: 60%;
    }
	
	   .baf-slider.baf-dragged .baf-caption{
        width: 195px !important;
	
}
div#baf-620594f{
    height: 220px;
}	
}