/* Slick Carousel Custom Styles */

.slick-slider {
	overflow: hidden;
}
.slick-list {
	margin-left: -.625rem;
	margin-right: -.625rem;
}
.slick-slide {
	margin-left: .625rem;
	margin-right: .625rem;
}
/* Slick Slider Custom Settings */
.itemMargin .slick-slide {
	margin-right: .5rem;
	margin-left: .5rem;
}
.itemMargin .slick-list {
	margin-left: -.5rem;
	margin-right: -.5rem;
}
.stagePaddingRight .slick-slide {
	margin-left: 1rem;
}
.stagePaddingRight .slick-list {
	margin-left: 0;
	margin-right: 0;
	padding-right: 25% !important;
}

/* Add this script to get the dynamic stagePaddingRight" class for mobile.
jQuery(document).ready(function($) {
	function toggleStagePaddingClasses() {
		const elements = $('.js-stage-padding');
		if ($(window).width() <= 767) {
			elements.addClass('stagePaddingRight itemMargin');
		} else {
			elements.removeClass('stagePaddingRight itemMargin');
		}
	}

	// Initial check
	toggleStagePaddingClasses();

	// Update on resize
	let stagePaddingTimer;
	$(window).on('resize', function() {
		clearTimeout(stagePaddingTimer);
		stagePaddingTimer = setTimeout(toggleStagePaddingClasses, 100);
	});
}); */


/* Slick Dots Styling */
.slick-dots {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 10px;
	margin-top: 30px;
}

.slick-dots li {
	display: block;
	width: 12px;
	height: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slick-dots li button {
	width: 100%;
	height: 100%;
	background: #D9D9D9;
	border: none;
	cursor: pointer;
	text-indent: -999999px;
	border-radius: 50%;
	padding: 0;
}

.slick-dots li.slick-active button {
	background: var(--carp-green-mid);
}