/* afterbefore css */

/* .before-after-slider .slick-list {
    padding-left: 0 !important;
}

.slid-box {
    padding: 15px;
    border: solid 1px #D1DEE2;
    border-radius: 5px;
}

.before-after-slider .twentytwenty-container img {
    height: 100%;
}

.slid-box .heading-18 {
    margin-top: 15px;
    margin-bottom: 0;
}

.before-after-slider .slick-slide {
    margin: 0 15px;
}

.before-after-slider .slick-list {
    margin: 0 -15px;
}

.before-after-slider .slick-slide {
    margin: 0 15px;
}

.before-after-slider .slick-slide li {
    margin: 0;
    border: 0px solid var(--theme);
    overflow: hidden;
    border-radius: 30px;
}

.before-after-slider .slick-slide img {
    width: 100%;
    object-fit: cover;
} */
.gallery-sec { 
    max-width: 100%; 
    overflow: hidden;
    background: #F3F3F3;
    padding-block: 90px 100px;
    & .container { 
       & > .heading-44 { 
            margin-bottom: 40px;
       }
    }
}
.before-after-slider { 
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-inline: 360px;
    padding-bottom: 100px;

    & .twentytwenty-wrapper {
        padding-inline: 20px;
    }

    & .slick-list { 
        overflow: visible;
    }
}

.gallery-sec .btn_bar, .simple_gallery .btn_bar { 
    justify-content: flex-start;
    text-align: left;
    margin-top: -23px;
    position: relative;
    &::before { 
        display: none;
    }
    &:after {
        content: '';
        position: absolute;
        width: calc(100% - 353px);
        left: 220px;
        height: 0;
        top: 50%;
        border-top: 1px solid rgba(112, 112, 112, 0.2);
    }
}
.before-after-slider.slick-slider  { 
    & .slick-next {
        top: 100%;
        right: 0;
    }
    & .slick-prev {
        top: 100%;
        right: 60px;
        left: unset !important;
    }
}

.twentytwenty-before-label, .twentytwenty-after-label { 
    display: none;
}

/*  */
.twentytwenty-overlay:hover .twentytwenty-before-label,
.twentytwenty-overlay:hover .twentytwenty-after-label {
    opacity: 1;
}

.twentytwenty-after-label::after,
.twentytwenty-before-label::before {
    position: absolute;
    width: 101px !important;
    padding: 13px;
    height: 42px;
    background-color: #fff !important;
    margin: 0 auto !important;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    justify-content: center;
    font-size: 14px !important;
    text-align: center;
    font-weight: 800;
    color: #0E76BB !important;
    opacity: 1;
    top: 26px !important;
    border: 2px solid #16567A;
    border-radius: 25px !important;
}

.twentytwenty-before-label::before {
    content: "Before";
    left: 16px !important;
    border-radius: 0 5px 5px 0;
    display: block !important;
}

.twentytwenty-after-label::after {
    content: "After";
    right: 16px !important;
    border-radius: 5px 0 0 5px;
}

@media (max-width: 1439.98px) { 
    .gallery-sec { 
        padding-block:80px;
    }
    .before-after-slider { 
        width: calc(100% + 20px);
        margin-inline: -10px;
        padding-bottom: 70px;
        padding-inline: 0px;

        & .twentytwenty-wrapper {
            padding-inline: 10px;
        }

        & .slick-list { 
            overflow: visible;
        }
    }
} 

@media (max-width:1199.98px) { 
    .gallery-sec {
        padding-block: 60px;
    }
}
@media (max-width:767.98px) { 
    .gallery-sec {
        padding-block: 40px;
        & .container {
            & > .heading-44 {
                margin-bottom: 20px;
            }
        }
    }
}
@media (max-width:575.98px) {  
    .gallery-sec .btn_bar {
        &:after { 
            width: calc(100% - 295px);
            left: 188px; 
        }
    }
}