/* Container Spacing */
.before-after--slick-carousel .slick-list {
    margin: 0 auto;
    padding: 0 !important;
    width: 100%;
    overflow: hidden;
}


/* Customizing Slick Arrows */
.before-after--slick-carousel .slick-prev,
.before-after--slick-carousel .slick-next {
	z-index: 10;
    position: absolute;
    top: 50%;
    padding: calc(var(--spacing)*5);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: #e5e5e5;
    border-radius: 3.40282e38px;
    background-color: color-mix(in oklab,var(--color-white)90%,transparent);
    font-size: 0;
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x)var(--tw-translate-y);
    --tw-duration: .3s;
    transition-duration: .3s;
    transition-property: all;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    cursor: pointer;
}
@media (max-width: 480px) {
    .before-after--slick-carousel .slick-prev,
    .before-after--slick-carousel .slick-next {
        padding: calc(var(--spacing)*4);
    }
}
.before-after--slick-carousel .slick-prev:hover,
.before-after--slick-carousel .slick-next:hover {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color,#00000040);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    background-color: #9333ea;
    border-color: #9333ea;
}
.before-after--slick-carousel .slick-prev {
    left: 15px;
}
.before-after--slick-carousel .slick-next {
    right: 15px;
}
@media (max-width: 480px) {
    .before-after--slick-carousel .slick-prev {
        left: 5px;
    }
    .before-after--slick-carousel .slick-next {
        right: 5px;
    }
}

.before-after--slick-carousel .slick-prev:after,
.before-after--slick-carousel .slick-next:after {
    display: block;
    position: relative;
    width: 10px;
    height: 10px;
    content: '';
    border-style: solid;
    border-color: #404040;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.before-after--slick-carousel .slick-prev:hover:after,
.before-after--slick-carousel .slick-next:hover:after {
    border-color: #fff;
}
.before-after--slick-carousel .slick-prev:after {
    left: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
}
.before-after--slick-carousel .slick-next:after {
    right: 2px;
    border-top-width: 2px;
    border-right-width: 2px;
}


/* Customizing Slick Dots */
.before-after--slick-carousel .slick-dots {
    gap: calc(var(--spacing)*2.5);
    display: flex;
    justify-content: center;
    margin-top: calc(var(--spacing)*8);
    list-style: none;
}
.before-after--slick-carousel .slick-dots:has(> :only-child) {
    display: none;
}

.before-after--slick-carousel .slick-dots li button {
    width: calc(var(--spacing)*2);
    height: calc(var(--spacing)*2);
    border-radius: 3.40282e38px;
    background-color: #e5e5e5;
    font-size: 0;
    appearance: button;
    --tw-duration: .5s;
    transition-duration: .5s;
    transition-property: all;
    transition-timing-function: var(--tw-ease,var(--default-transition-timing-function));
    transition-duration: var(--tw-duration,var(--default-transition-duration));
    cursor: pointer;
}
.before-after--slick-carousel .slick-dots li button:hover {
    background-color: #9333ea80;
    width: calc(var(--spacing)*4);
}
.before-after--slick-carousel .slick-dots li.slick-active button,
.before-after--slick-carousel .slick-dots li.slick-active button:hover {
    width: calc(var(--spacing)*12);
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: #9333ea;
    --tw-gradient-stops: var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position));
    --tw-gradient-to: #a855f7;
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);
    box-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
    --tw-shadow-color: color-mix(in oklab,oklab(55.7537% .134997 -.213369/.3) var(--tw-shadow-alpha),transparent);
}