:root {
	--Mint_Whisper: #e8ffe4;
	--Frosted_Lime: #caffc4;
	--Fresh_Spring: #9aff90;
	--Bright_Meadow: #59ff50;
	--Neon_Leaf: #25ff22;
	--Pure_Green: #00e603;
	--Vivid_Emerald: #00b807;
	--Deep_Emerald: #008b05;
	--Forest_Canopy: #076d0c;
	--Dark_Forest: #0b5c10;
	--Midnight_Pine: #003406;
	--Dewdrop: #E4F5E3;
	--Fresh_Herb: #6BBF69;
	--Mossy_Stone: #368835;
	--Deep_Forest_Night: #0E250E;
}
.user {
	position: relative;
	min-height: 400px;
	background: #fff;
}
.bg {
	width: 100%;
	height: 250px;
	background-image:
		linear-gradient(rgba(232, 255, 228, 0.1),
			rgba(232, 255, 228, 0.1)),
		url('https://www.ucsfhealth.org/-/media/project/ucsf/ucsf-health/education/hero/top-ten-foods-for-health-2x.jpg?rev=890e0016d9824d5789d4eaa610ce606e');
	background-size: cover;
	object-fit: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	position: relative;
	padding-top: 160px;
}
.stats-section {
	position: absolute;
	left: 50%;
	top: 150px;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1000px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
	padding: 10px 0;
	border-radius: 10px;
	border: 2px solid var(--Fresh_Herb);
	background: #fff;
	z-index: 2;
	transition: top 0.3s;
}
.stat-item {
	text-align: center;
	padding: 20px 10px;
}
.stat-item .number {
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--Forest_Canopy);
	position: relative;
}
.stat-item .number::after {
	content: '';
	width: 50px;
	height: 3px;
	background-color: var(--Deep_Emerald);
	display: block;
	margin: 8px auto 0;
}

.stat-item .label {
	text-transform: uppercase;
	font-size: 0.875rem;
	color: var(--Forest_Canopy);
	letter-spacing: 1px;
}

.badge {
	font-size: 10px !important;
	padding: 2px 6px !important;
	position: absolute;
	top: -5px;
	left: 75%;
}

/* ========== Large screens (≤1100px) ========== */
@media (max-width: 1100px) {
	.stats-section {
		max-width: 94%;
		padding: 10px 0;
	}
}

/* ========== Tablet and mobile (≤ 770px) ========== */
@media (max-width: 770px) {
	.bg {
		padding-top: 120px;
		height: 200px;
	}

	.stats-section {
		top: 130px;
		max-width: 98%;
		padding: 6px 0;
	}

	/* No need to override .col-6/.col-md-3, Bootstrap handles 2 columns with .col-6 col-md-3 */

	.stat-item .number {
		font-size: 1.5rem;
	}

	.stat-item .label {
		font-size: 0.8rem;
	}
}

/* ========== Small phone screens (≤ 480px) ========== */
@media (max-width: 480px) {
	.bg {
		padding-top: 90px;
		height: 120px;
	}

	.stats-section {
		top: 60px;
		padding: 5px 0;
	}

	/* Force 1 per row on very small screens */
	.stat-item {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		padding: 10px 2px;
	}

	.stat-item .number {
		font-size: 1.1rem;
	}

	.stat-item .label {
		font-size: 0.7rem;
	}
}