/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 04 2025 | 10:07:51 */
.overlap-nav .in-page-nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end; 
  min-height: 3.5rem;
}

.overlap-nav .in-page-nav p {
  margin: 0;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* underline styling (active state) */
.overlap-nav .in-page-nav.active p::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  position: relative;
  bottom: 0;
}

/* ===== keep underline fixed level for the nav bar ===== */
.overlap-nav .in-page-nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* text sits just above underline */
  min-height: 3.5rem;
  text-align: center;
}

/* ensure inner text can wrap upwards, not push underline down */
.overlap-nav .in-page-nav p {
  margin: 0;
  line-height: 1.2;
  /*padding: 1rem 5px 0;*/
  display: block;
  position: relative;
}



/* optional: tighten gap between text and underline */
.overlap-nav .in-page-nav {
  padding-bottom: 0.25rem;
}

.progress-wrapper {
	position: relative;
	width: 340px;
	height: 80px;
	margin: 40px auto;
}

.progress-container {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 10px;
	background: var(--bg-color, #e0e0e0);
	border-radius: 20px;
}

.progress-bar {
	height: 100%;
	background: var(--bar-color, #fbb03b);
	border-radius: 20px;
	width: 0%;
}

.progress-icon {
	position: absolute;
	bottom: 12px;
	width: 50px;
	height: 50px;
	transform: translateX(-50%);
}

.percentage {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 28px;
	font-weight: bold;
}

.arc {
	position: absolute;
	top: 5px;
	left: 50%;
	width: 120px;
	height: 60px;
	border-top: 2px solid var(--arc-color, gold);
	border-radius: 50%/100% 100% 0 0;
	transform: translateX(-50%);
}

.stats-parent {
	position: absolute;
	right: 40px;
}

.stats-parent.right {
	top: 40px;
}

.percent {
	font-size: 36px;
	line-height: 150%;
}

.svg-animate-wrapper {
	width: 500px;
	margin: 0 auto;
}

svg {
	width: 100%;
	height: auto;
	display: block;
}

.d-flex>div {
	display: flex !important;
	flex-direction: row !important;
	gap: 30px;
}

.d-flex .col {
	max-width: max-content !important;
}

.d-flex .col.title img {
	max-width: 250px !important;
}

.slider-circle {
	max-width: max-content !important;
	width: 62px !important;
	height: 62px !important;
}

.slider-circle>div {
	border-radius: 50%;
	aspect-ratio: 1;
	max-width: max-content;
	padding: 10px 8px !important;
	min-width: 60px;
}

/* === Layout wrapper === */
.wp-block-columns.d-block,
.section-with-quote {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 3rem;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

/* === Make columns stay horizontal (no flex-wrap) === */
.section-with-quote>.wp-block-columns,
.wp-block-columns.d-block {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	width: 100%;
}

.ss-quote.section-2 {
	position: relative;
	z-index: 5;
}

.ss-quote.section-2>.wp-block-columns {
	width: 100%;
	will-change: transform;
}

.sec-2-quote-1,
.sec-2-quote-2,
.sec-2-quote-3 {
	transition: opacity 0.4s ease;
}

/* === Main content (blue box area) === */
.ss-quote-wrp {
	flex: 0 0 70%;
	position: relative;
	z-index: 1;
	/* ensure quote sits above */
}

/* === Quote box (right column) === */
.ss-quote {
	flex: 0 0 30%;
	position: sticky;
	top: 120px;
	/* adjust for header height */
	align-self: flex-start;
	border-radius: 20px;
	margin-left: -5.5% !important;
	z-index: 2;
}

.wp-block-column[style*="flex-basis:15%"],
.ss-quote.fixed {
	position: static;
}

/* Prevent inner flex issues from WP columns */
.ss-quote .wp-block-columns {
	display: block !important;
}

.h-parent-center.stronger img {
  left: 28%;
  top: -12%;
}

.h-parent-center.methodology img {
  left: 29%;
  top: -14%;
}

.h-parent-center.community-partners img {
  left: 26%;
  top: -12%;
}

/* === Responsive fallback === */
@media (max-width: 1024px) {

	.section-with-quote,
	.wp-block-columns.d-block {
		flex-direction: column;
	}

	.ss-quote {
		position: static;
		margin-left: 0;
		margin-top: 2rem;
	}
}


.btn-next {
	position: absolute;
	left: unset !important;
	top: unset !important;
	bottom: 0px;
	right: 10px;
	transform: unset !important;
	z-index: 10 !important;
}

.food-myths-slider .n2-ss-slider-3 {
	border: 1px solid #002F6C;
	border-radius: 15px;
}

.meat-progress {
	position: relative;
	display: inline-block;
	text-align: center;
}

.meat-progress .percent {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 2rem;
	font-weight: 700;
	color: white;
}

.d-block {
	display: block !important;
}

.d-flex {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.d-flex.flex-row {
	flex-direction: row;
}

.ar-1 {
	aspect-ratio: 1;
}

.btn-read-more a {
	display: flex;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
}

.details.hidden {
	display: none !important;
	margin-top: 40px;
}

.plate {
	position: absolute;
}

.plate.plate-1 {
	right: 7%;
	top: 12%;
}

.plate.plate-2 {
	right: 7%;
	top: 0%;
}

.hero-rgt-col {
	position: relative;
}

.logo-stay-strong {
	position: absolute;
	right: 30px;
	bottom: 30px;
}

/* === Scoped styles for the diet stats block only === */
.fpg-diet-stats .circle-col .wp-block-boldblocks-counting-number, .sixty-nine-percent-seniors .circle-col .wp-block-boldblocks-counting-number {
	margin: 0;
	line-height: 1;
	font-weight: 700;
	color: #fff;
}

/* Equal vertical spacing between each (circle + text) row */
.fpg-diet-stats .wp-block-columns[data-aos^="fade"], .sixty-nine-percent-seniors .wp-block-columns[data-aos^="fade"] {
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.fpg-diet-stats .wp-block-columns[data-aos^="fade"]:last-child, .sixty-nine-percent-seniors .wp-block-columns[data-aos^="fade"]:last-child {
	margin-bottom: 0;
}

/* === Keep all circles fixed and perfectly round === */
.fpg-diet-stats .circle-col, .sixty-nine-percent-seniors .circle-col {
	flex: 0 0 auto !important;
	/* stop flexbox from shrinking or stretching the circles */
	aspect-ratio: 1 / 1;
	width: clamp(60px, 5vw, 90px);
	/* scales slightly across screens */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	background-color: var(--circle-color, #f15c51);
	/* fallback color */
}

/* === Center text cleanly inside the circle === */
.fpg-diet-stats .circle-col .wp-block-boldblocks-counting-number, .69-percent-seniors .circle-col .wp-block-boldblocks-counting-number {
	margin: 0;
	line-height: 1;
	font-weight: 700;
	color: #fff;
	width: 100%;
	text-align: center;
	font-size: clamp(1rem, 1.2vw + 0.5rem, 1.75rem);
}

/* === Make each (circle + sentence) row aligned and evenly spaced === */
.fpg-diet-stats .wp-block-columns[data-aos^="fade"] {
	align-items: center;
	gap: 1rem;
	/* spacing between circle and text */
	margin-bottom: 1.5rem;
}

/* Remove gap from last row */
.fpg-diet-stats .wp-block-columns[data-aos^="fade"]:last-child {
	margin-bottom: 0;
}

.fpg-diet-stats .wp-block-boldblocks-counting-number {
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: 0px;
}

.food-float img {
	width: 180px;
	/* adjust size as needed */
	animation: gentleFloat 2.5s ease-in-out infinite;
}

/* --- ALIGN & OVERLAY FIX (FINAL) --- */

/* Wrap-level alignment */
.stk-57a6cbf .stk-row {
	align-items: flex-end !important;
	/* align all caption baselines */
}

/* Circle columns behave as stacked center elements */
.stk-57a6cbf .stk-column-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
}

/* The main trick — make caption overlap upward */
.sec4-caption {
	position: relative;
	top: -55px;
	/* Adjust until the label sits halfway over the circle */
	z-index: 2;
	min-width: 153px;
	min-height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	padding: 5px 20px;
	font-size: 14px;
	line-height: 1.35;
}

/* Optional: space number above circle consistently */
.stk-57a6cbf p[style*="clamp(1.25rem"] {
	margin-bottom: 8px !important;
}

.figure8-float {
	animation: figure8 4s ease-in-out infinite;
	transform-origin: center center;
	display: inline-block;
}

.pieChart {
	width: 100%;
	/* or any desired width, e.g. 300px */
	max-width: 300px;
	/* limit maximum */
	height: auto;
	/* keeps correct proportion */
	display: block;
	margin: 15px auto 0;
}

.svg-animate-wrapper {
  width: 100%;
  max-width: 600px; /* optional: limit maximum size */
  margin: 0 auto;
}

#scene {
  width: 100%;
  height: auto;
  display: block;
}


@keyframes figure8 {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}

	25% {
		transform: translate(6px, -3px) rotate(2deg);
	}

	50% {
		transform: translate(0, -6px) rotate(0deg);
	}

	75% {
		transform: translate(-6px, -3px) rotate(-2deg);
	}

	100% {
		transform: translate(0, 0) rotate(0deg);
	}
}

@keyframes gentleFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

/* === Responsive stacking for mobile === */
@media (max-width: 768px) {
	.fpg-diet-stats .wp-block-columns[data-aos^="fade"] {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	/*override glbal*/
	.page-id-9076 .mob-pad-x, .page-id-9245 .mob-pad-x {
		padding-left: 25px !important;
		padding-right: 25px !important;
	}
}

@media (max-width: 1024px) {
	.h-parent-center.stronger img {
	  left: 25%;
	  top: -20%;
	}

	.h-parent-center.methodology img {
	  left: 26%;
	  top: -14%;
	}

	.h-parent-center.community-partners img {
	  left: 28.5%;
	  top: -12%;
	}
}

@media (max-width: 767px) {
	.key-findings-2 {
		display: flex;
		flex-direction: row !important;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap !important;
		gap: 0.5rem;
		width: 100%;
		overflow: hidden;
		/* prevent scroll overflow */
		box-sizing: border-box;
	}

	.key-findings-2 .wp-block-column {
		flex: 1 1 auto !important;
		/* allow columns to shrink and grow */
		text-align: center !important;
		min-width: 0;
		/* ensures flex children shrink properly */
	}

	.key-findings-2 img {
		width: 22vw !important;
		/* scale image by viewport width */
		max-width: 80px !important;
		/* keep from getting too big */
		height: auto !important;
	}

	.key-findings-2 p {
		font-size: 0.8rem !important;
		line-height: 1.3 !important;
		color: #fff;
		margin: 0 !important;
		padding: 0 0.25rem;
		word-break: keep-all;
	}

	.sec-2-parent-1 {
		padding: 12px 10px !important;
		border-radius: 12px !important;
	}

	.senior-priority {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		grid-row-gap: 1rem;
		grid-column-gap: 0;
		justify-items: center;
		align-items: start;
		padding-bottom: 20px;
	}

	.senior-priority .wp-block-column {
		flex: 0 0 48% !important;
		max-width: 48% !important;
		text-align: center;
	}

	.senior-priority img {
		width: 70px !important;
		height: auto !important;
	}

	.senior-priority p {
		font-size: 0.8rem !important;
		line-height: 1.3 !important;
		margin: 0.5rem 0 0 0 !important;
		color: #fff;
	}
	
	/*key findings 3*/
	.stats-parent {
		position: absolute;
		right: 20%;
	}

	.stats-parent.right {
		top: 40px;
	}
	
	.plate.plate-1 {
		right: 18%;
		top: 14%;
	}

	.plate.plate-2 {
		right: 18%;
		top: 2%;
	}
	
	.slider-food-img {
		max-width: 100px;
	}
	
	.sec-4-parent-1 > div {
		padding: 5px !important;
	}
	
	.sec-5-parent-1 .food-float, .sec-5-parent-2 .food-float {
		text-align: center;
	}
	
	.svg-animate-wrapper {
    	max-width: 90vw;
  	}
	
	.h-parent-center.stronger img {
	  left: -5%;
	  top: -25%;
	}

	.h-parent-center.methodology img {
	  left: -1%;
	  top: -20%;
	}

	.h-parent-center.community-partners img {
	  left: -1.5%;
	  top: -25%;
	}
	
	#stronger-together .content {
      padding: 20px 20px !important;;
	}
}

@media (max-width: 480px) {
	body {
		overflow-x: hidden;
	}
	
	.page-id-9076 .mob-pad-x.food-nav {
		justify-content: left;
		padding: 0 !important;
	}
	
	.svg-animate-wrapper {
		max-width: 100%;
	 }
	
	.food-myths-slider .slider-food-img {
		max-width: 50% !important;
	}
	
	.food-myths-slider .slide-stats-info > div > div.n2-ss-layer-row-inner { 
		align-items: center;
	}
	
	.h-parent-center.stronger img {
	  left: -10%;
	  top: -25%;
	}

	.h-parent-center.methodology img {
	  left: -7%;
	  top: -20%;
	}

	.h-parent-center.community-partners img {
	  left: -6.5%;
	  top: -25%;
	}
}