@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Poppins&display=swap');

:root {
	--light-blue:#cce5ff;
	--primary-blue:#66b0ff;
	--normal-blue:#699CFE;
	--primary-blue:#6990f2;
	--dark-blue:#695CFE;
	--light-green:#f3ffa8;
	--primary-green:#c5e019;
}

html {
    scroll-behavior: smooth;
}

body {
	font-family:"Poppins" ,sans-serif;
	box-sizing:border-box;	
	overflow-x:hidden;
}

::-webkit-scrollbar {
	width:8px;
	height:8px;
}

::-webkit-scrollbar-track {
	background:#fff;
	border-radius:100vw;
	margin-block:.5rem;
}

::-webkit-scrollbar-track {
	background:#eee;
	border-radius:100vw;
	margin-block:.5rem;
}
 
::-webkit-scrollbar-thumb {
	background:#bbb;
	border-radius:100vw;
}

::-webkit-scrollbar-thumb:hover {
	background:var(--normal-blue);
}

.nav ul li:nth-child(6) a::after{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:4px;
	color:#fff;
	background:var(--secondary-color);;
}

@media screen and (max-width:80rem) {
	
	.nav ul li:nth-child(6) a{
		color:#fff;
		background:var(--primary-color);
	}
	
	.nav ul li:nth-child(6) a:hover{
		color:#fff;
		background:var(--primary-color);
	}
	
	.nav ul li:nth-child(6) a::after{
		content:'';
		display:none;
	}
}

/**/
* {
	padding:0;
	margin:0;
	box-sizing:border-box;
}

a {
	text-decoration:none;
}

button {
	border:none;
	background:transparent;
	cursor:pointer;
}

button:active {
	outline:2px solid #ddd;
}

.front-cover {
	width:100vw;
	height:clamp(200px,calc(80vh - 15px),1000px);
	position:relative;
	object-fit:cover;
	top:0;
	left:0;
}

.front-content {
	width:100vw;
	height:clamp(200px,calc(80vh - 15px),1000px);
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	display:flex;
	justify-content:center;
	align-items:center;
}

.front-content h1 {
	width:clamp(100px,90vw,500px);
	color:#fff;
	transform:scale(1.6);
	text-shadow:0 0 6px #000;
	text-align:center;
}

@media (max-width:1000px) {
	.front-content h1 {
		transform:scale(1.3);
	}
}

@media (max-width:700px) {
	.front-content h1 {
		transform:scale(1);
	}
	
	.front-cover {
		width:100vw;
		height:clamp(200px,calc(70vh - 15px),1000px);
	}

	.front-content {
		width:100vw;
		height:clamp(200px,calc(70vh - 15px),1000px);
	}
}

.directions-section {
	width:100vw;
	padding-block:70px;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}

.directions-cnt {
	width:85vw;
}

.directions-cnt > *{
	width:80vw;
}

.directions-cnt h2{
	margin-bottom:10px;
	font-size:1.2rem;
	color:var(--primary-color);
}

.directions-cnt p {
	margin-bottom:15px;
	font-size:.85rem;
	line-height:1.7rem;
}

.maps-wrapper {
	width:85vw;
	margin-bottom:60px;
}

.map h3 {
	text-transform:capitalize;
	margin-top:60px;
	margin-bottom:20px;
	color:var(--primary-color);
}

.relative-background {
	position:relative;
	top:0;
	left:0;
	height:clamp(520px,calc(100% - 15px),1000px);
	width:100%;
	#overflow:hidden;
}

.img-background {
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100%;
	min-height:520px;
	opacity:0;
	z-index:1;
	object-fit:cover;
	transform:translate(-100vw);
	transition:transform 0ms ease-in-out;
}

.main-background {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	min-height:520px;
	z-index:1;
	object-fit:cover;
}

.img-background.active-background {
	opacity:1;
	transform:translate(0vw);
	transition:transform 1000ms ease-in-out;
}

.img-background.remove-background {
	opacity:1;
	transform:translate(100vw);
	transition:transform 1000ms ease-in-out;
}

.gear-animation {
	margin:5px;
	color:#fff;
	font-size:1.5rem;
	text-shadow:0 0 3px #000;
	animation:gearAnimation 2s infinite;
}

.footer-section {
	background-image:linear-gradient(to bottom, #fff,#fff,var(--secondary-color-light));
}

@media (max-width:700px) {
	.directions-cnt {
		width:90vw;
	}
	
	.directions-cnt > *{
		width:90vw;
	}
	
	.directions-cnt h2{
		font-size:1.2rem;
	}
	
	.maps-wrapper {
		width:90vw;
	}
}

@keyframes gearAnimation {
	0% {
		transform:rotate(0);
	}
	100% {
		transform:rotate(360deg);
	}
}

.iframeLarge {
	background:#f1f1f1;
}