html, body {
	margin: 0;
	padding: 0;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-style: normal;
}
html {
	height: 100%;
	scroll-behavior: smooth;
}
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
div.button-wrapper {
	text-align: center;
}
a.button {
	font-family: "Fahkwang", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: 1.75vw;
	color: #304C68;
	background-color: #FCF8DE;
	padding: 1.5vw 1.75vw;
	text-decoration: none;
	border: 1px solid #fff;
	border-radius: 6px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	white-space: nowrap;
	margin: 10px; /* Space between multiple buttons */
	box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* Subtle shadow for depth */
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.1s ease; /* Smooth transitions for hover effects */
}
a.button:hover {
	background-color: #304C68;
	color: #fff;
	transform: translateY(-2px); /* Slight lift effect */
	box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* Reduced shadow for "pressed" look */
}
a.button:active {
	background-color: #fff;
	color: #304C68;
	transform: translateY(0); /* Return to original position */
	box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* Enhanced shadow on hover */
}
h1,h2 {
	font-family: "Fahkwang", sans-serif;
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
}
h1 {
	text-align: center;
	margin: 0 auto;
}			
h3.subtitle {
	font-family: "Fahkwang", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 1.75vw;
	color: #000;
	margin: 2em 12%;
}
.title {
	background-image: radial-gradient(circle farthest-corner at 50% 50%, #0047AB 15.0634765625%, #0047AB 80.2886962890625%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
h1.title {
	font-size: 6vw;
}
h2.title {
	font-size: 4vw;
}
header {
	background-color: #0047AB;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid #fff;
	display: flex; /* --- KEY: Make the header a flex container --- */
	justify-content: space-between; /* --- KEY: Push content to opposite ends --- */
	align-items: center; /* --- KEY: Vertically center items (logo and nav) --- */
}
header, footer {
	flex-shrink: 0; /* Prevents shrinking if content is too large */
}
.logo img {
	display: block;
	margin: 0 auto;
	max-width: 200px;
	margin: 0 40px;
}
nav.top-nav,
nav.loggedin-nav {
	font-size: 105%;
	text-align: center;
	padding: 0;
}
nav.top-nav {
	background-color: #0047AB;
	margin: 20px 0 0;
}
nav.loggedin-nav {
    margin: 0 0;
    padding: 4px 0;
}
nav.top-nav ul,
nav.loggedin-nav ul {
	list-style-type: none; /* Removes default bullet points */
	margin: 0;             /* Removes default margin from ul */
	padding: 0;            /* Removes default padding from ul */
	display: flex;         /* Makes the ul a flex container */
	justify-content: center; /* Centers the menu items horizontally */
	/* Alternatively, for left-aligned: justify-content: flex-start; */
	/* Alternatively, for space between items: justify-content: space-around; */
}
nav.top-nav ul li,
nav.loggedin-nav ul li {
	/* Optional: Add some padding/margin between list items if needed,
	   though usually handled by link padding */
	padding: 0 4px;
}
nav.top-nav ul li a,
nav.loggedin-nav ul li a {
	/*display: block;      Makes the entire link area clickable */
	display: inline-block;
	text-align: center;    /* Centers text within each link */
	padding: 14px 16px;    /* Padding around the text inside each link */
	text-decoration: none; /* Removes default underline from links */
	transition: background-color 0.3s ease; /* Smooth transition for hover effect */
	border-radius: 4px;
}
nav.top-nav ul li a {
	color: #fff;          /* Text color for links */
}
nav.loggedin-nav ul li a {
	color: #000;          /* Text color for links */
}
nav.top-nav ul li a:hover,
nav.loggedin-nav ul li a:hover {
	border-radius: 4px;
}
nav.top-nav ul li a:hover {
	background-color: #fff; /* Darker background on hover */
	color: #000;
}
nav.loggedin-nav ul li a:hover {
	background-color: #000; /* Darker background on hover */
	color: #fff;
}
.submenu {
    border-bottom: 1px #000 solid;
}
.submenu,
.header-right {
    display: flex;         /* Make this a flex container */
    flex-direction: column; /* Stack children (nav and tagline) vertically */
    align-items: flex-end; /* Align children to the right (horizontally) within this container */
    padding: 0 20px;
}
.header-right-top {
    color: #fff; /* Slightly lighter color for secondary text */
    margin: 14px 16px; /* Space between the menu and the tagline */
    text-align: right; /* Ensure text aligns right within its own box */
    height: 1.8em;
    /* If you want it to align with the *right edge of the menu*,
       you might need to adjust padding/margin here to match the menu's right padding. */
}
main {
	flex-grow: 1; /* This makes 'main' take up all available vertical space */
	flex-shrink: 0; /* Prevents 'main' from shrinking below its content */
	flex-basis: auto; /* Default value, ensures proper sizing */
	/* background-image:  linear-gradient(90deg, #304C68 0%, #101921 96.533203125%); */
	padding: 0 0;
}
section {
	background-color: transparent;
	margin: 0 auto;
}
section.welcome {
    padding: 60px 0;
	max-width: none;
	background-image:  linear-gradient(90deg, #fff 0%, #fff 96.533203125%);
}
section p,
section a {
	color: #fff;	
}
section.about-section {
	padding: 40px 10px;

	/* border-top: 1px solid rgba(252, 248, 222, 0.20);  A subtle line below the title */
	background-image:  linear-gradient(90deg, #0047AB 0%, #0047AB 96.533203125%);
}
section.about-section > div {
    display: flex; /* Makes it a flex container */
	align-items: center; /* Vertically centers the content in the columns */
	justify-content: center; /* Horizontally centers the whole section content if it doesn't fill max-width */
	margin: 40px auto; /* Center the section on the page */
	gap: 20px; /* Space between the photo column and the text column */
    max-width: 1200px;
}
/* --- Photo Column (2/3 width) --- */
.photo-column {
	flex: 1; /* Allows this column to take 2 parts of available space */
	min-width: 0; /* Ensures content (image) doesn't overflow */
}
.photo-column img {
	max-width: 100%; /* Ensures image is responsive within its column */
	height: auto; /* Maintains aspect ratio */
	border-radius: 4px;
	border: 1px solid #FCF8DE;
}
/* --- Text Column (1/3 width) --- */
.text-column {
	flex: 1; /* Allows this column to take 1 part of available space */
	min-width: 0; /* Ensures content (text) doesn't overflow */
	padding-left: 10px; /* Small inner padding to separate text from image more */
}
.text-column p {
	font-family: "Fahkwang", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.5vw;
	color: #FCF8DE;
	line-height: 1.6;
	margin-bottom: 1em;
	text-align: left; /* Justify text for better mobile readability, or leave left */
}
section.photo-row {
	/* align-items: flex-end; Aligns items to the top if they have different heights */
	/* You could also use:
	   align-items: center;  // Centers items vertically
	   align-items: stretch; // Stretches items to fill the container height (if not explicitly set)
	*/
	/* This is important! If the row is 100% width, justify-content: center might not be noticeable. */

	/* 40px top/bottom margin, 'auto' left/right margin */

	padding: 10px; /* Optional: padding around the entire row */
	/* background-color: #fff; Optional: background for the container */
	/* border-radius: 8px; Optional: rounded corners for the container */
	/* box-shadow: 0 4px 10px rgba(0,0,0,0.1); Optional: subtle shadow */

	background-image:  linear-gradient(90deg, #fff 0%, #fff 96.533203125%);
}
section.photo-row > div {
    display: flex; /* Makes the container a flex container */
	align-items: stretch;
	justify-content: center; /* Centers items horizontally within the container */
	margin: 40px auto; /* Centers the container itself on the page horizontally */
	flex-wrap: wrap; /* Optional: Allows photos to wrap to next line on smaller screens */
	gap: 20px; /* Adds space between the photos (modern way, replaces margin-right) */
    max-width: 1200px;
}

.photo-row img {
	width: calc(33.333% - 16px); /* Distribute width (100% / 3 photos - some for gap) */
	/* Using calc() accounts for the gap property. 14px = 20px (gap) / 3 * 2 (gaps between 3 items)
	   This specific calculation (20px / 3 * 2) is a bit tricky, but 20px / 3 might be more robust
	   Or, simpler: fixed width or allow flex to manage: */
	/* width: 300px; */ /* Example: Fixed width for each photo */
	/* max-width: 100%; */ /* Ensures photo doesn't overflow its own parent */
	/* height: 200px; Set a fixed height if you want consistent photo heights */
	object-fit: cover; /* Ensures image covers the space without distortion, cropping if needed */
	border-radius: 4px; /* Slightly rounded corners for photos */
	display: block; /* Removes any extra space below images */
	border: 1px solid #FCF8DE;
}
/* --- New Three-Column Text Section --- */
section.testimonials {
	padding: 10px 10px 60px; /* This padding will apply around the title and columns */
	background-image:  linear-gradient(90deg, #fff 0%, #fff 96.533203125%);
}
section.testimonials > div {
	display: flex;
	flex-wrap: wrap; /* --- KEY ADDITION: Allows items to wrap to the next line --- */
	justify-content: space-between; /* Spreads columns evenly */
	align-items: stretch;
	margin: 30px auto;
	gap: 20px; /* Space between the columns (will also apply vertically when wrapped) */
    max-width: 1200px;
}
.testimonials .title {
	width: 100%; /* --- KEY ADDITION: Makes the title span the full width of the flex container --- */
	margin-bottom: 30px; /* Space below the title before the columns start */
	text-align: left; /* Ensures the title starts on the left */
	padding-bottom: 10px; /* Small padding below the title text */
	border-bottom: 1px solid rgba(252, 248, 222, 0.20); /* A subtle line below the title */
}
.text-column-item {
	flex: 1; /* Each column takes an equal share of available space */
	min-width: 0;
	background-color: #0047AB;
	padding: 30px 30px 10px;
	border-radius: 4px;
}
.text-column-item p {
	line-height: 1.6;
	margin-bottom: 1em;
	text-align: left;
	color: #FCF8DE;
}
footer {
	text-align: center;
	font-size: 80%;
	color: #fff;
	padding: 1em 0 0;
	background-color: #0047AB;
	border-top: 1px solid #fff;
}
header a,
footer a {
	color: #fff;
}

/* for the Bootstrap Carousel */
.carousel-wrapper {
    /* Set a max width for the entire slider */
    max-width: 900px; 
    /* Center the slider on the page */
    margin: 0 auto 1.5em;
}
.carousel-item {
    /* Define the specific height for the slide container */
    height: 450px; 
    /* Hides any part of the image that spills outside this height */
    overflow: hidden; 
}
.carousel-item img {
    /* This is the key for cropping! */
    object-fit: cover; 
    /* Ensure the image fills the defined height of the .carousel-item */
    height: 100%;
    /* Keep w-100 to ensure it fills the width */
}

/* for the Star Rating DISPLAY */

/* 1. The main container */
.rating-container {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    top: -2px; /* Increase this (e.g., 2px, 3px) to move the whole unit DOWN */
}

/* 2. The Star Box (Fixed at 80px) */
.star-rating-wrapper {
    position: relative;
    display: inline-flex;
    width: 80px !important; 
    height: 16px;
    flex-shrink: 0;
}

/* 3. The Layers */

.stars-base,
.stars-top {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 80px;
    height: 16px;
}

.stars-base {
    color: #dee2e6;
    z-index: 1;
}

.stars-top {
    /* Width is controlled by PHP inline style (e.g. 74%) */
    overflow: hidden !important; 
    color: #ffc107;
    z-index: 2;
}

/* 4. The SVG - THE MOST IMPORTANT PART */
.star-rating-wrapper svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important; /* Forces star to stay 16px so it can be cut */
    flex: 0 0 16px !important;
    display: block;
    fill: currentColor;
}

/* for the Star Rating INPUT */

.star-rating-input {
    display: flex;
    flex-direction: row-reverse; /* Crucial for the sibling selector logic */
    justify-content: center;
    justify-self: center;
}

/* Hide the ugly radio buttons */
.star-rating-input input {
    display: none;
}

/* Default Star Style (Gray) */

.star-rating-input svg,
.star-rating-input label {
    width: 48px;
    height: 48px;
}

.star-rating-input label {
    cursor: pointer;
    color: #dee2e6; /* Same gray as before */
    transition: color 0.1s ease;
}

.star-rating-input svg {
    fill: currentColor;
    display: block;
}

/* The Magic: Color the clicked star and all stars BEFORE it */
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
    color: #ffc107; /* Same gold as before */
}
        
@media (max-width: 768px) {
	header {
		flex-direction: column; /* --- KEY: Stack items vertically --- */
		justify-content: center; /* Center content vertically when stacked */
		align-items: center; /* --- KEY: Center items horizontally when stacked --- */
	}
	h2 {
		font-size: 5vw;
	}
	h3 {
		font-size: 3vw;
	}
	a.button {
		font-size: 3vw;
	}
	.photo-row-container {
		flex-direction: column;
		align-items: center; /* Center them when stacked */
		max-width: 90%;
	}
	.photo-row-container img {
		width: 100%;
		height: 30vh;
	}
	section.about-section {
		flex-direction: column; /* Stack columns vertically */
		padding: 20px; /* Adjust padding for mobile */
	}
	.photo-column,
	.text-column {
		flex: none; /* Remove flex sizing */
		width: 100%; /* Make them full width when stacked */
		padding: 0; /* Remove inner padding when stacked */
		margin: 0;
		text-align: center;
	}
	.photo-column img {
		margin-bottom: 15px; /* Add space below image when stacked */
	}
	.text-column p {
		font-size: 3vw;
	}
	section.testimonials {
		justify-content: center;
	}
	.text-column-item {
		flex: 1 1 calc(50% - 20px);
		max-width: calc(50% - 20px);
	}
	.testimonials .title {
		text-align: center; /* Center the title on medium screens */
	}
}