:root
{	
	--background-image-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23F0A500' fill-opacity='0.4'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#about-us
{
	.hero-image
	{
		position: relative;
		top: -300px;
	}
	
	video
	{
		border: 4px ridge var(--color5-60);
	}
}

#our-services
{
	.page-content
	{
		&> div
		{
			background-color: var(--color2-80);
			border-radius: 24px;
		}
	}

	.page-content ul
	{
		list-style-type: square;
		list-style-position: inside;
	}

	.page-content li
	{
		margin-bottom: var(--spacing-xs-em);

		&::marker
		{
			position: relative;
			top: -16px;
		}
	}
}

#our-team
{
	#team-colleagues
	{
		.team-colleague:nth-of-type(even)
		{
			flex-direction: row-reverse;
		}
	}

	#our-team-background-image
	{
		img
		{
			filter: brightness(0.2);
			top: 0px;
			left: 0px;
		}
	}

	.colleague-portrait img
	{
		border: 4px ridge var(--color5-60);
	}
}

.page-content
{
	background-color: var(--color5-80);

	h3
	{
		letter-spacing: 0.6px;
	}

	p
	{
		line-height: 28px;
	}

	a
	{
		color: var(--color5-20);
	}
}

@media (max-width: 1250px) {
	nav
	{
		flex-direction: column !important;
		row-gap: var(--spacing-xxxs-em);
		padding-top: var(--spacing-xxxs-em) !important;
		padding-bottom: var(--spacing-xxxs-em) !important;

		img
		{
			max-height: 50px;
		}
	}

	.hero-section
	{
		aspect-ratio: 16 / 16;

		.hero-content
		{
			align-items: center;
		}

		.hero-image
		{
			height: 100%;
			width: auto;
			object-fit: cover;
		}

		.glass-pane-effect
		{
			margin-left: 0;
		}
	}

	#about-us
	{
		.hero-image
		{
			position: relative;
			top: 0;
		}
	}

	.page-content
	{
		width: 100%;
		justify-content: start;
		padding-top: var(--spacing-s-em);

		#page-content-container
		{
			flex-direction: column-reverse;
			row-gap: var(--spacing-s-em);

			#home-text-body
			{
				width: auto;
			}

			#contact-us-container
			{
				flex-direction: row;
				column-gap: var(--spacing-s-em);
				flex-wrap: wrap;
			}
		}
	}
	
	#our-services
	{
		.page-content
		{
			#our-services-company-logo
			{
				display: none;

				&+.width-l-pct
				{
					width: auto;
				}
			}

			&>div
			{
				padding: 2em 4em;
			}
		}
	}

	#our-team
	{
		#our-team-background-image
		{
			img
			{
				height: 100lvh;
			}
		}

		#team-colleagues
		{
			.team-colleague
			{
				flex-direction: column;
				row-gap: var(--spacing-s-em);
				
				&:nth-of-type(even)
				{
					flex-direction: column;
				}

				.colleague-name
				{
					margin: 0 auto;
					text-align: center;
				}
			}
		}
	}

	#testimonials
	{
		.carousel-widget
		{
			width: var(--spacing-xl-pct);
		}
	}
}

@media (max-width: 1000px) {
	#our-team
	{
		#team-colleagues
		{
			padding-left: 1% !important;
			padding-right: 1% !important;
		}
	}
}

/* Mobile menu styles */
.hamburger-menu {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	z-index: 100;
}

.hamburger-menu span {
	display: block;
	width: 30px;
	height: 3px;
	margin: 5px 0;
	background-color: var(--color5-20);
	transition: all 0.3s ease;
}

.side-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 80%;
	max-width: 320px;
	height: 100lvh;
	z-index: 1000;
	transition: all 0.3s ease-in-out;
}

.side-menu.open {
	right: 0;
}

.side-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
}

.side-menu.open .side-menu-overlay {
	opacity: 1;
	visibility: visible;
}

.side-menu-content {
	height: 100%;
	background-color: var(--color2-80);
	padding: 20px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.side-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.close-button {
	background: none;
	border: none;
	font-size: 2em;
	color: var(--color5-20);
	cursor: pointer;
}

.side-menu-links {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s-em);
}

.side-menu-links li {
	margin-bottom: 15px;
}

.side-menu-links a {
	color: var(--color5-20);
	font-size: 1.4em;
	text-decoration: none;
	display: block;
	padding: 10px 0;
	transition: all 0.3s ease;
}

.side-menu-links a:hover {
	color: var(--color5-20);
	transform: translateX(5px);
}

@media (max-width: 628px) {
	.hamburger-menu {
		display: block;
	}
	
	#top-menu {
		display: none !important;
	}
	
	#real-header nav {
		padding: var(--spacing-xxs-em) var(--spacing-xs-em) !important;
		justify-content: space-between !important;
	}
	
	#website-title {
		font-size: 1.2em;
	}
	
	#website-title span {
		display: none;
	}
	
	.page-content {
		padding: var(--spacing-xs-em);

		p
		{
			line-height: 22px;
		}
	}
	
	nav
	{
		flex-direction: row !important;
	}

	.glass-pane-effect
	{
		border: none !important;
		height: 100%;
		width: 100%;
	}

	#about-us
	{
		.page-content
		{
			img, video
			{
				width: 100%;
			}
		}
	}

	#our-services
	{
		.page-content
		{
			margin: 0;
			padding: 0;

			&>div
			{
				border-radius: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 2em;
			}
		}
	}
	
	#testimonials
	{
		.carousel-widget-wrapper
		{
			mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
		}
		
		.carousel-widget
		{
			width: var(--spacing-xxl-pct);

			.carousel-page
			{
				padding: 0.5em;
			}
		}
	}
}