:root {
	--bg: #f8f9fa;
	--text: #0b2a3a;
	--primary-start: #0d6efd;
	--primary-end: #0a58ca;
	--card-bg: #ffffff;
	--control-bg: #0d6efd;
	--badge-bg: #ffc107;
	--warning-bg: #fff3cd;
	--danger: #dc3545;
	--muted: #6c757d;
	
	--hf-height: clamp(80px, 10vh, 120px);
	--hf-font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
	--hf-subtext-size: clamp(0.75rem, 1vw + 0.25rem, 1rem);
}

/* Cool theme (default) */
.theme-cool {
	--bg: #f0f6fb;
	--text: #072033;
	--primary-start: #0d6efd;
	--primary-end: #0a58ca;
	--card-bg: #ffffff;
	--control-bg: #0d6efd;
	--badge-bg: #ffd166;
	--warning-bg: #fff7e6;
	--danger: #c22f2f;
	--muted: #5b6b75;
}

/* Soft/eye-friendly theme */
.theme-soft {
	--bg: #f5f3ff;
	--text: #2b2430;
	--primary-start: #6c5ce7;
	--primary-end: #8e7cf6;
	--card-bg: #ffffff;
	--control-bg: #6c5ce7;
	--badge-bg: #d6c8ff;
	--warning-bg: #fff7ff;
	--danger: #b2456b;
	--muted: #6f6a78;
}

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	
	padding-top: var(--hf-height);
	padding-bottom: var(--hf-height);
}

.header-section {
	background: linear-gradient(135deg, var(--primary-start), var(--primary-end));
	color: white;
	padding: 40px 0;
	margin-bottom: 30px;
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 25px 50px -12px rgba(0,0,0,0.15);
	transition: box-shadow 0.3s ease;
	
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--hf-height);
	z-index: 1050;
	margin-bottom: 0 !important;
	display: flex;
	align-items: center;
	padding: 0 !important;
}

.header-section:hover {
	box-shadow: 0 25px 35px -5px rgba(0,0,0,0.15), 0 30px 60px -12px rgba(0,0,0,0.2);
}

.header-section .container {
	height: 100%;
	display: flex;
	align-items: center;
}

.header-section h1 {
	font-size: var(--hf-font-size) !important;
}

.header-section .lead {
	font-size: var(--hf-subtext-size) !important;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--hf-height);
	z-index: 1050;
	margin-top: 0 !important;
	display: flex;
	align-items: center;
	padding: 0 !important;
}

footer .container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

footer p {
	font-size: var(--hf-subtext-size) !important;
	margin-bottom: 0 !important;
}

footer small {
	font-size: calc(var(--hf-subtext-size) * 0.8) !important;
}


/* Emerged/Elevated Carousel Styling */
.carousel-custom-container {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	background-color: var(--card-bg);
	border-radius: 20px;
	box-shadow: 
		0 20px 25px -5px rgba(0,0,0,0.1),
		0 25px 50px -12px rgba(0,0,0,0.15);
	overflow: hidden;
	transition: box-shadow 0.3s ease;
	position: relative;
}

.carousel-custom-container:hover {
	box-shadow: 
		0 25px 35px -5px rgba(0,0,0,0.15),
		0 30px 60px -12px rgba(0,0,0,0.2);
}

.carousel-item {
	/* responsive carousel height: min 320px, up to 70vh but no more than 900px */
	height: clamp(360px, 70vh, 900px);
	text-align: center;
	position: relative;
	background: linear-gradient(135deg, var(--card-bg) 0%, rgba(0,0,0,0.02) 100%);
}

.img-wrapper {
	/* reserve space for caption bar on larger screens; collapses on small screens */
	/* increased caption height by 25px (96 -> 121), so subtract accordingly */
	height: calc(100% - 121px);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow: hidden;
}

