.galleries.imageSlider {
	position: relative;
	max-width: 800px;
	margin: auto;
	overflow: hidden;
	aspect-ratio: 16 / 9; /* sane default until JS computes the real height */
	transition: height 0.4s ease;
}
.galleries.imageSlider .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
/* 	border: 2px solid #ddd; */
	display: none; /* Hidden by default */
}
.galleries.imageSlider .slide:first-child {
	display: block; /* first slide visible by default, even before JS runs */
}
.galleries.imageSlider .slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 800px;
	object-fit: contain;
}

/* Navigation Arrow Styles */
.galleries.imageSlider .nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.6) !important;
	color: #fff;
	border: none;
	padding: 15px 20px;
	font-size: 24px;
	cursor: pointer;
	z-index: 10;
	opacity: 0; /* Hidden by default */
	transition: opacity 0.3s ease, background 0.2s ease;
}
.galleries.imageSlider .nav-btn:hover {
	background: rgba(0, 0, 0, 0.9);
}
.galleries.imageSlider .prev-btn { left: 0; border-radius: 0 5px 5px 0; }
.galleries.imageSlider .next-btn { right: 0; border-radius: 5px 0 0 5px; }

/* Reveal arrows ONLY when hovering over the container */
.galleries.imageSlider:hover .nav-btn {
	opacity: 1;
}