/* Import Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playwrite+NG+Modern:wght@100..400&display=swap");

/* Loader container styles */
.loader-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

/* Loader animation styles */
.loader {
	margin: auto;
	width: 50px;
	height: 50px;
	background-color: #465ee8;
	animation: spin 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

/* Keyframes for loader spin animation */
@keyframes spin {
	0%,
	100% {
		transform: scale(1) rotate(0deg);
	}
	50% {
		transform: scale(0.5) rotate(180deg);
	}
}

/* Hidden class to hide elements */
.hidden {
	display: none;
}

/* Body font style */
body {
	font-family: "Inter";
}

/* Map height */
#map {
	height: 500px;
}

/* Sidebar styles with max height and overflow */
#sidebar {
	max-height: 500px;
	overflow-y: auto;
}

/* Header background image and gradient */
.header-bg {
	background-image: linear-gradient(
			to right,
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0.6) 16.67%,
			rgba(0, 0, 0, 0.5) 16.67%,
			rgba(0, 0, 0, 0.5) 33.34%,
			rgba(0, 0, 0, 0.4) 33.34%,
			rgba(0, 0, 0, 0.4) 50.01%,
			rgba(0, 0, 0, 0.3) 50.01%,
			rgba(0, 0, 0, 0.3) 66.68%,
			rgba(0, 0, 0, 0.2) 66.68%,
			rgba(0, 0, 0, 0.2) 83.35%,
			rgba(255, 255, 255, 0) 83.35%,
			rgba(255, 255, 255, 0) 100%
		),
		url("/assets/images/headerimage.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

/* Parallax background image and gradient */
.parallax {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
		url("/assets/images/plannerimage.jpg");
	height: 100vh;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

/* Parallax content styles */
.parallax-content {
	position: relative;
	z-index: 1;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
		url("/assets/images/routeimage.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

/* Smooth scrolling for HTML */
html {
	scroll-behavior: smooth;
}

/* Header text styles */
.header-text {
	max-width: 50%;
}

/* Marquee styles */
.marquee {
	line-height: 4;
	overflow: hidden;
	position: relative;
	height: 100px;
	text-align: center;
	width: 100%; /* Full width of its parent */
	white-space: nowrap;
	font-family: Playwrite NG Modern;
}

.marquee p {
	position: absolute;
	width: auto;
	height: 100%;
	margin: 0;
	line-height: 50px;
	text-align: center;
	transform: translateX(50%); /* Start off the right edge */
	animation: scroll-left 20s linear infinite; /* Animate to the left */
}

/* Keyframes for marquee scrolling */
@keyframes scroll-left {
	0% {
		transform: translateX(60%);
	}
	100% {
		transform: translateX(-100%);
	}
}

/* Add text shadow for better readability */
.text-shadow-lg {
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.text-shadow-md {
	text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
}

/* Navbar shadow and fixed position */
.navbar {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Add margin-top to the main content to avoid overlap with the fixed navbar */
.header-bg,
.section {
	margin-top: 64px; /* Adjust based on the height of your navbar */
}

.navlinks {
	transition: transform 0.3s;
}

.navlinks:hover {
	transform: scale(1.1);
}