/*
Theme Name: CGI Global
Theme URI: https://silomedia.co.uk
Author: Silomedia
Author URI: https://silomedia.co.uk
Description: Custom theme for CGI Global based on ACF Flexible Content.
Version: 2025

*/

:root {
	--header-height: 80px;
	--header-height-shrunk: 60px;

	/* Backgrounds */
	--light-bg: #f8f9fa;
	--dark-bg: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
	--grey-bg: #e9ecef;
	--black-bg: #000;

	/* Colours */
	--primary: #004bd2;

	--yellow: #ffe442;
	--light-blue: #71f8fe;
	--orange: #ff8601;

	/* Text colors */
	--light-text: #fff;
	--dark-text: #333;

	/* Font stacks */
	--font-base: 'Inter', sans-serif;
	--font-heading: 'Inter', sans-serif;

	font-size: 20px;

	@media(max-width: 1500px) {
		font-size: 19px;
	}

	@media(max-width: 1000px) {
		font-size: 18px;
	}

	@media(max-width: 800px) {
		font-size: 17px;
	}

	@media(max-width: 600px) {
		font-size: 16px;
	}
}

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

body {
	font: 1rem/1.6 var(--font-base);
	color: var(--dark-text);
	overflow-x: hidden;
}

/* Generic Heading Styles */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 800;
	color: var(--primary);
	line-height: 1.3;
	margin: 0 0 1.5rem 0;
}

h1 {
	font-size: 3.5rem;
	margin-bottom: 2rem;

	@media (max-width: 1024px) {
		font-size: 3rem;
	}

	@media (max-width: 768px) {
		font-size: 2.5rem;
		margin-bottom: 1.5rem;
	}

	@media (max-width: 480px) {
		font-size: 2rem;
		margin-bottom: 1.25rem;
	}
}

h2:not(.services-title):not(.footer-title):not(.testimonials-title):not(.cta-title):not(.team-title):not(.feature-boxes-title) {
	font-size: 2.25rem;
	margin-bottom: 1.25rem;

	@media (max-width: 768px) {
		font-size: 1.875rem;
		margin-bottom: 1rem;
	}

	@media (max-width: 480px) {
		font-size: 1.625rem;
		margin-bottom: 0.875rem;
	}
}

h3 {
	font-size: 1.75rem;
	margin-bottom: 1.25rem;

	@media (max-width: 768px) {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}

	@media (max-width: 480px) {
		font-size: 1.375rem;
		margin-bottom: 0.875rem;
	}
}

h4 {
	font-size: 1.375rem;
	margin-bottom: 1rem;

	@media (max-width: 768px) {
		font-size: 1.25rem;
		margin-bottom: 0.875rem;
	}

	@media (max-width: 480px) {
		font-size: 1.125rem;
		margin-bottom: 0.75rem;
	}
}

h5 {
	font-size: 1.125rem;
	margin-bottom: 0.875rem;

	@media (max-width: 768px) {
		font-size: 1rem;
		margin-bottom: 0.75rem;
	}

	@media (max-width: 480px) {
		font-size: 0.9rem;
		margin-bottom: 0.625rem;
	}
}

h6 {
	font-size: 1rem;
	margin-bottom: 0.75rem;

	@media (max-width: 768px) {
		font-size: 0.9rem;
		margin-bottom: 0.625rem;
	}

	@media (max-width: 480px) {
		font-size: 0.825rem;
		margin-bottom: 0.5rem;
	}
}

a {
	color: inherit;
	text-decoration: none;
	font-family: var(--font-base);
}

/* Global link styles for content */
p a,
ul a,
ol a,
li a,
td a,
th a {
	color: var(--primary);
	text-decoration: underline;
	transition: all 0.2s ease;

	&:hover {
		color: var(--primary);
		text-decoration: none;
	}
}

/* Links in headings should not have underlines by default */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
	text-decoration: none;

	&:hover {
		color: var(--primary);
	}
}

p.lead {
	font-size: 1.2rem !important;
	line-height: 1.6;
	font-weight: 400;
	margin-bottom: 1.5rem;
	color: inherit;
	text-wrap: pretty;

	@media (max-width: 768px) {
		font-size: 1.125rem;
		margin-bottom: 1.25rem;
	}

	@media (max-width: 480px) {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
}

/* Responsive Table Styles */
table {
	width: 100%;
	border-collapse: collapse;
	margin: 2rem 0;
	background: white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	border-radius: 8px;
}

table thead {
	background: var(--primary);
	color: white;
}

table thead th {
	padding: 1rem;
	text-align: left;
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

table tbody tr {
	border-bottom: 1px solid #e9ecef;
	transition: background-color 0.2s ease;
}

table tbody tr:nth-child(even) {
	background-color: #f8f9fa;
}

table tbody tr:hover {
	background-color: #e3f2fd;
}

table tbody td {
	padding: 1rem;
	color: var(--dark-text);
	font-size: 0.95rem;
	vertical-align: middle;
}

table tbody td:first-child {
	font-weight: 500;
}

/* Responsive table behavior */
@media (max-width: 768px) {
	table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		margin: 1.5rem 0;
	}

	table thead th,
	table tbody td {
		padding: 0.75rem;
		font-size: 0.875rem;
	}
}

@media (max-width: 480px) {
	/* Stack table on very small screens */
	table,
	table thead,
	table tbody,
	table th,
	table td,
	table tr {
		display: block;
	}

	table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	table tbody tr {
		margin-bottom: 1rem;
		border: 1px solid #ddd;
		border-radius: 8px;
		overflow: hidden;
	}

	table tbody tr:hover {
		background-color: white;
	}

	table tbody td {
		border: none;
		position: relative;
		padding-left: 50%;
		text-align: left;
		white-space: normal;
	}

	table tbody td::before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		width: 45%;
		padding-left: 1rem;
		font-weight: 600;
		color: var(--primary);
	}
}

/* Utility Container */
.container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Wide Container for certain blocks */
.container-wide {
	max-width: 1800px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Responsive Video Embed Container */
.embed-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	width: 100%;
	background: #000;

	iframe,
	object,
	embed,
	video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
}

/* Button System */
.button {
	display: inline-block;
	padding: 0.875rem 2.5rem;
	border-radius: 50px;
	border: 2px solid var(--primary);
	background: var(--primary);
	color: white;
	text-decoration: none;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;

	@media (max-width: 768px) {
		padding: 0.75rem 2rem;
		font-size: 0.9rem;
	}

	@media (max-width: 480px) {
		padding: 0.75rem 1.75rem;
		font-size: 0.875rem;
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.4s ease;
	}

	&:hover {
		transform: translateY(-2px);
		background: transparent;
		color: var(--primary);
		box-shadow: 0 8px 20px rgba(0, 75, 210, 0.3);

		&::before {
			left: 100%;
		}
	}

	&:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}
}

/* Button Modifiers */
.button-orange {
	background: var(--orange);
	border-color: var(--orange);
	color: white;

	&:hover {
		background: transparent;
		color: var(--orange);
		box-shadow: 0 8px 20px rgba(255, 134, 1, 0.3);
	}

	&:focus-visible {
		outline-color: var(--orange);
	}
}

.button-yellow {
	background: var(--yellow);
	border-color: var(--yellow);
	color: var(--primary);

	&:hover {
		background: transparent;
		color: var(--yellow);
		box-shadow: 0 8px 20px rgba(255, 228, 66, 0.3);
	}

	&:focus-visible {
		outline-color: var(--yellow);
	}
}

.button-light-blue {
	background: var(--light-blue);
	border-color: var(--light-blue);
	color: var(--primary);

	&:hover {
		background: transparent;
		color: var(--light-blue);
		box-shadow: 0 8px 20px rgba(113, 248, 254, 0.3);
	}

	&:focus-visible {
		outline-color: var(--light-blue);
	}
}

/* Legacy button classes for backward compatibility */
.cta-button {
	display: inline-block;
	padding: 0.875rem 2.5rem;
	border-radius: 50px;
	border: 2px solid var(--primary);
	background: var(--primary);
	color: white;
	text-decoration: none;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.4s ease;
	}

	&:hover {
		transform: translateY(-2px);
		background: transparent;
		color: var(--primary);
		box-shadow: 0 8px 20px rgba(0, 75, 210, 0.3);

		&::before {
			left: 100%;
		}
	}

	&:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}
}

.footer-cta {
	display: inline-block;
	padding: 0.875rem 2.5rem;
	border-radius: 50px;
	border: 2px solid var(--primary);
	background: var(--primary);
	color: white;
	text-decoration: none;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.4s ease;
	}

	&:hover {
		transform: translateY(-2px);
		background: transparent;
		color: var(--primary);
		box-shadow: 0 8px 20px rgba(0, 75, 210, 0.3);

		&::before {
			left: 100%;
		}
	}

	&:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}
}

.cta-block-button {
	display: inline-block;
	padding: 0.875rem 2.5rem;
	border-radius: 50px;
	border: 2px solid white;
	background: white;
	color: var(--primary);
	text-decoration: none;
	font-family: var(--font-family);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.4s ease;
	}

	&:hover {
		transform: translateY(-2px);
		background: transparent;
		color: white;
		box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);

		&::before {
			left: 100%;
		}
	}

	&:focus-visible {
		outline: 2px solid white;
		outline-offset: 2px;
	}
}

/* Header */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	padding: 1rem 0;
	background: transparent;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	&.scrolled {
		background: rgba(0, 75, 210, 0.95);
		backdrop-filter: blur(12px);
		padding: 0.75rem 0;

		.header-logo img {
			height: 65px;

			@media (max-width: 1240px) {
				height: 50px;
			}
		}
	}

	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;

		@media (max-width: 1240px) {
			padding: 0 1rem;
		}
	}

	.header-logo {
		flex-shrink: 0;
		z-index: 1001;

		img {
			height: 80px;
			width: auto;
			transition: height 0.3s ease;

			@media (max-width: 1240px) {
				height: 55px;
			}
		}
	}

	.header-nav {
		position: absolute;
		right: 0;

		@media (max-width: 1240px) {
			display: none;
		}

		.main-nav {
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;
			gap: 0;

			> li {
				position: relative;

				> a {
					display: block;
					padding: 1rem 1.5rem;
					color: white;
					text-decoration: none;
					font-weight: 500;
					font-size: 1rem;
					transition: color 0.3s ease;

					&:hover {
						color: var(--light-blue);
					}
				}

				&.menu-item-has-children {
					> a {
						position: relative;
						padding-right: 2.5rem;

						&::before {
							content: '';
							position: absolute;
							right: 1.25rem;
							top: 50%;
							transform: translateY(-50%);
							width: 0;
							height: 0;
							border-left: 4px solid transparent;
							border-right: 4px solid transparent;
							border-top: 5px solid currentColor;
							transition: transform 0.3s ease;
						}
					}

					&:hover > a::before {
						transform: translateY(-50%) rotate(180deg);
					}

					&:hover .nav-dropdown,
					&:focus-within .nav-dropdown {
						opacity: 1;
						visibility: visible;
						transform: translateY(0);
					}
				}

				.nav-dropdown {
					position: absolute;
					top: 100%;
					left: 1.5rem; /* Align with text, not container */
					min-width: 280px; /* Wider for longer nav items */
					background: white;
					list-style: none;
					padding: 0.5rem 0;
					opacity: 0;
					visibility: hidden;
					transform: translateY(-10px);
					transition: all 0.3s ease;
					box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
					border-top: 3px solid var(--primary);

					li {
						position: relative;

						a {
							display: block;
							padding: 0.75rem 1.5rem;
							color: var(--dark-text);
							text-decoration: none;
							font-size: 0.9rem;
							font-weight: 500;
							transition: all 0.3s ease;
							border-left: 3px solid transparent;

							&:hover {
								background: #f8f9fa;
								color: var(--primary);
								border-left-color: var(--primary);
							}
						}

						&.menu-item-has-children {
							> a {
								position: relative;
								padding-right: 2.5rem;

								&::after {
									content: '';
									position: absolute;
									right: 1.25rem;
									top: 50%;
									transform: translateY(-50%);
									width: 0;
									height: 0;
									border-left: 3px solid transparent;
									border-right: 3px solid transparent;
									border-top: 4px solid var(--dark-text);
									transition: all 0.3s ease;
								}
							}

							&:hover > a::after {
								border-top-color: var(--primary);
							}

							&:hover .nav-subdropdown,
							&:focus-within .nav-subdropdown {
								opacity: 1;
								visibility: visible;
								transform: translateY(0);
							}

							.nav-subdropdown {
								position: absolute;
								top: 0;
								left: 100%;
								min-width: 200px;
								background: white;
								list-style: none;
								padding: 0.5rem 0;
								opacity: 0;
								visibility: hidden;
								transform: translateY(-10px);
								transition: all 0.3s ease;
								box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
								border-top: 3px solid var(--primary);
								margin-left: -3px;

								a {
									padding: 0.5rem 1.25rem;
									font-size: 0.85rem;
									color: var(--dark-text);
									transition: all 0.3s ease;
									border-left: 3px solid transparent;

									&:hover {
										background: #f8f9fa;
										color: var(--primary);
										border-left-color: var(--primary);
									}
								}
							}
						}
					}
				}

				/* Right-align dropdown for last nav item to prevent overflow */
				&:last-child .nav-dropdown {
					left: auto;
					right: 1.5rem; /* Align with text from the right */
				}
			}
		}
	}
}

