/* The master container controlling width and centering */
.page-container {
	/* Sets the target width for desktop screens */
	max-width: 1200px;
	/* Automatically calculates equal left and right margins to center the box */
	margin: 0 auto;
	/* Keeps content 90% wide on mobile so text doesn't touch the screen edge */
	width: 95%;
	/* Adds breathing room inside the box */
	padding: 40px 20px;
	background-color: #ffffff;
	box-sizing: border-box;
}

.scroll-smooth {
	scroll-behavior: smooth;
}

.items-center {	
	align-items: center;
	vertical-align: middle;
}

.items-top {
	vertical-align: top;
	display: flex;	
}


.items-right {
	text-align: right;
}

body {
	font-family: ui-sans-serif, system-ui, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
	font-feature-settings: normal;
	font-variation-settings: normal;
	background-color: white;
	color: black;
}

.nav-font {
	font-size: 18px;
	font-weight: 600;
	text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}


.flex {
	display: flex;
}

.flex-container {
	display: flex;
	align-items: center; 
	gap: 15px; /* Adds space between the image and text */
}

.main-menu-container {
	display: flex;
	justify-content: space-between; /* Pushes content to far left and far right */
	align-items: center; /* Perfectly centers both items vertically */
	width: 100%; /* Ensures container spans the full page width */
}

.menu-ul {
	list-style-type: none; /* Removes the bullet points */
	margin: 0; /* Removes default top/bottom browser margins */
	padding: 0; /* Removes default left browser indentation */
	display: flex; /* Aligns list items side-by-side in one line */
	gap: 20px; /* Adds customizable spacing between items */
}

.text-link {
	color: black;
	text-decoration: underline; /* Show underline on hover */
	text-decoration-thickness: 3px; /* Make the underline bold/thick */
	text-decoration-color: #a2d2df;
	transition: text-decoration 0.2s; /* Optional: Smooth entry for the line */
}

.menu-link {
	color: black;
	text-decoration: none; /* Hide default browser underline */	
	transition: text-decoration 0.2s; /* Optional: Smooth entry for the line */
}

/* Active styling rules when mouse hovers over link */
.menu-link:hover {
	text-decoration: underline; /* Show underline on hover */
	text-decoration-color: #a2d2df;
	text-decoration-thickness: 3px; /* Make the underline bold/thick */
	text-underline-offset: 4px; /* Push line down so it doesn't cut through letters */
}

h1 {
	text-align: center;
	font-weight: 500;
	margin-bottom: 30px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* The Liquid Glass Container */
.glass-card {
	
	padding: 30px;
	border-radius: 24px; /* Fluid, organic rounded corners */
	/* Glass Tinting: A dark base overlay is necessary to show on pure white */
	background: rgba(15, 23, 42, 0.04);
	/* The Core Glass effect: blurs everything behind the plate */
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	/* Specular Highlights: Crisp, slightly dark outer border with a white inner edge */
	border: 1px solid rgba(0, 0, 0, 0.08);
	/* Multi-layered shadows to give a 3D depth illusion over the white canvas */
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 20px 40px -1px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.6); /* Internal top glow */

	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: center;
}

	/* Hover animation simulating a fluid glass lift */
	
	.glass-card:hover {
	//	transform: translateY(-6px);
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 30px 60px -5px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.8);
	}
	
	/* Content inside the glass */
	.glass-card h1 {
		color: #0f172a;
		margin-top: 0;
		font-weight: 600;
		font-size: 24px;
	}

	.glass-card p {
		color: #475569;
		font-size: 15px;
		line-height: 1.6;
		margin-bottom: 24px;
	}


.justify-items {
	text-align: justify;
	text-justify: inter-word;
}

.img-rounded {
	border-radius: 6px;
}

.right_spacing {
	margin-right: 20px;
}

.bottom_spacing {
	margin-bottom: 20px;
}
.bottom_spacing_small {
	margin-bottom: 3px;
}

.publication_list {
	list-style-type: none; /* Removes the bullet points */
}

.liquid_ul {
	list-style-image: url("images/bullet.png");	
}

.liquid_ul li {
	margin-bottom: 3px;
}

.loader {
	width: 48px;
	height: 48px;
	border: 5px solid #FFF;
	border-bottom-color: #1e7de9;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

.center-container {
	display: flex;
	justify-content: center; /* Centers horizontally */
	align-items: center; /* Centers vertically */
	text-align: center !important;
}

.width_100_percent {
	width: 100%;
}

.plot_div {
	height: 50vh;
	min-height: 400px;	
	width: 100%
}


.tile-grid {		
}

.scgms_label::before {
	content: "Smart ";
}

@media (min-width: 585px) {
	.tile-grid {
		display: grid;
		width: 100%;
		grid-template-columns: 50% 50%;
		text-align: center !important;
	}
	.scgms_label::before {
		content: "Smart";
	}
}




.img-people {
	border-radius: 6px;
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
}