/* Image Styling and Animation with Emerged Effect */
.img-wrapper img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15), 0 5px 15px rgba(0,0,0,0.1);
	transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out, filter 0.3s ease;
	opacity: 0;
	transform: scale(0.95);
	display: block;
	filter: drop-shadow(0 10px 25px rgba(0,0,0,0.15)) drop-shadow(0 5px 15px rgba(0,0,0,0.1));
}

/* Animation Trigger: When the slide is active */
.carousel-item.active .img-wrapper img {
	opacity: 1;
	transform: scale(1);
}

/* Image hover effect - lift and enhance shadow */
.img-wrapper img:hover {
	transform: scale(1) translateY(-5px);
	filter: drop-shadow(0 15px 35px rgba(0,0,0,0.2)) drop-shadow(0 8px 20px rgba(0,0,0,0.15));
}

.carousel-caption-fixed {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 121px; /* fixed caption bar on larger screens (increased by 25px) */
	background: linear-gradient(135deg, #212529 0%, rgba(0,0,0,0.98) 100%);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px 18px;
	border-top: 2px solid rgba(255,255,255,0.15);
	overflow-y: auto;
	box-shadow: inset 0 10px 20px rgba(0,0,0,0.1);
}

.carousel-caption-fixed > div {
	width: 100%;
}

/* Mobile: stack caption under the image to avoid any overlay/overlap */
@media (max-width: 575.98px) {
	.carousel-item {
		height: auto;
	}
	.img-wrapper {
		height: auto;
		padding: 12px;
	}
	.carousel-caption-fixed {
		position: static;
		height: auto;
		padding: 12px;
		border-top: none;
		background: linear-gradient(135deg, #212529 0%, rgba(0,0,0,0.98) 100%);
		box-shadow: none;
	}
}

/* Medium screens: slightly smaller caption bar and control repositioning */
@media (min-width: 576px) and (max-width: 991.98px) {
	/* medium screens: caption height increased by 25px (88 -> 113) */
	.carousel-caption-fixed { height: 113px; padding: 10px 14px; }
}

/* Desktop tweaks */
@media (min-width: 992px) {
	.carousel-caption-fixed { height: 121px; }
}


 @media (max-width: 767.98px) {
		:root {
			--hf-height: clamp(100px, 15vh, 140px);
		}

		.header-section .container {
			flex-direction: column !important;
			justify-content: center !important;
		}
	}

/* Emerged Control Buttons */
.carousel-control-prev,
.carousel-control-next {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(255,255,255,0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	z-index: 10;
	border: none;
	opacity: 1;
}

.carousel-control-prev {
	left: 15px;
}

.carousel-control-next {
	right: 15px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
	background-color: rgba(255,255,255,0.35);
	box-shadow: 0 12px 24px rgba(0,0,0,0.3);
	transform: translateY(-50%) scale(1.1);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	background-color: var(--control-bg);
	border-radius: 50%;
	padding: 10px;
	width: 56px;
	height: 56px;
	background-size: 60% !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.step-badge {
	background-color: var(--badge-bg);
	color: #000;
	padding: 6px 12px;
	border-radius: 5px;
	font-weight: bold;
	margin-bottom: 8px;
	display: inline-block;
}

/* Ensure step-badge and caption content don't cause overflow */
.carousel-caption-fixed p { margin: 0; line-height: 1.25; }

/* Controls vertical position: above caption on small/medium to avoid overlap */
.carousel-control-prev, .carousel-control-next {
	top: calc(50% - 24px);
}

@media (max-width: 575.98px) {
	.carousel-control-prev, .carousel-control-next { top: 45%; }
}

.important-box {
	border-left: 5px solid var(--danger);
	background-color: var(--warning-bg);
}

/* .hyperlink {
	background-color: white;
	text-decoration: none;
} */

a:link {
		color:rgb(226, 175, 36);
	}

a:hover	{
		color:red;		
	}
a:visited	{
		color:rgb(226, 175, 36);
	}