/* Mobile Header Actions */
.mobile-header-actions {
	display: none;
	align-items: center;

	@media (max-width: 1240px) {
		display: flex;
	}

	.mobile-menu-toggle {
		display: none;
		flex-direction: column;
		justify-content: center;
		width: 32px;
		height: 32px;
		background: transparent;
		border: none;
		padding: 4px;
		z-index: 1010;
		border-radius: 6px;
		transition: background-color 0.3s ease;
		cursor: pointer;

		@media (max-width: 1240px) {
			display: flex;
		}

		&:hover {
			background: rgba(255, 255, 255, 0.1);
		}

		&.active {
			.hamburger-line:nth-child(1) {
				transform: translateY(8px) rotate(45deg);
			}

			.hamburger-line:nth-child(2) {
				opacity: 0;
			}

			.hamburger-line:nth-child(3) {
				transform: translateY(-8px) rotate(-45deg);
			}
		}

		.hamburger-line {
			width: 24px;
			height: 2px;
			background: white;
			margin: 3px 0;
			border-radius: 1px;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			transform-origin: center;
		}
	}
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background: rgba(0, 75, 210, 0.98);
	backdrop-filter: blur(12px);
	z-index: 1009;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	overflow-y: auto;

	&.mobile-open {
		opacity: 1;
		visibility: visible;
	}

	.mobile-nav {
		padding: 100px 2rem 2rem;
		min-height: 100vh !important;
		height: auto !important;
		display: flex;
		flex-direction: column;

		.mobile-nav-list {
			list-style: none;
			margin: 0;
			padding: 0;

			> li {
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);

				&:last-child {
					border-bottom: none;
				}

				> a {
					display: block;
					padding: 1rem 0;
					color: white;
					text-decoration: none;
					font-size: 1.25rem;
					font-weight: 500;
					transition: all 0.3s ease;

					&:hover {
						color: var(--orange);
						padding-left: 1rem;
					}
				}

				&.menu-item-has-children {
					> .mobile-submenu-row {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 1rem 0;
						cursor: pointer;

						> a {
							padding: 0;
							margin: 0;
							pointer-events: none;
							color: white !important;
							text-decoration: none !important;
							font-size: 1.25rem !important;
							font-weight: 500 !important;
							transition: all 0.3s ease;

							&:hover {
								color: var(--orange) !important;
							}
						}

						.mobile-submenu-toggle {
							background: none;
							border: none;
							color: white;
							cursor: pointer;
							padding: 0.5rem;
							transition: transform 0.3s ease;

							&[aria-expanded="true"] {
								transform: rotate(180deg);
							}
						}

						&:hover > a {
							color: var(--orange) !important;
						}
					}

					&.open > .mobile-submenu-row {
						> a {
							color: var(--orange) !important;
						}
					}

					> ul, > .nav-dropdown, > .nav-subdropdown {
						display: none;
						padding-left: 1rem;
						border-left: 2px solid var(--orange);
						margin-top: 0.5rem;
						list-style: none;

						&.open {
							display: block;
						}

						li {
							border-bottom: 1px solid rgba(255, 255, 255, 0.05);

							a {
								color: white !important;
								text-decoration: none !important;
								font-size: 1.1rem !important;
								font-weight: 500 !important;
								padding: 0.75rem 0;
								display: block;
								transition: all 0.3s ease;

								&:hover {
									color: var(--orange) !important;
									padding-left: 1rem;
								}
							}
						}
					}

					&.open > ul, &.open > .nav-dropdown, &.open > .nav-subdropdown {
						display: block;
					}
				}
			}
		}
	}
}

/* Flexi Hero Block */
.flexi-hero {
	position: relative;
	min-height: 75vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	color: white;
	padding: 10rem 0 12rem;

	@media (max-width: 768px) {
		min-height: 60vh;
		padding: 8rem 0 10rem;
	}

	@media (max-width: 480px) {
		min-height: 50vh;
		padding: 6rem 0 8rem;
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--primary);
		opacity: 0.7;
		z-index: 1;
	}

	.container {
		position: relative;
		z-index: 2;
		text-align: left;
		width: 100%;
	}

	h1 {
		font-size: 2.7rem;
		font-weight: 800;
		margin-bottom: 1.5rem;
		line-height: 1.1;
		color: white !important;

		@media (max-width: 1024px) {
			font-size: 3rem;
		}

		@media (max-width: 768px) {
			font-size: 2.5rem;
			margin-bottom: 1.25rem;
		}

		@media (max-width: 480px) {
			font-size: 2rem;
			margin-bottom: 1rem;
		}
	}

	p {
		font-size: 1.25rem;
		margin-bottom: 1.5rem;
		opacity: 0.9;
		line-height: 1.6;

		@media (max-width: 768px) {
			font-size: 1.125rem;
			margin-bottom: 1.25rem;
		}

		@media (max-width: 480px) {
			font-size: 1rem;
			margin-bottom: 1rem;
		}
	}

	.button {
		margin-top: 1rem;
	}
}

/* Flexi Hero Boxes */
.flexi-hero-boxes {
	position: relative;
	background: transparent;
	padding: 0;
	margin-top: -6rem;
	z-index: 10;

	@media (max-width: 768px) {
		margin-top: -6rem;
	}

	@media (max-width: 480px) {
		margin-top: -4rem;
	}

	.container {
		position: relative;
		z-index: 11;
	}

	.hero-boxes-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		margin-bottom: 8rem;

		@media (max-width: 1024px) {
			gap: 1.5rem;
		}

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: 2rem;
			margin-bottom: 6rem;
		}
	}

	.hero-box {
		position: relative;
		background: white;
		overflow: hidden;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 6px;
			z-index: 3;
		}

		.hero-box-content {
			position: relative;
			z-index: 2;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;

			.hero-box-image {
				width: 100%;
				flex: 1;
				aspect-ratio: 8 / 3;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
				}
			}

			h3 {
				font-size: 1.5rem;
				font-weight: 800;
				margin: 0;
				padding: 1.3rem 2rem;
				line-height: 1.2;
				text-align: left;

				@media (max-width: 768px) {
					font-size: 1.375rem;
					padding: 0.875rem 1.5rem;
				}
			}

			p {
				font-size: 0.95rem;
				line-height: 1.4;
				margin: 0;
				padding: 0 2rem 1rem;
				opacity: 0.85;
				font-weight: 400;
				text-align: left;

				@media (max-width: 768px) {
					font-size: 0.9rem;
					padding: 0 1.5rem 0.875rem;
				}
			}

			.hero-box-button {
				display: inline-block;
				padding: 0.875rem 2.5rem;
				border-radius: 50px;
				border: 2px solid;
				text-decoration: none;
				font-family: var(--font-family);
				font-weight: 600;
				font-size: 1rem;
				line-height: 1;
				position: relative;
				overflow: hidden;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				cursor: pointer;
				margin-left: 2rem;
				margin-bottom: 2rem;
				align-self: flex-start;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
					transition: left 0.4s ease;
				}

				&:hover {
					transform: translateY(-2px);

					&::before {
						left: 100%;
					}
				}

				&:focus-visible {
					outline: 2px solid;
					outline-offset: 2px;
				}

				@media (max-width: 768px) {
					padding: 0.75rem 2rem;
					font-size: 0.9rem;
					margin-left: 1.5rem;
					margin-bottom: 1.5rem;
				}

				@media (max-width: 480px) {
					padding: 0.75rem 1.75rem;
					font-size: 0.875rem;
				}
			}
		}

		/* Color variants */
		&.hero-box-light-blue {
			&::after {
				background: var(--light-blue);
			}

			.hero-box-content h3 {
				color: var(--primary);
			}

			.hero-box-button {
				background: var(--light-blue);
				border-color: var(--light-blue);
				color: var(--primary);

				&:hover {
					background: transparent;
					color: var(--light-blue);
					box-shadow: 0 8px 20px rgba(113, 248, 254, 0.3);
				}

				&:focus-visible {
					outline-color: var(--light-blue);
				}
			}
		}

		&.hero-box-primary {
			&::after {
				background: var(--primary);
			}

			.hero-box-content h3 {
				color: var(--primary);
			}

			.hero-box-button {
				background: var(--primary);
				border-color: var(--primary);
				color: white;

				&:hover {
					background: transparent;
					color: var(--primary);
					box-shadow: 0 8px 20px rgba(0, 75, 210, 0.3);
				}

				&:focus-visible {
					outline-color: var(--primary);
				}
			}
		}

		&.hero-box-yellow {
			&::after {
				background: var(--yellow);
			}

			.hero-box-content h3 {
				color: var(--primary);
			}

			.hero-box-button {
				background: var(--yellow);
				border-color: var(--yellow);
				color: var(--primary);

				&:hover {
					background: transparent;
					color: var(--yellow);
					box-shadow: 0 8px 20px rgba(255, 228, 66, 0.3);
				}

				&:focus-visible {
					outline-color: var(--yellow);
				}
			}
		}
	}
}

/* Flexi Stats Block */
.flexi-stats {
	padding: 5rem 0;
	background: var(--light-bg);

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	.container {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 3rem;

		@media (max-width: 1024px) {
			gap: 2rem;
		}

		@media (max-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 2rem;
		}

		@media (max-width: 480px) {
			grid-template-columns: 1fr;
			gap: 2rem;
		}
	}

	.stats-item {
		text-align: center;
		padding: 1rem;

		.stats-icon {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 1.5rem;
			transition: transform 0.3s ease;

			@media (max-width: 768px) {
				width: 85px;
				height: 85px;
				margin-bottom: 1.25rem;
			}

			img {
				width: 71px;
				height: 71px;
				object-fit: contain;

				@media (max-width: 768px) {
					width: 60px;
					height: 60px;
				}
			}

			&.stats-icon-light-blue {
				background: var(--light-blue);
			}

			&.stats-icon-orange {
				background: var(--orange);
			}

			&.stats-icon-primary {
				background: var(--primary);
			}

			&.stats-icon-yellow {
				background: var(--yellow);
			}
		}

		h2 {
			font-size: 3rem;
			font-weight: 800;
			margin-bottom: 0 !important;
			line-height: 1;
			color: var(--dark-text);

			@media (max-width: 1024px) {
				font-size: 2.5rem;
			}

			@media (max-width: 768px) {
				font-size: 2.25rem;
			}

			@media (max-width: 480px) {
				font-size: 2rem;
			}
		}

		p {
			font-size: 1rem;
			color: var(--dark-text);
			margin: 0;
			opacity: 0.8;

			@media (max-width: 768px) {
				font-size: 0.9rem;
			}
		}

		&:hover .stats-icon {
			transform: translateY(-5px);
		}
	}
}

.flexi-hero-boxes + .flexi-stats {
	margin-top: -8rem;
	background: #fff;

	@media (max-width: 768px) {
		margin-top: -6rem;
	}
}

/* Flexi Callout Block */
.flexi-callout {
	position: relative;
	padding: 8rem 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--light-text);
	overflow: hidden;

	@media (max-width: 1024px) {
		padding: 6rem 0;
	}

	@media (max-width: 768px) {
		padding: 5rem 0;
	}

	.container {
		position: relative;
		z-index: 2;
		display: flex;
		gap: 3rem;
		align-items: flex-start;

		@media (max-width: 1024px) {
			gap: 2rem;
		}

		@media (max-width: 768px) {
			flex-direction: column;
			gap: 2rem;
		}
	}

	.flexi-callout-left {
		width: 66.666%;
		
		@media (max-width: 768px) {
			width: 100%;
		}

		.lead {
			font-size: 1.5rem !important;
			line-height: 1.5;
			color: var(--light-blue);
			margin: 0;
			font-weight: 600;

			@media (max-width: 1024px) {
				font-size: 1.375rem;
			}

			@media (max-width: 768px) {
				font-size: 1.25rem;
				text-align: center;
			}

			@media (max-width: 480px) {
				font-size: 1.125rem;
			}
		}
	}

	.flexi-callout-right {
		width: 33.333%;

		@media (max-width: 768px) {
			width: 100%;
		}

		p {
			font-size: 1.125rem;
			line-height: 1.6;
			color: var(--light-text);
			margin: 0;

			@media (max-width: 768px) {
				text-align: center;
			}

			@media (max-width: 480px) {
				font-size: 1rem;
			}
		}
	}
}

