.partner-thumb {
    display: grid;
    place-items: center;
}

.inner_before_after {
    display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    --position: 50%;
}

.image-container {
    max-width: 100%;
    max-height: 80vh;
    aspect-ratio: 2/1;
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

.image-before {
    position: absolute;
    inset: 0;
    width: var(--position);
    filter: grayscale(100%);
}

.slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
    /* for Firefox */
    width: 100%;
    height: 100%;
}

.slider:focus-visible ~ .slider-button {
    outline: 5px solid black;
    outline-offset: 3px;
}

.slider-line {
    position: absolute;
    inset: 0;
    width: 0.2rem;
    height: 100%;
    background-color: #fff;
    /* z-index: 10; */
    left: var(--position);
    transform: translateX(-50%);
    pointer-events: none;
}

.slider-button {
    position: absolute;
    background-color: #fff;
    color: black;
    padding: 0.5rem;
    border-radius: 100vw;
    display: grid;
    place-items: center;
    top: 50%;
    left: var(--position);
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* z-index: 100; */
    box-shadow: 1px 1px 1px hsl(0, 50%, 2%, 0.5);
}

.after_before_lable {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 20px;
}
.after_before_lable p {
    border-radius: 5px;
    background: #29416b;
    color: #ffffff;
    padding: 8px 22px;
}

/* Before After Label */

/* .partner-thumb .inner_before_after .image-container .image-before{
    position: relative;
}

.partner-thumb .inner_before_after .image-container .image-before::before{
    content: "Before";
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10;
    pointer-events: none;
} */

.partner-thumb .inner_before_after .image-container {
    position: relative;
    display: inline-block; /* Adjust based on your layout */
}

.partner-thumb .inner_before_after .image-container::before {
    content: "Before";
    position: absolute;
    top: 50%; /* Adjust vertical positioning */
    left: 10px; /* Adjust horizontal positioning */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 1); /* Semi-transparent background */
    color: white;
    padding: 8px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px; /* Optional rounded corners */
    z-index: 10; /* Ensure it's above the image */
    pointer-events: none; /* Prevent the label from blocking image interaction */
}

.partner-thumb .inner_before_after .image-container::after {
    content: "After";
    position: absolute;
    top: 50%; /* Adjust vertical positioning */
    right: 10px; /* Adjust horizontal positioning */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 1); /* Semi-transparent background */
    color: white;
    padding: 8px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px; /* Optional rounded corners */
    z-index: 10; /* Ensure it's above the image */
    pointer-events: none; /* Prevent the label from blocking image interaction */
}