/* Apply Poppins font globally for consistent typography */
body {
	font-family: 'Poppins', sans-serif;
	/* Ensure body takes full viewport height and enables flexbox for proper footer positioning */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f8fafc; /* Very light blue-gray background */
	/* Subtle geometric background pattern for added visual texture */
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zm0-30V0H4v4H0v2h4v4h2V6H4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
}

/* Animation for logo on hover for a subtle interactive touch */
.logo-image {
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

	.logo-image:hover {
		transform: scale(1.05);
		box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* Subtle glow on hover */
	}

/* Responsive menu toggle for small screens */
.menu-toggle {
	display: none; /* Hidden by default on larger screens */
}

@media (max-width: 767px) { /* Tailwind's 'md' breakpoint is 768px */
	.menu-toggle {
		display: block; /* Show on small screens */
	}

	.nav-menu {
		display: none; /* Hide menu by default on small screens */
		flex-direction: column;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8); /* Dark overlay when open */
		position: absolute;
		top: 100%; /* Position below header */
		left: 0;
		padding: 1rem 0;
		border-radius: 0 0 0.5rem 0.5rem;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

		.nav-menu.active {
			display: flex; /* Show menu when active */
		}

		.nav-menu li {
			width: 100%;
			text-align: center;
			padding: 0.5rem 0;
		}

		.nav-menu a {
			display: block;
			padding: 0.5rem 1rem;
		}
}
.menubar a,
.footermy a {
	color: white !important;
	text-decoration: none !important;
	position: relative;
}

	.menubar a:hover::after,
	.footermy a:hover::after {
		content: '';
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -6px; /* distance below the link */
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background-color: currentColor; /* uses the same text color */
	}