/* ===========================

   ClearPath Homepage Styles

   =========================== */



/* CSS Variables */

:root {

	--primary-blue: #3f51b5;

	--light-blue: #5571d9;

	--dark-blue: #283593;

	--accent-blue: #4db8ff;

	--text-dark: #2c3e50;

	--text-light: #ffffff;

	--bg-light: #f8f9fa;

	--bg-dark: #1a1d3a;

	--border-light: #e0e0e0;

	--animation-duration: 0.6s;

	--animation-delay: 0.1s;

}



/* Reset & Base Styles */

* {

	margin: 0;

	padding: 0;

	box-sizing: border-box;

}



html {

	scroll-behavior: smooth;

}



body {

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

	color: var(--text-dark);

	line-height: 1.6;

	background-color: #ffffff;

}



img {

	max-width: 100%;

	height: auto;

	display: block;

}



/* ===========================

   Header & Navigation

   =========================== */



.site-header {

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	z-index: 1000;

	width: 100%;

	background: transparent;

	transition: 250ms all;

}

.site-header.is-scrolled {

	background: #f0f0f0;

}



.header-container {

	display: flex;

	align-items: center;

	justify-content: space-between;

	max-width: 1550px;

	margin: 0 auto;

	padding: 1rem 15px;

	gap: 2rem;

}



.site-logo {

	flex-shrink: 0;

}



.site-logo img {

	height: 50px;

	width: auto;

}



.site-logo a {

	color: var(--primary-blue);

	font-weight: 700;

	font-size: 1.5rem;

	text-decoration: none;

	letter-spacing: -0.5px;

}



.site-navigation {

	flex: 1;

	display: flex;

	align-items: center;

	justify-content: center;

}

@media(max-width: 1024px) {

	.site-navigation {

		max-width: 34px;	

	}

}



.menu-toggle {

	display: none;

	background: none;

	border: none;

	cursor: pointer;

	flex-direction: column;

	align-items: center;

	gap: 0.5rem;

}



.hamburger-icon {

	display: flex;

	flex-direction: column;

	gap: 6px;

}



.hamburger-icon span {

	width: 24px;

	height: 2px;

	background-color: var(--primary-blue);

	transition: all 0.3s ease;

}



#primary-menu {

	display: flex;

	list-style: none;

	gap: 2rem;

	margin: 0;

	padding: 0;

}



#primary-menu a {

	color: #1e1a1c;

	text-decoration: none;

	font-weight: 500;

	font-size: 0.95rem;

	text-transform: uppercase;

	letter-spacing: 0.5px;

	position: relative;

	transition: color 0.3s ease;

}



#primary-menu a::after {

	content: '';

	position: absolute;

	bottom: -5px;

	left: 0;

	width: 0;

	height: 2px;

	background-color: #12132c;

	transition: width 0.3s ease;

}



#primary-menu a:hover,

#primary-menu li.current_page_item >a{

	color: #12132c;

}

#primary-menu li ul li a:hover,

#primary-menu li.current_page_item ul >a{

	color: white;

}



#primary-menu a:hover::after,

#primary-menu li.current_page_item >a::after {

	width: 100%;

}



.header-social {

	display: flex;

	gap: 1.5rem;

	flex-shrink: 0;

}



.social-icon {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 36px;

	height: 36px;

	border-radius: 50%;

	background-color: var(--primary-blue);

	color: white;

	text-decoration: none;

	transition: all 0.3s ease;

	font-size: 1rem;

}



.social-icon:hover {

	background-color: var(--light-blue);

	transform: translateY(-3px);

	box-shadow: 0 5px 15px rgba(63, 81, 181, 0.3);

}





/* ===========================

   Responsive Design

   =========================== */



@media(max-width: 1650px) {

	.header-container {

		padding-right: 80px;

		padding-left: 30px;

	}

}



@media (max-width: 1024px) {

	.header-container {

		padding: 1rem;

		gap: 1rem;

	}

	.menu-toggle {

		display: flex;

	}

	.primary-menu-container {

		display: none;

		position: absolute;

		top: 100%;

		left: 0;

		right: 0;

		background-color: white;

		border-bottom: 1px solid var(--border-light);

		padding: 1rem;

		flex-direction: column;

		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

	}

	.primary-menu-container.active {

		display: flex;

	}

	#primary-menu {

		flex-direction: column;

		gap: 1rem;

	}

	#primary-menu a {

		padding: 0.75rem;

		display: block;

	}

}