.cnc-beforeafter-section.beforeafter-layout3{position:relative;padding:100px 15px;overflow:hidden;box-sizing:border-box;}
.cnc-beforeafter-section.beforeafter-layout3 :is(h1,h2,h3,h4,h5,h6,p){margin:0;padding:0;}
.cnc-beforeafter-section.beforeafter-layout3 .container{max-width:1430px;margin:0 auto;padding:0 15px;position:relative;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-swiper{width:calc(100% - 180px);}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-swiper .swiper-slide{display:flex;justify-content:center;gap:30px;align-items: stretch;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box{display:flex;flex-direction:column;overflow:hidden; flex: 1;  }
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .image-box{margin-bottom:-130px;z-index:0;display:flex;align-items:center;justify-content:center;padding:0 100px;height: 100%;max-height: 460px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .image-box img{max-width:100%;max-height:100%;display:block;object-fit: cover;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box{background:#0056d2;text-align:center;padding:150px 50px 50px;flex: 1;justify-content: center; }
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box :is(h1,h2,h3,h4,h5,h6){color:#fff;font-size:48px;font-weight:700;margin-bottom:10px;word-break: break-word;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box p{color:#fff;font-size:20px;font-weight:400;margin-bottom: 10px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box p:last-of-type{margin-bottom: 0;}
.cnc-beforeafter-section.beforeafter-layout3 .slider-button{display:flex;justify-content:space-between;align-items:center;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);}
.cnc-beforeafter-section.beforeafter-layout3 .slider-button a{width:60px;height:60px;border-radius:50%;background-color:#005BC5;color: #fff;display:flex;justify-content:center;align-items:center;padding:4px;position:static;margin-top:0;overflow:hidden;cursor:pointer;}
.cnc-beforeafter-section.beforeafter-layout3 .slider-button a:hover{background-color:#003066;}
.cnc-beforeafter-section.beforeafter-layout3 .slider-button a :is(img, svg){max-width:100%;max-height:100%;object-fit:cover;}
.cnc-beforeafter-section.beforeafter-layout3 .slider-button a i{max-width:100%;max-height:100%;object-fit:cover;}
.cnc-beforeafter-section.beforeafter-layout3 .slider-button a.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none;}
.cnc-beforeafter-section.beforeafter-layout3 .slider-button a.swiper-button-lock{opacity: 0;pointer-events: none;}

@media (max-width:1024px){
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .image-box{margin-bottom: -80px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-swiper { width: calc(100% - 100px); }
.cnc-beforeafter-section.beforeafter-layout3 .slider-button a{width:40px;height:40px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box{padding: 90px 30px 30px}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box :is(h1,h2,h3,h4,h5,h6){font-size:40px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box p{font-size:18px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .image-box { padding: 0 50px; }
}
@media (max-width:767px){
.cnc-beforeafter-section.beforeafter-layout3{padding:100px 0 50px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-swiper{width: 100%;}
.cnc-beforeafter-section.beforeafter-layout3 .slider-button a{width:36px;height:36px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-swiper .swiper-slide{flex-direction:column;gap:40px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box{flex-direction:row;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .image-box{z-index:0;display:flex;align-items:center;justify-content:center;padding:30px 0;margin-bottom:0;width: 30%;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box{text-align:left;padding:20px 20px 20px 50px;margin-left:-30px;width: 100%;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box :is(h1,h2,h3,h4,h5,h6){font-size:30px;}
.cnc-beforeafter-section.beforeafter-layout3 .beforeafter-box .content-box p{font-size:16px;}
.cnc-beforeafter-section.beforeafter-layout3 .slider-button{top:-60px;bottom:auto;transform:none;justify-content:center;gap:20px;}
}