/* ============================================================
   FOTORAMA RESPONSIVE CENTERED SLIDER — STABLE FINAL LIGHT VERSION
   ============================================================ */

/* Wrapper alignment */
.fotorama {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 auto !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

/* Containing wrap for the slider */
.fotorama__wrap {
	position: relative !important;
	max-width: 900px !important;
	width: 100% !important;
	margin: 0 auto !important;
}

/* ============================================================
   FIX INLINE 900x900 — responsive but stable
   ============================================================ */
.fotorama__stage.fotorama__pointer {
	width: 100% !important;
	height: 600px !important; /* fixed base height for JS layout */
	max-height: 70vh !important; /* responsive limit */
	background: #fff !important; /* light background to blend with page */
}

/* Center each slide vertically and horizontally */
.fotorama__stage__frame {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	height: 100% !important;
}

/* ============================================================
   Proper image scaling and full fill
   ============================================================ */
.fotorama__img {
	object-fit: cover !important;            /* auto-fill container */
	object-position: center center !important; /* centered crop */
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	margin: 0 auto !important;
	background-color: #fff !important;       /* removes dark edges */
	border-radius: 0 !important;
}

/* ============================================================
   MOVE DOTS INSIDE SLIDER AREA
   ============================================================ */
.fotorama__nav-wrap {
	position: absolute !important;
	bottom: 1.5rem !important;
	left: 0 !important;
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	z-index: 5 !important;
}

/* Dots look */
.fotorama__dot {
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background-color: #ccc !important;
	margin: 0 5px !important;
	transition: all 0.3s ease !important;
}

.fotorama__nav__frame.fotorama__active .fotorama__dot {
	background-color: #153628 !important;
	transform: scale(1.2);
}

/* ============================================================
   CENTER ARROWS VERTICALLY
   ============================================================ */
.fotorama__arr {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 6 !important;
	opacity: 0.8 !important;
	transition: opacity 0.3s ease;
}

.fotorama__arr--prev { left: 1rem !important; }
.fotorama__arr--next { right: 1rem !important; }

.fotorama__arr:hover { opacity: 1 !important; }

/* ============================================================
   MOBILE HEIGHT ADJUSTMENT
   ============================================================ */
@media (max-width: 768px) {
	.fotorama__stage.fotorama__pointer {
		height: 400px !important;
	}
}