body {
	margin: 0;
	font-family: sans-serif;
	position: relative;
	overflow: hidden; /* Keep if the background balls need this */
	background-color: #f1faf9; /* Your background color */
}

.background {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: -1; /* Ensure the background is behind the content */
}

/* Background ball animations and styles */
@keyframes float {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
	}
	50% {
		transform: translate3d(10px, -10px, 0) rotate(180deg) scale(1.2);
	}
	100% {
		transform: translate3d(0, 0, 0) rotate(360deg) scale(1);
	}
}

.ball {
	position: absolute;
	border-radius: 100%;
	backface-visibility: hidden;
	animation-name: float;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	box-shadow: 100vmin 0 10vmin currentColor;
}

/* Ball size modifiers */
.ball.small {
	width: 10vmin;
	height: 10vmin;
}
.ball.medium {
	width: 20vmin;
	height: 20vmin;
}
.ball.large {
	width: 30vmin;
	height: 30vmin;
	box-shadow: 80vmin 0 40vmin currentColor;
}
.ball.xlarge {
	width: 50vmin;
	height: 50vmin;
	border-radius: 100%;
	box-shadow: 90vmin 0 50vmin currentColor;
}

/* Ball color cycle */
.ball:nth-child(3n + 1) {
	color: #004472;
}
.ball:nth-child(3n + 2) {
	color: #4fb59e;
}
.ball:nth-child(3n + 3) {
	color: #c6e8e2;
}

/* Randomised ball positions, speeds and directions */
.ball:nth-child(1) {
	top: 20%;
	left: 10%;
	animation-duration: 25s;
	animation-direction: normal;
}
.ball:nth-child(2) {
	top: 50%;
	left: 30%;
	animation-duration: 35s;
	animation-direction: reverse;
}
.ball:nth-child(3) {
	top: 70%;
	left: 60%;
	animation-duration: 10s;
	animation-direction: alternate;
}
.ball:nth-child(4) {
	top: 40%;
	left: 80%;
	animation-duration: 28s;
	animation-direction: alternate-reverse;
}
.ball:nth-child(5) {
	top: 15%;
	left: 50%;
	animation-duration: 38s;
	animation-direction: normal;
}
.ball:nth-child(6) {
	top: 85%;
	left: 25%;
	animation-duration: 22s;
	animation-direction: reverse;
}
.ball:nth-child(7) {
	top: 30%;
	left: 90%;
	animation-duration: 32s;
	animation-direction: alternate;
}

/* Base logo container style */
.logo-container {
	margin-bottom: 0;
}

/* Base logo image style */
.logo {
	background-image: url('../images/logo.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Base styles for Material Symbols icons */
.material-symbols-outlined {
	color: #004472; /* Icon color */
	/* Add any base styles for icons here if needed */
}

/* Common button styles */
.btn {
	padding: 12px 25px;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 0.3s ease, opacity 0.3s ease;
}