html, body {
	margin: 0;
	font-family: sans-serif;
	position: relative;
	z-index: 0;
	overflow-x: hidden;
	background-color: #e3f2fd; /* Updated to a lighter color */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23145791' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%230CB526'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Add blur effect behind the logo */
header, footer {
    position: relative; /* Ensure positioning for the pseudo-element */
}

header::before, footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white; /* White background for the blur */
	filter: blur(50px); /* Apply blur effect */
	z-index: -1; /* Place behind the logo */
	border-radius: 8px; /* Optional: Add rounded corners */
}

/* Consolidated Bootstrap carousel custom styles */
.carousel-item {
	text-align: center;
	padding: 10px;
}

	.carousel-item img {
		max-width: 90%; /* Ensure the image has some side margin */
		height: auto; /* Allow the height to adjust automatically */
		max-height: 500px; /* Set a maximum height */
		width: auto; /* Allow width to adjust naturally based on aspect ratio */
		object-fit: contain; /* Ensure the entire image is visible without cropping */
		margin: 0 auto 20px auto; /* Add margin around the image */
		display: block; /* Center the image */
	}

/* Adjust carousel caption to have the full width of the container */
.carousel-caption {
	position: static; /* Remove absolute positioning */
	color: white; /* Ensure text is visible */
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
	padding: 15px; /* Add some padding */
	margin: 0 auto; /* Center the caption */
	max-width: 100%; /* Make it full width of the container */
	width: 100%; /* Full width */
	box-sizing: border-box; /* Include padding in width calculation */
	border-radius: 5px; /* Rounded corners */
}

	/* Center the title horizontally and vertically */
	.carousel-caption h3 {
		text-align: center; /* Center the title horizontally */
		font-weight: bold; /* Ensure the title stands out */
		margin-bottom: 10px; /* Add spacing below the title */
		display: flex; /* Use flexbox for vertical centering */
		justify-content: center; /* Center horizontally */
		align-items: center; /* Center vertically */
		height: 100%; /* Ensure it takes the full height of the container */
	}

/* Position the chevrons (carousel controls) on each side of the screen */
.carousel-control-prev,
.carousel-control-next {
	width: 5%; /* Adjust width to position chevrons closer to the edges */
	padding: 3px;
	top: 50%; /* Center vertically */
	transform: translateY(-50%);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	background-color: rgba(0, 0, 0, 0.5); /* Add a semi-transparent background for better visibility */
	border-radius: 50%; /* Make the icons circular */
	padding: 15px; /* Increased padding to create space between arrow and edge */
	background-size: 60%; /* Make the arrow icon smaller relative to the circle */
	background-position: center; /* Ensure the arrow is centered */
}

.carousel {
	position: relative;
	padding: 0 20px; /* Add padding to ensure images don't touch the chevrons */
}

.validation-message {
	color: red;
	font-weight : bold;
}