/* ------------------------------ */
/* 1. Base & Global Styles        */
/* ------------------------------ */
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: #ffffff;
	color: #0E2C47;
}
section {
	padding: 80px 20px;
}
a {
	color: #1C4E6E;
}
h2 {
	font-size: 34px;
	font-weight: 700;
}

/* ------------------------------ */
/* 2. Layout & Utility Classes*/
/* ------------------------------ */
.section-container {
	max-width: 1200px;
	margin: 0 auto;
}
.section-centered-content {
	text-align: center;
}
.tagline {
	/* Typography */
	font-size: 22px;
	font-weight: 500;
	line-height: 1.6;

	/* Box Model */
	margin-top: 25px;
}
.callout {
	/* Typography */
	font-size: 24px;
	font-weight: 600;
	color: #1C4E6E;
	text-align: center;

	/* Box Model */
	margin: 40px auto;
}

/* ------------------------------ */
/* 3. Component Styles*/
/* ------------------------------ */

/* Card (Used for Services) */
.card {
	/* Layout & Box Model (Now handles sizing and flexibility) */
	flex: 1 1 300px;
	max-width: 300px;
	padding: 30px;
	text-align: center;

	/* Visual */
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.card h3 {
	/* Typography */
	font-size: 20px;
	color: #0E2C47;

	/* Box Model */
	margin-bottom: 10px;
}

/* Client Columns */
.client-columns-container {
	/* Layout */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}
.client-col {
	/* Layout */
	flex: 1 1 280px;
	min-width: 250px;
}
.client-col h4 {
	/* Visual */
	border-bottom: 2px solid #0E2C47;

	/* Box Model */
	padding-bottom: 5px;
}
.client-col ul {
	/* List */
	list-style: none;

	/* Box Model */
	padding-left: 0;
	margin-top: 10px;
}

/* ------------------------------ */
/* 4. Section Specific Styles */
/* ------------------------------ */

/* Hero Section */
.hero-section {
	background: linear-gradient(135deg, #0E2C47, #1C4E6E);
	color: white;
	text-align: center;
}
.hero-logo {
	max-width: 300px;
	margin-bottom: 30px;
}
.hero-title {
	font-size: 48px;
	font-weight: 700;
}
.hero-description {
	font-size: 20px;
	max-width: 750px;
	line-height: 1.6;
	margin: 20px auto;
}

/* Callout Section */
.callout-section {
	background-color: #F9FBFD;
}

/* Services Section */
.services-section {
	background-color: #E8EDF1;
}
.service-cards-container {
	/* Layout */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;

	/* Box Model */
	margin-top: 40px;
}

/* About Section */
.about-section {
	background-color: #F4F6FA;
}
.about-description {
	font-size: 18px;
	line-height: 1.8;
	max-width: 800px;
	margin: 20px auto;
}

/* Clients Section */
.clients-header {
	text-align: center;
	margin-bottom: 50px;
}
.clients-description {
	font-size: 18px;
	line-height: 1.7;
	max-width: 800px;
	margin: 20px auto 0;
}

/* Contact Section */
.contact-section {
	background-color: #0E2C47;
	color: white;
}
.contact-details {
	font-size: 18px;
	line-height: 1.6;
}
.contact-link, .contact-link:link, .contact-link:visited {
	color: #ffffff;
	text-decoration: underline;
}
.contact-link:hover {
	color: #ffffff;
	text-decoration: none;
}