:root {
	/* Colors */
	--color-primary: #0A3B7E;
	/* Deep Blue from design */
	--color-primary-dark: #062a5c;
	--color-accent: #FFC80F;
	/* Yellow from design */
	--color-accent-hover: #e5b300;
	--color-text-dark: #1a1a1a;
	--color-text-light: #555555;
	--color-white: #ffffff;
	--color-gray-light: #f4f6f9;
	--color-gray-border: #e0e0e0;

	/* Typography */
	--font-main: 'Inter', sans-serif;

	/* Spacing */
	--container-width: 1200px;
	--header-height: 80px;
}

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

body {
	font-family: var(--font-main);
	color: var(--color-text-dark);
	line-height: 1.6;
	background-color: var(--color-white);
	overflow-x: hidden;
}

a {
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease;
}

ul {
	list-style: none;
}

img {
	max-width: 100%;
	display: block;
}

/* Utilities */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

.btn {
	display: inline-block;
	padding: 12px 30px;
	border-radius: 50px;
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	transition: transform 0.2s, background-color 0.3s;
}

.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.btn-primary:hover {
	background-color: var(--color-primary-dark);
	transform: translateY(-2px);
}

.btn-accent {
	background-color: var(--color-accent);
	color: var(--color-primary);
}

.btn-accent:hover {
	background-color: var(--color-accent-hover);
	transform: translateY(-2px);
}

.section-padding {
	padding: 30px 0;
}

.section-padding-1 {
	padding: 100px 0;
}



/* Global Sections */
section {
	position: relative;
	width: 100%;
}