/* Flexi 50/50 Blocks */
.flexi-5050 {
	position: relative;
	min-height: 600px;
	overflow: hidden;

	@media (max-width: 768px) {
		min-height: auto;
	}

	/* Full-width background image */
	.flexi-5050-image {
		position: absolute;
		top: 0;
		width: 50%;
		height: 100%;
		z-index: 1;

		@media (max-width: 768px) {
			position: relative;
			width: 100%;
			height: 300px;
			order: 1;
		}

		@media (max-width: 480px) {
			height: 250px;
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	/* Container overlay */
	.container {
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		min-height: 600px;

		@media (max-width: 768px) {
			min-height: auto;
			flex-direction: column;
		}
	}

	.flexi-5050-text {
		width: 50%;
		padding: 4rem 2rem;
		position: relative;
		z-index: 10;

		@media (max-width: 1024px) {
			padding: 3rem 1.5rem;
		}

		@media (max-width: 768px) {
			width: 100%;
			padding: 3rem 2rem;
			text-align: center;
			order: 2;
		}

		@media (max-width: 480px) {
			padding: 2rem 1rem;
		}

		h2 {
			font-size: 3rem;
			font-weight: 800;
			margin-bottom: 1rem;
			line-height: 1.2;
			color: white;

			@media (max-width: 1024px) {
				font-size: 2.5rem;
			}

			@media (max-width: 768px) {
				font-size: 2.25rem;
			}

			@media (max-width: 480px) {
				font-size: 2rem;
			}
		}

		.flexi-5050-title {
			font-size: 1.25rem;
			margin-bottom: 2rem;
			opacity: 0.9;

			@media (max-width: 768px) {
				font-size: 1.125rem;
				margin-bottom: 1.5rem;
			}
		}

		.button {
			display: inline-block;
			padding: 1rem 2rem;
			border-radius: 50px;
			font: 600 1rem var(--font-heading);
			text-decoration: none;
			transition: all 0.3s ease;
			border: 2px solid;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
			}

			@media (max-width: 480px) {
				padding: 0.875rem 1.75rem;
				font-size: 0.9rem;
			}
		}
	}

	/* Spacer to push content to one side */
	.flexi-5050-spacer {
		width: 50%;
		height: 100%;

		@media (max-width: 768px) {
			display: none;
		}
	}

	/* Default layout - text left, image right */
	&:not(.flexi-5050-reverse) {
		.container {
			justify-content: flex-start;
		}

		.flexi-5050-image {
			right: 0;
		}

		.flexi-5050-spacer {
			order: 2;
		}

		.flexi-5050-text {
			order: 1;
			padding-left: 0;
			padding-right: 4rem;

			@media (max-width: 1024px) {
				padding-right: 3rem;
			}

			@media (max-width: 768px) {
				padding: 3rem 2rem;
			}

			@media (max-width: 480px) {
				padding: 2rem 1rem;
			}
		}
	}

	/* Reverse layout - text right, image left */
	&.flexi-5050-reverse {
		.container {
			justify-content: flex-end;
		}

		.flexi-5050-image {
			left: 0;
		}

		.flexi-5050-spacer {
			order: 1;
		}

		.flexi-5050-text {
			order: 2;
			padding-right: 0;
			padding-left: 4rem;

			@media (max-width: 1024px) {
				padding-left: 3rem;
			}

			@media (max-width: 768px) {
				padding: 3rem 2rem;
			}

			@media (max-width: 480px) {
				padding: 2rem 1rem;
			}
		}
	}

	/* Color variants */
	&.flexi-5050-yellow {
		background: var(--yellow);
		color: var(--primary);

		h2 {
			color: var(--primary)
		}

		.button {
			background: var(--primary);
			color: var(--yellow);
			border-color: var(--primary);

			&:hover {
				background: transparent;
				color: var(--primary);
			}
		}
	}

	&.flexi-5050-primary {
		background: var(--primary);
		color: var(--light-text);

		.button {
			background: var(--light-text);
			color: var(--primary);
			border-color: var(--light-text);

			&:hover {
				background: transparent;
				color: var(--light-text);
			}
		}
	}
}

/* Footer */
.site-footer {
	background: var(--primary);
	color: white;
	font-size: 0.9rem;
	border-top: solid 5px var(--light-blue);

	.footer-main {
		padding: 4rem 0 2rem;
		position: relative;

		.footer-content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 4rem;

			@media (max-width: 1024px) {
				grid-template-columns: repeat(2, 1fr);
				gap: 3rem;
			}

			@media (max-width: 768px) {
				grid-template-columns: 1fr;
				gap: 2.5rem;
			}

			.footer-about {
				@media (max-width: 1024px) {
					grid-column: 1 / -1;
				}
			}

			.footer-logo img {
				height: 4.5rem;
				margin-bottom: 1rem;
			}

			.footer-social {
				display: flex;
				gap: 1rem;
				margin-top: 1.25rem;
				margin-bottom: 2rem;

				@media (max-width: 768px) {
					justify-content: center;
				}

				a.social-link {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 48px;
					height: 48px;
					border-radius: 50%;
					border: 2px solid rgba(255, 255, 255, 0.3);
					background: transparent;
					color: white;
					text-decoration: none;
					transition: all 0.3s ease;
					font-size: 1.25rem;
				}

				a.social-link svg {
					display: block;
					width: 24px;
					height: 24px;
					transition: filter 0.3s ease;
					fill: #fff !important;
					color: #fff !important;
				}

				a.social-link:hover {
					border-color: var(--light-blue);
					background: var(--light-blue);
					color: var(--primary);
					transform: translateY(-2px);
				}

				a.social-link[aria-label="LinkedIn"]:hover {
					border-color: #0077b5;
					background: #0077b5;
					color: white;
				}

				a.social-link[aria-label="Facebook"]:hover {
					border-color: #1877f2;
					background: #1877f2;
					color: white;
				}
			}

			.footer-title {
				font: 600 1.1rem var(--font-heading);
				margin-bottom: 1.5rem;
				position: relative;
				padding-bottom: 1.5rem;
				color: white !important;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 30px;
					height: 2px;
					background: var(--light-blue);
				}
			}

			.footer-links {
				list-style: none;

				li {
					margin-bottom: 0.75rem;
				}

				a {
					font: 0.95rem var(--font-base);
					color: white;
					display: block;
					padding-left: 0;
					position: relative;
					transition: all 0.3s ease;

					&::before {
						content: '';
						position: absolute;
						left: -15px;
						top: 50%;
						transform: translateY(-50%) translateX(-3px);
						width: 10px;
						height: 10px;
						background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2311e5b4'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M9 5l7 7-7 7'%3e%3c/path%3e%3c/svg%3e");
						background-size: contain;
						background-repeat: no-repeat;
						opacity: 0;
						transition: all 0.3s ease;
					}

					&:hover {
						color: var(--light-blue);

						&::before {
							opacity: 1;
							transform: translateY(-50%) translateX(0);
						}
					}
				}
			}

			.footer-contact {
				.contact-item {
					display: flex;
					align-items: flex-start;
					margin-bottom: 1rem;

					.contact-icon {
						margin-right: 0.75rem;
						margin-top: 0.2rem;
						color: var(--light-blue);
					}

					span,
					addr {
						font: 0.95rem var(--font-base);
						color: rgba(255, 255, 255, 1);
						line-height: 1.5;
					}

					a {
						font: 0.95rem var(--font-base);
						color: rgba(255, 255, 255, 1);
						text-decoration: none;
						transition: color 0.3s ease;
						display: flex;
						align-items: flex-start;

						&:hover {
							color: var(--theme-color);
						}

						.contact-icon {
							margin-right: 0.75rem;
							margin-top: 0.2rem;
							color: var(--light-blue);
						}
					}
				}
			}
		}
	}
}

.footer-bottom {
	background: rgba(0, 0, 0, 0.2);
	padding: 1.5rem 0;

	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;

		@media (max-width: 768px) {
			flex-direction: column;
			gap: 1rem;
			text-align: center;
		}

		.footer-copyright p {
			font-size: 0.85rem;
			color: white;
			margin: 0;
		}

		.footer-privacy {
			a {
				font-size: 0.85rem;
				color: white;
				text-decoration: none;
				transition: color 0.3s ease;

				&:hover {
					color: var(--light-blue);
					text-decoration: underline;
				}
			}
		}
	}
}

/* Page Title Block */
.page-title-section {
	position: relative;
	padding: 8rem 0 4rem; /* Increased vertical padding */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--grey-bg);
	color: white;
	display: flex;
	align-items: center;
	min-height: 45vh; /* Slightly increased min-height */

	@media (max-width: 1024px) {
		padding: 6rem 0 3rem; /* Increased padding */
		min-height: 40vh;
	}

	@media (max-width: 768px) {
		padding: 5rem 0 2.5rem; /* Increased padding */
		min-height: 35vh;
	}

	@media (max-width: 480px) {
		padding: 4rem 0 2rem; /* Increased padding */
		min-height: 30vh;
	}

	/* Very subtle overlay for text readability */
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(0, 75, 210, 0.25) 0%, rgba(0, 0, 0, 0.2) 100%);
		z-index: 1;
	}

	.container {
		position: relative;
		z-index: 2;
		width: 100%;
	}

	.page-title-content {
		max-width: 1300px;
		text-align: left;

		@media (max-width: 768px) {
			text-align: center;
		}
	}

	.page-title-heading {
		font-size: 3.5rem; /* Slightly bigger */
		font-weight: 800;
		margin: 0 0 1.5rem 0;
		line-height: 1.1;
		color: white;
		text-wrap: balance;

		@media (max-width: 1024px) {
			font-size: 3rem; /* Slightly bigger */
		}

		@media (max-width: 768px) {
			font-size: 2.5rem; /* Slightly bigger */
			margin-bottom: 1.25rem;
		}

		@media (max-width: 480px) {
			font-size: 2rem; /* Slightly bigger */
			margin-bottom: 1rem;
		}
	}

	.page-title-subtitle {
		font-size: 1.125rem; /* Smaller subtitle */
		line-height: 1.5;
		color: rgba(255, 255, 255, 0.9);
		margin: 0;
		font-weight: 400;

		@media (max-width: 768px) {
			font-size: 1rem; /* Smaller subtitle */
		}

		@media (max-width: 480px) {
			font-size: 0.9rem; /* Smaller subtitle */
		}
	}
}

/* Network Profile Block */
.network-profile-section {
	position: relative;
	padding: 5rem 0;
	background: var(--light-bg);

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	.network-profile-layout {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 4rem;
		align-items: flex-start;
		position: relative;

		@media (max-width: 1024px) {
			grid-template-columns: 1fr;
			gap: 3rem;
		}

		@media (max-width: 768px) {
			gap: 3rem;
		}
	}

	.network-profile-content {
		@media (max-width: 1024px) {
			order: 2;
		}



		.network-profile-text {
			margin-bottom: 3rem;

			@media (max-width: 768px) {
				margin-bottom: 2.5rem;
			}

			h1, h2, h3, h4, h5, h6 {
				margin-bottom: 1.5rem;
				color: var(--dark-text);
			}

			p {
				margin-bottom: 1.25rem;
				line-height: 1.7;
				color: var(--dark-text);
			}

			ul, ol {
				margin-bottom: 1.25rem;
				padding-left: 1.5rem;
				
				li {
					margin-bottom: 0.5rem;
					line-height: 1.6;
				}
			}

			a {
				color: var(--primary);
				text-decoration: underline;
				transition: color 0.3s ease;

				&:hover {
					color: var(--orange);
				}
			}
		}

		.network-profile-team {
			.team-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 2rem;

				@media (max-width: 1024px) {
					gap: 1.5rem;
				}

				@media (max-width: 768px) {
					grid-template-columns: repeat(2, 1fr);
					gap: 1.5rem;
				}

				@media (max-width: 480px) {
					grid-template-columns: 1fr;
					gap: 2rem;
				}
			}

			.team-member {
				text-align: center;
				background: white;
				border-radius: 12px;
				padding: 1.5rem;
				box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
				transition: all 0.3s ease;

				&:hover {
					transform: translateY(-5px);
					box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
				}

				.team-member-photo {
					margin-bottom: 1rem;

					img {
						max-width: 100%;
						height: auto;
						display: block;
						margin: 0 auto;
					}
				}

				.team-member-info {
					.team-member-name {
						font-size: 1rem;
						font-weight: 600;
						margin: 0 0 0.5rem 0;
						color: var(--primary);
					}

					.team-member-title {
						font-size: 0.9rem;
						color: var(--primary);
						margin: 0;
						font-weight: 500;
					}
				}
			}
		}
	}

	.network-profile-sidebar {
		position: sticky;
		top: calc(var(--header-height) + 3rem);
		background: #004bd21a;
		padding: 2rem;
		
		@media (max-width: 1024px) {
			order: 1;
			position: relative;
			top: auto;
		}

		.profile-logo {
			text-align: center;
			margin-bottom: 2rem;

			img {
				width: 100%;
				max-width: 100%;
				height: auto;

				@media (max-width: 768px) {
					margin-bottom: 1.5rem;
				}
			}
		}

		.profile-contact {
			margin-bottom: 2rem;

			.contact-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 1.25rem;

				&:last-child {
					margin-bottom: 0;
				}

				.contact-icon {
					flex-shrink: 0;
					width: 20px;
					height: 20px;
					margin-right: 0.75rem;
					margin-top: 0.125rem;
					color: var(--primary);

					svg {
						width: 100%;
						height: 100%;
						stroke-width: 2;
					}
				}

				.contact-text {
					flex: 1;

					p {
						margin: 0;
						font-size: 0.9rem;
						line-height: 1.5;
						color: var(--dark-text);
					}

					a {
						color: var(--primary);
						text-decoration: none;
						font-size: 0.9rem;
						transition: color 0.3s ease;

						&:hover {
							color: var(--orange);
							text-decoration: underline;
						}
					}
				}
			}
		}

		.profile-website {
			margin-bottom: 2rem;

			.website-button {
				display: block;
				width: 100%;
				padding: 0.875rem 1.5rem;
				background: var(--primary);
				color: white;
				text-decoration: none;
				border-radius: 50px;
				font-size: 0.9rem;
				font-weight: 600;
				text-align: center;
				transition: background-color 0.3s ease;
				border: none;

				&:hover {
					background: var(--orange);
				}

				&:focus-visible {
					outline: 2px solid var(--primary);
					outline-offset: 2px;
				}
			}
		}

		.profile-social {
			h4 {
				font-size: 1rem;
				font-weight: 700;
				margin: 0 0 1rem 0;
				color: var(--dark-text);
			}

			.social-links {
				display: flex;
				gap: 0.75rem;

				a {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					height: 40px;
					border-radius: 50%;
					background: var(--light-bg);
					color: var(--primary);
					transition: all 0.3s ease;
					text-decoration: none;

					svg {
						width: 20px;
						height: 20px;
					}

					&:hover {
						transform: translateY(-2px);
						box-shadow: 0 4px 12px rgba(0, 75, 210, 0.3);
					}

					&[aria-label="Facebook"]:hover {
						background: #1877f2;
						color: white;
						box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
					}

					&[aria-label="X (Twitter)"]:hover {
						background: #000;
						color: white;
						box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
					}

					&[aria-label="LinkedIn"]:hover {
						background: #0077b5;
						color: white;
						box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
					}
				}
			}
		}
	}
}

