/* ✅ Remove default Swiper arrows */
    .swiper-button-next::after,
    .swiper-button-prev::after {
    display: none !important;
    }

    
    /* ✅ Swiper Depth & Zoom Effect */
    .BeforeAfterSwiper {
        margin-top: 30px;
        perspective: 1400px;
        padding-bottom: 90px;
        padding-top: 90px;
    }

    .BeforeAfterSwiper .swiper-slide {
        opacity: 1;
        transform: scale(0.9) translateZ(-50px);
        filter: none;
        transition: .6s ease;
        z-index: 1;
    }

    .BeforeAfterSwiper .swiper-slide img {
        border-radius: 10px;
    }

    /* ✅ Center Active Slide */
    .BeforeAfterSwiper .swiper-slide-active {
        opacity: 1;
        transform: scale(1.7) translateZ(200px);
        filter: brightness(100%) contrast(100%);
        z-index: 10;
        position: relative;
    }

    /* ✅ Side Slides */
    .BeforeAfterSwiper .swiper-slide-next,
    .BeforeAfterSwiper .swiper-slide-prev {
        opacity: 0.6;
        transform: scale(0.9) translateZ(0px);
        z-index: 5;
    }

    /* ✅ Custom Arrow Styles */
    .custom-arrow {
        width: 48px;
        height: 48px;
        background: #FFE5D2;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 20;
        transition: .3s ease;
        border: none;
    }

    .custom-arrow img {
        width: 28px;
    }

    .custom-arrow:hover {
        transform: scale(1.18);
    }

    /* ✅ Arrow Positioning */
    .swiper-button-prev.custom-arrow {
        left: 5px;
    }

    .swiper-button-next.custom-arrow {
        right: 5px;
    }

    /* ✅ Mobile Responsive Tweaks */
    @media (max-width: 768px) {
        .BeforeAfterSwiper {
            perspective: 1400px;
            padding-bottom: 10px;
            padding-top: 10px;
        }
        .BeforeAfterSwiper .swiper-slide {
            transform: scale(0.85);
            opacity: 1;
        }

        .BeforeAfterSwiper .swiper-slide-active {
            transform: scale(1.15) translateZ(100px);
        }

        .swiper-button-prev.custom-arrow,
        .swiper-button-next.custom-arrow {
            width: 45px;
            height: 45px;
        }
    }