/* Header */
.header {
	background-color: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-container {
	height: var(--header-height);
	display: flex;
	align-items: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-toggle {
	display: none;
}

.logo a {
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	gap: 10px;
}

.img-icon {
	width: 32px;
	height: 32px;
}

.logo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	color: #fff;
	width: 32px;
	height: 32px;
	/* Fixed height for icon */
	border-radius: 6px;
	font-size: 0.9rem;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav-menu ul {
	display: flex;
	gap: 30px;
}

.nav-menu a {
	font-weight: 500;
	color: var(--color-text-dark);
	font-size: 0.95rem;
}

.nav-menu a:hover {
	color: var(--color-accent-hover);
}

/* Hero Section */
.hero {
	background: linear-gradient(135deg, #e0f2ff 0%, #ffffff 100%);
	padding: 120px 0 150px;
	text-align: center;
}

.hero h1 {
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--color-primary);
	margin-bottom: 20px;
}

.hero p {
	max-width: 700px;
	margin: 0 auto 40px;
	font-size: 1.1rem;
	color: var(--color-primary);
}

.hero-buttons {
	display: flex;
	gap: 20px;
	justify-content: center;
}

/* Stats Header */
.stats-carousel {
	background: #fff;
	padding-top: 60px;
	border-bottom: 1px solid #eee;
}

/* Stats Carousel */
.stats-carousel {
	position: relative;
	z-index: 10;
	margin-top: -145px;
	background: transparent;
	/* Ensure container doesn't block if not needed, but card has bg? */
}

.stats-carousel .nav-arrow {
	margin-top: 55px;
}

.stats-carousel .stat-info {
	margin-top: 60px;
}

.stats-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 30px;
}

.nav-arrow {
	background: none;
	border: none;
	color: var(--color-primary);
	font-size: 1.2rem;
	cursor: pointer;
	padding: 10px;
}

.stat-card {
	display: none;
}

.stat-card.active {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 auto;
	animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.stat-image-placeholder {
	width: 300px;
	/* Increased from 200px */
	height: 200px;
	/* Increased from 100px */
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ccc;
	font-weight: bold;
	border-radius: 8px;
}

.stat-image-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.stat-info h2 {
	font-size: 2rem;
	color: var(--color-primary);
	font-weight: 800;
	line-height: 1;
}

.stat-info p {
	color: var(--color-text-light);
	font-size: 0.9rem;
	margin-top: 5px;
}

.header-btn .btn {
	border-radius: 14px;
	color: var(--color-accent-hover);
}

/* Award Winning Section */
.award-winning {
	background-color: var(--color-primary);
	color: #fff;
	/* Changed from 0 to add spacing */
}

.award-winning .grid-2-col {
	align-items: start;
}

.grid-2-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	/* Align center vertically */
	gap: 60px;
	/* Add gap between text and image */
}

.award-text {
	padding: 0;
	margin-top: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.award-text h2 {
	font-size: 4rem;
	line-height: 0.9;
	font-weight: 800;
	margin-bottom: 20px;
	text-transform: uppercase;
}


/* Outline text effect attempt */
.award-text h2 span.outline,
.about-text h2 span.outline {
	-webkit-text-stroke: 2px #fff;
	color: var(--color-primary);
	/* Fill with background color for cleaner look */
	-webkit-text-fill-color: var(--color-primary);
	paint-order: stroke fill;
	/* Ensures stroke doesn't get eaten by fill */
}


.about-text h2 span.outline {
	font-size: 6rem;
}

.contact-info h2 span.outline {
	-webkit-text-stroke: 2px #0A3B7E;
	color: #f4f6f9;
	/* Fill with background color for cleaner look */
	-webkit-text-fill-color: #f4f6f9;
	paint-order: stroke fill;
	/* Ensures stroke doesn't get eaten by fill */
}

.award-text p {
	font-size: 1.1rem;
	opacity: 0.9;
	max-width: 400px;
}

.award-image {
	background-color: #fff;
	/* White background for the card */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 400px;
	/* Fixed height for portrait aspect */
	width: 100%;
	/* border-radius: 20px; */
	/* Match services */
	overflow: hidden;
	/* Ensure content stays in radius */
	position: relative;
	z-index: 10;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	border: 10px solid #fff;
}

.award-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 993px) {
	.award-image {
		transform: translateY(100px);
		/* offset the layout flow */
	}
}

.image-placeholder-large,
.image-placeholder-tall {
	width: 100%;
	height: 100%;
	background: #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-weight: bold;
}

.image-placeholder-tall img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* About Image Overlay on Desktop */
@media (min-width: 993px) {
	.about-image {
		transform: translateY(28px);
		z-index: 2;
		position: relative;
	}
}

/* Services */
.services {
	background-color: #fcfcfc;
}

.services .section-subtitle {
	max-width: 600px;
	margin: 0px 0px 60px 0px;
}

.section-title {
	font-size: 2rem;
	color: var(--color-primary);
	font-weight: 800;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.section-subtitle {
	margin: 0 auto 60px;
	color: var(--color-text-light);
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.service-card {
	background: #fff;
	border-radius: 20px;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
	position: relative;
	overflow: hidden;
	transition: transform 0.3s;
}

.service-card:hover {
	transform: translateY(-10px);
}

.card-image {
	height: 250px;
	background: #eee;
	margin: -30px -30px 20px -30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-weight: bold;
}

.card-icon {
	width: 50px;
	height: 50px;
	background: var(--color-primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	position: relative;
	margin-top: -45px;
	/* Pull up to overlap image */
	border: 4px solid #fff;
}

.card-icon img {
	width: 60%;
	height: auto;
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-card h3 {
	margin-bottom: 15px;
	color: var(--color-primary);
	font-size: 1.2rem;
	font-weight: 700;
}

.service-card ul li {
	font-size: 0.9rem;
	color: var(--color-text-light);
	margin-bottom: 8px;
	position: relative;
	padding-left: 15px;
}

.service-card ul li::before {
	content: "•";
	color: var(--color-accent);
	position: absolute;
	left: 0;
}

.stories-carousel {
	display: flex;
	align-items: flex-end;
	/* Align cards to bottom */
	justify-content: center;
	gap: 30px;
	margin-top: 40px;
}

.stories-carousel .nav-arrow {
	align-self: center;
	/* Keep arrows centered vertically */
}

.stories-carousel .nav-arrow.left {
	order: 0;
}

.stories-carousel .nav-arrow.right {
	order: 4;
	/* Place after cards 1, 2, 3 */
}

.story-card {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.story-card.prev,
.story-card.next {
	width: 300px;
	/* Slightly wider to fit text */
	height: auto;
	/* Let content dictate height */
	opacity: 0.5;
	transform: scale(0.9);
}

.story-card.active {
	width: 400px;
	height: auto;
	transform: scale(1.05);
	z-index: 2;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	border-bottom: 5px solid var(--color-primary);
}

.story-image {
	height: 200px;
	/* Fixed height for image part */
	background: #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-weight: bold;
}

.story-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Remove story-image-large as we standardized to story-image */

.story-content {
	padding: 25px;
	text-align: center;
	display: none;
	/* Hide by default */
}

.story-card.active .story-content {
	display: block;
	/* Show only when active */
}

.story-content h3 {
	color: var(--color-primary);
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.story-content p {
	font-size: 0.9rem;
	color: var(--color-text-light);
}

/* Awards Icons */
.awards-grid {
	display: flex;
	justify-content: center;
	gap: 80px;
	margin-top: 50px;
	text-align: center;
}

.award-circle {
	width: 120px;
	height: 120px;
	background: #eee;
	border-radius: 50%;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	font-weight: bold;
	overflow: hidden;
}

.award-circle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.award-item h3 {
	color: var(--color-primary);
	margin-bottom: 5px;
}

.about-section-layer {
	background-color: var(--color-primary);
	height: 100px;
}

/* About Section */
.about-section {
	background: linear-gradient(90deg, #f4f6f9 50%, var(--color-primary) 50%);
	color: #fff;
	/* Ensures consistent padding */
}

/* Ensure mobile stacking handles gradient gracefully or resets it */
@media (max-width: 992px) {
	.about-section {
		background: var(--color-primary);
		/* Or keep split? Usually stack means full width blocks */
		background: linear-gradient(180deg, #f4f6f9 0%, #f4f6f9 50%, var(--color-primary) 50%, var(--color-primary) 100%);
		/* optional: top half light, bottom dark if image is top */
		/* Let's stick to simple stacking for safety first, or user request implies desktop split. I'll default to desktop split logic on desktop media query if needed, but linear gradient 90 works. On mobile, 90deg gradient looks bad if content stacks. */
	}
}

.about-text {
	/* Removed background-color as parent handles it */
	padding: 0 0 30px 40px;
	/* Add left padding for spacing from split */
}

.about-text h2 {
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 30px;
	line-height: 50px;
}

.about-text .outline-i {
	font-style: italic;
	margin-bottom: 15px;
}

.about-text p {
	font-size: 1.1rem;
	margin-bottom: 30px;
	opacity: 0.9;
}

.about-list li {
	font-size: 1.1rem;
	padding-left: 20px;
	position: relative;
	opacity: 0.9;
}

.about-list li::before {
	content: "•";
	color: #fff;
	position: absolute;
	left: 0;
	font-weight: bold;
}

.about-image {
	min-height: 450px;
}

/* Contact */
.contact-section {
	background: #f4f6f9;
}

.contact-layout {
	display: flex;
	gap: 50px;
	align-items: flex-start;
}

.contact-info {
	flex: 1;
}

.contact-info h2 {
	font-size: 3rem;
	color: var(--color-primary);
	margin-bottom: 20px;
}

.contact-details p {
	margin: 15px 0;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	gap: 15px;
	color: var(--color-text-dark);
}

.contact-form-wrapper {
	flex: 1;
	background: #fff;
	padding: 40px;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.contact-form-wrapper h3 {
	text-align: center;
	color: var(--color-primary);
	margin-bottom: 30px;
	font-weight: 800;
	letter-spacing: 2px;
}

/* New Form Styles */
.form {
	display: flex;
	flex-direction: column;
}

.grid {
	display: grid;
	gap: 20px;
}

.grid--2 {
	grid-template-columns: 1fr 1fr;
}

.form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 20px;
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--color-primary);
}

.form input,
.form textarea {
	width: 100%;
	padding: 15px;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #f9f9f9;
	font-family: var(--font-main);
	transition: box-shadow 0.3s, border-color 0.3s;
}

.form input:focus,
.form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(10, 59, 126, 0.1);
	background: #fff;
}

.btn--gradient {
	background: linear-gradient(135deg, var(--color-primary) 0%, #062a5c 100%);
	color: #fff;
	padding: 15px;
	border: none;
	border-radius: 50px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.3s;
	width: 100%;
	margin-top: 10px;
}

.btn--gradient:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(10, 59, 126, 0.3);
}

.xs.muted {
	font-size: 0.75rem;
	color: #999;
	text-align: center;
	margin-top: 15px;
}

@media (max-width: 768px) {
	.grid--2 {
		grid-template-columns: 1fr;
	}
}

/* Footer */
.footer {
	background: #fff;
	padding: 50px 0;
	text-align: center;
	border-top: 1px solid #eee;
}

.footer-logo {
	color: var(--color-primary);
	font-weight: 800;
	font-size: 1.5rem;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.footer-links a {
	color: var(--color-primary);
	margin: 0 10px;
	font-weight: 600;
	font-size: 0.9rem;
}

.copyright {
	margin-top: 20px;
	color: #999;
	font-size: 0.8rem;
}

/* Responsive */
@media (max-width: 992px) {



	.grid-2-col,
	.services-grid,
	.contact-layout {
		grid-template-columns: 1fr;
		display: flex;
		flex-direction: column;
	}

	.contact-form-wrapper {
		width: 100%;
	}

	.header-container {
		padding: 0 20px;
	}

	.mobile-toggle {
		display: block;
		background: none;
		border: none;
		font-size: 1.5rem;
		color: var(--color-primary);
		cursor: pointer;
	}

	.nav-menu {
		display: none;
		position: absolute;
		top: var(--header-height);
		left: 0;
		width: 100%;
		background: #fff;
		padding: 20px;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}

	.nav-menu.active {
		display: flex;
	}

	.nav-menu ul {
		flex-direction: column;
		gap: 20px;
		text-align: center;
	}

	.contact-section {
		background: #f4f6f9;
		padding-bottom: 40px;
	}

	.about-image {
		min-height: 300px;
	}

	.nav-menu {
		display: none;
		/* simple hide for now */
	}

	.contact-layout {
		gap: 30px;
	}

	.award-text,
	.about-text {
		padding: 40px 20px;
	}

	.hero h1 {
		font-size: 2.5rem;
	}

	.stories-carousel {
		flex-direction: row;
		align-items: center;
		width: 100%;
		gap: 15px;
	}

	.story-card {
		display: none !important;
	}

	.story-card.active {
		display: block !important;
		flex: 1;
		/* Take remaining space */
		width: auto;
		/* Let flex handle it */
		max-width: none;
		/* remove desktop restriction if needed, or keep max-width if nice */
		margin: 0;
	}

	.story-card.active .story-content {
		display: block;
	}

	/* Fix Stats Carousel Mobile */
	.stat-card.active {
		flex-direction: column;
		text-align: center;
	}

	.stat-image-placeholder {
		max-width: 100%;
		height: auto;
		min-height: 150px;
	}

	.awards-grid {
		flex-direction: column;
		gap: 30px;
	}
}