/* Network Grid Block */
.network-grid-section {
	padding: 5rem 0;
	background: var(--light-bg);

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	.network-grid-title {
		text-align: center;
		margin-bottom: 1rem;
		font-size: 2.5rem;
		color: var(--primary);
		font-weight: 800;

		@media (max-width: 768px) {
			font-size: 2rem;
		}

		@media (max-width: 480px) {
			font-size: 1.75rem;
		}
	}

	.network-grid-header {
		text-align: center;
		margin-bottom: 3rem;

		@media (max-width: 768px) {
			margin-bottom: 2rem;
		}

		@media (max-width: 480px) {
			margin-bottom: 1.5rem;
		}

		&.network-grid-header-left {
			text-align: left;
			
			.network-grid-title {
				text-align: left;
			}
			
			.network-grid-subtitle {
				margin-left: 0;
				margin-right: 0;
			}
		}

		.network-grid-subtitle {
			margin-top: 1rem;
			margin-bottom: 24px;
			max-width: 1200px;
			margin-left: auto;
			margin-right: auto;

			p {
				margin-bottom: 1rem;
				
				&:last-child {
					margin-bottom: 0;
				}
			}

			ul, ol {
				margin-bottom: 1rem;
				
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.network-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
		width: 100%;

		@media (max-width: 1024px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem;
		}

		@media (max-width: 640px) {
			grid-template-columns: 1fr;
			gap: 1rem;
		}
	}

	.network-grid-item {
		background: white;
		border: 3px solid var(--primary);
		border-radius: 0;
		overflow: hidden;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		cursor: pointer;

		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 15px 35px rgba(0, 75, 210, 0.15);
		}
	}

	.network-grid-link {
		display: block;
		text-decoration: none;
		color: inherit;
	}

	.network-grid-logo {
		background: white;
		padding: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 180px;
		aspect-ratio: 1;

		@media (max-width: 640px) {
			padding: 1.5rem;
			min-height: 150px;
		}

		img {
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			object-fit: contain;
		}
	}

	.network-grid-name {
		background: var(--primary);
		color: white;
		padding: 1rem;
		text-align: center;
		font-weight: 600;
		font-size: 1rem;
		line-height: 1.2;

		@media (max-width: 640px) {
			padding: 0.875rem;
			font-size: 0.9rem;
		}

		span {
			display: block;
		}
	}
}

/* Content Block */
.content-block-section {
	padding: 5rem 0;
	background: white;

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	&.content-block-light {
		background: var(--light-bg);
	}

	&.content-block-grey {
		background: var(--grey-bg);
	}

	/* Padding variations */
	&.content-block-padding-small {
		padding: 1.5rem 0;

		@media (max-width: 768px) {
			padding: 1.25rem 0;
		}

		@media (max-width: 480px) {
			padding: 1rem 0;
		}
	}

	&.content-block-padding-large {
		padding: 8rem 0;

		@media (max-width: 768px) {
			padding: 6rem 0;
		}

		@media (max-width: 480px) {
			padding: 4.5rem 0;
		}
	}

	&.content-block-padding-none {
		padding: 0;
	}

	.content-block-content {
		width: 100%;

		/* Style WYSIWYG content */
		p {
			margin-bottom: 1.5rem;
			line-height: 1.7;

			&:last-child {
				margin-bottom: 0;
			}
		}

		h1, h2, h3, h4, h5, h6 {
			margin-top: 2rem;
			margin-bottom: 1rem;

			&:first-child {
				margin-top: 0;
			}
		}

		ul, ol {
			margin-bottom: 1.5rem;
			padding-left: 2rem;

			li {
				margin-bottom: 0.5rem;
				line-height: 1.6;
			}
		}

		blockquote {
			margin: 2rem 0;
			padding: 1.5rem 2rem;
			background: var(--light-bg);
			border-left: 4px solid var(--primary);
			font-style: italic;
			color: var(--dark-text);

			p {
				margin-bottom: 0;
			}
		}

		img {
			max-width: 100%;
			height: auto;
			border-radius: 8px;
			margin: 1rem 0;
		}

		.wp-block-image {
			margin: 2rem 0;

			&.aligncenter {
				text-align: center;
			}

			&.alignleft {
				float: left;
				margin-right: 2rem;
				margin-bottom: 1rem;
			}

			&.alignright {
				float: right;
				margin-left: 2rem;
				margin-bottom: 1rem;
			}
		}

		.wp-block-quote {
			margin: 2rem 0;
			padding: 1.5rem 2rem;
			background: var(--light-bg);
			border-left: 4px solid var(--primary);
			font-style: italic;

			p {
				margin-bottom: 1rem;

				&:last-child {
					margin-bottom: 0;
				}
			}

			cite {
				display: block;
				margin-top: 1rem;
				font-style: normal;
				font-weight: 600;
				color: var(--primary);
			}
		}

		.wp-block-separator {
			margin: 3rem auto;
			border: none;
			border-top: 2px solid var(--grey-bg);
			width: 100px;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			margin: 2rem 0;
			font-size: 0.9rem;

			@media (max-width: 768px) {
				font-size: 0.85rem;
			}

			th, td {
				padding: 0.875rem 0.75rem;
				text-align: left;
				border-bottom: 1px solid var(--grey-bg);

				@media (max-width: 768px) {
					padding: 0.75rem 0.625rem;
				}
			}

			th {
				background: var(--light-bg);
				font-weight: 700;
				color: var(--primary);
			}

			tbody tr {
				&:nth-child(even) {
					background: var(--light-bg);
				}

				&:hover {
					background: rgba(0, 75, 210, 0.05);
				}
			}
		}

		.wp-block-button {
			margin: 1.5rem 0;

			.wp-block-button__link {
				display: inline-block;
				padding: 0.875rem 2.5rem;
				border-radius: 50px;
				border: 2px solid var(--primary);
				background: var(--primary);
				color: white;
				text-decoration: none;
				font-weight: 600;
				font-size: 1rem;
				line-height: 1;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

				&:hover {
					transform: translateY(-2px);
					background: transparent;
					color: var(--primary);
					box-shadow: 0 8px 20px rgba(0, 75, 210, 0.3);
				}
			}
		}
	}
}

/* Text & Image Block */
.text-image-section {
	padding: 5rem 0;
	background: white;

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	&.text-image-alt-bg {
		background: var(--light-bg);
	}

	.text-image-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
		align-items: start;

		@media (max-width: 1024px) {
			gap: 3rem;
		}

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

	.text-image-content {
		.text-image-text {
			/* Style WYSIWYG content within text-image block */
			h1, h2, h3, h4, h5, h6 {
				margin-top: 0;
				margin-bottom: 1.5rem;

				&:first-child {
					margin-top: 0;
				}
			}

			p {
				margin-bottom: 1.5rem;
				line-height: 1.7;

				&:last-child {
					margin-bottom: 0;
				}
			}

			ul, ol {
				margin-bottom: 1.5rem;
				padding-left: 2rem;

				li {
					margin-bottom: 0.5rem;
					line-height: 1.6;
				}
			}

			.wp-block-button {
				margin: 1.5rem 0;

				.wp-block-button__link {
					display: inline-block;
					padding: 0.875rem 2.5rem;
					border-radius: 50px;
					border: 2px solid var(--primary);
					background: var(--primary);
					color: white;
					text-decoration: none;
					font-weight: 600;
					font-size: 1rem;
					line-height: 1;
					transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

					&:hover {
						transform: translateY(-2px);
						background: transparent;
						color: var(--primary);
						box-shadow: 0 8px 20px rgba(0, 75, 210, 0.3);
					}
				}
			}
		}
	}

	.text-image-media {
		position: relative;

		.text-image-frame {
			position: relative;

			.text-image-img {
				max-width: 100%;
				height: auto;
				display: block;
			}
		}
	}

	/* Responsive adjustments for image alignment */
	&.text-image-left {
		@media (max-width: 768px) {
			.text-image-grid {
				.text-image-media {
					order: 1;
				}
				.text-image-content {
					order: 2;
				}
			}
		}
	}

	&.text-image-right {
		@media (max-width: 768px) {
			.text-image-grid {
				.text-image-content {
					order: 1;
				}
				.text-image-media {
					order: 2;
				}
			}
		}
	}
}

/* CTA Banner Block */
.cta-section {
	background-image: url('./images/banner-backgrounds-02.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 5rem 0;
	width: 100%;

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	.cta-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 4rem;

		@media (max-width: 768px) {
			flex-direction: column;
			text-align: center;
			gap: 2rem;
		}
	}

	.cta-text {
		flex: 1;
	}

	.cta-title {
		color: var(--primary);
		font-size: 2.5rem;
		font-weight: 700;
		line-height: 1.2;
		margin: 0 0 1rem 0;
		text-wrap: balance;

		@media (max-width: 768px) {
			font-size: 2rem;
		}

		@media (max-width: 480px) {
			font-size: 1.75rem;
		}
	}

	.cta-description {
		color: var(--primary);
		font-size: 1.25rem;
		line-height: 1.6;
		margin: 0;
		text-wrap: balance;

		@media (max-width: 768px) {
			font-size: 1.125rem;
		}

		@media (max-width: 480px) {
			font-size: 1rem;
		}
	}

	.cta-button-wrapper {
		flex-shrink: 0;
	}

	.cta-block-button {
		display: inline-block;
		padding: 0.875rem 2.5rem;
		border-radius: 50px;
		border: 2px solid var(--primary);
		background: var(--primary);
		color: white;
		text-decoration: none;
		font-weight: 600;
		font-size: 1rem;
		line-height: 1;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

		&:hover {
			transform: translateY(-2px);
			background: transparent;
			color: var(--primary);
			box-shadow: 0 8px 20px rgba(0, 75, 210, 0.3);
			}

		@media (max-width: 480px) {
			padding: 0.75rem 2rem;
			font-size: 0.9rem;
		}
	}
}

/* Team Block */
.team-section {
	padding: 5rem 0;
	background: var(--light-bg);

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	.team-header {
		margin-bottom: 3rem;
		
		@media (max-width: 768px) {
			margin-bottom: 2.5rem;
		}

		@media (max-width: 480px) {
			margin-bottom: 2rem;
		}
	}

	.team-title {
		text-align: left;
		color: var(--primary);
		font-size: 2.75rem;
		font-weight: 700;
		margin-bottom: 1.5rem;
		text-wrap: balance;

		@media (max-width: 768px) {
			font-size: 2.25rem;
			margin-bottom: 1.25rem;
		}

		@media (max-width: 480px) {
			font-size: 2rem;
			margin-bottom: 1rem;
		}
	}

	.team-subtitle {
		text-align: left;
		color: var(--dark-text);
		font-size: 1.125rem;
		margin-bottom: 0;
		opacity: 0.8;
		line-height: 1.6;

		@media (max-width: 768px) {
			font-size: 1rem;
		}

		@media (max-width: 480px) {
			font-size: 0.95rem;
		}
		
		p {
			margin-bottom: 1rem;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.team-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem;

		@media (max-width: 1100px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 2rem;
		}

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

	.team-member {
		position: relative;
		text-align: center;
		background: white;
		border-radius: 12px;
		padding: 2rem 1.5rem 2rem 1.5rem;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		display: flex;
		flex-direction: column;
		min-height: 100%;

		&:hover {
			transform: translateY(-8px);
			box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
		}

		@media (max-width: 480px) {
			padding: 1.5rem;
		}
	}

	.team-member-photo {
		margin-bottom: 1.75rem;
		position: relative;

		img {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			object-fit: cover;
			margin: 0 auto;
			display: block;

			@media (max-width: 768px) {
				width: 180px;
				height: 180px;
			}

			@media (max-width: 480px) {
				width: 160px;
				height: 160px;
			}
		}
	}

	.team-member-info {
		flex: 1;
		display: flex;
		flex-direction: column;

		.team-member-name {
			color: var(--primary);
			font-size: 1.375rem;
			font-weight: 600;
			margin: 0 0 0.5rem 0;
			text-wrap: balance;
			line-height: 1.3;

			@media (max-width: 480px) {
				font-size: 1.25rem;
			}
		}

		.team-member-title {
			color: var(--text-color);
			font-size: 1rem;
			margin: 0 0 0.5rem 0;
			opacity: 0.85;
			line-height: 1.4;

			@media (max-width: 480px) {
				font-size: 0.95rem;
			}
		}

		.team-member-division {
			color: var(--primary);
			font-size: 0.75rem;
			font-weight: 500;
			margin: 0 0 auto 0;
			opacity: 0.9;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			flex-grow: 1;
			padding-bottom: 1.5rem;

			@media (max-width: 480px) {
				font-size: 0.7rem;
				padding-bottom: 1.25rem;
			}
		}
	}

	.team-view-bio-btn {
		background: var(--primary);
		border: none;
		color: white;
		padding: 0.75rem 2rem;
		border-radius: 30px;
		font-weight: 600;
		font-size: 0.9rem;
		cursor: pointer;
		transition: all 0.3s ease;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-top: auto;
		align-self: center;

		&:hover {
			background: #003bb3;
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(0, 75, 210, 0.3);
		}

		@media (max-width: 480px) {
			padding: 0.65rem 1.75rem;
			font-size: 0.85rem;
		}
	}
}

/* Team Bio Popup */
.team-bio-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;

	&.active {
		opacity: 1;
		visibility: visible;
	}

	.team-bio-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.85);
		cursor: pointer;
		backdrop-filter: blur(5px);
	}

	.team-bio-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: white;
		border-radius: 16px;
		padding: 3rem;
		max-width: 700px;
		width: 90%;
		max-height: 85vh;
		overflow-y: auto;
		box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);

		@media (max-width: 768px) {
			padding: 2rem;
			width: 95%;
			max-height: 88vh;
		}

		@media (max-width: 480px) {
			padding: 1.5rem;
			width: 95%;
			max-height: 90vh;
		}
	}

	.team-bio-close {
		position: absolute;
		top: 1.25rem;
		right: 1.25rem;
		background: var(--primary);
		border: none;
		font-size: 1.5rem;
		color: white;
		cursor: pointer;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s ease;

		&:hover {
			background: #003bb3;
			transform: scale(1.1);
		}
	}

	.team-bio-header {
		display: flex;
		align-items: center;
		gap: 2.5rem;
		margin-bottom: 2.5rem;
		padding-right: 3rem;
		padding-bottom: 2.5rem;
		border-bottom: 1px solid rgba(0, 75, 210, 0.15);

		@media (max-width: 768px) {
			gap: 2rem;
		}

		@media (max-width: 480px) {
			flex-direction: column;
			text-align: center;
			gap: 1.5rem;
			padding-right: 2rem;
			padding-bottom: 2rem;
		}

		.team-bio-photo {
			flex-shrink: 0;

			img {
				width: 140px;
				height: 140px;
				object-fit: cover;

				@media (max-width: 768px) {
					width: 120px;
					height: 120px;
				}

				@media (max-width: 480px) {
					width: 100px;
					height: 100px;
				}
			}
		}

		.team-bio-info {
			flex: 1;

			h3 {
				color: var(--primary);
				font-size: 1.25rem;
				font-weight: 700;
				margin: 0 0 0.75rem 0;
				line-height: 1.2;

				@media (max-width: 768px) {
					font-size: 1.5rem;
				}

				@media (max-width: 480px) {
					font-size: 1.375rem;
					margin: 0 0 0.5rem 0;
				}
			}

			.team-bio-title {
				color: var(--text-color);
				font-size: 1rem;
				font-weight: 500;
				margin: 0 0 0.75rem 0;
				opacity: 0.9;
				line-height: 1.4;

				@media (max-width: 768px) {
					font-size: 1.125rem;
				}

				@media (max-width: 480px) {
					font-size: 1rem;
					margin: 0 0 0.5rem 0;
				}
			}

			.team-bio-division {
				color: var(--primary);
				font-size: 0.7rem;
				font-weight: 600;
				margin: 0;
				opacity: 0.9;
				text-transform: uppercase;
				letter-spacing: 0.75px;
				padding: 0.15rem 0.75rem;
				background: rgba(0, 75, 210, 0.08);
				border-radius: 20px;
				display: inline-block;

				@media (max-width: 480px) {
					font-size: 0.7rem;
					letter-spacing: 0.5px;
					padding: 0.2rem 0.6rem;
				}
			}
		}
	}

	.team-bio-text {
		color: var(--text-color);
		font-size: 0.95rem;
		line-height: 1.7;
		text-align: left;

		/* Fix excessive line breaks */
		br + br {
			display: none;
		}

		p {
			margin-bottom: 1.5rem;

			&:last-child {
				margin-bottom: 0;
			}

			&:first-child {
				margin-top: 0;
			}
		}

		@media (max-width: 768px) {
			font-size: 0.9rem;
		}

		@media (max-width: 480px) {
			font-size: 0.85rem;
			line-height: 1.6;
		}
	}
}

