/* -----------------------------------------------------------
   RESET + HEADER + FOOTER (Updated to New Brand Theme)
----------------------------------------------------------- */

/* Reset */
:root {
	--primary: #164485;
	--secondary: #285272;
	--text: #5f5f5f;
	--text-soft: rgba(95, 95, 95, 0.7);
	--banner-bg1: #f3ecff;
	--banner-bg2: #efe6ff;
	--banner-bg3: #f7f2ff;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Lato", sans-serif;
	font-optical-sizing: auto;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

body {
	font-family: Arial, sans-serif;
	background: #cef3ff75;
	color: #5f5f5f;
	line-height: 1.6;
}

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

a {
	text-decoration: none;
	color: inherit;
}

p,
li {
	font-size: 14px;
}

/* -----------------------------------------------------------
   FIXED HEADER (Purple Theme)
----------------------------------------------------------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;

	background: #f3edff;
	/* soft lavender */
	border-bottom: 2px solid #e2d5ff;

	padding: 12px 0;
	box-shadow: 0 2px 8px rgba(70, 43, 168, 0.08);
}

/* Header wrapper */
.header-flex {
	width: 92%;
	max-width: 1200px;
	margin: auto;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Logo */
.logo {
	padding: 5px;
}

.logo img {
	width: 190px;
	height: auto;
}


/* ----------------------- Desktop Navigation ----------------------- */

.main-nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.main-nav a {
	font-weight: 600;
	color: #164485;
	position: relative;
	padding-bottom: 3px;
	transition: color 0.3s ease;
}

/* Hover color */
.main-nav a:hover {
	color: #285272;
}

/* Underline animation */


.main-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;

	width: 0%;
	height: 2px;
	background: #21659a;
	transition: width 0.3s ease;
}

.main-nav a:hover::after {
	width: 100%;
}

/* ----------------------- Mobile Hamburger ----------------------- */

.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 32px;
	cursor: pointer;
	color: #164485;
}


/* -----------------------------------------------------------
   RESPONSIVE NAVIGATION (Full-width Slide Menu)
----------------------------------------------------------- */
@media (max-width: 820px) {


	.menu-toggle {
		display: block;
	}

	.main-nav {
		display: flex;
		flex-direction: column;

		width: 100%;
		position: absolute;
		top: 90px;
		left: 0;
		right: 0;

		background: #c3d9d8;
		border-bottom: 2px solid #899aa7;

		max-height: 0;
		opacity: 0;
		overflow: hidden;
		padding: 0 18px;
		gap: 10px;
		transition: all 0.28s ease-in-out;
	}

	/* OPEN */
	.main-nav.open {
		max-height: 420px;
		opacity: 1;
		padding: 14px 18px;
		z-index: 9;
	}

	/* Items */
	.main-nav a {
		width: 100%;
		padding: 8px 0;
		margin: 4px 0;

		font-size: 15px;
		font-weight: 600;
		border-bottom: 1px solid #61a29b;

		color: #164485;
	}

	.main-nav a:hover {
		background: #efe6ff;
	}

	.main-nav a:last-child {
		border-bottom: none;
	}
}

/* ============================================
   BANNER
============================================ */
.banner {
	text-align: center;
	padding: 120px 20px;
	background-image: url('../images/banner.png');
	background-position: center bottom;
	color: #fff;
}


.banner h1 {
	font-size: 42px;
	font-weight: 700;
}

.banner p {
	max-width: 700px;
	margin: 2px auto 0;
	font-size: 16px;
	font-weight: 600;
}

@media (max-width: 820px) {
	.banner {
		background-position: 34% 92%;

	}

}

/* -----------------------------------------------------------
   FOOTER
----------------------------------------------------------- */

.site-footer {
	width: 100%;
	background: #8ebcd52e;
	border-top: 2px solid #bbbbbb26;

	text-align: center;
	padding: 14px 0;

	color: var(--primary);
	font-weight: 600;
	font-size: 14px;
	margin-top: 60px;
}

.site-footer a {
	color: #7FB6E3;
	font-weight: 700;
}

.site-footer a:hover {
	color: #285272;
}