* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
	}

	body {
			font-family: 'Georgia', serif;
			background-color: #fff;
	}

	/* Navigation */
	nav {
			background-color: #fff;
			border-bottom: 1px solid #e0e0e0;
			box-shadow: 0 2px 4px rgba(0,0,0,0.05);
			position: sticky;
			top: 0;
			z-index: 1000;
	}

	/* Navigation base */
	nav.navbar {
			background-color: #fff;
			border-bottom: 1px solid #e0e0e0;
			box-shadow: 0 2px 4px rgba(0,0,0,0.05);
			position: sticky;
			top: 0;
			z-index: 1000;
	}

	/* Brand */
	.navbar-brand {
			font-size: 1.5rem;
			font-weight: 700;
			color: #1a1a1a !important;
			letter-spacing: 1px;
	}

	/* Links */
	.nav-link {
			font-size: 0.85rem;
			font-weight: 500;
			color: #555 !important;
			margin: 0 0.5rem;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			transition: all 0.3s ease;
			position: relative;
			padding-bottom: 8px;
	}

	.nav-link::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 0;
			height: 2px;
			background-color: #d4a574;
			transition: all 0.3s ease;
			transform: translateX(-50%);
	}

	/* Hover effect */
	.nav-link:hover {
			color: #d4a574 !important;
	}
	.nav-link:hover::after {
			width: 100%;
	}

	/* Active link */
	.nav-link.active {
			color: #d4a574 !important;
	}
	.nav-link.active::after {
			width: 100%;
	}

	/* Ensure other links hover doesn't override active underline */
	.navbar-nav .nav-link:not(.active):hover::after {
			width: 100%;
	}

	/* Toggler style */
	.navbar-toggler {
			border: none;
			background-color: transparent;
			font-size: 1.25rem;
			color: #1a1a1a;
	}

	/* Offcanvas customization */
	.offcanvas {
			width: 250px; /* slide-in width */
	}
	.offcanvas .navbar-nav .nav-link {
			margin: 0.5rem 0;
	}
	.offcanvas-header {
			border-bottom: 1px solid #e0e0e0;
	}
	.offcanvas .btn-close {
			outline: none;
	}

	/* Responsive tweaks */
	@media (max-width: 992px) { /* tablet and below */
			.navbar-nav {
					text-align: left;
			}
			.nav-item {
					margin: 0.5rem 0;
			}
	}


	/* Hero Section */
	.hero-section {
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
			padding: 60px 20px;
			background-size: cover;
			background-position: center;
			background-attachment: fixed;
	}

	/* Dark overlay */
	.hero-section::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 0;
	}

	.hero-content {
			max-width: 900px;
			text-align: center;
			position: relative;
			z-index: 1;

			/* Animation (main container) */
			animation: fadeInUp 1s ease-out;
	}

	/* Label */
	.hero-label {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15px;
			margin-bottom: 30px;
			font-size: 0.75rem;
			text-transform: uppercase;
			letter-spacing: 2px;
			color: #d4a574;

			/* Animation */
			animation: fadeIn 1s ease-out 0.3s both;
	}

	.hero-label::before,
	.hero-label::after {
			content: '';
			width: 40px;
			height: 1px;
			background-color: #d4a574;
	}

	/* Title */
	.hero-section h1 {
			font-size: clamp(2.5rem, 10vw, 5rem);
			font-weight: 300;
			color: #ffffff;
			margin-bottom: 20px;
			letter-spacing: 2px;

			animation: fadeInUp 1s ease-out 0.5s both;
	}

	/* Subtitle */
	.hero-section h2 {
			font-size: clamp(1rem, 4vw, 1.75rem);
			font-weight: 300;
			color: #e8e8e8;
			margin-bottom: 30px;
			max-width: 700px;
			margin-left: auto;
			margin-right: auto;
			line-height: 1.6;

			animation: fadeInUp 1s ease-out 0.7s both;
	}

	/* Description */
	.hero-description {
			font-size: 1rem;
			color: #d8d8d8;
			margin-bottom: 40px;
			max-width: 600px;
			margin-left: auto;
			margin-right: auto;
			line-height: 1.8;
			font-weight: 300;

			animation: fadeInUp 1s ease-out 0.9s both;
	}

	/* Button */
	.btn-primary-custom {
			background-color: #1a1a1a;
			color: white;
			padding: 15px 35px;
			font-size: 0.85rem;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1px;
			border: none;
			border-radius: 50px;
			cursor: pointer;
			transition: background-color 0.3s ease;
			display: inline-flex;
			align-items: center;
			gap: 10px;

			animation: fadeInUp 1s ease-out 1.1s both;
	}

	.btn-primary-custom:hover {
			background-color: #333;
			color: white;
	}

	.btn-primary-custom i {
			transition: transform 0.3s ease;
	}

	.btn-primary-custom:hover i {
			transform: translateX(5px);
	}

	/* Keyframes (from first hero) */
	@keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
	}

	@keyframes fadeInUp {
			from {
					opacity: 0;
					transform: translateY(20px);
			}
			to {
					opacity: 1;
					transform: translateY(0);
			}
	}

	/* Scroll Indicator */
	@keyframes bounce {
			0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
			40% { transform: translateY(-10px); }
			60% { transform: translateY(-5px); }
	}

	.scroll-indicator {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
			animation: bounce 2s infinite;
			color: #666;
			font-size: 1.5rem;
	}

	/* Hero Video Section */
	.hero-video-container {
			display: none;
	}

	/* Mandate Section */
	.mandate-section {
			background-color: #f9f9f9;
			padding: 80px 20px;
	}

	.mandate-content {
			max-width: 1100px;
			margin: 0 auto;
	}

	/* Text Styling */
	.mandate-text h2 {
			font-size: clamp(2rem, 5vw, 3.5rem);
			font-weight: 300;
			color: #1a1a1a;
			margin-bottom: 30px;
	}

	.mandate-text p {
			font-size: 1.05rem;
			line-height: 1.8;
			color: #555;
			margin-bottom: 20px;
			font-weight: 300;
	}

	.mandate-highlight {
			font-weight: 600;
			color: #1a1a1a;
	}

	/* Image Container */
	.mandate-image-placeholder {
			padding: 0;
			border-radius: 10px;
			overflow: hidden;       /* Removes any overflow and keeps radius clean */
			background: none;       /* Remove placeholder gradient */
			border: none;           /* Remove placeholder border */
			aspect-ratio: 4 / 5;    /* Keeps nice portrait shape */
	}

	/* Image Styling */
	.mandate-image-placeholder img {
			width: 100%;
			height: 100%;
			object-fit: cover;      /* Ensures image fills container perfectly */
			display: block;
			border-radius: 10px;
	}

	/* Animations */
	.mandate-image-placeholder.animate {
			animation: slideInRight 0.8s ease-out;
	}

	.mandate-text.animate {
			animation: slideInLeft 0.8s ease-out;
	}
	@keyframes slideInLeft {
			from {
					opacity: 0;
					transform: translateX(-60px);
			}
			to {
					opacity: 1;
					transform: translateX(0);
			}
	}

	@keyframes slideInRight {
			from {
					opacity: 0;
					transform: translateX(60px);
			}
			to {
					opacity: 1;
					transform: translateX(0);
			}
	}

	/* Timeline/Highlights Section */
	.highlights-section {
			background-color: #fff;
			padding: 0 20px 80px 20px;
	}

	.highlights-intro {
			text-align: center;
			margin-bottom: 60px;
	}

	.highlights-intro h2 {
			font-size: clamp(2rem, 5vw, 3.5rem);
			font-weight: 300;
			color: #1a1a1a;
			margin-bottom: 20px;
	}

	.highlights-intro p {
			font-size: 1rem;
			color: #666;
			max-width: 700px;
			margin: 0 auto;
			line-height: 1.8;
	}

	.highlight-card {
			background: #f9f9f9;
			padding: 40px;
			border-radius: 8px;
			margin-bottom: 30px;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			cursor: pointer;
	}

	.highlight-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	}

	.highlight-card-image {
			background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 100%);
			aspect-ratio: 16/9;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
			font-size: 0.9rem;
			color: #999;
	}

	.highlight-card h3 {
			font-size: 1.5rem;
			font-weight: 600;
			color: #1a1a1a;
			margin-bottom: 15px;
	}

	.highlight-card p {
			font-size: 0.95rem;
			color: #666;
			line-height: 1.7;
			margin-bottom: 15px;
			font-weight: 300;
	}

	.highlight-year {
			font-size: 0.85rem;
			color: #999;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-weight: 600;
	}

	/* Explore Section */
	.explore-section {
			background-color: #f9f9f9;
			padding: 80px 20px;
	}

	.explore-intro {
			text-align: center;
			margin-bottom: 60px;
	}

	.explore-intro h2 {
			font-size: clamp(2rem, 5vw, 3.5rem);
			font-weight: 300;
			color: #1a1a1a;
			margin-bottom: 20px;
	}

	.explore-intro p {
			font-size: 1rem;
			color: #666;
			max-width: 700px;
			margin: 0 auto;
			line-height: 1.8;
	}

	.explore-card {
			text-align: center;
			transition: all 0.3s ease;
			cursor: pointer;
	}

	.explore-card-image {
			border-radius: 8px;
			aspect-ratio: 1;
			margin-bottom: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0.9rem;
			color: white;
			font-weight: 600;
			transition: transform 0.3s ease;
	}

	.explore-card:hover .explore-card-image {
			transform: scale(1.05);
	}

	.explore-card h3 {
			font-size: 1.5rem;
			font-weight: 600;
			color: #1a1a1a;
			margin-bottom: 15px;
	}

	.explore-card p {
			font-size: 0.95rem;
			color: #666;
			line-height: 1.7;
			font-weight: 300;
	}

	.card-rose { background: linear-gradient(135deg, #fce4e4 0%, #f9d5d9 100%); }
	.card-amber { background: linear-gradient(135deg, #fef5e7 0%, #fde8c8 100%); }
	.card-blue { background: linear-gradient(135deg, #e8f1f9 0%, #d4e4f7 100%); }
	.card-green { background: linear-gradient(135deg, #e8f5e9 0%, #d4e8d6 100%); }

	/* Footer */
	footer {
			background-color: #1a1a1a;
			color: #999;
			padding: 40px 20px;
			text-align: center;
			font-size: 0.9rem;
			line-height: 1.8;
	}

	footer p {
			margin: 10px 0;
	}

	/* Responsive */
	@media (max-width: 768px) {
			.mandate-section {
					padding: 50px 20px;
			}

			.mandate-image-placeholder {
					margin-top: 40px;
					aspect-ratio: auto; /* Let image adjust on mobile */
			}
	}

	/* Scroll Animation */
	@keyframes fadeInUp {
			from {
					opacity: 0;
					transform: translateY(40px);
			}
			to {
					opacity: 1;
					transform: translateY(0);
			}
	}

	.highlight-card.animate,
	.explore-card.animate {
			animation: fadeInUp 0.6s ease-out forwards;
	}

	.highlight-card {
			opacity: 0;
	}

	.explore-card {
			opacity: 0;
	}


/* ------------------------------------ */
/* ------------------------------------ */
/* Museum-style highlight cards */
.visit-style-card {
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.visit-style-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.15);
	background-color: #fdfdfd;
}

/* Image container */
.visit-style-card .highlight-card-image {
	width: 100%;
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
	position: relative;
	background: #eee;
}

.visit-style-card .highlight-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.visit-style-card:hover .highlight-card-image img {
	transform: scale(1.07) rotate(0.5deg); /* subtle zoom + slight rotation for depth */
}

/* Overlay effect */
.visit-style-card .highlight-card-image::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.0) 60%, rgba(0,0,0,0.15) 100%);
	transition: background 0.4s ease;
}

.visit-style-card:hover .highlight-card-image::after {
	background: linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.2) 100%);
}

/* Year text */
.visit-style-card .highlight-year {
	font-size: 0.85rem;
	font-weight: 600;
	color: #999;
	margin-top: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: color 0.3s ease;
}

.visit-style-card:hover .highlight-year {
	color: #d4a574;
}

/* Title */
.visit-style-card h3 {
	font-size: 1.45rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 10px 0;
	transition: color 0.3s ease;
}

.visit-style-card:hover h3 {
	color: #d4a574;
}

/* Description */
.visit-style-card p {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.6;
	margin-bottom: 15px;
	flex-grow: 1;
}

/* Add subtle "read more" arrow at bottom */
.visit-style-card::after {
	content: '➔';
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-size: 1.2rem;
	color: #d4a574;
	opacity: 0;
	transform: translateX(10px);
	transition: all 0.3s ease;
}

.visit-style-card:hover::after {
	opacity: 1;
	transform: translateX(0);
}

/* Keep existing fadeInUp animation */
.highlight-card.animate {
	animation: fadeInUp 0.6s ease-out forwards;
	opacity: 0;
}

/* FadeInUp animation */
@keyframes fadeInUp {
	from {
			opacity: 0;
			transform: translateY(40px);
	}
	to {
			opacity: 1;
			transform: translateY(0);
	}
}

.explore-card.animate {
	animation: fadeInUp 0.6s ease-out forwards;
	opacity: 0;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover effect */
.explore-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.explore-card img {
	transition: transform 0.4s ease, filter 0.4s ease;
}

.explore-card:hover img {
	transform: scale(1.05);
	filter: brightness(1.05);
}

/* Text overlay on image */
.explore-card .position-absolute {
	font-size: 0.9rem;
}

/* Make carousel controls circular and center them vertically for better UI */
.carousel-control-prev,
.carousel-control-next {
	width: 40px;
	height: 40px;
	background-color: rgba(0,0,0,0.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	
	/* UI Fixes for centering */
	position: absolute;
	top: 50%;
	/* Pulls the control back up by half its height to perfectly center it */
	transform: translateY(-50%); 
}
.carousel-control-prev {
	/* Adjust this value to position the control outside/near the card's edge */
	left: -20px; 
}
.carousel-control-next {
	/* Adjust this value to position the control outside/near the card's edge */
	right: -20px;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
	background-size: 50% 50%;
}

.typing-cursor {
	display: inline-block;
	width: 2px;
	height: 1.2em;
	background-color: transparent;
	color: black;
	animation: blink 0.7s infinite;
}

@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

/* ensures H2 aligns text and cursor cleanly */
.mandate-title {
	display: flex;
	align-items: center;
	white-space: nowrap;
	width: fit-content;
}

#typingText {
	display: inline;
}

.highlights-hero {
	position: relative;
	background-image: url('../images/rizal-hero-image.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed; /* optional parallax effect */
	color: white; /* makes the text visible */
	padding: 100px 20px; /* space around text */
	border-radius: 8px; /* optional for styling */
}

.highlights-hero::before {
	content: "";
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.5); /* overlay for readability */
	z-index: 0;
	border-radius: 8px;
}

.highlights-hero h2,
.highlights-hero p {
	position: relative;
	z-index: 1; /* text sits above overlay */
}

.highlights-intro.highlights-hero {
	width: 100vw;           /* full viewport width */
	margin-left: calc(-50vw + 50%); /* counter container centering */
	padding: 80px 0;  /* remove container padding */
	border-radius: 0;       /* remove rounding if any */
}

/* Timeline/Key Facts */
.reverse-fact-box {
	background: #fff;
	border-right: 4px solid #d4a574; /* moved from left → right */
	padding: 25px;
	margin: 20px 0;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.reverse-fact-box h4 {
	color: #d4a574;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	margin-bottom: 10px;
}

.reverse-fact-box p {
	color: #555;
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 0;
}