/* Feature Boxes Section */
.feature-boxes-section {
	padding: 5rem 0;
	background: var(--light-bg);

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	.feature-boxes-title {
		text-align: left;
		font-size: 2.5rem;
		font-weight: 700;
		color: var(--primary);
		margin-bottom: 2.5rem;
		line-height: 1.2;

		@media (max-width: 1024px) {
			font-size: 2.25rem;
			margin-bottom: 2rem;
		}

		@media (max-width: 768px) {
			font-size: 2rem;
			margin-bottom: 1.75rem;
		}

		@media (max-width: 480px) {
			font-size: 1.75rem;
			margin-bottom: 1.5rem;
		}
	}

	.feature-boxes-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;

		@media (max-width: 1200px) {
			gap: 1.5rem;
		}

		@media (max-width: 1024px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem;
		}

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: 1.25rem;
		}
	}

	.feature-box {
		padding: 2.5rem 2rem;
		text-align: left;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		@media (max-width: 768px) {
			padding: 2rem 1.5rem;
		}

		@media (max-width: 480px) {
			padding: 1.75rem 1.25rem;
		}

		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
			pointer-events: none;
		}

		.feature-box-content {
			position: relative;
			z-index: 2;
		}

		.feature-box-title {
			font-size: 1.375rem;
			font-weight: 700;
			margin: 0 0 1rem 0;
			line-height: 1.3;

			@media (max-width: 768px) {
				font-size: 1.25rem;
				margin-bottom: 0.875rem;
			}

			@media (max-width: 480px) {
				font-size: 1.125rem;
				margin-bottom: 0.75rem;
			}
		}

		.feature-box-description {
			font-size: 0.85rem;
			line-height: 1.6;
			margin: 0;
			opacity: 0.95;

			@media (max-width: 768px) {
				font-size: 0.8rem;
			}

			@media (max-width: 480px) {
				font-size: 0.75rem;
				line-height: 1.5;
			}
		}

		/* Color variants */
		&.feature-box-primary {
			background: var(--primary);

			.feature-box-title {
				color: white;
			}

			.feature-box-description {
				color: rgba(255, 255, 255, 0.9);
			}
		}

		&.feature-box-yellow {
			background: var(--yellow);

			.feature-box-title {
				color: var(--primary);
			}

			.feature-box-description {
				color: var(--primary);
				opacity: 0.85;
			}
		}

		&.feature-box-light-blue {
			background: var(--light-blue);

			.feature-box-title {
				color: var(--primary);
			}

			.feature-box-description {
				color: var(--primary);
				opacity: 0.85;
			}
		}

		&.feature-box-orange {
			background: var(--orange);

			.feature-box-title {
				color: white;
			}

			.feature-box-description {
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}
}

/* ================================
   Text & Sidebar Block
   ================================ */

.text-sidebar-section {
	padding: 5rem 0;

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	.text-sidebar-layout {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 3rem;
		align-items: start;

		@media (max-width: 1024px) {
			grid-template-columns: 1fr;
			gap: 2rem;
		}
	}

	.text-sidebar-content {
		@media (max-width: 1024px) {
			order: 1;
		}

		.text-sidebar-text {
			h1, h2, h3, h4, h5, h6 {
				margin-top: 0;
				margin-bottom: 1.5rem;
				line-height: 1.3;
			}

			h1 { font-size: 2.5rem; }
			h2 { font-size: 2rem; }
			h3 { font-size: 1.5rem; }
			h4 { font-size: 1.25rem; }
			h5 { font-size: 1.125rem; }
			h6 { font-size: 1rem; }

			p {
				margin-bottom: 1.5rem;
				line-height: 1.7;
			}

			ul, ol {
				margin-bottom: 1.5rem;
				padding-left: 1.5rem;

				li {
					margin-bottom: 0.5rem;
					line-height: 1.6;
				}
			}

			blockquote {
				margin: 2rem 0;
				padding: 1.5rem;
				border-left: 4px solid var(--primary);
				background: var(--light-bg);
				font-style: italic;
			}
		}
	}

	.text-sidebar-sidebar {
		background: #004bd21a;
		padding: 2rem;

		@media (max-width: 1024px) {
			order: 2;
		}

		.sidebar-content-wrapper {
			.sidebar-items {
				.sidebar-item {
					margin-bottom: 1.5rem;

					&:last-child {
						margin-bottom: 0;
					}

						/* Download styling */
						&.sidebar-download {
							.download-link {
								display: flex;
								align-items: flex-start;
								padding: 0.75rem;
								background: white;
								border-radius: 4px;
								text-decoration: none;
								color: var(--dark-text);
								transition: all 0.2s ease;
								border: 1px solid #e5e5e5;

								&:hover {
									border-color: var(--primary);
									background: #f8f9fa;
								}

								.download-icon {
									flex-shrink: 0;
									width: 38px;
									height: 38px;
									margin-right: 0.75rem;
									margin-top: 2px;
									display: flex;
									align-items: center;
									justify-content: center;
									border-radius: 4px;
									color: white;
									background: var(--orange);

									svg {
										width: 18px;
										height: 18px;
									}
								}

								.download-info {
									flex: 1;
									min-width: 0;

									.download-name {
										display: block;
										font-weight: 600;
										font-size: 0.85rem;
										margin-bottom: 0;
										word-break: break-word;
										line-height: 1.3;
									}

									.download-meta {
										display: block;
										font-size: 0.7rem;
										color: #666;
										text-transform: uppercase;
										letter-spacing: 0.5px;
									}
								}
							}
						}					/* Button styling */
					&.sidebar-button {
						.sidebar-btn {
							display: block;
							width: 100%;
							padding: 0.875rem 1.5rem;
							text-decoration: none;
							border-radius: 50px;
							font-size: 0.9rem;
							font-weight: 600;
							text-align: center;
							transition: all 0.3s ease;
							border: 2px solid transparent;

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

								&:hover {
									background: var(--orange);
									transform: translateY(-2px);
									box-shadow: 0 4px 12px rgba(0, 75, 210, 0.3);
								}
							}

							&.btn-secondary {
								background: transparent;
								color: var(--primary);
								border-color: var(--primary);

								&:hover {
									background: var(--primary);
									color: white;
									transform: translateY(-2px);
									box-shadow: 0 4px 12px rgba(0, 75, 210, 0.3);
								}
							}

							&:focus-visible {
								outline: 2px solid var(--primary);
								outline-offset: 2px;
							}
						}
					}

						/* Text snippet styling */
						&.sidebar-text {
							p {
								margin: 0 0 1rem 0;
								line-height: 1.6;
								color: var(--dark-text);

								&:last-child {
									margin-bottom: 0;
								}
							}

							ul, ol {
								margin: 0 0 1rem 0;
								padding-left: 1.25rem;

								&:last-child {
									margin-bottom: 0;
								}

								li {
									margin-bottom: 0.25rem;
									line-height: 1.5;
								}
							}

							a {
								color: var(--primary);
								text-decoration: underline;

								&:hover {
									color: var(--orange);
								}
							}

							strong {
								color: var(--dark-text);
								font-weight: 600;
							}

							em {
								font-style: italic;
							}
						}

					/* Divider styling */
					&.sidebar-divider {
						&.divider-line {
							.sidebar-hr {
								border: none;
								height: 1px;
								background: rgba(0, 75, 210, 0.15);
								margin: 0;
							}
						}

						&.divider-space {
							height: 1.5rem;
						}
					}
				}
			}
		}
	}

	/* Background color variations */
	&.text-sidebar-light-bg {
		background: var(--light-bg);
	}

	/* Padding variations */
	&.text-sidebar-padding-small {
		padding: 1.5rem 0;

		@media (max-width: 768px) {
			padding: 1.25rem 0;
		}

		@media (max-width: 480px) {
			padding: 1rem 0;
		}
	}

	&.text-sidebar-padding-large {
		padding: 6rem 0;

		@media (max-width: 768px) {
			padding: 4.5rem 0;
		}

		@media (max-width: 480px) {
			padding: 3rem 0;
		}
	}

	&.text-sidebar-padding-none {
		padding: 0;
	}
}

/* ============================
   Video Carousel Section
   ============================ */

.video-carousel-section {
	padding: 3rem 0;
	background: var(--light-bg);

	.container {
		max-width: 100vw;
		margin: 0;
		padding: 0;
	}

	.video-carousel-title {
		font-size: 2.5rem;
		font-weight: 700;
		text-align: center;
		margin-bottom: 2rem;
		color: var(--text-color);
		padding: 0 1rem;

		@media (max-width: 768px) {
			font-size: 2rem;
			margin-bottom: 1.5rem;
		}
	}

	.video-carousel-wrapper {
		position: relative;
		width: 100%;
		overflow: visible;

		.video-carousel {
			position: relative;
			overflow: hidden;
			width: 100%;

			.video-track {
				display: flex;
				gap: 2rem;
				transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				will-change: transform;

				@media (max-width: 768px) {
					gap: 1rem;
				}

				.video-slide {
					flex: 0 0 70%;
					position: relative;
					transition: opacity 0.3s ease, transform 0.3s ease;

					@media (max-width: 768px) {
						flex: 0 0 90%;
					}

					&:not(.active) {
						opacity: 0.7;
						transform: scale(0.9);
					}

					&.active {
						opacity: 1;
						transform: scale(1);
						z-index: 2;
					}

					.video-container {
						position: relative;
						width: 100%;
						height: 0;
						padding-bottom: 56.25%; /* 16:9 aspect ratio */
						border-radius: 8px;
						overflow: hidden;
						box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
						background: #000;

						iframe {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							border: none;
						}

						.video-title-overlay {
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
							padding: 2rem 1.5rem 1.5rem;
							color: white;

							h3 {
								font-size: 1.25rem;
								font-weight: 600;
								margin: 0;
								text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

								@media (max-width: 768px) {
									font-size: 1.1rem;
								}
							}
						}
					}
				}
			}
		}

		.video-carousel-nav {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 1rem;
			right: 1rem;
			display: flex;
			justify-content: space-between;
			pointer-events: none;
			z-index: 10;

			.nav-btn {
				width: 48px;
				height: 48px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.9);
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				transition: all 0.3s ease;
				pointer-events: all;
				color: var(--text-color);
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);

				&:hover {
					background: white;
					transform: scale(1.1);
					box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
				}

				&:disabled {
					opacity: 0.5;
					cursor: not-allowed;
					transform: none;
				}

				svg {
					width: 24px;
					height: 24px;
				}

				@media (max-width: 768px) {
					width: 40px;
					height: 40px;

					svg {
						width: 20px;
						height: 20px;
					}
				}
			}
		}

		.video-carousel-indicators {
			display: flex;
			justify-content: center;
			gap: 0.5rem;
			margin-top: 2rem;
			padding: 0 1rem;
			position: relative;
			z-index: 10;

			.indicator {
				width: 12px;
				height: 12px;
				border-radius: 50%;
				border: none;
				background: rgba(0, 0, 0, 0.3);
				cursor: pointer;
				transition: all 0.3s ease;

				&:hover {
					background: rgba(0, 0, 0, 0.5);
					transform: scale(1.2);
				}

				&.active {
					background: var(--orange);
					transform: scale(1.3);
				}
			}
		}
	}

	/* Remove edge preview styling that was causing issues */

	/* Dark theme support */
	&.dark-theme {
		background: var(--dark-bg);

		.video-carousel-title {
			color: white;
		}

		.video-carousel-wrapper {
			.video-carousel {
				&::before {
					background: linear-gradient(to right, #1a1a1a, transparent);
				}

				&::after {
					background: linear-gradient(to left, #1a1a1a, transparent);
				}
			}
		}
	}
}

/* Blog Block */
.blog-block-section {
	padding: 5rem 0;
	background: white;

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	&.blog-block-alt-bg {
		background: var(--light-bg);
	}

	.blog-block-header {
		text-align: center;
		margin-bottom: 4rem;

		@media (max-width: 768px) {
			margin-bottom: 3rem;
		}

		.blog-block-title {
			font-size: 2.5rem;
			font-weight: 700;
			color: var(--text-dark);
			margin: 0 0 1rem 0;
			line-height: 1.2;

			@media (max-width: 768px) {
				font-size: 2rem;
			}

			@media (max-width: 480px) {
				font-size: 1.75rem;
			}
		}

		.blog-block-subtitle {
			max-width: 600px;
			margin: 0 auto 1.5rem auto;

			p {
				font-size: 1.125rem;
				color: var(--text-gray);
				line-height: 1.6;
				margin: 0;

				@media (max-width: 768px) {
					font-size: 1rem;
				}
			}
		}

		.blog-block-category {
			.blog-block-category-label {
				display: inline-block;
				background: var(--primary);
				color: white;
				padding: 0.5rem 1rem;
				border-radius: 4px;
				font-size: 0.875rem;
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: 0.05em;
			}
		}
	}

	.blog-block-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;

		@media (max-width: 1024px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem;
		}

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

	.blog-block-card {
		background: white;
		border: 1px solid #e5e5e5;
		border-radius: 8px;
		overflow: hidden;
		height: 100%;
		transition: all 0.2s ease;

		&:hover {
			border-color: var(--primary);
			transform: translateY(-2px);

			.blog-block-card-img {
				transform: scale(1.02);
			}

			.blog-block-card-read-more {
				color: var(--primary);
			}
		}

		.blog-block-card-link {
			display: flex;
			flex-direction: column;
			height: 100%;
			text-decoration: none;
			color: inherit;
		}

		.blog-block-card-image {
			position: relative;
			overflow: hidden;
			padding-bottom: 56.25%; /* 16:9 aspect ratio */

			.blog-block-card-image-frame {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.blog-block-card-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.3s ease;
			}
		}

		.blog-block-card-content {
			padding: 1.5rem;
			flex-grow: 1;
			display: flex;
			flex-direction: column;

			@media (max-width: 768px) {
				padding: 1.25rem;
			}
		}

		.blog-block-card-meta {
			display: flex;
			align-items: center;
			gap: 1rem;
			margin-bottom: 1rem;
			font-size: 0.875rem;
			color: var(--text-gray);

			.blog-block-card-date {
				font-weight: 500;
			}

			.blog-block-card-category {
				background: var(--light-bg);
				color: var(--text-dark);
				padding: 0.25rem 0.75rem;
				border-radius: 12px;
				font-weight: 600;
				font-size: 0.75rem;
				text-transform: uppercase;
				letter-spacing: 0.05em;
			}
		}

		.blog-block-card-title {
			font-size: 1.25rem;
			font-weight: 700;
			color: var(--text-dark);
			line-height: 1.3;
			margin: 0 0 1rem 0;

			@media (max-width: 768px) {
				font-size: 1.125rem;
			}
		}

		.blog-block-card-excerpt {
			color: var(--text-gray);
			line-height: 1.6;
			margin-bottom: 1.5rem;
			flex-grow: 1;

			p {
				margin: 0;
			}
		}

		.blog-block-card-read-more {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			color: var(--primary);
			font-weight: 600;
			font-size: 0.875rem;
			transition: color 0.2s ease;
			margin-top: auto;

			svg {
				transition: transform 0.2s ease;
			}

			&:hover svg {
				transform: translateX(4px);
			}
		}
	}

	.blog-block-pagination {
		margin-top: 4rem;
		padding-top: 2rem;
		border-top: 1px solid #e5e5e5;

		@media (max-width: 768px) {
			margin-top: 3rem;
		}

		.blog-block-pagination-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			max-width: 400px;
			margin: 0 auto;

			@media (max-width: 480px) {
				flex-direction: column;
				gap: 1rem;
			}
		}

		.blog-block-pagination-btn {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.75rem 1.5rem;
			background: var(--primary);
			color: white;
			text-decoration: none;
			border-radius: 4px;
			font-weight: 600;
			font-size: 0.875rem;
			transition: all 0.2s ease;

			&:hover {
				background: var(--text-dark);
				transform: translateY(-1px);
			}

			svg {
				transition: transform 0.2s ease;
			}

			&.blog-block-pagination-prev:hover svg {
				transform: translateX(-2px);
			}

			&.blog-block-pagination-next:hover svg {
				transform: translateX(2px);
			}
		}

		.blog-block-pagination-info {
			font-size: 0.875rem;
			color: var(--text-gray);
			font-weight: 500;
		}
	}

	.blog-block-no-results {
		text-align: center;
		padding: 4rem 2rem;

		.blog-block-no-results-content {
			max-width: 400px;
			margin: 0 auto;

			h3 {
				font-size: 1.5rem;
				color: var(--text-dark);
				margin: 0 0 1rem 0;
			}

			p {
				color: var(--text-gray);
				line-height: 1.6;
				margin: 0;
			}
		}
	}

	/* Alternative background styling */
	&.blog-block-alt-bg {
		.blog-block-card {
			background: white;
			border: 1px solid #e5e5e5;

			&:hover {
				border-color: var(--primary);
			}
		}
	}
}

