.jumbomasthead {
	background-color: black; /* Black background for mobile */
	height: auto; /* Adjust height for mobile */
	padding: 0; /* Remove padding for mobile */
}

@media (max-width: 767px) { /* Adjust the max-width value as needed for your design */
	.jumbomasthead {
		display: none; /* Hide the element on mobile devices */
	}
}

/* Styles for desktop view */
@media (min-width: 768px) { /* Adjust the min-width value as needed for your design */
	.jumbomasthead {
		background-image: url("../images/jumbomasthead.jpg");
		background-size: cover; /* Ensure the background image covers the entire area */
		background-position: center; /* Center the background image */
		height: 80vh;
		padding: 15rem;
	}
}

@media (min-width: 768px) {
	.mobile-jumbotron {
		display: none;
	}
}

/* Show container on mobile */
@media (max-width: 767px) {
	.mobile-jumbotron {
		display: block;
	}
}
.transparent-btn {
  background-color: transparent;
  border: 2px solid white;
  color: white;
  transition: all 0.3s ease; /* Smooth transition effect */
}

	.transparent-btn:hover {
		background-color: rgba(255, 255, 255, 0.2);
		border-color: white;
		transform: scale(1.05);
		animation: rainbowGlow 1.5s infinite; /* Apply the rainbow glow animation */
	}

@keyframes rainbowGlow {
	0% {
		box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
	}

	14% {
		box-shadow: 0 0 15px rgba(255, 127, 0, 0.8);
	}

	28% {
		box-shadow: 0 0 15px rgba(255, 255, 0, 0.8);
	}

	42% {
		box-shadow: 0 0 15px rgba(0, 255, 0, 0.8);
	}

	57% {
		box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
	}

	71% {
		box-shadow: 0 0 15px rgba(0, 0, 255, 0.8);
	}

	85% {
		box-shadow: 0 0 15px rgba(127, 0, 255, 0.8);
	}

	100% {
		box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
	}
}


.bg-blue {
  background-color: #4CA9B4;
  display: flex;
  flex-direction: column; /* Stack child elements vertically */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  height: 35vh; /* Set the height of the div */
  padding: 6rem; /* Padding inside the div */
  text-align: center; /* Center text within the div */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.superblock {
}

.nav-list {
	display: flex;
	justify-content: space-between; /* Distribute space evenly */
	width: 100%; /* Ensure the list takes up full width */
}

.counter {
	text-align: center;
	margin: 20px;
}

.number {
	font-size: 3rem; /* Adjust size as needed */
	font-weight: bold;
	color: #fff;
}

.label {
	font-size: 1.2rem;
	color: #666; /* Adjust color as needed */
}

.counter-container {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}

		.counter-item {
			flex: 1;
			max-width: 300px; /* Adjust as needed */
			margin: 10px; /* Spacing between counters */
		}

.social-icons {
	  display: flex;
	  gap: 25px; /* Space between icons */
	  justify-content: center; /* Center the icons horizontally */
	  margin-top: 5px; /* Space above the icons */
	  margin-bottom: 25px;
	}
	.social-icons a {
	  color: #fff; /* Default color */
	  font-size: 1.0rem; /* Size of the icons */
	  text-decoration: none; /* Remove underline from links */
	}
	.social-icons a:hover {
	  color: #007bff; /* Color on hover */
	}
.circle-image {
	width: 150px;
	height: 150px;
	border-radius: 50%; /* Make the image circular */
	object-fit: cover; /* Ensure image fills the circle */
	margin-bottom: 10px; /* Add spacing below the image */
}
.contact-form {
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

	.contact-form label {
		font-weight: bold;
	}

	.contact-form input,
	.contact-form textarea {
		border-radius: 4px;
		border: 1px solid #ced4da;
		padding: 10px;
		width: 100%;
	}

		.contact-form input[type="submit"] {
			background-color: #007bff;
			color: #fff;
			border: none;
			cursor: pointer;
			padding: 10px;
			font-size: 16px;
		}

			.contact-form input[type="submit"]:hover {
				background-color: #0056b3;
			}

	.contact-form .status-message {
		margin-top: 10px;
		font-size: 14px;
	}

.whatsapp {
	position: fixed;
	width: 60px;
	height: 120px;
	bottom: 20px; /* how much from the bottom */
	right: 20px; /* how much from the right and can put left as well */
	z-index: 3;
}

.card {
	transition: all 0.3s ease; /* Smooth transition for all properties */
	position: relative; /* Ensure positioning context for shadow */
	overflow: hidden; /* Hide overflow to maintain card boundary */
}

	.card:hover {
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Mac-like shadow effect */
		transform: translateY(-5px); /* Slight lift on hover */
	}

	.card.expand {
		animation: expandAnimation 0.3s ease forwards; /* Expand animation on click */
	}

@keyframes expandAnimation {
	0% {
		transform: scale(1); /* Initial scale */
	}

	100% {
		transform: scale(1.1); /* Final scale, slightly larger */
	}
}