.before-after-slider-sec .logo-box {width: 70%;margin-right: auto;margin-left: auto;border: 1px solid #ddd;padding: 15px 25px 15px;justify-content: center;background: #1c1a17;border-radius: 20px;gap: 12px;}
.before-after-slider-sec .logo-box .logo-text {width: 34%;}
.before-after-slider-sec .logo-box .logo-text p {font-size: 24px;color: #FFF;line-height: 25px;}
.before-after-slider-sec .logo-box .logo-list {width: 64%;margin: 0 -6px;justify-content: space-around;row-gap: 15px;}
.before-after-slider-sec .logo-box .logo-list .logo {max-width: calc( 100% / 3 - 12px);margin: 0 6px;display: flex;justify-content: flex-end;}
.before-after-slider-sec .heading-section h2 span {color: #000;}

.before-after-slider-sec .before-after-slider {width: 90%;margin: auto;}
.before-after-slider-sec .img.slick-slide {height: 476px;align-items: center;display: flex;transition: all 0.4s ease-in-out;}
.before-after-slider-sec .slick-slide.slick-current img {transform: scale(1.27) !important;z-index: 999;position: relative;width: 100% !important;margin-left: 0 !important;}
.before-after-slider-sec .img.slick-slide img {height: 384px;transition: all 0.4s ease-in-out;}
.before-after-slider-sec .img.slick-slide.slick-active img {object-fit: cover;margin-left: -65px;}
.before-after-slider-sec .img.slick-slide.slick-active {display: flex;justify-content: start;}
.before-after-slider-sec .slick-track .img.slick-current+.img.slick-slide.slick-active {justify-content: end;}
.before-after-slider-sec .slick-track .img.slick-current+.img.slick-slide.slick-active img {margin-right: -65px;}

.before-after-slider-sec .slick-dots button {font-size: 0;cursor: pointer;background: #000000;opacity: 0.2;transform: rotate(45deg);height: 10px !important;!i;!;width: 10px !important;!i;!;display: inline-block;border: none;padding: 0;}
.before-after-slider-sec ul.slick-dots {display: flex !important;!i;!;margin: 0;margin-bottom: 10px;flex-wrap: wrap;justify-content: center;gap: 0 15px;}
.before-after-slider-sec .slick-active button {background: #CBA368;opacity: 1;}
.before-after-slider-sec .slick-dots button:hover {background: #CBA368;opacity: 1;}

.before-after-slider-sec .slick-prev:before,
.before-after-slider-sec .slick-next:before {position: absolute;content: url('');display: inline-block;top: 50%;transform: translateY(-50%);z-index: 99;cursor: pointer;}
.before-after-slider-sec .slick-prev:before {background: url('https://www.skinmatters.ca/hubfs/Impressions_Chicago_2024/Images/subtract%20shape%20(6).svg');left: -49.4px;height: 80px;width: 50px;background-repeat: no-repeat;background-size: contain;}
.before-after-slider-sec .slick-next:before {background: url('https://www.skinmatters.ca/hubfs/Impressions_Chicago_2024/Images/subtract%20shape%201%20(1).svg');right: -49.4px;height: 80px;width: 50px;background-repeat: no-repeat;background-size: contain;}
.before-after-slider-sec button.slick-arrow {background: transparent;border: none;font-size: 0;margin: 0;padding: 0;}



@media(max-width:991px) {
  .before-after-slider-sec .logo-box .logo-text p {font-size: 20px;}
  .before-after-slider-sec .logo-box .logo-list {width: 100%;}
  .before-after-slider-sec .logo-box .logo-text {width: 100%;text-align: center;}
  .before-after-slider-sec .img.slick-slide {height: 359px;}
  .before-after-slider-sec .img.slick-slide img {height: 284px;}
  .before-after-slider-sec .img.slick-slide.slick-active img {margin-left: -50px;}
  .before-after-slider-sec .slick-track .img.slick-current+.img.slick-slide.slick-active img {margin-right: -50px;}
  .before-after-slider-sec .before-after-slider {width: 85%;}
}

@media(max-width:767px) {
  .before-after-slider-sec .logo-box {width: 100%;padding: 15px 10px 15px;}
  .before-after-slider-sec .logo-box .logo-list {width: 100%;}
.before-after-slider-sec .logo-box .logo-list .logo {max-width: calc( 100% / 2 - 12px);}  
  .before-after-slider-sec .logo-box .logo-text {width: 100%;text-align: center;}
  .before-after-slider-sec .before-after-slider {width: 80%;}
  .before-after-slider-sec .slick-next:before,
  .before-after-slider-sec .slick-prev:before {height: 53px;}
  .before-after-slider-sec .slick-prev:before {left: -33px;}
  .before-after-slider-sec .slick-slide.slick-current img {transform: scale(1.07) !important;}
  .before-after-slider-sec .img.slick-slide {height: 300px;}
  .before-after-slider-sec .img.slick-slide img {height: 259px;}
}

@media(max-width:380px) {
  .before-after-slider-sec .slick-next:before {width: 34px;right: -34px;}
}