/* Single Post Styles */
.single-post-main {
	background: white;
	padding-top: 120px; /* Account for fixed header */

	@media (max-width: 768px) {
		padding-top: 100px;
	}
}

.single-post-article {
	padding: 0;
}

.single-post-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 4rem 2rem;

	@media (max-width: 768px) {
		padding: 3rem 1rem;
	}
}

.single-post-header {
	margin-bottom: 3rem;

	.single-post-meta {
		display: flex;
		align-items: center;
		gap: 1rem;
		margin-bottom: 1.5rem;
		font-size: 0.875rem;
		color: var(--text-gray);

		.single-post-date {
			font-weight: 500;
		}

		.single-post-category {
			background: var(--primary);
			color: white;
			padding: 0.25rem 0.75rem;
			border-radius: 4px;
			font-weight: 600;
			font-size: 0.75rem;
			text-transform: uppercase;
			letter-spacing: 0.05em;
		}
	}

	.single-post-title {
		font-size: 3rem;
		font-weight: 700;
		color: var(--text-dark);
		line-height: 1.2;
		margin: 0 0 1.5rem 0;

		@media (max-width: 768px) {
			font-size: 2.25rem;
		}

		@media (max-width: 480px) {
			font-size: 1.875rem;
		}
	}

	.single-post-excerpt {
		font-size: 1.25rem;
		color: var(--text-gray);
		line-height: 1.6;
		font-weight: 400;

		@media (max-width: 768px) {
			font-size: 1.125rem;
		}
	}
}

.single-post-featured-image {
	margin-bottom: 3rem;
	border-radius: 8px;
	overflow: hidden;

	.single-post-image {
		width: 100%;
		height: auto;
		display: block;
	}
}

.single-post-content {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--text-dark);

	@media (max-width: 768px) {
		font-size: 1rem;
	}

	/* Style content elements */
	p {
		margin-bottom: 1.5rem;

		&:last-child {
			margin-bottom: 0;
		}
	}

	ul, ol {
		margin-bottom: 1.5rem;
		padding-left: 2rem;

		li {
			margin-bottom: 0.5rem;
		}
	}

	blockquote {
		border-left: 4px solid var(--primary);
		padding: 1.5rem 2rem;
		margin: 2rem 0;
		background: var(--light-bg);
		font-style: italic;
		font-size: 1.125rem;
		color: var(--text-dark);

		p {
			margin: 0;
		}
	}

	img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
		margin: 1.5rem 0;
	}

	a {
		color: var(--primary);
		text-decoration: underline;
		transition: color 0.2s ease;

		&:hover {
			color: var(--text-dark);
		}
	}

	code {
		background: var(--light-bg);
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		font-size: 0.875em;
		color: var(--text-dark);
	}

	pre {
		background: var(--light-bg);
		padding: 1.5rem;
		border-radius: 8px;
		overflow-x: auto;
		margin: 1.5rem 0;

		code {
			background: none;
			padding: 0;
		}
	}
}

.single-post-navigation {
	background: var(--light-bg);
	padding: 3rem 0;
	margin-top: 4rem;

	@media (max-width: 768px) {
		padding: 2rem 0;
		margin-top: 3rem;
	}

	.post-nav-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		gap: 2rem;

		@media (max-width: 768px) {
			flex-direction: column;
			gap: 1.5rem;
		}
	}

	.post-nav-item {
		flex: 1;
		max-width: 45%;

		@media (max-width: 768px) {
			max-width: 100%;
		}

		&.post-nav-prev {
			text-align: left;
		}

		&.post-nav-next {
			text-align: right;
			margin-left: auto;

			@media (max-width: 768px) {
				margin-left: 0;
				text-align: left;
			}
		}

		/* When only next post exists, align it to the right */
		&.post-nav-next:only-child {
			margin-left: auto;
			margin-right: 0;

			@media (max-width: 768px) {
				margin-left: 0;
			}
		}
	}

	.post-nav-link {
		display: block;
		padding: 1.5rem;
		background: white;
		border-left: 4px solid var(--primary);
		text-decoration: none;
		color: inherit;
		transition: all 0.2s ease;
		height: 100%;
		border-radius: 0;

		&:hover {
			background: var(--primary);
			color: white;
			transform: translateX(4px);

			.post-nav-direction {
				color: rgba(255, 255, 255, 0.8);
			}

			.post-nav-title {
				color: white;
			}
		}

		&.post-nav-prev:hover {
			transform: translateX(-4px);
		}
	}

	.post-nav-direction {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.875rem;
		color: var(--primary);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin-bottom: 0.75rem;
		transition: color 0.2s ease;

		svg {
			transition: transform 0.2s ease;
		}
	}

	.post-nav-title {
		font-size: 1.125rem;
		font-weight: 600;
		color: var(--text-dark);
		line-height: 1.3;
		margin: 0;
		transition: color 0.2s ease;
	}
}

/* Header background for single posts */
.single-post .site-header {
	background: var(--primary);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

	&.scrolled {
		background: var(--primary);
	}
}

/* ============================
   FAQ Section
   ============================ */

.faq-section {
	padding: 5rem 0;
	background: white;
	background-image: url('./images/banner-backgrounds-01.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	/* Background color variations */
	&.faq-section-light-bg {
		background: var(--light-bg);
	}

	&.faq-section-grey-bg {
		background: var(--grey-bg);
	}

	/* Padding variations */
	&.faq-section-padding-small {
		padding: 1.5rem 0;

		@media (max-width: 768px) {
			padding: 1.25rem 0;
		}

		@media (max-width: 480px) {
			padding: 1rem 0;
		}
	}

	&.faq-section-padding-large {
		padding: 8rem 0;

		@media (max-width: 768px) {
			padding: 6rem 0;
		}

		@media (max-width: 480px) {
			padding: 4.5rem 0;
		}
	}

	&.faq-section-padding-none {
		padding: 0;
	}

	.faq-header {
		text-align: center;
		margin-bottom: 3rem;

		@media (max-width: 768px) {
			margin-bottom: 2.5rem;
		}

		.faq-title {
			font-size: 2.5rem;
			font-weight: 700;
			color: white;
			margin-bottom: 1rem;
			line-height: 1.2;

			@media (max-width: 768px) {
				font-size: 2rem;
			}

			@media (max-width: 480px) {
				font-size: 1.75rem;
			}
		}

		.faq-subtitle {
			max-width: 600px;
			margin: 0 auto;

			p {
				font-size: 1.125rem;
				color: var(--text-color);
				line-height: 1.6;
				margin: 0;

				@media (max-width: 768px) {
					font-size: 1rem;
				}
			}
		}
	}

	.faq-container {
		width: 100%;
		margin: 0 auto;
	}

	.faq-item {
		background: white;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		margin-bottom: 1rem;
		overflow: hidden;
		transition: all 0.3s ease;

		&:hover {
			border-color: var(--primary);
			box-shadow: 0 2px 8px rgba(0, 75, 210, 0.1);
		}

		&.faq-item-open {
			border-color: var(--primary);
			box-shadow: 0 4px 12px rgba(0, 75, 210, 0.15);

			.faq-question {
				background: var(--primary);
				color: white;

				&:hover {
					background: var(--primary);
				}

				.faq-icon {
					color: white;
				}
			}

			.faq-icon svg {
				transform: rotate(180deg);
			}
		}

		.faq-question {
			width: 100%;
			padding: 1.25rem 1.5rem;
			background: white;
			border: none;
			text-align: left;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 1rem;
			font-weight: 600;
			color: var(--dark-text);
			transition: all 0.3s ease;

			@media (max-width: 768px) {
				padding: 1rem 1.25rem;
				font-size: 0.95rem;
			}

			&:hover {
				background: #f8f9fa;
			}

			&:focus {
				outline: none;
			}

			.faq-question-text {
				flex: 1;
				margin-right: 1rem;
				line-height: 1.4;
			}

			.faq-icon {
				flex-shrink: 0;
				color: var(--primary);
				display: flex;
				align-items: center;

				svg {
					transition: transform 0.3s ease;
				}
			}
		}

		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease;

			&[aria-hidden="false"] {
				max-height: 1000px;
			}

			.faq-answer-content {
				padding: 1.25rem 1.5rem 1.5rem 1.5rem;
				color: var(--text-color);
				line-height: 1.7;

				@media (max-width: 768px) {
					padding: 1rem 1.25rem 1.25rem 1.25rem;
				}

				p {
					margin-bottom: 1rem;

					&:last-child {
						margin-bottom: 0;
					}
				}

				ul, ol {
					margin-bottom: 1rem;
					padding-left: 1.5rem;

					&:last-child {
						margin-bottom: 0;
					}

					li {
						margin-bottom: 0.5rem;
						line-height: 1.6;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}

				a {
					color: var(--primary);
					text-decoration: underline;

					&:hover {
						color: var(--orange);
					}
				}

				strong {
					font-weight: 600;
					color: var(--dark-text);
				}
			}
		}
	}
}

/* ================================ */
/* LOGOS SECTION                    */
/* ================================ */

.logos-section {
	padding: 4rem 0;

	.logos-header {
		text-align: left;
		margin-bottom: 3rem;
		padding-bottom: 1rem;
		border-bottom: 2px solid var(--primary);
		position: relative;

		.logos-subheading {
			font-family: var(--font-heading);
			font-size: 1.25rem;
			font-weight: 700;
			color: var(--primary);
			margin: 0;
			letter-spacing: 0.5px;
			line-height: 1.3;
		}
	}

	.logos-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
		align-items: center;

		@media (max-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem;
		}

		@media (max-width: 480px) {
			grid-template-columns: 1fr;
			gap: 1rem;
		}
	}

	.logo-item {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1.5rem;
		transition: transform 0.3s ease;
		height: 120px;

		&:hover {
			transform: translateY(-2px);
		}
	}

	.logo-link {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}

	.logo-image {
		max-width: 220px;
		max-height: 120px;
		width: auto;
		height: auto;
		object-fit: contain;
		transition: transform 0.3s ease;

		&:hover {
			transform: scale(1.05);
		}

		@media (max-width: 768px) {
			max-width: 180px;
			max-height: 100px;
		}

		@media (max-width: 480px) {
			max-width: 150px;
			max-height: 85px;
		}
	}

	/* Background color variations */
	&.logos-light {
		background: var(--light-bg);
	}

	&.logos-grey {
		background: var(--grey-bg);
	}

	/* Top padding variations */
	&.logos-padding-top-small {
		padding-top: 2rem;

		@media (max-width: 768px) {
			padding-top: 1.5rem;
		}
	}

	&.logos-padding-top-large {
		padding-top: 6rem;

		@media (max-width: 768px) {
			padding-top: 4rem;
		}

		@media (max-width: 480px) {
			padding-top: 3rem;
		}
	}

	&.logos-padding-top-none {
		padding-top: 0;
	}

	/* Bottom padding variations */
	&.logos-padding-bottom-small {
		padding-bottom: 2rem;

		@media (max-width: 768px) {
			padding-bottom: 1.5rem;
		}
	}

	&.logos-padding-bottom-large {
		padding-bottom: 6rem;

		@media (max-width: 768px) {
			padding-bottom: 4rem;
		}

		@media (max-width: 480px) {
			padding-bottom: 3rem;
		}
	}

	&.logos-padding-bottom-none {
		padding-bottom: 0;
	}
}

/* Gated Content Styles */
.gated-content-wrapper {
	background: var(--primary);
	width: 100%;
	padding: 2rem 1.5rem;
	margin: 2rem 0;

	@media (max-width: 768px) {
		padding: 1.5rem 1.25rem;
	}

	@media (max-width: 480px) {
		padding: 1.25rem 1rem;
	}
	
	h3 {
		margin-bottom: 0;
		color: white;
	}
}

.gated-content-inner {
	max-width: 800px;
	margin: 0 auto;
}

.gated-content-title {
	font-size: 2.5rem;
	font-weight: 700;
	color: white;
	text-align: center;
	margin-bottom: 0 !important;

	@media (max-width: 768px) {
		font-size: 2rem;
	}

	@media (max-width: 480px) {
		font-size: 1.75rem;
	}
}

.gated-content-description {
	font-size: 1.25rem;
	color: white;
	margin-bottom: 2rem;
	text-align: center;
	opacity: 0.9;

	@media (max-width: 480px) {
		font-size: 1.125rem;
		margin-bottom: 1.5rem;
	}
}

.gated-content-gdpr {
	font-size: 0.75rem;
	color: white;
	opacity: 0.75;
	text-align: center;
	margin-top: 1rem;
	margin-bottom: 0;
	line-height: 1.5;
	padding: 0.5rem 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.08);

	a {
		color: white;
		text-decoration: underline;
		font-weight: 600;

		&:hover {
			color: var(--orange);
		}
	}

	@media (max-width: 480px) {
		font-size: 0.7rem;
		padding: 0.5rem 0.625rem;
	}
}

