/* Photo Gallery Carousel - Navigation Buttons */

.cms-lq-project-carousel.cms-slick-slider {
	position: relative;
}

.cms-slick-carousel {
	position: relative;
}

/* Hide Slick's default arrows */
.cms-slick-carousel .slick-prev,
.cms-slick-carousel .slick-next {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
}

/* Custom Arrow Buttons */
.cms-lq-project-carousel .gallery-arrow-btn {
	width: 50px;
	height: 50px;
	background: rgba(0, 0, 0, 0.7);
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	color: white;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	padding: 0;
	margin: 0;
	outline: none;
	line-height: 1;
}

.cms-lq-project-carousel .gallery-arrow-btn:hover {
	background: rgba(205, 0, 1, 0.95);
	border-color: white;
	transform: translateY(-50%) scale(1.15);
	box-shadow: 0 0 20px rgba(205, 0, 1, 0.6);
}

.cms-lq-project-carousel .gallery-prev-btn {
	left: 20px;
}

.cms-lq-project-carousel .gallery-next-btn {
	right: 20px;
}

.cms-lq-project-carousel .gallery-arrow-btn span {
	display: block;
	line-height: 1;
}

/* Mobile View */
@media (max-width: 768px) {
	.cms-lq-project-carousel .gallery-arrow-btn {
		width: 45px;
		height: 45px;
		font-size: 24px;
	}

	.cms-lq-project-carousel .gallery-prev-btn {
		left: 10px;
	}

	.cms-lq-project-carousel .gallery-next-btn {
		right: 10px;
	}
}

/* Mobile View */
@media (max-width: 768px) {
	.cms-slick-carousel .slick-prev,
	.cms-slick-carousel .slick-next {
		width: 45px !important;
		height: 45px !important;
	}

	.cms-slick-carousel .slick-prev:before,
	.cms-slick-carousel .slick-next:before {
		font-size: 20px !important;
	}

	.cms-slick-carousel .slick-prev {
		left: 10px !important;
	}

	.cms-slick-carousel .slick-next {
		right: 10px !important;
	}
}

/* Slick default arrow reset */
.cms-slick-carousel .slick-prev.slick-disabled,
.cms-slick-carousel .slick-next.slick-disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

/* Ensure arrows are never hidden by default */
.cms-slick-carousel .slick-prev,
.cms-slick-carousel .slick-next {
	visibility: visible !important;
	pointer-events: auto !important;
}

/* Animation for smooth carousel sliding */
.carousel-item {
	transition: opacity 0.3s ease;
}

.cms-slick-carousel.slick-initialized {
	visibility: visible;
}