.icon { width: 26px; height: 26px; flex: 0 0 26px; }
 .flips{
 height:100px;
 width:50%;
     
 }
 .text-d{
	 color:#fff;
 }
  .bp{
	  background-color:rgba(64, 49, 155, 0.86);
 }
  .split-slider{
    position:relative;
    height:70vh;
    background:#ddd;
    user-select:none;
    touch-action:none;
    overflow:hidden;
  }
  /**.split-slider img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    pointer-events:none;
  }**/
 
  .after{
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    overflow:hidden;
  }
  .after img{
    /* Low CRI look */
    filter: brightness(85%) contrast(85%) saturate(70%) sepia(30%);
  }
  .divider{
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:2px;
    background:#fff;
    z-index:30;
  }
  .knob{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:70px;
    height:70px;
    border-radius:50%;
    background:#fff;
    border:3px solid #e5e5e5;
    box-shadow:0 4px 15px rgba(0,0,0,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:ew-resize;
    z-index:40;
  }
  .knob::before{
    content:"⇆";
    font-size:24px;
    color:#333;
  }

  /* Overlay Text */
  .text-left, .text-right{
    position:absolute;
    bottom:20px;
    width:45%;
    padding:15px;
    color:#fff;
   /* background:rgba(0,0,0,0.4);*/
    font-size:12px;
    border-radius:8px;
    z-index:25;
  }
  .text-left{
    left:20px;
    text-align:left;
  }
  .text-right{
    right:20px;
    text-align:right;
  }
  .text-left h2, .text-right h2{
    margin:0 0 8px;
    font-size:14px;
    font-weight:600;
    color:#fff;
  }
  
  @media (max-width:600px){
  .split-slider{height:300px;}   /* smaller height on mobile */
  .knob{width:30px;height:30px;font-size:16px;}
}

@media (max-width: 768px) {
 .min-vh-100 {
  min-height: 40vh !important;
  }
  .fs-16{
  font-size:calc(1.05rem + 8.1vw) !important;
}
}