.gated-content-form {
	.wpcf7-form {
		p {
			margin: 0;
			padding: 0;
		}
		
		.form-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1rem;
			margin-bottom: 0;
			
			@media (max-width: 600px) {
				grid-template-columns: 1fr;
			}
		}
		
		.form-group {
			margin-bottom: 1rem;
			
			p {
				margin-bottom: 0;
			}
			
			&.checkbox-group {
				margin-top: 0.5rem;
				margin-bottom: 1.5rem;
			}
			
			label {
				display: block;
				font-size: 0.9rem;
				font-weight: 600;
				color: white;
				margin-bottom: 0.5rem;
				opacity: 0.95;
			}
		}
		
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		textarea,
		select {
			width: 100%;
			padding: 1rem 1.25rem;
			border: 2px solid rgba(255, 255, 255, 0.2);
			border-radius: 8px;
			font-size: 1rem;
			transition: all 0.3s ease;
			background-color: rgba(255, 255, 255, 0.95);
			color: var(--dark-text);

			&::placeholder {
				color: rgba(0, 0, 0, 0.4);
			}

			&:focus {
				outline: none;
				border-color: var(--orange);
				background: white;
				box-shadow: 0 0 0 4px rgba(255, 134, 1, 0.1);
			}
		}
		
		select {
			cursor: pointer;
			appearance: none;
			background: rgba(255, 255, 255, 0.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") no-repeat right 1rem center;
			background-size: 16px;
			padding-right: 3rem;
			transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
			
			&:focus {
				background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") no-repeat right 1rem center;
				background-size: 16px;
			}
		}

		.wpcf7-submit {
			width: 100%;
			padding: 0.875rem 2.5rem;
			background: var(--orange);
			color: white;
			border: 2px solid var(--orange);
			border-radius: 50px;
			font-size: 1rem;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			margin-top: 1rem;
			letter-spacing: 0;
			position: relative;
			overflow: hidden;
			
			@media (max-width: 768px) {
				padding: 0.75rem 2rem;
				font-size: 0.9rem;
			}

			@media (max-width: 480px) {
				padding: 0.75rem 1.75rem;
				font-size: 0.875rem;
			}
			
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
				transition: left 0.4s ease;
			}

			&:hover {
				background: transparent;
				color: var(--orange);
				transform: translateY(-2px);
				box-shadow: 0 8px 20px rgba(255, 134, 1, 0.3);
				
				&::before {
					left: 100%;
				}
			}
			
			&:active {
				transform: translateY(0);
			}
			
			&:focus-visible {
				outline: 2px solid var(--orange);
				outline-offset: 2px;
			}
		}

		.wpcf7-spinner {
			display: none !important;
		}
		
		.wpcf7-response-output {
			margin: 1.5rem 0 0;
			padding: 1rem;
			border-radius: 8px;
			background: rgba(255, 255, 255, 0.1);
			color: white;
			border: 2px solid rgba(255, 255, 255, 0.3);
		}
		
		.wpcf7-not-valid-tip {
			color: var(--yellow);
			font-size: 0.875rem;
			margin-top: 0.25rem;
		}
	}
}

.gated-content-download {
	text-align: center;
}

.gated-content-success {
	text-align: center;
	
	i.bi-check-circle-fill {
		font-size: 5rem;
		color: var(--yellow);
		margin-bottom: 1.5rem;
		display: block;
		animation: checkmark-pop 0.5s ease-out;
	}

	h3 {
		font-size: 2.25rem;
		font-weight: 700;
		color: white;
		margin-bottom: 0.75rem;

		@media (max-width: 480px) {
			font-size: 1.875rem;
		}
	}

	p {
		font-size: 1.25rem;
		color: white;
		opacity: 0.9;
		margin-bottom: 2.5rem;
		
		@media (max-width: 480px) {
			font-size: 1.125rem;
		}
	}

	
}

@keyframes checkmark-pop {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Custom Checkbox Styles for Gated Content */
.gated-content-form {
	.wpcf7-list-item {
		margin: 0;
		padding: 0;
	}

	.wpcf7-checkbox {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;

		input[type="checkbox"] {
			appearance: none;
			-webkit-appearance: none;
			width: 24px;
			height: 24px;
			border: 2px solid rgba(255, 255, 255, 0.4);
			border-radius: 4px;
			background: rgba(255, 255, 255, 0.95);
			cursor: pointer;
			position: relative;
			flex-shrink: 0;
			margin-top: 2px;
			transition: all 0.2s ease;

			&:hover {
				border-color: var(--orange);
				background: white;
			}

			&:checked {
				background: var(--orange);
				border-color: var(--orange);

				&::after {
					content: '';
					position: absolute;
					left: 7px;
					top: 3px;
					width: 6px;
					height: 12px;
					border: solid white;
					border-width: 0 2px 2px 0;
					transform: rotate(45deg);
				}
			}

			&:focus {
				outline: none;
				box-shadow: 0 0 0 3px rgba(255, 134, 1, 0.2);
			}
		}

		.wpcf7-list-item-label {
			font-size: 1rem;
			color: white;
			cursor: pointer;
			line-height: 1.5;
			user-select: none;
			opacity: 0.95;
		}
	}
}

/* Loading state */
.gated-content-wrapper.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ================================
   EVENTS SYSTEM
   ================================ */

/* Events Archive Main */
.events-archive-main {
	background: white;
	padding-top: 0; /* No padding as we have page title */
}

/* Events Archive Page Title */
.events-archive-title {
	background-image: url('./images/banner-backgrounds-01.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	&::before {
		background: linear-gradient(135deg, rgba(0, 75, 210, 0.85) 0%, rgba(0, 0, 0, 0.4) 100%);
	}
}

/* Events Filter Section */
.events-filter-section {
	background: var(--light-bg);
	padding: 2rem 0;
	border-bottom: 1px solid rgba(0, 75, 210, 0.1);

	.events-filter-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;

		@media (max-width: 1024px) {
			flex-direction: column;
			align-items: stretch;
			gap: 1.5rem;
		}
	}

	.events-filter-left {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		flex: 1;

		@media (max-width: 768px) {
			flex-direction: column;
			align-items: stretch;
			gap: 1rem;
		}
	}

	.events-search-wrapper {
		position: relative;
		flex: 1;

		@media (max-width: 768px) {
			min-width: auto;
		}

		.events-search-input {
			width: 100%;
			padding: 0.875rem 3rem 0.875rem 1.25rem;
			border: 2px solid rgba(0, 75, 210, 0.15);
			border-radius: 6px;
			font-size: 1rem;
			transition: all 0.3s ease;
			background: white;

			&::placeholder {
				color: rgba(0, 0, 0, 0.4);
			}

			&:focus {
				outline: none;
				border-color: var(--primary);
				box-shadow: 0 0 0 4px rgba(0, 75, 210, 0.1);
			}
		}

		.events-search-btn {
			position: absolute;
			right: 12px;
			top: 50%;
			transform: translateY(-50%);
			width: 40px;
			height: 40px;
			border: none;
			border-radius: 4px;
			background: var(--primary);
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s ease;

			&:hover {
				background: var(--orange);
				transform: translateY(-50%) scale(1.05);
			}

			i {
				font-size: 1rem;
			}
		}
	}

	.events-filter-dropdowns {
		display: flex;
		gap: 1rem;
		flex: 1;

		@media (max-width: 768px) {
			flex-direction: column;
		}

		.events-filter-select {
			padding: 0.875rem 1.25rem;
			border: 2px solid rgba(0, 75, 210, 0.15);
			border-radius: 6px;
			font-size: 1rem;
			background: white;
			cursor: pointer;
			transition: all 0.3s ease;
			appearance: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23004bd2' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 1rem center;
			background-size: 16px;
			padding-right: 3rem;
			flex: 1;

			@media (max-width: 768px) {
				min-width: auto;
			}

			&:focus {
				outline: none;
				border-color: var(--primary);
				box-shadow: 0 0 0 4px rgba(0, 75, 210, 0.1);
			}
		}
	}

	.events-filter-right {
		.events-view-toggle {
			display: flex;
			background: white;
			border-radius: 6px;
			border: 2px solid rgba(0, 75, 210, 0.15);
			overflow: hidden;

			@media (max-width: 1280px) {
				display: none;
			}

			.events-view-btn {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				padding: 0.875rem 1.5rem;
				border: none;
				background: transparent;
				cursor: pointer;
				font-size: 0.9rem;
				font-weight: 600;
				color: var(--dark-text);
				transition: all 0.3s ease;

				@media (max-width: 480px) {
					padding: 0.75rem 1.25rem;

					span {
						display: none;
					}
				}

				&:hover {
					background: var(--light-bg);
				}

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

				i {
					font-size: 1rem;
				}
			}
		}
	}
}

/* Events Content Wrapper */
.events-content-wrapper {
	position: relative;

	.events-view {
		display: none;

		&.active {
			display: block;
		}

		/* Force list view below 1280px */
		@media (max-width: 1280px) {
			&[data-view="list"] {
				display: block !important;
			}

			&[data-view="calendar"] {
				display: none !important;
			}
		}
	}
}

/* Events Section Headers */
.events-section-header {
	text-align: center;
	margin-bottom: 3rem;

	@media (max-width: 768px) {
		margin-bottom: 2.5rem;
	}

	.events-section-title {
		font-size: 2.5rem;
		font-weight: 700;
		color: var(--primary);
		margin-bottom: 1rem;
		line-height: 1.2;

		@media (max-width: 768px) {
			font-size: 2rem;
		}

		@media (max-width: 480px) {
			font-size: 1.75rem;
		}
	}

	.events-section-subtitle {
		font-size: 1.125rem;
		color: var(--dark-text);
		opacity: 0.8;
		margin: 0;
		line-height: 1.6;

		@media (max-width: 768px) {
			font-size: 1rem;
		}
	}
}

/* Upcoming Events Section */
.events-upcoming-section {
	padding: 5rem 0;
	background: white;

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}
}

/* Events Grid */
.events-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;

	@media (max-width: 1024px) {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

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

/* Event Card */
.event-card {
	background: white;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	overflow: hidden;
	height: 100%;
	transition: all 0.3s ease;
	position: relative;

	&:hover {
		border-color: var(--primary);
		transform: translateY(-5px);
		box-shadow: 0 15px 35px rgba(0, 75, 210, 0.15);

		.event-card-img {
			transform: scale(1.05);
		}

		.event-card-read-more {
			color: var(--primary);

			svg {
				transform: translateX(4px);
			}
		}
	}

	&.event-card-featured {
		border-color: var(--orange);
		box-shadow: 0 8px 25px rgba(255, 134, 1, 0.15);

		&:hover {
			border-color: var(--orange);
			box-shadow: 0 15px 35px rgba(255, 134, 1, 0.25);
		}
	}

	.event-card-link {
		display: flex;
		flex-direction: column;
		height: 100%;
		text-decoration: none;
		color: inherit;
	}

	.event-card-image {
		position: relative;
		overflow: hidden;
		aspect-ratio: 16 / 9;

		.event-card-image-frame {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.event-card-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.3s ease;
		}

		.event-card-taxonomies-overlay {
			position: absolute;
			top: 1rem;
			left: 1rem;
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			z-index: 2;

			.event-card-division,
			.event-card-type {
				display: flex;
				align-items: center;
				gap: 0.375rem;
				padding: 0.375rem 0.625rem;
				border-radius: 6px;
				font-size: 0.75rem;
				font-weight: 600;
				color: white;
				backdrop-filter: blur(10px);
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

				i {
					font-size: 0.7rem;
				}
			}

			.event-card-division {
				background: rgba(0, 75, 210, 0.9);
			}

			.event-card-type {
				background: rgba(255, 134, 1, 0.9);
			}
		}

		.event-card-featured-badge {
			position: absolute;
			top: 1rem;
			right: 1rem;
			background: var(--orange);
			color: white;
			padding: 0.5rem 1rem;
			border-radius: 20px;
			font-size: 0.8rem;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 0.25rem;
			z-index: 2;

			i {
				font-size: 0.875rem;
			}
		}
	}

	.event-card-content {
		padding: 1.5rem;
		flex-grow: 1;
		display: flex;
		flex-direction: column;

		@media (max-width: 768px) {
			padding: 1.25rem;
		}
	}

	.event-card-meta-table {
		margin-bottom: 0.75rem;

		.meta-row {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.25rem 0;

			&:not(:last-child) {
				margin-bottom: 0.125rem;
			}
		}

		.meta-icon {
			width: 16px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;

			i {
				font-size: 0.75rem;
				color: var(--primary);
			}
		}

		.meta-content {
			flex: 1;
			font-size: 0.875rem;
			color: var(--dark-text);
			line-height: 1.2;

			time, .event-time-main {
				font-weight: 500;
				color: var(--dark-text);

				.event-timezone {
					font-size: 0.875rem;
					font-weight: 400;
					color: var(--text-muted);
					opacity: 0.7;
					margin-left: 0.25rem;
				}
			}
		}
	}

	.event-card-title {
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--dark-text);
		line-height: 1.3;
		margin: 0 0 0.5rem 0;

		@media (max-width: 768px) {
			font-size: 1.125rem;
		}
	}



	.event-card-excerpt {
		color: var(--dark-text);
		opacity: 0.75;
		line-height: 1.5;
		margin-bottom: 1rem;
		flex-grow: 1;
		font-size: 0.875rem;
	}

	.event-card-footer {
		margin-top: auto;

		.event-card-view-btn {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0.5rem 1rem;
			background: var(--primary);
			color: white;
			font-weight: 600;
			font-size: 0.875rem;
			border-radius: 6px;
			transition: all 0.3s ease;

			&:hover {
				background: #003ba3;
				transform: translateY(-1px);
			}

			i {
				font-size: 0.8rem;
				transition: transform 0.3s ease;
			}
		}
	}
}

/* Past Events Section */
.events-past-section {
	padding: 5rem 0;
	background: var(--light-bg);

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}
}

/* Past Events List */
.events-past-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

