header.front-header
{
	height: clamp(20rem, 88dvh, 960px);
	
	.swiper-wrapper
	{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
		
		.swiper-slide
		{
			position: relative;
			height: 100%;
			width: 100%;
			
			img
			{
				position: absolute;
				height: 100%;
				width: 100%;
				object-fit: cover;
				object-position: center;
			}
		}
	}
}

.header-swiper-pagination
{
	display: flex;
	z-index: 20;
	justify-content: flex-end;
	gap: 1rem;
	padding: 2rem 2rem 0 0;
	
	span
	{
		position: relative;
		height: 5px;
		width: 4rem;
		border-radius: 0 !important;
		opacity: 1 !important;
		background: var(--website-dark-gray);
	}
	
	span.swiper-pagination-bullet-active:after
	{
		content: '';
		position: absolute;
		height: 100%;
		width: 0%;
		top: 0;
		left: 0;
		background: var(--website-gold);
		animation-name: paginationEffect;
		animation-duration: 5250ms;
		animation-fill-mode: forwards;
	}
}

@keyframes paginationEffect
{
	0%
	{
		width: 0%;
	}
	
	100%
	{
		width: 100%;
	}
}

header.sub-header
{
	background-color: var(--website-light-gray);
	background-size: cover;
	background-position: center;
	height: clamp(10rem, 46.3dvh, 500px);
}

header
{
	position: relative;
	
	nav.rank-math-breadcrumb
	{
		position: relative;
		z-index: 20;
		padding-top: clamp(1rem, 5.55dvh, 65px);
		padding-left: clamp(1rem, 12.5dvw, 240px);
		
		p
		{
			display: flex;
			gap: .5rem;
			align-items: center;
			
			a:first-child
			{
				font-family: 'Material Icons';
				font-size: 1.5rem;
				font-weight: normal;
				font-style: normal;
				letter-spacing: normal;
				text-transform: none;
				display: inline-block;
				white-space: nowrap;
				word-wrap: normal;
				direction: ltr;
				-webkit-font-smoothing: antialiased;
			}
			
			a
			{
				color: white;
				text-transform: uppercase;
				font-weight: 700;
				letter-spacing: 3.5px;
				text-decoration: none;
			}
			
			span
			{
				text-transform: uppercase;
				letter-spacing: 3.5px;
				color: white;
			}
			
			span.separator
			{
				font-size: 2rem;
				font-weight: 100;
			}
		}
	}
}

header:after
{
	content: '';
	position: absolute;
	height: 33%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	background-image: linear-gradient(180deg, rgba(77,81,96,.9) 0%, rgba(77,81,96,0) 100%);
}

nav.on-screen
{
	position: absolute;
	z-index: 26;
	color: white;
	cursor: pointer;
	top: clamp(1rem, 5.55dvh, 65px);
	right: 0;
	padding-right: clamp(1rem, 12.5dvw, 240px);
	
	.hamburger-button
	{		
		color: var(--website-gold);
		
		.open
		{
			display: block;
		}
		
		.close
		{
			display: none;
		}
	}
	
	.hamburger-button.toggled
	{
		.open
		{
			display: none;
		}
		
		.close
		{
			display: block;
		}
	}
}

nav.on-screen:after
{
	content: '';
	position: absolute;
	display: block;
	z-index: 26;
	top: 50%;
	right: 0;
	width: calc( clamp(1rem, 12.5dvw, 240px) - 2rem);
	border-bottom: 1px solid var(--website-gold);
}

.off-screen-wrapper
{
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	max-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
}
nav.off-screen
{
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	position: relative;
	z-index: 25;
	top: 0px;
	right: 0px;
	width: 100%;
	transform: translateX(100%);
	opacity: 0;
	transition: all 250ms ease-in-out;
	background: white;
	padding: clamp(1rem, 5.55dvh, 65px) clamp(1rem, 12.5dvw, 240px);
	
	> a.off-screen-home
	{
		color: var(--website-gold);
	}
	
	> ul
	{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		list-style-type: none;
		margin-block-start: 0px;
		margin-block-end: 0px;
		padding-inline-start: 0px;
		gap: 2.5rem;
		
		li
		{
			position: relative;
			
			a
			{
				position: relative;
				letter-spacing: 3.5px;
				color: black;
				transition: color 250ms ease-in-out;
				text-decoration: none;
			}
		}
		
		> li
		{
			position: relative;
			display: flex;
			gap: 1.5rem;
			flex-direction: column;
			text-transform: uppercase;
			
			> a
			{
				font-weight: 600;
			}
			
			span
			{
				position: absolute;
				top: 0px;
				right: 0px;
				cursor: pointer;
				transition: transform 250ms ease-in-out;
			}
			
			span.toggled
			{
				transform: rotateX(180deg);
			}
			
			ul
			{
				display: none;
				max-height: 0px;
			}
			
			ul.active
			{
				display: flex;
				gap: 1.5rem;
				flex-direction: column;
				list-style-type: none;
				margin-block-start: 0px;
				margin-block-end: 0px;
				padding-inline-start: 0px;
				animation-name: submenuRender;
				animation-duration: 1s;
				animation-fill-mode: forwards;
			}
		}
		
		li.has-submenu
		{
			padding-right: 3rem;
		}
		
		li.current-item > a:after
		{
			content: '';
			position: absolute;
			height: 100%;
			width: 100%;
			left: 0px;
			right: 0px;
			top: .5rem;
			border-bottom: 2px solid var(--website-gold);
		}
		
		a:hover
		{
			color: var(--website-gold);
		}
	}
}

nav.off-screen.active
{
	transform: translateX(0px);
	opacity: 1;
}

@keyframes submenuRender
{
	0%
	{
		max-height: 0px;
	}
	
	100%
	{
		max-height: 9999px;
	}
}

body.home header.front-header nav.rank-math-breadcrumb span.last
{
	font-family: 'Material Icons';
	font-size: 1.5rem;
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
}

main > h1.page-title
{
	margin: 0 auto;
	display: block;
	text-align: center;
	width: clamp(1rem, 42.7dvw ,820px);
	padding: 1.775rem;
	background: white;
	transform: translateY(-50%);
}

@media ( width < 1300px )
{
	nav.off-screen
	{
		> ul
		{
			li
			{
				flex-basis: 100%;
			}
		}
	}
	
	main > h1.page-title
	{
		width: unset;
		max-width: calc(100% - 4rem);
	}
}