/* Parent container styling */

  .before-after-slider {

    position: relative; /* Position children absolutely */

    width: 800px; /* Fixed width for the slider */

    height: 400px; /* Fixed height for the slider */

    overflow: hidden; /* Hide overflowing content */

    border-radius: 10px; /* Rounded corners */

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Add shadow */

  }

 

 

@media screen and (max-width: 768px) {

  .before-after-slider {

    width: 85vw; /* Use 90% of the viewport width */

    height: 300px; /* Set a fixed height for mobile */

    margin: 0 auto; /* Center the slider horizontally */

    border-radius: 10px; /* Keep rounded corners consistent */

  }

}

 

 

  /* Before and after images */

  .before-image,

  .after-image {

    position: absolute; /* Ensure absolute positioning */

    top: 0; /* Align to top */

    left: 0; /* Align to left */

    width: 100%; /* Fill parent width */

    height: 100%; /* Fill parent height */

    background-size: cover; /* Cover the container */

    background-position: center; /* Center the image */

    border-radius: 10px; /* Match the parent border radius */

  }

 

  .after-image {

    clip-path: inset(0 50% 0 0); /* Show half the image */

    z-index: 1; /* Keep it below the divider */

  }

 

  /* Divider line */

  .divider {

    position: absolute; /* Place relative to parent */

    top: 0; /* Align to top */

    left: 50%; /* Start in the middle */

    width: 3px; /* Thin divider line */

    height: 100%; /* Full height */

    background: #FFF;

    border: 1px solid #fff; /* White border */

    transform: translateX(-50%); /* Center the divider */

    cursor: ew-resize; /* Indicate resize functionality */

    z-index: 2; /* Above images */

    display: flex; /* Flexbox layout for chevrons */

    align-items: center; /* Center chevrons vertically */

    justify-content: space-between; /* Space chevrons */

    pointer-events: auto; /* Enable interaction */

  }

 

  /* Chevron buttons */

  .chevron {

    position: absolute; /* Position relative to the divider */

    font-size: 20px; /* Size of the chevrons */

    font-weight: 500;

    color: #000; /* White color */

    background: #ffffff99;

    border: none; /* No border */

    border-radius: 0px;

    padding: 5px 5px 7px 5px; /* Padding around chevrons */

    cursor: pointer; /* Pointer cursor */

    user-select: none; /* Prevent text selection */

    outline: none; /* No focus outline */

    z-index: 3; /* Ensure chevrons are above other elements */

  }

 

  .chevron-left {

    left: -23px; /* Offset left chevron */

  }

 

  .chevron-right {

    right: -23px; /* Offset right chevron */

  }

 

  .chevron:focus {

    outline: 2px solid #fff; /* Add outline on focus */

  }