.event-past-item {
	background: white;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	transition: all 0.3s ease;
	height: fit-content;

	&:hover {
		border-color: var(--primary);
		box-shadow: 0 4px 15px rgba(0, 75, 210, 0.1);

		.event-past-arrow i {
			transform: translateX(4px);
		}
	}

	.event-past-link {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 1rem 1.25rem;
		text-decoration: none;
		color: inherit;

		@media (max-width: 768px) {
			gap: 0.75rem;
			padding: 0.875rem 1rem;
		}

		@media (max-width: 480px) {
			flex-direction: column;
			text-align: center;
			gap: 1rem;
			padding: 1rem;
		}
	}

	.event-past-date {
		flex-shrink: 0;
		text-align: center;
		padding: 0.625rem 0.75rem;
		background: var(--light-bg);
		border-radius: 5px;
		min-width: 65px;

		@media (max-width: 480px) {
			min-width: auto;
			padding: 0.625rem 0.75rem;
		}

		.event-past-month {
			font-size: 0.75rem;
			font-weight: 600;
			color: var(--primary);
			text-transform: uppercase;
			letter-spacing: 0.5px;
			line-height: 1.1;
		}

		.event-past-day {
			font-size: 1.2rem;
			font-weight: 800;
			color: var(--dark-text);
			line-height: 1.1;
			margin: 0.1rem 0;
		}

		.event-past-year {
			font-size: 0.75rem;
			color: var(--dark-text);
			opacity: 0.7;
			line-height: 1.1;
		}
	}

	.event-past-content {
		flex: 1;

		.event-past-title {
			font-size: 1rem;
			font-weight: 700;
			color: var(--dark-text);
			line-height: 1.3;
			margin: 0 0 0.5rem 0;

			@media (max-width: 768px) {
				font-size: 0.95rem;
			}
		}

		.event-past-meta {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			font-size: 0.875rem;

			@media (max-width: 480px) {
				align-items: center;
			}

			.event-past-taxonomies {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5rem;

				.event-card-division,
				.event-card-type {
					display: flex;
					align-items: center;
					gap: 0.375rem;
					padding: 0.25rem 0.5rem;
					background: var(--light-bg);
					border-radius: 4px;
					font-size: 0.75rem;
					font-weight: 500;
					color: var(--dark-text);
					border: 1px solid transparent;

					i {
						font-size: 0.7rem;
						color: var(--primary);
					}
				}

				.event-card-division {
					background: rgba(0, 75, 210, 0.08);
					border-color: rgba(0, 75, 210, 0.15);
				}

				.event-card-type {
					background: rgba(255, 134, 1, 0.08);
					border-color: rgba(255, 134, 1, 0.15);

					i {
						color: var(--orange);
					}
				}
			}

			.event-past-location {
				display: flex;
				align-items: center;
				gap: 0.375rem;
				font-size: 0.8rem;
				color: var(--text-muted);
				margin-top: 0.125rem;

				i {
					font-size: 0.75rem;
					color: var(--primary);
				}
			}
		}
	}

	.event-past-arrow {
		flex-shrink: 0;
		color: var(--primary);

		@media (max-width: 480px) {
			display: none;
		}

		i {
			font-size: 1.25rem;
			transition: transform 0.3s ease;
		}
	}
}

/* No Results Section */
.events-no-results-section {
	padding: 5rem 0;
	background: white;

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	.events-no-results {
		text-align: center;
		max-width: 600px;
		margin: 0 auto;

		i {
			font-size: 4rem;
			color: var(--primary);
			opacity: 0.3;
			margin-bottom: 1.5rem;
			display: block;
		}

		h3 {
			font-size: 1.5rem;
			color: var(--dark-text);
			margin: 0 0 1rem 0;
		}

		p {
			color: var(--dark-text);
			opacity: 0.7;
			line-height: 1.6;
			margin: 0;
		}
	}
}

/* Calendar View */
.events-calendar-section {
	padding: 3rem 0 5rem;
	background: white;

	@media (max-width: 768px) {
		padding: 2rem 0 4rem;
	}

	#events-calendar {
		background: white;
		border: 1px solid #e5e5e5;
		border-radius: 12px;
		overflow: hidden;

		table {
			margin: 0;
		}

		/* FullCalendar customization */
		.fc-header-toolbar {
			padding: 1.5rem;
			background: var(--primary);
			margin: 0;

			.fc-toolbar-chunk {
				display: flex;
				align-items: center;
			}

			.fc-button-group .fc-button {
				background: rgba(255, 255, 255, 0.2);
				border-color: rgba(255, 255, 255, 0.3);
				color: white;

				&:hover {
					background: rgba(255, 255, 255, 0.3);
				}

				&.fc-button-active {
					background: var(--orange);
					border-color: var(--orange);
				}
			}

			.fc-toolbar-title {
				color: white;
				font-size: 1.5rem;
				font-weight: 700;
				margin-bottom: 0 !important;
			}
		}

		.fc-daygrid-day {
			&:hover {
				background: rgba(0, 75, 210, 0.05);
			}
		}

		.fc-event {
			background: var(--primary);
			border-color: var(--primary);
			font-size: 0.8rem;
			padding: 0.25rem;
			border-radius: 4px;

			&:hover {
				background: var(--orange);
				border-color: var(--orange);
			}

			&.fc-event-featured {
				background: var(--orange);
				border-color: var(--orange);
			}
		}

		.fc-day-today {
			background: rgba(0, 75, 210, 0.05) !important;
		}

		/* Table header cells - white background, no border radius */
		.fc-col-header-cell {
			background: white !important;
			border-radius: 0 !important;
			font-weight: 600;
			color: var(--dark-text);

			a {
				text-decoration: none !important;
				color: var(--dark-text);
			}
		}

		/* Day numbers - remove underline */
		.fc-daygrid-day-number {
			text-decoration: none !important;
			color: var(--dark-text);
		}

		a.fc-daygrid-day-number {
			text-decoration: none !important;

			&:hover {
				text-decoration: none !important;
			}
		}
	}
}

/* Single Event Styles */
.single-event-main {
	background: white;
	padding-top: 0; /* No padding as we start with header */
}

/* Single Event Header */
.single-event-header {
	padding: 8rem 0 5rem;
	background: var(--light-bg);

	@media (max-width: 768px) {
		padding: 6rem 0 4rem;
	}

	@media (max-width: 480px) {
		padding: 5rem 0 3rem;
	}

	.single-event-header-grid {
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 4rem;
		align-items: start;
		margin-bottom: 2rem;

		@media (max-width: 1024px) {
			grid-template-columns: 1fr;
			gap: 3rem;
		}

		@media (max-width: 768px) {
			gap: 2rem;
		}
	}

	.single-event-back {
		.button {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;

			i {
				font-size: 0.875rem;
			}
		}
	}

	.single-event-details {
		@media (max-width: 1024px) {
			order: 2;
		}
	}

	.single-event-meta {
		margin-bottom: 2rem;

		.single-event-featured-badge {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			background: var(--orange);
			color: white;
			padding: 0.5rem 1rem;
			border-radius: 20px;
			font-size: 0.875rem;
			font-weight: 600;
			margin-bottom: 1rem;

			i {
				font-size: 0.875rem;
			}
		}

		.single-event-taxonomies {
			display: flex;
			flex-wrap: wrap;
			gap: 0.75rem;

			.single-event-division,
			.single-event-type {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				font-size: 0.875rem;
				padding: 0.5rem 1rem;
				border-radius: 6px;
				font-weight: 600;
				color: var(--dark-text);
				border: 1px solid transparent;

				i {
					font-size: 0.875rem;
				}
			}

			.single-event-division {
				background: rgba(0, 75, 210, 0.08);
				border-color: rgba(0, 75, 210, 0.15);

				i {
					color: var(--primary);
				}
			}

			.single-event-type {
				background: rgba(255, 134, 1, 0.08);
				border-color: rgba(255, 134, 1, 0.15);

				i {
					color: var(--orange);
				}
			}
		}
	}

	.single-event-title {
		font-size: 3rem;
		font-weight: 800;
		color: var(--primary);
		line-height: 1.2;
		margin: 0 0 1.5rem 0;

		@media (max-width: 1024px) {
			font-size: 2.5rem;
		}

		@media (max-width: 768px) {
			font-size: 2.25rem;
		}

		@media (max-width: 480px) {
			font-size: 2rem;
		}
	}

	.single-event-excerpt {
		font-size: 1.25rem;
		color: var(--dark-text);
		opacity: 0.8;
		line-height: 1.6;
		margin-bottom: 2rem;

		@media (max-width: 768px) {
			font-size: 1.125rem;
		}
	}

	.single-event-info-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
		margin-bottom: 2.5rem;

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: 1.25rem;
		}
	}

	.single-event-info-item {
		display: flex;
		align-items: flex-start;
		gap: 1rem;
		padding: 1rem;
		background: white;
		border-radius: 8px;
		border: 1px solid rgba(0, 75, 210, 0.1);

		.single-event-info-icon {
			flex-shrink: 0;
			width: 40px;
			height: 40px;
			background: rgba(0, 75, 210, 0.1);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--primary);

			i {
				font-size: 1.25rem;
			}
		}

		.single-event-info-content {
			flex: 1;

			.single-event-info-label {
				font-size: 0.8rem;
				font-weight: 600;
				color: var(--primary);
				text-transform: uppercase;
				letter-spacing: 0.5px;
				margin-bottom: 0.25rem;
			}

			.single-event-info-value {
				font-size: 1rem;
				font-weight: 600;
				color: var(--dark-text);
				line-height: 1.3;

				.event-timezone {
					font-size: 1rem;
					font-weight: 600;
					color: var(--dark-text);
					opacity: 0.7;
				}

				.single-event-format-badge {
					display: inline-block;
					padding: 0.25rem 0.75rem;
					border-radius: 12px;
					font-size: 0.75rem;
					font-weight: 700;
					text-transform: uppercase;
					letter-spacing: 0.5px;
					margin-left: 0.5rem;

					&.single-event-format-virtual {
						background: var(--light-blue);
						color: var(--primary);
					}

					&.single-event-format-hybrid {
						background: rgba(255, 134, 1, 0.15);
						color: var(--orange);
					}
				}

				.single-event-map-link {
					margin-top: 0.5rem;

					a {
						display: inline-flex;
						align-items: center;
						gap: 0.375rem;
						color: var(--primary);
						font-size: 0.875rem;
						font-weight: 600;
						text-decoration: none;
						transition: all 0.3s ease;

						i {
							font-size: 0.875rem;
						}

						&:hover {
							color: var(--orange);
						}
					}
				}
			}
		}
	}

	.single-event-actions {
		.button {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			font-size: 1rem;

			i {
				font-size: 1rem;
			}
		}
	}

	.single-event-image {
		@media (max-width: 1024px) {
			order: 1;
		}

		.single-event-image-frame {
			position: relative;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

			.single-event-img {
				width: 100%;
				height: auto;
				display: block;
			}
		}
	}
}

/* Single Event Content */
.single-event-content {
	padding: 5rem 0;
	background: white;

	@media (max-width: 768px) {
		padding: 4rem 0;
	}

	@media (max-width: 480px) {
		padding: 3rem 0;
	}

	.single-event-content-wrapper {
		max-width: 1000px;
		margin: 0 auto;
	}

	.single-event-main-content {
		margin-bottom: 3rem;
		font-size: 1rem;
		line-height: 1.7;
		color: var(--dark-text);

		p {
			margin-bottom: 1.5rem;

			&:last-child {
				margin-bottom: 0;
			}
		}

		h1, h2, h3, h4, h5, h6 {
			margin-top: 2rem;
			margin-bottom: 1rem;

			&:first-child {
				margin-top: 0;
			}
		}

		ul, ol {
			margin-bottom: 1.5rem;
			padding-left: 2rem;

			li {
				margin-bottom: 0.5rem;
			}
		}

		img {
			max-width: 100%;
			height: auto;
			border-radius: 8px;
			margin: 1.5rem 0;
		}
	}
}

/* Single Event Navigation */
.single-event-navigation {
	background: var(--light-bg);
	padding: 3rem 0;

	@media (max-width: 768px) {
		padding: 2rem 0;
	}

	.event-nav-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 2rem;

		@media (max-width: 768px) {
			flex-direction: column;
			gap: 1.5rem;
		}
	}

	.event-nav-item {
		flex: 1;
		max-width: 35%;

		@media (max-width: 768px) {
			max-width: 100%;
			width: 100%;
		}

		&.event-nav-prev {
			text-align: left;
		}

		&.event-nav-next {
			text-align: right;

			@media (max-width: 768px) {
				text-align: left;
			}
		}
	}

	.event-nav-link {
		display: block;
		padding: 1.5rem;
		background: white;
		border: 2px solid rgba(0, 75, 210, 0.1);
		border-radius: 8px;
		text-decoration: none;
		color: inherit;
		transition: all 0.3s ease;

		&:hover {
			border-color: var(--primary);
			background: var(--primary);
			color: white;
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(0, 75, 210, 0.2);

			.event-nav-direction {
				color: rgba(255, 255, 255, 0.8);
			}

			.event-nav-title {
				color: white;
			}
		}
	}

	.event-nav-direction {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.875rem;
		color: var(--primary);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin-bottom: 0.75rem;
		transition: color 0.3s ease;

		i {
			font-size: 1rem;
		}
	}

	.event-nav-title {
		font-size: 1rem;
		font-weight: 600;
		color: var(--dark-text);
		line-height: 1.3;
		margin: 0;
		transition: color 0.3s ease;
	}

	.event-nav-center {
		flex-shrink: 0;

		@media (max-width: 768px) {
			order: -1;
		}

		.button {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;

			i {
				font-size: 1rem;
			}
		}
	}
}

/* Responsive adjustments */
@media (max-width: 480px) {
	.events-filter-section {
		padding: 1.5rem 0;

		.events-filter-bar {
			gap: 1rem;
		}

		.events-filter-left {
			gap: 0.75rem;
		}

		.events-search-wrapper {
			min-width: auto;

			.events-search-input {
				padding: 0.75rem 2.75rem 0.75rem 1rem;
				font-size: 0.9rem;
			}

			.events-search-btn {
				width: 36px;
				height: 36px;
				right: 2px;

				i {
					font-size: 0.9rem;
				}
			}
		}

		.events-filter-dropdowns .events-filter-select {
			padding: 0.75rem 2.5rem 0.75rem 1rem;
			font-size: 0.9rem;
			min-width: auto;
		}

		.events-view-toggle .events-view-btn {
			padding: 0.75rem 1rem;
			font-size: 0.85rem;
		}
	}

	.events-section-header {
		margin-bottom: 2rem;

		.events-section-title {
			font-size: 1.5rem;
		}

		.events-section-subtitle {
			font-size: 0.9rem;
		}
	}

	.events-grid {
		gap: 1.5rem;
	}

	.event-card .event-card-content {
		padding: 1rem;
	}

	.events-past-list .event-past-item .event-past-link {
		padding: 1rem;
		gap: 0.75rem;
	}
}