* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	color: #1f1f1f;
	background: #fff;
	overflow-x: hidden;
	line-height: 1.5;
}

:root {
	--bs-body-font-family: "Poppins", sans-serif;
	--bs-body-color: #1f1f1f;
	--text-xs: 13px;
	--text-sm: 14px;
	--text-base: 15px;
	--text-md: 15px;
	--text-lg: clamp(15px, 3.5vw, 17px);
	--text-xl: clamp(18px, 4vw, 22px);
	--text-2xl: clamp(20px, 3.8vw, 26px);
	--text-3xl: clamp(24px, 4.2vw, 34px);
	--text-4xl: clamp(28px, 4.8vw, 40px);
	--text-5xl: clamp(28px, 4.5vw, 46px);
	--section-heading: clamp(24px, 3.6vw, 34px);
	--section-body: 14px;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

.site-header {
	width: 100%;
	border-bottom: 1px solid #e8e8e8;
}

.container {
	width: min(1280px, 100% - 72px);
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 12px;
	padding-right: 12px;
}

.top-strip {
	background: #157347;
	color: #fff;
}

.top-strip-inner {
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.top-contact,
.top-socials {
	display: flex;
	align-items: center;
}

.top-contact {
	gap: 28px;
}

.top-contact a,
.top-socials a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
}

.top-socials {
	gap: 28px;
}

.header-main {
	background: #ffffff;
	border-bottom: 1px solid #e7e7e7;
}

.header-main-inner {
	min-height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: nowrap;
}

.brand-block {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

.logo-mark {
	width: 31px;
	height: 44px;
	position: relative;
	border: 2px solid #111;
	border-radius: 3px;
	transform: skewY(-4deg);
	background: #fff;
}

.logo-mark .mark-front {
	position: absolute;


	right: -2px;
	top: 14px;
	width: 11px;
	height: 18px;
	background: #157347;
	border-left: 2px solid #111;
	border-top: 2px solid #111;
}

.logo-mark .mark-side {
	position: absolute;
	left: 2px;
	top: -8px;
	width: 20px;
	height: 10px;
	border: 2px solid #111;
	border-bottom: 0;
	background: #fff;
}

.brand-name {
	font-size: clamp(18px, 2.2vw, 28px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2px;
	color: #101010;
	white-space: nowrap;
}

.search-wrap {
	flex: 1 1 auto;
	max-width: 560px;
	min-width: 0;
	width: 100%;
	height: 48px;
	display: flex;
	align-items: center;
	background: #ffffff;
	border: 2px solid #e3ebe6;
	border-radius: 50px;
	overflow: hidden;
	padding: 5px 5px 5px 20px;
	box-shadow: 0 4px 18px rgba(21, 115, 71, 0.08);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.search-wrap:focus-within {
	border-color: #157347;
	box-shadow: 0 6px 22px rgba(21, 115, 71, 0.14);
}

.search-wrap input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 100%;
	border: none;
	outline: none;
	background: transparent;
	padding: 0 10px 0 0;
	font-size: 14px;
	font-weight: 400;
	color: #333;
}

.search-wrap input::placeholder {
	color: #8a9a90;
	opacity: 1;
}

.search-wrap button {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	min-width: 38px;
	border: 0;
	border-radius: 50%;
	background: #157347;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease;
}

.search-wrap button:hover {
	background: #67da48;
}

.search-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 1px solid #dddddd;
	border-radius: 8px;
	background: #fff;
	color: #157347;
	font-size: var(--text-sm);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
}

.search-toggle:hover {
	background: #f2fbf4;
	border-color: #157347;
}

.search-modal .modal-dialog {
	max-width: min(540px, calc(100% - 32px));
	margin: 1.25rem auto;
	padding: 0 4px;
}

.search-modal .modal-content {
	border: none;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.search-modal .modal-header {
	border-bottom: 1px solid #efefef;
	padding: 22px 26px 18px;
	align-items: center;
}

.search-modal .modal-title {
	font-size: 20px;
	font-weight: 700;
	color: #16352b;
	margin: 0;
}

.search-modal .modal-body {
	padding: 26px 26px 30px;
}

.search-modal-form.search-wrap {
	width: 100%;
	max-width: 100%;
	height: 56px;
	flex: none;
	margin: 0;
	padding: 5px 5px 5px 26px;
	gap: 12px;
	box-shadow: none;
}

.search-modal-form.search-wrap:focus-within {
	box-shadow: 0 0 0 3px rgba(21, 115, 71, 0.12);
}

.search-modal-form input {
	padding: 0 8px 0 4px;
	font-size: 15px;
	line-height: 1.5;
}

.search-modal-form input::placeholder {
	font-size: 14px;
}

.search-modal-form button {
	width: 44px;
	height: 44px;
	min-width: 44px;
	flex: 0 0 44px;
	font-size: var(--text-md);
}

.search-wrap button,
.search-modal-form button {
	line-height: 1;
}

.mid-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.chip {
	min-width: 142px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 11px;
	border: 1px solid #ebebeb;
	border-radius: 10px;
	background: #f6f6f6;
}

.chip i {
	font-size: var(--text-md);
}

.chip span {
	display: flex;
	flex-direction: column;
	line-height: 1.06;
}

.chip strong {
	font-size: 16px;
	font-weight: 600;
	color: #222;
}

.chip small {
	font-size: 16px;
	font-weight: 400;
	color: #6f6f6f;
}

.chip-call i {
	color: #2c5e97;
}

.chip-whatsapp i {
	color: #20c05a;
}

.nav-strip {
	background: #ffffff;
	border-top: 1px solid #e3e3e3;
}



.nav-strip-inner {
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	position: relative;
}

.menu-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 1px solid #dddddd;
	border-radius: 8px;
	background: #fff;
	color: #303030;
	font-size: var(--text-sm);
	cursor: pointer;
	flex: 0 0 42px;
}

.main-nav {
	display: flex;
	align-items: center;
}

.main-nav > a,
.main-nav > .nav-item > .nav-link {
	height: 72px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 18px;
	font-size: var(--text-md);
	font-weight: 500;
	color: #1f2430;
	line-height: 1;
	border: none;
	border-left: 1px solid #d9d9d9;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.main-nav > a:first-child {
	padding-left: 0;
	border-left: none;
}

.main-nav > a i,
.main-nav > .nav-item > .nav-link i {
	font-size: 10px;
	transform: translateY(1px);
}

.main-nav > a:hover,
.main-nav > .nav-item > .nav-link:hover {
	color: #157347;
}

.cta-wrap {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	margin-left: auto;
}

.btn {
	min-width: 124px;
	height: 42px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0 18px;
	background: #157347;
	color: #fff;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.btn-callback {
	min-width: 152px;
}

.btn-quote {
	min-width: 124px;
}

.btn:hover {
	background: #67da48;
}

@media (max-width: 1280px) {
	.container {
		width: min(1280px, 100% - 40px);
	}

	.header-main-inner {
		min-height: 94px;
	}

	.nav-strip-inner {
		min-height: 70px;
	}

	.main-nav a {
		font-size: 15px;
		padding: 0 14px;
	}

	.btn {
		font-size: 14px;
	}

	.btn-callback {
		min-width: 148px;
	}

	.btn-quote {
		min-width: 122px;
	}
}

@media (max-width: 1100px) {
	.container {
		width: min(1280px, 100% - 40px);
	}

	.top-contact a,
	.top-socials a {
		font-size: 13px;
		gap: 8px;
	}

	.header-main-inner {
		gap: 18px;
		min-height: 92px;
	}

	.brand-block {
		flex: 0 0 180px;
	}

	.brand-name {
		font-size: var(--text-lg);
	}

	.logo-mark {
		width: 28px;
		height: 40px;
	}

	.search-wrap {
		flex-basis: 42%;
		height: 36px;
	}

	.search-wrap input {
		font-size: 12px;
		padding: 0 16px;
	}

	.mid-actions {
		gap: 8px;
	}

	.chip {
		min-width: 128px;
		padding: 0 9px;
		height: 42px;
	}

	.chip i {
		font-size: 15px;
	}

	.chip strong {
		font-size: 12px;
	}

	.chip small {
		font-size: 8px;
	}

	.nav-strip-inner {
		min-height: 68px;
	}

	.main-nav a {
		font-size: 14px;
		padding: 0 10px;
	}

	.btn {
		height: 40px;
		font-size: 13px;
		padding: 0 14px;
	}

	.btn-callback {
		min-width: 138px;
	}

	.btn-quote {
		min-width: 114px;
	}
}

@media (max-width: 860px) {
	.top-strip-inner {
		min-height: 46px;
		gap: 12px;
	}

	.top-contact {
		gap: 14px;
	}

	.top-contact a,
	.top-socials a {
		font-size: 12px;
	}

	.top-socials {
		gap: 16px;
	}

	.header-main-inner {
		flex-wrap: wrap;
		row-gap: 12px;
		padding: 14px 0;
		min-height: auto;
	}

	.brand-block {
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
	}

	.search-wrap {
		flex: 1 1 100%;
		max-width: 100%;
		height: 36px;
	}

	.mid-actions {
		flex: 1 1 100%;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;
	}

	.chip {
		flex: 1 1 calc(50% - 5px);
		min-width: 140px;
	}

	.nav-strip-inner {
		min-height: auto;
		padding: 12px 0;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.main-nav {
		display: none;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding-top: 12px;
	}

	.main-nav.is-open {
		display: flex;
	}

	.main-nav a,
	.main-nav a:first-child {
		padding: 0;
		height: auto;
		border-left: none;
		font-size: var(--text-md);
	}

	.cta-wrap {
		margin-left: auto;
	}

	.btn {
		height: 40px;
	}
}

@media (max-width: 560px) {
	.container {
		width: min(1280px, 100% - 22px);
	}

	.top-strip-inner {
		flex-wrap: wrap;
		justify-content: center;
		padding: 8px 0;
		gap: 8px;
	}

	.top-contact {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}

	.top-contact a,
	.top-socials a {
		font-size: 12px;
		gap: 8px;
	}

	.top-socials {
		justify-content: center;
		gap: 14px;
	}

	.header-main-inner {
		min-height: auto;
	}

	.logo-mark {
		width: 26px;
		height: 38px;
	}

	.logo-mark .mark-front {
		width: 9px;
		height: 15px;
	}

	.logo-mark .mark-side {
		width: 17px;
		height: 8px;
		top: -6px;
	}

	.brand-name {
		font-size: 20px;
	}

	.search-wrap {
		height: 36px;
	}

	.search-wrap input {
		font-size: 12px;
		padding: 0 14px;
	}

	.search-wrap button {
		width: 38px;
		font-size: 14px;
	}

	.chip {
		min-width: 100%;
		justify-content: center;
		height: 40px;
	}

	.chip i {
		font-size: 14px;
	}

	.nav-strip-inner {
		row-gap: 10px;
	}

	.menu-toggle {
		width: 36px;
		height: 36px;
		font-size: var(--text-md);
	}

	.main-nav a,
	.main-nav a:first-child {
		font-size: 15px;
	}

	.cta-wrap {
		width: 100%;
		justify-content: space-between;
		margin-left: 0;
		gap: 8px;
	}

	.btn {
		min-width: calc(50% - 4px);
		font-size: 13px;
		height: 38px;
		padding: 0 12px;
	}

	.btn-callback {
		min-width: calc(50% - 4px);
	}

	.btn-quote {
		min-width: calc(50% - 4px);
	}
}

@media (max-width: 480px) {
	.container {
		width: min(1280px, 100% - 18px);
	}

	.top-strip-inner {
		min-height: 40px;
		padding: 6px 0;
	}

	.top-contact a span,
	.top-socials a span {
		display: none;
	}

	.top-contact a,
	.top-socials a {
		gap: 0;
		font-size: 14px;
	}

	.brand-name {
		font-size: 18px;
	}

	.search-wrap {
		height: 34px;
	}

	.search-wrap input {
		font-size: 11px;
		padding: 0 12px;
	}

	.search-wrap input::placeholder {
		font-size: 11px;
	}

	.chip {
		min-width: 100%;
		height: 38px;
		gap: 8px;
		padding: 0 10px;
	}

	.chip i {
		font-size: 13px;
	}

	.chip strong {
		font-size: 11px;
	}

	.chip small {
		font-size: 7px;
	}

	.menu-toggle {
		width: 34px;
		height: 34px;
		font-size: 15px;
	}

	.main-nav a,
	.main-nav a:first-child {
		font-size: 14px;
	}

	.btn {
		height: 36px;
		font-size: 12px;
		padding: 0 10px;
	}
}

.supplement-hero {
	position: relative;
	width: 100%;
	min-height: 620px;
	background: radial-gradient(circle at 20% 50%, rgba(30, 90, 60, 0.4) 0%, transparent 50%),
	            radial-gradient(circle at 80% 40%, rgba(20, 70, 45, 0.3) 0%, transparent 50%),
	            linear-gradient(180deg, #022716 0%, #031f14 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
}

.hero-noise {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/dark-section-bg.png");
	opacity: 0.03;
	pointer-events: none;
}

.supplement-hero-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	padding: 60px 0;
	position: relative;
	z-index: 1;
}

.hero-content {
	flex: 0 1 47%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	
}

.hero-kicker {
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: 1.8px;
	color: #67da48;
	line-height: 1;
	margin: 0;

}

.hero-content h1 {
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 0.92;
	margin: 0;
}

.hero-title-light1 {
	font-size: clamp(26px, 4vw, 42px);
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.5px;
	line-height: 1.12;
}

.hero-title-green1 {
	font-size: clamp(26px, 4vw, 42px);
	font-weight: 700;
	color: #67da48;
	letter-spacing: -0.5px;
	line-height: 1.12;
}

.hero-points {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
}

.hero-points li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--section-body);
	font-weight: 400;
	color: #ffffff;
	line-height: 1.3;
}

.hero-points li i {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #67da48;
	color: #ffffff;
	border-radius: 50%;
	font-size: 10px;
}


.hero-cta-wrap {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 8px;
}

.hero-btn {
	height: 50px;
	min-width: 168px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 28px;
	border-radius: 8px;
	font-size: var(--text-md);
	font-weight: 600;
	letter-spacing: 0;
	transition: all 0.3s ease;
	background: #157347;
	color: #ffffff;
}

.hero-btn-callback {
	min-width: 188px;
}

.hero-btn-quote {
	min-width: 152px;
}

.hero-btn:hover {
	background: #67da48;
	transform: translateY(-2px);
}

.hero-visual {
	flex: 0 1 50%;
	position: relative;
	height: 500px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.bottle {
	position: absolute;
	width: 235px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.3s ease;
}

.bottle:hover {
	transform: translateY(-10px);
}

.bottle .cap {
	width: 155px;
	height: 86px;
	background: linear-gradient(180deg, #7ae55a 0%, #5fcc42 100%);
	border-radius: 12px 12px 0 0;
	position: relative;
	z-index: 2;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bottle .cap::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 12px;
	right: 12px;
	height: 20px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%, rgba(255, 255, 255, 0.2) 100%);
	border-radius: 8px;
}

.bottle .body {
	width: 235px;
	height: 390px;
	background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
	border-radius: 20px;
	position: relative;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.bottle .label-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 52%;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #e8e8e8;
}

.bottle .label-top::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	background: radial-gradient(circle, #67da48 0%, #5fcc42 100%);
	border-radius: 50%;
	opacity: 0.15;
}

.bottle .label-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 48%;
	background: linear-gradient(180deg, #7ae55a 0%, #5fcc42 100%);
}

.bottle-left {
	left: 0;
	z-index: 1;
	transform: scale(0.88);
	opacity: 0.92;
}

.bottle-right {
	right: 0;
	z-index: 1;
	transform: scale(0.88);
	opacity: 0.92;
}

.bottle-center {
	left: 50%;
	transform: translateX(-50%) scale(1);
	z-index: 3;
}

.pill {
	position: absolute;
	width: 52px;
	height: 22px;
	border-radius: 11px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	z-index: 2;
}

.pill::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	background: #ffffff;
	border-radius: 11px 0 0 11px;
}

.pill::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	height: 100%;
	background: #67da48;
	border-radius: 0 11px 11px 0;
}

.pill-a {
	bottom: 42px;
	left: 50%;
	transform: translateX(-140px) rotate(-12deg);
}

.pill-b {
	bottom: 32px;
	left: 50%;
	transform: translateX(-100px) rotate(24deg);
}

@media (max-width: 1100px) {
	.supplement-hero {
		min-height: 540px;
	}

	.supplement-hero-inner {
		gap: 40px;
		padding: 50px 0;
	}

	.hero-content {
		flex: 0 1 46%;
	}

	.hero-title-light,
	.hero-title-green {
		font-size: clamp(28px, 5vw, 38px);
	}

	.hero-points li {
		font-size: var(--text-md);
		gap: 14px;
	}

	.hero-points li i {
		width: 20px;
		height: 20px;
		font-size: 10px;
	}

	.hero-btn {
		height: 48px;
		font-size: 15px;
	}

	.hero-btn-callback {
		min-width: 178px;
	}

	.hero-btn-quote {
		min-width: 144px;
	}

	.hero-visual {
		flex: 0 1 48%;
		height: 450px;
	}

	.bottle {
		width: 210px;
	}

	.bottle .cap {
		width: 138px;
		height: 76px;
	}

	.bottle .body {
		width: 210px;
		height: 350px;
	}
}

@media (max-width: 860px) {
	.supplement-hero {
		min-height: auto;
		padding: 0;
	}

	.supplement-hero-inner {
		flex-direction: column;
		gap: 50px;
		padding: 44px 0;
	}

	.hero-content {
		flex: 1 1 100%;
		max-width: 600px;
		text-align: center;
		align-items: center;
		gap: 22px;
	}

	.hero-content h1 {
		align-items: center;
	}

	.hero-kicker {
		font-size: 15px;
	}

	.hero-title-light,
	.hero-title-green {
		font-size: clamp(24px, 5.5vw, 34px);
	}

	.hero-points {
		gap: 16px;
		align-items: center;
	}

	.hero-points li {
		justify-content: center;
		max-width: 480px;
	}

	.hero-cta-wrap {
		justify-content: center;
		gap: 16px;
	}

	.hero-visual {
		flex: 1 1 auto;
		width: 100%;
		max-width: 700px;
		height: 380px;
	}

	.bottle {
		width: 180px;
	}

	.bottle .cap {
		width: 118px;
		height: 66px;
	}

	.bottle .body {
		width: 180px;
		height: 300px;
	}
}

@media (max-width: 560px) {
	.supplement-hero-inner {
		padding: 36px 0;
		gap: 38px;
	}

	.hero-kicker {
		font-size: 14px;
		letter-spacing: 1.4px;
	}

	.hero-title-light,
	.hero-title-green {
		font-size: clamp(20px, 5vw, 30px);
	}

	.hero-points li {
		font-size: 15px;
		gap: 12px;
	}

	.hero-points li i {
		width: 18px;
		height: 18px;
		font-size: 9px;
	}

	.hero-cta-wrap {
		flex-direction: column;
		width: 100%;
		gap: 12px;
		margin-top: 4px;
	}

	.hero-btn {
		width: 100%;
		height: 48px;
		font-size: 15px;
	}

	.hero-btn-callback,
	.hero-btn-quote {
		min-width: 100%;
	}

	.hero-visual {
		height: 320px;
	}

	.bottle {
		width: 150px;
	}

	.bottle .cap {
		width: 98px;
		height: 56px;
	}

	.bottle .body {
		width: 150px;
		height: 250px;
	}

	.pill {
		width: 44px;
		height: 18px;
	}

	.pill-a {
		bottom: 34px;
		transform: translateX(-115px) rotate(-12deg);
	}

	.pill-b {
		bottom: 26px;
		transform: translateX(-82px) rotate(24deg);
	}
}

@media (max-width: 480px) {
	.supplement-hero {
		min-height: auto;
	}

	.supplement-hero-inner {
		padding: 30px 0;
		gap: 32px;
	}

	.hero-content {
		gap: 18px;
	}

	.hero-kicker {
		font-size: 12px;
		letter-spacing: 1.2px;
	}

	.hero-title-light,
	.hero-title-green {
		font-size: clamp(18px, 4.8vw, 26px);
	}

	.hero-points {
		gap: 14px;
	}

	.hero-points li {
		font-size: 13px;
		gap: 10px;
	}

	.hero-points li i {
		width: 16px;
		height: 16px;
		font-size: 8px;
	}

	.hero-cta-wrap {
		gap: 10px;
		margin-top: 0;
	}

	.hero-btn {
		height: 44px;
		font-size: 14px;
		padding: 0 20px;
	}

	.hero-visual {
		height: 280px;
		max-width: 100%;
	}

	.bottle {
		width: 130px;
	}

	.bottle .cap {
		width: 85px;
		height: 48px;
		border-radius: 8px 8px 0 0;
	}

	.bottle .cap::before {
		top: 6px;
		left: 8px;
		right: 8px;
		height: 14px;
	}

	.bottle .body {
		width: 130px;
		height: 220px;
		border-radius: 16px;
	}

	.pill {
		width: 38px;
		height: 16px;
	}

	.pill-a {
		bottom: 28px;
		transform: translateX(-98px) rotate(-12deg);
	}

	.pill-b {
		bottom: 22px;
		transform: translateX(-70px) rotate(24deg);
	}

	.bottle-left,
	.bottle-right {
		transform: scale(0.82);
		opacity: 0.88;
	}
}

@media (max-width: 380px) {
	.container {
		width: min(1280px, 100% - 16px);
	}

	.hero-title-light,
	.hero-title-green {
		font-size: clamp(17px, 4.5vw, 24px);
	}

	.hero-points li {
		font-size: 12px;
	}

	.hero-btn {
		height: 42px;
		font-size: 13px;
		padding: 0 16px;
	}

	.hero-visual {
		height: 250px;
	}

	.bottle {
		width: 115px;
	}

	.bottle .cap {
		width: 75px;
		height: 42px;
	}

	.bottle .body {
		width: 115px;
		height: 195px;
	}

	.bottle-left {
		left: -10px;
	}

	.bottle-right {
		right: -10px;
	}

	.pill-a {
		bottom: 24px;
		transform: translateX(-85px) rotate(-12deg);
	}

	.pill-b {
		bottom: 18px;
		transform: translateX(-60px) rotate(24deg);
	}
}

/* Supplement Features Section */
.supplement-features {
	background: #f2fbf4;
	padding: 20px 0;
}

.supplement-features-inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: center;
}

.feature-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 0;
	min-width: 0;
}

.feature-icon {
	font-size: 25px;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 50px;
	min-width: 50px;
	height: 50px;
	background: #157347 ;
	border-radius: 70%;
}

.feature-content {
	flex: 1;
	min-width: 0;
}

.feature-title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
	letter-spacing: 0;
	line-height: 1.3;
	color:#157347 ;
}

.feature-description {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: #818589;
	margin: 0;
}

@media (max-width: 991px) {
	.supplement-features-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 575px) {
	.supplement-features-inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.feature-card {
		gap: 14px;
	}
}

/* Product Section */
.product-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 60px;
  margin-bottom: 40px;
}
.product-content {
  margin-left: 140px;
}
.product-label {
  color: #67da48;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.product-title {
  color: #16352b;
  font-size: var(--section-heading);
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}
.product-subtitle,
.product-title .product-subtitle {
  color: #67da48;
  font-size: inherit;
  font-weight: 700;
  margin: 0;
  display: block;
}
.product-action {
  display: flex;
  align-items: center;
  margin-top: 32px;
  margin-right: 140px;
}
.view-all-btn {
  background: #157347;
  color: #fff;
  font-size: var(--text-md);
  font-weight: 700;
  border: none;
  border-radius: 7px;
  padding: 14px 44px 14px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: none;
  transition: background 0.2s;
  position: relative;
  gap: 12px;
}
.view-all-btn:hover {
  background: #67da48;
}
.arrow {
  background: #fff;
  color:#157347;
  font-size: var(--text-md);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(106,196,62,0.10);
}

.product-list-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}
.product-list {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
}
.product-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(34, 34, 34, 0.08);
  padding: 32px 24px 24px 24px;
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s;
}
.product-card:hover {
  box-shadow: 0 4px 24px rgba(106,196,62,0.15);
}
.product-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}
.product-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: #16352b;
  margin-bottom: 16px;
  text-align: center;
}
.product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.product-rating .star {
  color: #67da48;
  font-size: var(--text-md);
}
.product-prices {
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-old-price {
  color: #8b8b8b;
  font-size: 16px;
  text-decoration: line-through;
  font-weight: 500;
}
.product-new-price {
  color: #16352b;
  font-size: 18px;
  font-weight: 700;
}

/* Product Pagination Arrows */
.product-pagination-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 35px;
  margin-top: 20px;
}
.product-pagination-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #157347;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(106,196,62,0.10);
  cursor: pointer;
  transition: background 0.2s;
}


.product-pagination-arrow:hover {
  background: #67da48;
}
.arrow-icon {
  color: #ffffff;
 margin-bottom: 5px;
  font-size: 25px;
  font-weight: bold;
}



/* Stats Section */
.stats-section {
  width: 100%;
  margin: 30px 0 32px 0;
  background: #f2fbf4;
  display: flex;
  justify-content: center;
  align-items: center;
}
.stats-list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 160px;
  width: 100%;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-number {
  color: #157347 ;
  font-size: var(--text-3xl);
  margin-top: 10px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: inherit;
}
.stat-label {
  color: #818589;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  font-family: inherit;
}

/* Box Design Section */
.box-design-section {
  width: 100%;
  margin: 56px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box-design-title {
  color: #16352b;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
  font-family: inherit;
}
.box-design-content {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 48px;
  width: 100%;
  max-width: 1200px;
}
.box-design-left {
  flex: 2;
  display: flex;
  min-width: 0;
}
.box-design-scroll {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(34, 34, 34, 0.08);
  padding: 32px 32px 24px 32px;
  width: 100%;
  font-family: inherit;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #157347 #f5f5f5;
  flex: 1;
  min-height: 0;
}
.box-design-scroll::-webkit-scrollbar {
  width: 8px;
}
.box-design-scroll::-webkit-scrollbar-thumb {
  background: #157347 ;
  border-radius: 8px;
}
.box-design-scroll::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 8px;
}
.box-design-scroll h3 {
  color: #222;
  font-size: var(--text-xl);
  font-weight: 500;
  margin: 32px 0 16px 0;
}
.box-design-scroll p {
  color: #222;
  font-size: var(--text-sm);
  font-weight: 400;
  margin-bottom: 18px;
  line-height: 1.6;
}
.box-design-scroll ul {
  margin: 16px 0 0 24px;
  color: #222;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.6;
}
.box-design-scroll li {
  margin-bottom: 8px;
}
.box-design-right {
  flex: 1;
  display: flex;
  min-width: 0;
}
.box-design-form {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(34, 34, 34, 0.1);
  border: none;
  padding: 32px 32px 24px 32px;
  width: 100%;
  max-width: 500px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.form-title {
  color: #fff;
  font-size: 24px;
  background: #157347;
  font-weight: 700;
  text-align: center;
  border-radius: 50px 50px 0 0;
  padding: 10px 0 10px 0;
  margin-bottom: 18px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  color: #16352b;
  font-size: 14px;
  font-weight: 600;
}



.required {
  color: #d32f2f;
  font-size: 18px;
  font-weight: bold;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  border: 1.5px solid #ededed;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 12px;
  font-family: inherit;
  background: #fafafa;
  resize: none;
  transition: border 0.2s;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
  border: 1.5px solid #157347 ;
  outline: none;
}
.form-group textarea {
  min-height: 70px;
  max-height: 140px;
}
.checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.info-icon {
  color: #bdbdbd;
  font-size: 18px;
  margin-left: 4px;
  cursor: pointer;
}


.submit-btn {
  background: #157347 ;
  color: #fff;
  font-size: var(--text-md);
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 16px 0;
  cursor: pointer;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}
.submit-btn:hover {
  background: #67da48;
}
.submit-btn .arrow {
  font-size: var(--text-md);
  font-weight: bold;
}


/* Why Choose Us Section */
.why-choose-us-section {
	width: 100%;
	background: #f2fbf4;
	padding: 38px 0 28px 0;
	margin-top: 20px;
}
.why-choose-us-container {
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 100px;
	
}
.why-choose-us-left {
	flex: 1.2;
	min-width: 420px;
}
.why-choose-us-label {
	color: #67da48;
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 30px;
	text-transform: uppercase;
}
.why-choose-us-label span {
	letter-spacing: 2px;
}
.why-choose-us-title {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: #16352b ;
	line-height: 1.1;
}
.why-choose-us-title .highlight-green {
	color: #67da48;
	font-size: var(--text-3xl);
	font-weight: 700;
}
.why-choose-us-right {
	flex: 2;
	display: flex;
	align-items: center;
	min-width: 340px;
}
.why-choose-us-desc {
	color: #818589;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	margin-left: 10px;
}
@media (max-width: 900px) {
	.why-choose-us-container {
		flex-direction: column;
		gap: 18px;
		padding: 0 12px;
	}
	.why-choose-us-left, .why-choose-us-right {
		min-width: 0;
	}
	.why-choose-us-title, .why-choose-us-title .highlight-green {
		font-size: var(--text-2xl);
	}
	.why-choose-us-desc {
		font-size: var(--text-md);
		margin-left: 0;
	}
}


/* Features Grid Section */
.features-grid-section {
	width: 100%;
	height: 550px;
	background: #f2fbf4;
	padding: 32px 0 32px 0;
	margin: 0;
}
.features-grid-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}
.features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px 24px;
}
.feature-box {
	background: #fff;
	border: 0.5px solid #157347;
	border-radius: 18px;
	box-shadow: none;
	padding: 36px 18px 28px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	transition: box-shadow 0.2s;
	min-height: 180px;
	transition: background 0.2s;
}

.feature-icon-circle {
	width: 56px;
	height: 56px;
	background: #f2fbf4;
	border: 1px solid rgba(21, 115, 71, 0.12);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.feature-grid-icon {
	font-size: 22px;
	color: #157347;
	line-height: 1;
}

.feature-icon {
	font-size: var(--text-2xl);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.feature-grid-title {
	font-size: var(--text-md);
	font-weight: 600;
	color: #16352b;
	margin: 0 0 8px;
	text-align: center;
}

.feature-grid-desc {
	font-size: var(--section-body);
	color: #818589;
	font-weight: 400;
	text-align: center;
	line-height: 1.5;
	margin: 0;
}
@media (max-width: 1200px) {
	.features-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 18px;
	}
}
@media (max-width: 700px) {
	.features-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.feature-box {
		padding: 28px 12px 20px 12px;
	}
}

/* Hero Section Styles */

.cta-section {
	width: 100%;
	background: radial-gradient(circle at 20% 50%, rgba(30, 90, 60, 0.4) 0%, transparent 50%),
	            radial-gradient(circle at 80% 40%, rgba(20, 70, 45, 0.3) 0%, transparent 50%),
	            linear-gradient(180deg, #022716 0%, #031f14 100%);
	padding: 38px 0 28px 0;
	height: 450px;
}
.cta-container {
	max-width: 1600px;
	margin: 0 auto;
	margin-top: 40px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 100px;
	
}
.cta-left {
	flex: 1.2;
	min-width: 800px;
}
.cta-label {
	color: #67da48;
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 30px;
	text-transform: uppercase;
}
.cta-label span {
	letter-spacing: 2px;
}
.cta-title {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: #fff ;
	line-height: 1.1;
}
.cta-title .highlight-green {
	color: #67da48;
	font-size: var(--text-3xl);
	font-weight: 700;
}
.cta-right {
	flex: 2;
	display: flex;
	align-items: center;
	min-width: 340px;
}
.cta-desc-clr {
	color: #fff;
	font-size: 15px;
	font-weight: 100;
	line-height: 1.7;
	margin-top: 10px;
}
@media (max-width: 900px) {
	.cta-container {
		flex-direction: column;
		gap: 18px;
		padding: 0 12px;
	}
	.cta-left, .cta-right {
		min-width: 0;
	}
	.cta-title, .cta-title .highlight-green {
		font-size: var(--text-2xl);
	}
	.cta-desc {
		font-size: var(--text-md);
		margin-left: 0;
	}
}


.cta-action {
 margin-top: 32px;
  margin-right: 140px;
}

.cta-btn {
  background: #157347;
  color: #fff;
  font-size: var(--text-md);
  font-weight: 700;
  border: none;
  border-radius: 7px;
  padding: 14px 44px 14px 24px;
  cursor: pointer;
  display: flex;
  margin-top: 10px;
  align-items: center;
  box-shadow: none;
  transition: background 0.2s;
  gap: 12px;
}
.cta-btn:hover {
  background: #67da48;
}


/* Innovation section matching reference */
.innovation-section {
	padding: 38px 0 28px 0;
	background: #fff;
	
}
.innovation-container {
	max-width: 1600px;
	margin: 0 auto;
	margin-top: 40px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 100px;
}

.order-left {
	flex: 1.2;
	min-width: 800px;
}

.order-label {
	color: #67da48;
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 30px;
	text-transform: uppercase;
}
.order-label span {
	letter-spacing: 2px;
}
.order-title {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: #16352b ;
	line-height: 1.1;
}
.order-title .highlight-green {
	color: #67da48;
	font-size: var(--text-3xl);
	font-weight: 700;
}


.innovation-lead {
	max-width: 720px;
	color: #818589;
	font-size: 15px;
	font-weight: 100;
	line-height: 1.7;
	margin-top: 10px;
	margin-bottom: 28px;
}
.innovation-features {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 820px;
}
.info-card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	background: #eef3f5;
	padding: 20px 22px;
	border-radius: 16px;
	box-shadow: 0 4px 18px rgba(19, 24, 26, 0.03);
}
.info-icon1 {
	width: 54px;
	height: 54px;
	min-width: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #157347;
	color: #fff;
	font-size: 18px;
}
.info-body {
	flex: 1;
}
.info-title {
	font-size: var(--text-md);
	font-weight: 700;
	color: #16352b;
	margin-bottom: 6px;
}
.info-desc {
	font-size: 14px;
	color: #6b6f73;
	line-height: 1.6;
}

.cta-right {
	flex: 2;
	display: flex;
	align-items: center;
	min-width: 340px;
}

.cta-desc-clr1 {
	color: #818589;
	font-size: 15px;
	font-weight: 100;
	line-height: 1.7;
	margin-top: 10px;
}

@media (max-width: 860px) {
	.innovation-title { font-size: var(--text-2xl); }
	.innovation-container { width: min(960px, 100% - 40px); }
}
@media (max-width: 560px) {
	.innovation-title { font-size: var(--text-xl); }
	.innovation-features { gap: 12px; }
	.info-card { padding: 14px; border-radius: 12px; }
	.info-icon1 { width: 46px; height: 46px; font-size: 16px; }
}


/* faqs section  */

.faqs-section {
	width: 100%;
	background: #f2fbf4;
	margin: 56px 0 0 0;
	padding: 38px 0 28px 0;
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.faqs-container {
	max-width: 1600px;
	margin: 0 auto;
	justify-content: center;
}

.faqs-label {
	color: #67da48;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 10px;
	text-transform: uppercase;
	
}
.faqs-label span {
	letter-spacing: 2px;
}
.faqs-title {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: #16352b ;
	line-height: 1.1;
	
	text-align: center;
	
}
.faqs-title .highlight-green {
	color: #67da48;
	font-size: var(--text-3xl);
	font-weight: 700;
	
}

.faqs-desc {
	color: #818589;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
    margin-top: 10px;
	
}

/* FAQ Section (reference match) */
.faqs-section {
	padding: 60px 0 96px;
	background: #f1f8ef;
}
.faqs-container {
	width: min(1280px, 100% - 72px);
	margin: 0 auto;
}
.faqs-header {
	max-width: 1200px;
	margin: 0 auto 36px;
}


.faqs-desc {
	color: #6f6f6f;
	font-size: 14px;
	max-width: 980px;
}
.faqs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px 80px;
	max-width: 1280px;
	margin: 18px auto 0;
}
.faq-col {
	display: flex;
	flex-direction: column;
	gap: 36px;
}
.faq-item {
	background: transparent;
}
.faq-question {
	font-size: var(--text-md);
	font-weight: 700;
	color: #101010;
	margin-bottom: 10px;
	position: relative;
}
.faq-question::after {
	content: '';
	display: block;
	width: 150px;
	height: 4px;
	background: #67da48;
	margin-top: 10px;
}
.faq-answer {
	color: #6f6f6f;
	font-size: 16px;
	line-height: 1.8;
	margin-top: 12px;
}
.faq-answer.small {
	margin-top: 10px;
	font-size: 16px;
}

@media (max-width: 980px) {
	.faqs-grid {
		grid-template-columns: 1fr;
		gap: 28px 0;
	}
	.faqs-container { padding: 40px 0; }
}


/* Testimonials Section */
.testimonials-section {
	position: relative;
	padding: 80px 0;
	background: radial-gradient(circle at 20% 50%, rgba(30, 90, 60, 0.4) 0%, transparent 50%),
	            radial-gradient(circle at 80% 40%, rgba(20, 70, 45, 0.3) 0%, transparent 50%),
	            linear-gradient(180deg, #022716 0%, #031f14 100%);
	color: #fff;
	height: auto;
	min-height: 0;
	overflow: hidden;
	max-width: 100%;
}
.testimonials-inner {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: center;
}
.testimonials-left {
	flex: 1 1 280px;
	max-width: 100%;
}

.testimonials-title {
	font-size: var(--text-4xl);
	line-height: 1;
	margin: 0 0 18px;
	font-weight: 700;
}
.testimonials-rating-line {
	color: #e6e6e6;
	margin-bottom: 12px;
}
.testimonials-rating-row {
	display: flex;
	align-items: center;
	gap: 14px;
}
.google-icon {
	font-size: 34px;
	color: #67da48;
}
.testimonials-stars i { color: #67da48; margin-right: 4px; }

.testimonials-right {
	flex: 1 1 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.testimonials-swiper {
	width: 100%;
	max-width: 100%;
	padding: 16px 0 36px;
	overflow: hidden;
}

.testimonials-swiper .swiper-wrapper {
	max-width: 100%;
}

.testimonials-swiper .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

.testimonial-card {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 220px;
	background: rgba(16,16,16,0.48);
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 12px 30px rgba(3,3,3,0.5);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.04);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.card-stars i { color: #67da48; margin-right: 6px; }
.card-text { color: #e9e9e9; font-size: 16px; line-height: 1.6; margin: 14px 0; }
.card-author { color: #67da48; font-weight: 700; margin-top: 8px; }
.quote-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: #67da48;
	color: #111;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	z-index: 2;
}

.testimonials-dots { display: flex; gap: 10px; justify-content: flex-end; width: 100%; margin-top: 18px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.dot.active { background: #67da48; box-shadow: 0 2px 6px rgba(103,218,72,0.25); }

.testimonials-pagination {
	position: relative !important;
	bottom: 0 !important;
	margin-top: 18px;
	text-align: right;
}

.testimonials-pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background: rgba(255, 255, 255, 0.18);
	opacity: 1;
	margin: 0 5px !important;
}

.testimonials-pagination .swiper-pagination-bullet-active {
	background: #67da48;
	box-shadow: 0 2px 6px rgba(103, 218, 72, 0.25);
}

@media (max-width: 860px) {
	.testimonials-section {
		padding: 48px 0;
	}

	.testimonials-inner {
		flex-direction: column;
		gap: 24px;
		text-align: center;
	}

	.testimonials-right {
		width: 100%;
		justify-content: center;
	}

	.testimonials-rating-row {
		justify-content: center;
	}

	.testimonial-card {
		width: 100%;
		min-width: 0;
	}

	.testimonials-left {
		order: 2;
	}

	.testimonials-pagination {
		text-align: center;
	}
}



/* Latest Blog / Insights Section (reference match) */
.latest-blog-section {
	padding: 80px 0;
	background: #fff;
}
.latest-blog-inner {
	width: 1600px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.latest-blog-header {
	display: flex;
	justify-content: space-between;
	gap: 18px;
}
.blog-kicker {
	  color: #67da48;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.blog-title {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: #16352b;
	line-height: 1.05;
}
.blog-title .green {
	color: #67da48;
}


.blog-action {
  display: flex;
  align-items: center;
  margin-top: 32px;
  margin-right: 140px;
}

.blog-all-btn {
  background: #157347;
  color: #fff;
  font-size: var(--text-md);
  font-weight: 700;
  border: none;
  border-radius: 7px;
  padding: 14px 44px 14px 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: none;
  transition: background 0.2s;
  position: relative;
  gap: 12px;
}
.blog-all-btn:hover {
  background: #67da48;
}





.blog-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.blog-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(34,34,34,0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 26px 60px rgba(34,34,34,0.12);
}
.blog-card img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.blog-card-body {
	padding: 22px;
	background: #fff;
}
.blog-card-body h3 {
	font-size: 18px;
	color: #16352b;
	font-weight: 700;
	margin-bottom: 12px;
	line-height: 1.3;
}
.read-more {
	color: #67da48;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

@media (max-width: 1000px) {
	.blog-cards { grid-template-columns: repeat(2, 1fr); }
	.blog-card img { height: 200px; }
}
@media (max-width: 640px) {
	.latest-blog-header { flex-direction: column; align-items: flex-start; }
	.blog-view-all { align-self: flex-end; }
	.blog-cards { grid-template-columns: 1fr; }
}




/* Footer / Reference match */
.site-footer {
	background: #022716;
	color: #e6e6e6;
	padding: 56px 0 28px;
}
.site-footer .container {
	width: min(1280px, 100% - 72px);
	margin: 0 auto;
}


.footer-top {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(255,255,255,0.04);
}

.footer-col 
{ 
	flex: 1; 
}

.footer-brand 
{ 
	flex: 0 0 320px; 
}

.footer-logo 
{ font-size: 22px; 
	font-weight: 800; 
	color: #67da48; 
	margin-bottom: 12px; 
}

.site-footer p {
	 color: #bdbdbd; 
	 line-height: 1.8; 
	 font-size: 14px; 
	}

.footer-socials { 
	margin-top: 18px; 
	display: flex; 
	gap: 12px; 
}

.footer-socials a { 
	width: 36px; 
	height: 36px; 
	border-radius: 50%; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	border: 1px solid rgba(255,255,255,0.06); 
	color: #fff; 
	background: transparent; 
}
.footer-contacts .ft-cols { 
	display: flex; 
	gap: 24px; 
}

.footer-contacts h4 { 
	color: #fff; 
	font-size: var(--text-md); 
	margin-bottom: 8px; 
}
.muted { 
	color: #bdbdbd; 
	font-size: 13px; 
	margin-bottom: 6px; 
}
.ft-strong { 
	color: #fff; 
	font-weight: 700; 
}
.footer-mid { 
	padding: 28px 0; 
}
.footer-links {
	display: flex;
	gap: 48px;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
}
.links-col { 
	min-width: 200px; 
}
.links-col h5 { 
	color: #fff; 
	font-size: var(--text-md); 
	margin-bottom: 12px; 
}
.links-col ul { 
	list-style: none; 
	padding: 0; 
	margin: 0; 
}
.links-col li { 
	margin-bottom: 10px; 
}
.links-col a { 
	color: #bfbfbf; 
	font-size: 14px; 
}
.newsletter-col .muted { 
	max-width: 360px; 
}
.newsletter-form { 
	display: flex; 
	gap: 12px; 
	margin-top: 12px; 
	align-items: center; 
}
.newsletter-form input { 
	flex: 1; 
	padding: 10px 14px; 
	border: none; 
	border-bottom: 1px solid rgba(255,255,255,0.08); 
	background: transparent; 
	color: #fff; 
}
.newsletter-form button { 
	background: transparent; 
	border: none; 
	color: #67da48; 
	font-size: 18px; 
	cursor: pointer; 
}
.footer-bottom { 
	padding-top: 18px; 
	border-top: 1px solid rgba(255,255,255,0.03); 
	text-align: center; 
}
.copyright { 
	color: #bfbfbf; 
}

@media (max-width: 980px) {
	.footer-top { flex-direction: column; gap: 20px; }
	.footer-contacts .ft-cols { flex-direction: column; gap: 12px; }
	.footer-links { flex-direction: column; gap: 18px; }
}



.cta-section1 {
	width: 100%;
	background: #022716;
	padding: 38px 0 28px 0;
	height: 450px;
}
.cta-container1 {
	max-width: 1600px;
	margin: 0 auto;
	margin-top: 40px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 100px;
	
}
.cta-left1 {
	flex: 1.2;
	min-width: 800px;
}
.cta-label1 {
	color: #67da48;
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 30px;
	text-transform: uppercase;
}
.cta-label1 span {
	letter-spacing: 2px;
}
.cta-title1 {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: #fff ;
	line-height: 1.1;
}
.cta-title1 .highlight-green1 {
	color: #67da48;
	font-size: var(--text-3xl);
	font-weight: 700;
}
.cta-right1 {
	flex: 2;
	display: flex;
	align-items: center;
	min-width: 340px;
}
.cta-desc-clr1 {
	color: #fff;
	font-size: 15px;
	font-weight: 100;
	line-height: 1.7;
	margin-top: 10px;
}
@media (max-width: 900px) {
	.cta-container1 {
		flex-direction: column;
		gap: 18px;
		padding: 0 12px;
	}
	.cta-left1, .cta-right1 {
		min-width: 0;
	}
	.cta-title1, .cta-title1 .highlight-green1 {
		font-size: var(--text-2xl);
	}
	.cta-desc-clr1 {
		font-size: var(--text-md);
		margin-left: 0;
	}
}


.cta-action1 {
 margin-top: 32px;
  margin-right: 140px;
}

.cta-btn1 {
  background: #157347;
  color: #fff;
  font-size: var(--text-md);
  font-weight: 700;
  border: none;
  border-radius: 7px;
  padding: 14px 44px 14px 24px;
  cursor: pointer;
  display: flex;
  margin-top: 10px;
  align-items: center;
  box-shadow: none;
  transition: background 0.2s;
  gap: 12px;
}
.cta-btn1:hover {
  background: #67da48;
}









/* Footer refinements to match reference */
.footer-mark {
	display: inline-block;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #67da48;
	margin-right: 12px;
	box-shadow: 0 6px 18px rgba(106,196,62,0.12);
}
.brand-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.footer-logo { color:#fff; font-size:20px; font-weight:700; display:flex; align-items:center; gap:6px; }
.footer-logo .logo-dot { color:#67da48; font-weight:900; margin-left:2px; }
.social-label { margin-top:18px; color:#fff; font-weight:700; margin-bottom:12px; text-transform:lowercase; }
.social-btn { width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,0.04); color:#fff; }
.contact-block { display:flex; flex-direction:column; gap:6px; min-width:180px; }
.contact-block h4 { margin:0; }
.ft-cols { display:flex; gap:36px; align-items:flex-start; }
.ft-icon { width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#67da48; border:1px solid rgba(106,196,62,0.18); background:rgba(106,196,62,0.04); font-size:18px; margin-bottom:6px; }
.ft-icon i { color:#67da48; }
.links-col ul li { position:relative; padding-left:18px; }
.links-col ul li::before { content:''; position:absolute; left:0; top:10px; width:6px; height:6px; background:#67da48; border-radius:50%; }

@media (max-width: 980px) {
	.ft-cols { flex-direction:column; }
	.contact-block { min-width: auto; }
}



/* About page banner (matches attached image) */
.about-header {
	width: 100%;
	min-height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 22px 0;
	position: relative;
	background: linear-gradient(180deg, rgba(3,37,20,0.96), rgba(2,26,16,0.98)), url("../images/dark-section-bg.png");
	background-size: cover;
	background-position: center center;
	color: #fff;
	overflow: hidden;
}



.about-heading {
	position: relative;
	z-index: 1;
	margin: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-weight: 600;
	text-transform: uppercase;
	color: #ffffff;
	font-size: var(--text-3xl);
	line-height: 1;
	text-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

.about-heading span {
	display: inline-block;
}

.about-heading .text-green {
	color: #67da48;
	margin-left: 6px;
}

@media (max-width: 860px) {
	.about-header { min-height: 86px; padding: 16px 0; }
	.about-heading { font-size: var(--text-2xl); letter-spacing: 2px; }
}

/* About hero section (product + content) */
.about-hero {
	padding: 64px 0 84px;
	background: #ffffff;
}

.about-hero-inner {
	display: grid;
	grid-template-columns: 52% 48%;
	align-items: center;
	gap: 48px;
}

.hero-left {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product-wrap {
	width: 100%;
	max-width: 540px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.product-img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 24px 40px rgba(18, 62, 30, 0.12));
}

.hero-right {
	padding: 8px 0;
}

.kicker {
	color: #67da48;
	font-weight: 700;
	letter-spacing: 2px;
	font-size: 16px;
	margin-bottom: 14px;
}

.hero-title {
	font-size: var(--text-3xl);
	line-height: 1.02;
	margin: 0 0 18px 0;
	color: #0b2a1a;
	font-weight: 800;
}

.hero-title .text-green { color: #67da48; }

.hero-desc {
	color: #6b6b6b;
	max-width: 520px;
	margin-bottom: 26px;
	font-size: 15px;
}

.hero-features {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.hero-features li {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #37423b;
	font-weight: 500;
}

.hero-features li i {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #dff6e6;
	color: #2f8c33;
	border-radius: 50%;
	font-size: 14px;
}

.hero-row {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 6px;
}

.hero-contact { 
	background: #157347; 
	border-radius: 10px; 
	padding: 14px 28px; 
	color: #fff; 
	display: inline-flex; 
	align-items: center; 
	gap: 10px; 
	font-weight: 700; 
}

.hero-contact:hover
{
background-color:#67da48 ;
}



@media (max-width: 980px) {
	.about-hero-inner { grid-template-columns: 1fr; gap: 28px; }
	.hero-left { order: -1; }
	.hero-title { font-size: var(--text-2xl); }
	.product-wrap { max-width: 420px; }
}

@media (max-width: 560px) {
	.product-wrap { max-width: 320px; }
	.hero-title { font-size: var(--text-xl); }
	.hero-desc { font-size: 14px; }
	.hero-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Approach section (quality ingredients + cards) */
.approach-section {
	background: #f2fbf4;
	padding: 72px 0 92px;
}

.approach-inner {
	display: block;
}

.approach-top {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 28px;
	align-items: start;
	margin-bottom: 40px;
}

.small-kicker {
	color: #67da48;
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 12px;
	font-size: 16px;
}

.approach-title {
	font-size: var(--text-4xl);
	line-height: 1.03;
	margin: 0 0 6px 0;
	color: #0b2a1a;
	font-weight: 800;
}

.text-green {
	color: #67da48;
	margin-left: 6px;
}

.approach-right p {
	color: #7d7d7d;
	font-size: 16px;
	margin: 8px 0 0 0;
}

.approach-cards {
	margin-top: 22px;
}

.approach-cards.row,
.approach-top.row {
	display: flex;
	flex-wrap: wrap;
}

.card {
	background: #ffffff;
	border-radius: 18px;
	padding: 30px 28px;
	box-shadow: 0 10px 30px rgba(18, 62, 30, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 16px;
}

.card-icon {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #67da48;
	background: rgba(103, 218, 72, 0.08);
	font-size: 22px;
}

.card h3,
.card h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #16352b;
	text-align: center;
}
.card p { margin: 0; color: #7b7b7b; font-size: 16px; line-height: 1.6;}



.card-featured .card-icon { background: rgba(255,255,255,0.12); color: #fff; }
.card-featured h4, .card-featured p { color: #fff; }

@media (max-width: 980px) {
	.approach-top { grid-template-columns: 1fr; }
	.approach-cards { grid-template-columns: 1fr; }
	.approach-section { padding: 48px 0; }
}

@media (max-width: 560px) {
	.approach-title { font-size: var(--text-2xl); }
	.card { padding: 22px; }
}




/* about- Why Choose Us Section */
.about-why-choose-us-section {
	width: 100%;
	background: #fff;
	padding: 38px 0 28px 0;
	margin-top: 20px;
}
.about-why-choose-us-container {
	max-width: 1600px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 100px;
	
}
.about-why-choose-us-left {
	flex: 1.2;
	min-width: 0;
}
.about-why-choose-us-label {
	color: #67da48;
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 30px;
	text-transform: uppercase;
}
.about-why-choose-us-label span {
	letter-spacing: 2px;
}
.about-why-choose-us-title {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: #16352b ;
	line-height: 1.1;
}
.about-why-choose-us-title .highlight-green {
	color: #67da48;
	font-size: var(--text-3xl);
	font-weight: 700;
}
.about-why-choose-us-right {
	flex: 2;
	display: flex;
	align-items: center;
	min-width: 0;
}

.about-why-choose-us-desc {
	color: #818589;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
	margin-left: 0;
}

.about-why-choose-us-title {
	margin: 0;
}
@media (max-width: 900px) {
	.about-why-choose-us-container {
		flex-direction: column;
		gap: 18px;
		padding: 0 12px;
	}
	.about-why-choose-us-left, .about-why-choose-us-right {
		min-width: 0;
	}
	.about-why-choose-us-title, .about-why-choose-us-title .highlight-green {
		font-size: var(--text-2xl);
	}
	.about-why-choose-us-desc {
		font-size: var(--text-md);
		margin-left: 0;
	}
}


/* Contact page styles */
.contact-section {
	background: #fafafa;
	padding: 48px 0 84px;
}

.contact-inner {
	max-width: 1180px;
	margin: 0 auto;
}

.contact-layout {
	width: 100%;
}

.contact-cards-grid {
	width: 100%;
}

.contact-card {
	background: #fff;
	border-radius: 12px;
	padding: 28px;
	box-shadow: 0 10px 30px rgba(18, 62, 30, 0.04);
	display: flex;
	flex-direction: column;
	gap: 12px;
	border: none;
	height: 100%;
}

.contact-card .card-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f2fbf4;
	color: #67da48;
	font-size: 22px;
}

.contact-card h3,
.contact-card h4 {
	margin: 0;
	font-size: 16px;
	color: #16352b;
	font-weight: 700;
}

.contact-card p {
	margin: 0;
	color: #6f6f6f;
	font-size: 16px;
	line-height: 1.6;
}

.socials {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #f2fbf4;
	color: #67da48;
}

.contact-form-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.form-card {
	background: #fff;
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 10px 30px rgba(18, 62, 30, 0.06);
	width: 100%;
}

.contact-form .form-row {
	display: flex;
	gap: 18px;
	margin-bottom: 16px;
}

.contact-form .form-field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-form .form-field.full {
	flex: 1 1 100%;
}

.contact-form label {
	font-size: 16px;
	color: #16352b;
	font-weight: 500;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e9e9e9;
	border-radius: 6px;
	font-size: 16px;
	color: #222;
	background: #fff;
}

.contact-form textarea {
	min-height: 140px;
	resize: vertical;
}

.file-name {
	color: #6f6f6f;
	font-size: 16px;
}

@media (max-width: 991.98px) {
	.contact-form-wrap {
		margin-top: 8px;
	}
}

@media (max-width: 575.98px) {
	.contact-section {
		padding: 28px 0;
	}

	.contact-card {
		padding: 20px;
	}

	.form-card {
		padding: 20px;
	}

	.contact-form .form-row {
		flex-direction: column;
	}
}

.file-upload { position: relative; margin-top: 6px; }
.file-upload input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.file-upload-display {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #e9e9e9;
	border-radius: 6px;
	background: #fff;
}
.file-name { color: #6f6f6f; font-size: 14px; }
.file-choose {
	background: #fff; border: 1px solid #e9e9e9; color: #111; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: 600;
}
.file-upload-display:hover, .file-upload-display:focus-within { border-color: #dcdcdc; }

.send-btn { background: #157347 ; color: #fff; border-radius: 8px; padding: 14px 20px; font-weight: 700; border: none; margin-top: 8px; display: inline-flex; align-items: center; gap: 12px; width: 100%; font-size: 16px; }
.send-btn i { font-size: 16px; }







/* Quote page styles */
	.quote-section { background: #f2fbf4; padding: 60px 0 100px; }
	.quote-inner { display: grid; grid-template-columns: 1fr 560px; gap: 40px; align-items: start; }
	.quote-left { padding: 18px 30px; }
	.quote-title { font-size: var(--text-2xl); color:#16352b; margin-bottom:8px; font-weight:700; }
	.quote-sub { color:#6b7b7d; margin-bottom:22px; font-size: 15px;}
	.feature-list { list-style:none; display:flex; flex-direction:column; gap:18px; padding:0; margin:0 0 26px 0; }
	.feature-list li { display:flex; gap:14px; align-items:flex-start; color:#21343a; font-weight:650; font-size: 14px;}
	.feature-list li small { display:block; font-weight:400; color:#6b7b7d; font-size:13px; margin-top:4px; }
	.feature-list li i { color:#157347; background:#f1f6f6; border-radius:50%; padding:8px; font-size:14px; min-width:34px; min-height:34px; display:inline-flex; align-items:center; justify-content:center; }

	.help-card { background:#157347; color:#fff; padding:20px; border-radius:10px; margin-top:18px; box-shadow: 0 10px 30px rgba(12,42,48,0.08); }
	.help-card strong { display:block; margin-bottom:10px; font-size:16px; }
	.help-contact { display:flex; gap:10px; align-items:center; margin-top:8px; color:#fff; }

	/* Right card */
	.quote-right .quote-card { background:#fff; border-radius:12px; padding:22px; box-shadow:0 12px 30px rgba(15,35,40,0.06); border:1px solid #eee; }
	.card-heading { margin:0 0 16px 0; font-size:20px; color:#157347; font-weight:700; }

	.quote-form .row { margin-bottom:14px; }
	.quote-form .row.two-col { display: grid; grid-template-columns: 1fr 260px; gap:14px; align-items: start; }

	/* size / material / finish three-column row */
	.quote-form .row.size-row { display: grid; grid-template-columns: 1fr 170px 170px; gap:14px; align-items: start; }
	.quote-form .row.size-row > label { display:flex; flex-direction:column; gap:8px; }
	.quote-form .row.two-col > label { display:flex; flex-direction:column; gap:8px; }
	.quote-form label span { font-size:13px; color:#16352b; font-weight:600; }
	.quote-form input[type=text], .quote-form input[type=email], .quote-form input[type=tel], .quote-form select, .quote-form textarea, .quote-form .captcha-input { width:100%; padding:12px 14px; border-radius:8px; border:1px solid #e6e6e6; background:#fbfcfd; font-size:14px; color:#222; }
	.quote-form textarea { min-height:110px; resize:vertical; }

	.upload-row { display: grid; grid-template-columns: 1fr auto; gap:12px; align-items: center; }
	.upload-row > span { grid-column: 1 / 2; align-self: center; margin-top:0; font-size:13px; font-weight:600; color:#16352b; }
	.upload-row .accepted { grid-column: 2 / 3; align-self: center; justify-self: end; margin-top:0; color:#99aeb0; font-size:13px; }
	.upload-row .upload-area { grid-column: 1 / -1; background:#f2f7f8; border-radius:8px; border:1px dashed #e1e7e8; position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:150px; padding:0 20px; }
	.upload-area .upload-inner { text-align:center; color:#6c8184; display:flex; flex-direction:column; align-items:center; gap:8px; }
	.upload-area i { font-size:28px; color:#67da48; background:#f2fbf4; padding:14px; border-radius:50%; }
	.upload-area input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }

	.accepted { grid-column: 3 / 4; margin-top:6px; color:#879b9d; font-size:13px; }

	.captcha-row { align-items:center; gap:12px; }
	.captcha-row { display:flex; gap:12px; align-items:center; }
	.captcha { background:#f1f6f6; padding:12px 16px; border-radius:8px; color:#183235; font-weight:700; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.02); min-width:140px; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
	.captcha-input { width:96px; max-width:30%; padding:10px 12px; border-radius:6px; }

	.submit-btn1 { width:100%; padding:16px 20px; border-radius:8px; border:none; font-weight:700; color:#fff; background:#1f7a52; display:inline-flex; align-items:center; justify-content:center; gap:12px; font-size:16px; letter-spacing:0.6px; }

    .submit-btn1:hover { background:#67da48; }

	@media (max-width: 1000px) { .quote-inner { grid-template-columns: 1fr 480px; } }
	@media (max-width: 860px) { .quote-inner { grid-template-columns: 1fr; } .quote-left { order:2; } .quote-right { order:1; margin-bottom:18px; } .quote-form .row { flex-direction:column; } .captcha-input { max-width:100%; } }

	







/* Overrides for product hero to match reference image */
.about-hero {
	padding: 64px 0 84px;
	background: #f2fbf4;
}

.about-hero-inner {
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0 auto;
	align-items: center;
	gap: clamp(32px, 5vw, 64px);
}

.about-hero .hero-title {
	font-size: var(--text-3xl);
	color: #16352b;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.about-hero .hero-desc {
	color: #37423b;
	font-size: 16px;
	max-width: 620px;
	line-height: 1.8;
}

.about-hero .hero-features {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.about-hero .hero-features li {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #37423b;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 0;
}

.about-hero .hero-features li i {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	background: #dff6e6;
	color: #2f8c33;
	border-radius: 50%;
	font-size: 14px;
	flex-shrink: 0;
}

.about-hero .product-wrap {
	max-width: 520px;
	border-radius: 12px;
	padding: 5px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.about-hero .product-img 
{ border-radius: 8px; 
	width:100%; height:auto; 
	display:block; }
.about-hero .dot { 
	width:12px; 
	height:12px; 
	border-radius:50%; 
	background:#67da48; 
	display:inline-block; }
.about-hero .dot.active { 
	background:#157347; 
	box-shadow: 0 2px 6px #67da48; }

/* ============================================================
   Bootstrap 5.3 integration + layout / responsive fixes
   ============================================================ */

/* Keep site container sizing over Bootstrap defaults */
.site-header .container,
.site-footer .container,
.about-hero-inner.container,
.supplement-hero-inner.container,
.contact-inner.container,
.faqs-container.container {
	width: min(1280px, 100% - 72px);
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/* Preserve custom button styles (Bootstrap also uses .btn) */
.cta-wrap .btn,
.site-header .btn,
.hero-contact,
.send-btn,
.submit-btn,
.submit-btn1,
.cta-btn,
.cta-btn1,
.view-all-btn,
.blog-all-btn,
.hero-btn {
	--bs-btn-padding-x: 18px;
	--bs-btn-padding-y: 0;
	--bs-btn-border-width: 0;
}

.cta-wrap .btn {
	min-width: 124px;
	height: 42px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0 18px;
	background: #157347;
	color: #fff;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	border: none;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.cta-wrap .btn:hover {
	background: #67da48;
	color: #fff;
}

/* Preserve custom cards (Bootstrap card reset) */
.approach-cards .card {
	border: none;
	background: #ffffff;
	border-radius: 18px;
	padding: 28px 24px;
	text-align: center;
	box-shadow: 0 8px 24px rgba(18, 62, 30, 0.06);
}

.approach-cards .card-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #f2fbf4;
	color: #67da48;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}
.contact-cards .contact-card {
	background: #fff;
	border: none;
	border-radius: 12px;
}

/* Prevent horizontal page scroll from fixed widths */

/* ---- Product section ---- */
.product-section {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	max-width: 1280px;
	width: min(1280px, 100% - 72px);
	margin: 60px auto 40px;
	padding: 0;
}

.product-content {
	margin-left: 0;
	flex: 1 1 320px;
}

.product-action {
	margin-right: 0;
	margin-top: 0;
	flex: 0 0 auto;
}

.product-title,
.product-subtitle {
	font-size: var(--text-3xl);
}

/* ---- Product list carousel row ---- */
.product-list-section {
	width: 100%;
	overflow: hidden;
	padding: 0 0 24px;
}

.product-list-section .container {
	max-width: 1280px;
}

.product-swiper {
	overflow: hidden;
	padding: 6px 2px 2px;
}

.product-swiper .swiper-slide {
	height: auto;
}

.product-swiper .product-card {
	width: 100%;
	flex: none;
	margin: 0;
}

.product-img-wrap {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 16px;
	overflow: hidden;
	background: #f2fbf4;
	margin-bottom: 18px;
}

.product-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-pagination-arrows {
	margin-top: 8px;
}

.product-pagination-arrow {
	border: none;
}

/* ---- Stats ---- */
.stats-section {
	padding: 24px 16px;
}

.stats-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(24px, 8vw, 80px);
	max-width: 1280px;
	margin: 0 auto;
}

.stat-item {
	flex: 1 1 140px;
	max-width: 220px;
}

.stat-number {
	font-size: clamp(32px, 5vw, 45px);
}

/* ---- Box design section ---- */
.box-design-section {
	padding: 0 16px;
}

.box-design-content {
	flex-direction: column;
	align-items: stretch;
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
}

.box-design-left,
.box-design-right {
	flex: none;
	width: 100%;
	display: flex;
	min-width: 0;
}

.box-design-form {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	border: none;
	box-shadow: 0 10px 40px rgba(34, 34, 34, 0.1);
}

.box-design-scroll {
	max-width: 100%;
	max-height: none;
	height: auto;
}

@media (min-width: 992px) {
	.box-design-content {
		flex-direction: row;
		align-items: stretch;
	}

	.box-design-left {
		flex: 2;
	}

	.box-design-right {
		flex: 1;
	}

	.box-design-form {
		margin: 0;
		max-width: none;
	}
}

/* ---- Shared two-column content blocks ---- */
.why-choose-us-container,
.about-why-choose-us-container,
.cta-container,
.cta-container1,
.innovation-container {
	max-width: 1280px;
	width: min(1280px, 100% - 40px);
	margin-left: auto;
	margin-right: auto;
	padding: 0 16px;
	gap: clamp(24px, 5vw, 60px);
}

.why-choose-us-left,
.cta-left,
.order-left,
.about-why-choose-us-left,
.why-choose-us-left1 {
	min-width: 0 !important;
	flex: 1 1 320px;
}

.why-choose-us-right,
.cta-right,
.about-why-choose-us-right,
.why-choose-us-right1 {
	min-width: 0 !important;
	flex: 1 1 280px;
}

.why-choose-us-title,
.about-why-choose-us-title,
.cta-title,
.cta-title1,
.order-title,
.faqs-title,
.product-title,
.blog-title,
.box-design-title,
.quotation-title {
	font-size: var(--section-heading);
	line-height: 1.1;
}

.why-choose-us-title .highlight-green,
.about-why-choose-us-title .highlight-green,
.cta-title .highlight-green,
.cta-title1 .highlight-green1,
.order-title .highlight-green,
.faqs-title .highlight-green {
	font-size: inherit;
}

.why-choose-us-desc,
.cta-desc-clr,
.cta-desc-clr1,
.innovation-lead,
.faqs-desc,
.feature-grid-desc,
.info-desc,
.quotation-lead {
	font-size: var(--section-body) !important;
	line-height: 1.7;
}

.faq-question {
	font-size: 17px;
}

.faq-answer,
.faq-answer.small {
	font-size: var(--section-body);
}

/* ---- Features grid (remove fixed height) ---- */
.features-grid-section {
	height: auto;
	min-height: 0;
	padding: 32px 0 48px;
}

.features-grid-container {
	max-width: 1280px;
	width: min(1280px, 100% - 40px);
	padding: 0 16px;
}

/* ---- CTA sections (remove fixed height) ---- */
.cta-section,
.cta-section1 {
	height: auto;
	min-height: 0;
	padding: 48px 0;
}

.cta-action,
.cta-action1 {
	margin-right: 0;
}

.cta-container1 .why-choose-us-right1 {
	display: none;
}

.cta-container1 .why-choose-us-right1.offer-gallery-wrap {
	display: flex;
}

@media (min-width: 900px) {
	.cta-container1 .why-choose-us-right1 {
		display: flex;
	}
}

/* ---- Innovation / order process ---- */
.innovation-container {
	flex-wrap: wrap;
	align-items: center;
}

.innovation-container .cta-right,
.innovation-container .process-side-media {
	display: none;
}

@media (min-width: 992px) {
	.innovation-container {
		flex-wrap: nowrap;
	}

	.innovation-container .cta-right,
	.innovation-container .process-side-media {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 1 42%;
		min-width: 320px;
	}
}

.process-side-image {
	width: 100%;
	max-width: 480px;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 18px 40px rgba(22, 53, 43, 0.12);
	display: block;
}

.process-side-placeholder {
	width: 100%;
	max-width: 480px;
	aspect-ratio: 4 / 5;
	border-radius: 18px;
	background: #d8f5c8;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.process-side-placeholder-label {
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 600;
	color: #157347;
	letter-spacing: 0.2px;
	line-height: 1;
}

/* ---- Testimonials ---- */
.testimonials-section {
	height: auto;
	min-height: 0;
	padding: 60px 0;
	overflow: hidden;
}

.testimonials-inner {
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}

.testimonials-left {
	flex: 1 1 280px;
	max-width: 100%;
}

.testimonials-title,
.testimonials-left .cta-title {
	font-size: clamp(26px, 4vw, 44px);
	line-height: 1.15;
}

.testimonials-left .cta-title br {
	display: none;
}

.testimonials-brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 36px;
	margin-top: 36px;
	padding: 22px 16px 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.testimonials-brands img {
	max-height: 42px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
	/* Keep logos light/white-gray on dark green — no harsh invert */
	filter: none;
	opacity: 0.92;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.testimonials-brands img:hover {
	opacity: 1;
	transform: translateY(-1px);
}

.testimonials-brands-label {
	width: 100%;
	text-align: center;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 4px;
}

.testimonials-right {
	flex: 1 1 100%;
	min-width: 0;
	max-width: 100%;
	justify-content: flex-end;
	overflow: hidden;
}

.testimonials-swiper {
	width: 100%;
	max-width: 100%;
	padding: 16px 0 36px;
	overflow: hidden;
}

.testimonials-swiper .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

.testimonial-card {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: 100%;
	min-height: 220px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.card-text {
	flex: 1;
}

@media (min-width: 992px) {
	.testimonials-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.testimonials-left {
		flex: none;
		max-width: 100%;
	}

	.testimonials-right {
		width: 100%;
		max-width: 100%;
	}

	.testimonial-card {
		width: 100%;
		padding: 22px 18px;
		min-height: 200px;
	}

	.testimonial-card .card-text {
		font-size: 16px;
	}
}

/* ---- Latest blog ---- */
.latest-blog-inner {
	width: 100%;
	max-width: 1280px;
	padding: 0 16px;
}

.latest-blog-header {
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 20px;
}

.blog-title {
	font-size: clamp(30px, 4.8vw, 48px);
	font-weight: 700;
	color: #16352b;
	line-height: 1.1;
}

.blog-action {
	margin-right: 0;
	margin-top: 0;
}

/* ---- About hero (remove fixed height) ---- */
.about-hero-inner {
	height: auto;
	min-height: 0;
	width: min(1280px, 100% - 40px);
	gap: clamp(32px, 5vw, 80px);
	grid-template-columns: 1fr 1fr;
	padding: 0 16px;
}

.about-hero-inner.row {
	display: flex;
	width: 100%;
	padding: 0;
	margin: 0;
}

.supplement-features-inner.row {
	display: grid;
}

.approach-top.row,
.approach-cards.row,
.approach-top-grid,
.approach-cards-grid {
	display: flex;
	flex-wrap: wrap;
}

.about-hero .hero-title {
	font-size: var(--text-3xl);
}

.about-why-choose-us-title,
.cta-title1 {
	margin: 0;
}

/* ---- Approach section ---- */
.approach-title {
	font-size: var(--text-3xl);
}

/* ---- Contact page ---- */
.contact-inner {
	width: min(1180px, 100% - 40px);
	padding: 0 16px;
}

.contact-form-wrap .form-title {
	background: #157347;
	padding: 12px 16px;
	border-radius: 8px 8px 0 0;
	margin: -32px -32px 18px;
}

@media (max-width: 560px) {
	.contact-form-wrap .form-title {
		margin: -20px -20px 18px;
	}
}

/* ---- Quote page ---- */
.quote-inner {
	width: min(1280px, 100% - 40px);
	margin: 0 auto;
	padding: 0 16px;
}

.quote-form .row.size-row,
.quote-form .row.two-col {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.quote-form .row.two-col {
		grid-template-columns: 1fr 260px;
	}

	.quote-form .row.size-row {
		grid-template-columns: 1fr 170px 170px;
	}
}

/* ---- Footer padding on small screens ---- */
@media (max-width: 768px) {
	.site-header .container,
	.site-footer .container,
	.about-hero-inner,
	.features-grid-container,
	.why-choose-us-container,
	.about-why-choose-us-container,
	.cta-container,
	.cta-container1,
	.innovation-container,
	.faqs-container,
	.latest-blog-inner,
	.product-section {
		width: min(1280px, 100% - 32px);
	}

	.product-section {
		margin-top: 40px;
	}

	.view-all-btn,
	.blog-all-btn,
	.cta-btn,
	.cta-btn1 {
		width: 100%;
		justify-content: center;
	}

	.cta-container .why-choose-us-right {
		display: none;
	}
}

@media (max-width: 480px) {
	.site-header .container,
	.site-footer .container {
		width: min(1280px, 100% - 24px);
	}
}

/* Mobile header + Bootstrap offcanvas */
@media (max-width: 991.98px) {
	.header-contacts-desktop,
	.nav-strip-desktop,
	.search-wrap-desktop {
		display: none !important;
	}

	.search-toggle,
	.menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.search-toggle {
		margin-left: auto;
	}

	.menu-toggle {
		margin-left: 8px;
	}

	.header-main-inner {
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		padding: 12px 0;
		min-height: auto;
	}

	.brand-block {
		flex: 0 0 auto;
	}

	.brand-name {
		font-size: clamp(14px, 3.8vw, 20px);
	}
}

@media (min-width: 992px) {
	.menu-toggle,
	.search-toggle {
		display: none !important;
	}
}

.site-offcanvas {
	width: min(320px, 88vw);
}

.site-offcanvas .offcanvas-header {
	border-bottom: 1px solid #e8e8e8;
	padding: 18px 20px;
}

.site-offcanvas .offcanvas-title {
	font-size: 18px;
	font-weight: 700;
	color: #16352b;
}

.offcanvas-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 24px;
}

.offcanvas-nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 0;
	font-size: var(--text-md);
	font-weight: 500;
	color: #1f2430;
	border-bottom: 1px solid #f0f0f0;
	transition: color 0.2s ease;
}

.offcanvas-nav a:hover {
	color: #157347;
}

.offcanvas-contacts {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 8px;
	border-top: 1px solid #efefef;
}

.offcanvas-contacts .chip {
	width: 100%;
	min-width: 0;
	justify-content: flex-start;
	height: auto;
	min-height: 52px;
	padding: 12px 14px;
}

/* ===== Responsive typography (all devices) ===== */
.product-title,
.product-subtitle,
.why-choose-us-title,
.why-choose-us-title .highlight-green,
.about-why-choose-us-title,
.about-why-choose-us-title .highlight-green,
.cta-title,
.cta-title .highlight-green,
.cta-title1,
.cta-title1 .highlight-green1,
.order-title,
.order-title .highlight-green,
.faqs-title,
.faqs-title .highlight-green,
.blog-title,
.blog-title .green,
.approach-title,
.approach-title .text-green,
.box-design-title,
.quote-title {
	font-size: var(--text-3xl);
	line-height: 1.15;
}

.hero-title,
.about-hero .hero-title,
.about-heading {
	font-size: var(--text-3xl);
	line-height: 1.12;
}

.testimonials-title,
.cta-title {
	font-size: var(--text-3xl);
}

.stat-number {
	font-size: var(--text-4xl);
}

.product-label,
.why-choose-us-label,
.about-why-choose-us-label,
.cta-label,
.cta-label1,
.order-label,
.faqs-label,
.blog-kicker,
.kicker,
.small-kicker,
.hero-kicker {
	font-size: var(--text-sm);
}

.hero-desc,
.why-choose-us-desc,
.about-why-choose-us-desc,
.cta-desc-clr,
.cta-desc-clr1,
.innovation-lead,
.faqs-desc,
.feature-description,
.feature-grid-desc,
.approach-right p,
.about-hero .hero-desc {
	font-size: var(--text-sm);
	line-height: 1.65;
}

.product-name,
.feature-grid-title,
.feature-title,
.card h4,
.info-title {
	font-size: var(--text-md);
}

.view-all-btn,
.blog-all-btn,
.cta-btn,
.cta-btn1,
.hero-btn,
.submit-btn,
.send-btn {
	font-size: var(--text-md);
}

.box-design-scroll h3 {
	font-size: var(--text-xl);
}

.box-design-scroll p,
.box-design-scroll ul {
	font-size: var(--text-sm);
}

.form-title,
.search-modal .modal-title {
	font-size: var(--text-lg);
}

.main-nav a,
.offcanvas-nav a {
	font-size: var(--text-md);
}

@media (max-width: 991.98px) {
	.hero-title-light1,
	.hero-title-green1 {
		font-size: clamp(20px, 5.5vw, 34px);
	}

	.hero-points li {
		font-size: var(--text-sm);
	}

	.product-card {
		padding: 20px 16px 16px;
	}

	.product-name {
		font-size: var(--text-base);
	}

	.testimonial-card {
		padding: 20px;
		min-height: 0;
	}

	.card-text {
		font-size: var(--text-sm);
	}

	.cta-title,
	.cta-title1,
	.why-choose-us-title,
	.about-why-choose-us-title,
	.order-title,
	.faqs-title,
	.blog-title,
	.product-title,
	.product-subtitle,
	.approach-title {
		font-size: var(--text-2xl);
	}

	.stat-label {
		font-size: var(--text-xs);
	}

	.stats-list {
		gap: clamp(16px, 5vw, 40px);
	}

	.box-design-scroll {
		padding: 20px 18px;
	}

	.box-design-form {
		padding: 20px 18px 18px;
	}

	.faq-question {
		font-size: var(--text-base);
	}

	.faq-answer {
		font-size: 16px;
	}
}

@media (max-width: 575.98px) {
	.top-contact a,
	.top-socials a {
		font-size: 16px;
	}

	.brand-name {
		font-size: clamp(16px, 3.6vw, 18px);
	}

	.hero-title-light1,
	.hero-title-green1 {
		font-size: clamp(18px, 5vw, 26px);
	}

	.product-title,
	.product-subtitle,
	.cta-title,
	.cta-title1,
	.why-choose-us-title,
	.about-why-choose-us-title,
	.order-title,
	.faqs-title,
	.blog-title,
	.approach-title,
	.about-heading,
	.hero-title,
	.about-hero .hero-title {
		font-size: var(--text-xl);
	}

	.view-all-btn,
	.blog-all-btn,
	.cta-btn,
	.cta-btn1 {
		font-size: 16px;
		padding: 12px 18px;
	}

	.cta-wrap .btn {
		font-size: 16px;
		min-height: 38px;
	}

	.chip strong {
		font-size: 16px;
	}

	.chip small {
		font-size: 16px;
	}

	.stat-number {
		font-size: var(--text-2xl);
	}

	.about-heading {
		font-size: var(--text-2xl);
	}

	.box-design-title {
		font-size: var(--text-lg);
		margin-bottom: 24px;
	}

	.quote-title {
		font-size: var(--text-xl);
	}

	.form-card .form-title,
	.contact-form-wrap .form-title {
		font-size: var(--text-lg);
	}
}

/* Semantic heading resets */
.why-choose-us-title,
.about-why-choose-us-title,
.cta-title,
.cta-title1,
.order-title,
.faqs-title,
.feature-grid-title,
.feature-title,
.product-title {
	margin: 0;
}

.offcanvas-title,
.modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

/* Minimum 16px readable text site-wide */
p,
li,
label,
input,
textarea,
select,
button,
a,
.chip,
.top-contact a,
.top-socials a,
.hero-desc,
.hero-points li,
.why-choose-us-desc,
.cta-desc-clr,
.cta-desc-clr1,
.innovation-lead,
.info-desc,
.blog-excerpt,
.product-name,
.testimonials-rating-line,
.main-nav a,
.offcanvas-nav a,
.approach-right p,
.about-hero .hero-desc,
.kicker,
.small-kicker,
.product-label,
.why-choose-us-label,
.cta-label,
.order-label,
.faqs-label,
.blog-kicker,
.stat-label {
	font-size: 16px;
}

/* ===== Legal pages ===== */
.legal-header {
	min-height: 96px;
	padding: 20px 0;
	background: #022716;
}

.legal-section {
	background: #f5f6f7;
	padding: 40px 0 72px;
}

.legal-layout {
	align-items: flex-start;
}

.legal-sidebar {
	position: sticky;
	top: 24px;
}

.legal-nav-card {
	background: #fff;
	border-radius: 16px;
	padding: 22px 18px;
	box-shadow: 0 10px 28px rgba(18, 62, 30, 0.06);
	border: 1px solid rgba(21, 115, 71, 0.08);
}

.legal-nav-card h2 {
	font-size: 18px;
	color: #111;
	margin: 0 0 14px;
	font-weight: 700;
}

.legal-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.legal-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	color: #6b7280;
	font-size: 15px;
	font-weight: 500;
	transition: background 0.2s ease, color 0.2s ease;
	text-decoration: none;
}

.legal-nav-icon {
	width: 22px;
	height: 22px;
	min-width: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #67da48;
	line-height: 0;
}

.legal-nav-icon i {
	font-size: 15px;
	line-height: 1;
}

.legal-nav a:hover {
	background: #f2fbf4;
	color: #157347;
}

.legal-nav a.active {
	background: #eaf8e8;
	color: #157347;
	font-weight: 600;
}

.legal-nav a.active .legal-nav-icon {
	color: #157347;
}

.legal-content-card {
	background: #fff;
	border-radius: 16px;
	padding: clamp(24px, 4vw, 40px);
	box-shadow: 0 10px 28px rgba(18, 62, 30, 0.06);
	border: 1px solid rgba(21, 115, 71, 0.08);
}

.legal-updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #eaf8e8;
	color: #157347;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.legal-updated i {
	font-size: 13px;
}

.legal-content-card h2,
.legal-body h2 {
	font-size: clamp(20px, 3vw, 24px);
	color: #16352b;
	margin: 28px 0 12px;
	font-weight: 700;
}

.legal-content-card h3,
.legal-body h3 {
	font-size: 18px;
	color: #16352b;
	margin: 22px 0 10px;
	font-weight: 700;
}

.legal-content-card h2:first-child,
.legal-body > h2:first-child {
	margin-top: 0;
}

.legal-content-card p,
.legal-content-card li,
.legal-body p,
.legal-body li {
	font-size: 15px;
	color: #5a6560;
	line-height: 1.75;
}

.legal-content-card ul,
.legal-body ul {
	padding-left: 20px;
	margin: 0 0 16px;
}

.legal-content-card ul li,
.legal-body ul li {
	margin-bottom: 8px;
}

.legal-highlight {
	background: transparent;
	border-left: 4px solid #67da48;
	padding: 4px 0 4px 16px;
	border-radius: 0;
	margin: 0 0 24px;
}

.legal-highlight p {
	margin: 0;
	color: #374151;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
}

/* ===== Blog listing page ===== */
.blog-page-section {
	padding: 48px 0 84px;
	background: #fff;
}

.blog-page-intro {
	margin-bottom: 36px;
}

.blog-featured-card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	background: #fff;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(34, 34, 34, 0.08);
	margin-bottom: 40px;
	border: 1px solid rgba(21, 115, 71, 0.08);
}

.blog-featured-card img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

.blog-featured-body {
	padding: clamp(24px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(180deg, #ffffff 0%, #f8fcf9 100%);
}

.blog-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.blog-tag {
	background: #f2fbf4;
	color: #157347;
	font-size: 16px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
}

.blog-date,
.blog-author {
	font-size: 16px;
	color: #6f7b75;
}

.blog-featured-body h2 {
	font-size: clamp(24px, 4vw, 32px);
	color: #16352b;
	margin: 0 0 14px;
	line-height: 1.2;
}

.blog-featured-body p {
	font-size: 16px;
	color: #5a6560;
	line-height: 1.7;
	margin: 0 0 20px;
}

.blog-page-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.blog-card-excerpt {
	font-size: 16px;
	color: #6f7b75;
	line-height: 1.6;
	margin-bottom: 14px;
}

.blog-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 16px;
	color: #6f7b75;
}

.blog-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 40px;
}

.blog-pagination a,
.blog-pagination span {
	min-width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid #e5ebe7;
	color: #16352b;
	font-size: 16px;
	font-weight: 600;
}

.blog-pagination a:hover,
.blog-pagination span.active {
	background: #157347;
	border-color: #157347;
	color: #fff;
}

/* ===== Single blog post ===== */
.blog-single-section {
	padding: 48px 0 84px;
	background: #fafafa;
}

.blog-single-hero img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: 18px;
	margin-bottom: 28px;
	box-shadow: 0 18px 40px rgba(34, 34, 34, 0.1);
}

.blog-single-content {
	background: #fff;
	border-radius: 18px;
	padding: clamp(24px, 4vw, 40px);
	box-shadow: 0 10px 30px rgba(18, 62, 30, 0.06);
}

.blog-single-content h1 {
	font-size: clamp(28px, 4.5vw, 38px);
	color: #16352b;
	line-height: 1.15;
	margin: 0 0 20px;
}

.blog-single-content h2 {
	font-size: clamp(20px, 3vw, 26px);
	color: #16352b;
	margin: 32px 0 12px;
}

.blog-single-content p,
.blog-single-content li {
	font-size: 16px;
	color: #5a6560;
	line-height: 1.85;
}

.blog-single-content ul {
	padding-left: 20px;
	margin-bottom: 18px;
}

.blog-single-sidebar {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.blog-sidebar-card {
	background: #fff;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 10px 30px rgba(18, 62, 30, 0.06);
	border: 1px solid rgba(21, 115, 71, 0.08);
}

.blog-sidebar-card h2 {
	font-size: 18px;
	color: #16352b;
	margin: 0 0 16px;
	font-weight: 700;
}

.blog-recent-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.blog-recent-list a {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: #16352b;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.blog-recent-list img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0;
}

.blog-recent-list a:hover {
	color: #157347;
}

.blog-share {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.blog-share a {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #f2fbf4;
	color: #157347;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.blog-share a:hover {
	background: #157347;
	color: #fff;
}

.footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 18px;
	margin-bottom: 12px;
}

.footer-legal-links a {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.85);
}

.footer-legal-links a:hover {
	color: #67da48;
}

.footer-legal-links span {
	color: rgba(255, 255, 255, 0.35);
}

.breadcrumb {
	font-size: 16px;
	margin-bottom: 0;
}

.breadcrumb a {
	color: #157347;
}

@media (max-width: 991.98px) {
	.blog-featured-card {
		grid-template-columns: 1fr;
	}

	.blog-page-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.legal-sidebar {
		position: static;
		margin-bottom: 24px;
	}
}

@media (max-width: 575.98px) {
	.blog-page-grid {
		grid-template-columns: 1fr;
	}

	.blog-featured-card img {
		min-height: 220px;
	}
}

/* ===== About page grid layout ===== */
.about-hero-grid {
	width: 100%;
	margin: 0;
}

.about-hero .hero-features.about-hero-features-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 28px;
}

.about-hero .hero-features.about-hero-features-grid li {
	flex-direction: column;
	align-items: flex-start;
	padding: 14px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid rgba(21, 115, 71, 0.1);
	box-shadow: 0 6px 18px rgba(18, 62, 30, 0.04);
}

@media (max-width: 767.98px) {
	.about-hero .hero-features.about-hero-features-grid {
		grid-template-columns: 1fr;
	}

	.about-hero .hero-features.about-hero-features-grid li {
		flex-direction: row;
		align-items: center;
	}
}

.approach-top-grid,
.approach-cards-grid {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.approach-cards-grid .card {
	width: 100%;
	height: 100%;
}

.approach-cards-grid .card p {
	text-align: center;
	font-size: 16px;
}




/* ========== Mega Menu + Single Dropdown ========== */
.main-nav {
	gap: 0;
	position: static;
}

.main-nav > a,
.main-nav .nav-link {
	height: 72px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 18px;
	font-size: var(--text-md);
	font-weight: 500;
	color: #1f2430;
	line-height: 1;
	border: none;
	border-left: 1px solid #d9d9d9;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.main-nav > a:first-child {
	padding-left: 0;
	border-left: none;
}

.main-nav > a:hover,
.main-nav .nav-link:hover,
.nav-item:hover > .nav-link,
.nav-item.is-open > .nav-link {
	color: #157347;
}

.main-nav .nav-link i,
.main-nav > a i {
	font-size: 10px;
	transform: translateY(1px);
	transition: transform 0.2s ease;
}

.nav-item.is-open > .nav-link i,
.nav-item:hover > .nav-link i {
	transform: translateY(1px) rotate(180deg);
}

.nav-item {
	position: relative;
	display: flex;
	align-items: center;
}

.nav-item.has-mega {
	position: static;
}

/* Single dropdown */
.single-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(15, 35, 40, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 1000;
}

.nav-item.has-dropdown:hover .single-dropdown,
.nav-item.has-dropdown.is-open .single-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.single-dropdown li a {
	display: block;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: #1f2430;
	border: none !important;
	height: auto !important;
}

.single-dropdown li a:hover {
	background: #f2fbf4;
	color: #157347;
}

/* Mega menu */
.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	width: min(720px, 92vw);
	max-width: none;
	transform: translateY(8px);
	padding: 0;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(15, 35, 40, 0.14);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 1000;
}

.nav-item.has-mega:hover .mega-menu,
.nav-item.has-mega.is-open .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega-menu-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 18px;
}

.mega-item {
	display: flex !important;
	align-items: center;
	gap: 12px;
	height: auto !important;
	padding: 10px 12px !important;
	border: none !important;
	border-radius: 8px;
	font-size: 14px !important;
	font-weight: 500;
	color: #1f2430;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mega-item img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
	background: #f2fbf4;
}

.mega-item span {
	line-height: 1.3;
}

.mega-item:hover {
	background: #f2fbf4;
	color: #157347;
}

.mega-col h4 {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #157347;
}

.mega-col a {
	display: block !important;
	height: auto !important;
	padding: 8px 0 !important;
	border: none !important;
	font-size: 14px !important;
	font-weight: 500;
	color: #1f2430;
}

.mega-col a:hover {
	color: #157347;
}

.mega-featured {
	display: none;
}

.mega-featured p {
	margin: 0 0 14px;
	font-size: 13px;
	color: #5a6b6d;
	line-height: 1.5;
}

.mega-cta {
	display: none;
}

/* Mobile offcanvas submenu */
.offcanvas-item {
	border-bottom: 1px solid #f0f0f0;
}

.offcanvas-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 0;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: var(--text-md);
	font-weight: 500;
	color: #1f2430;
	cursor: pointer;
	text-align: left;
}

.offcanvas-toggle i {
	font-size: 10px;
	transition: transform 0.2s ease;
}

.offcanvas-item.is-open .offcanvas-toggle i {
	transform: rotate(180deg);
}

.offcanvas-item.is-open .offcanvas-toggle {
	color: #157347;
}

.offcanvas-submenu {
	display: none;
	flex-direction: column;
	padding: 0 0 10px 12px;
}

.offcanvas-item.is-open .offcanvas-submenu {
	display: flex;
}

.offcanvas-submenu a {
	border-bottom: none !important;
	padding: 8px 0 !important;
	font-size: 14px;
	color: #5a6b6d;
}

/* ========== Single Product Page ========== */
.sp-detail {
	padding: 40px 0 20px;
	background: #fff;
}

.sp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1.15fr;
	gap: 28px;
	align-items: start;
}

.sp-gallery {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sp-main {
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	overflow: hidden;
	background: #f7faf8;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.sp-thumb {
	border: 2px solid #e8e8e8;
	border-radius: 8px;
	overflow: hidden;
	padding: 0;
	background: #f7faf8;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	transition: border-color 0.2s ease;
}

.sp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-thumb.is-active,
.sp-thumb:hover {
	border-color: #157347;
}

.sp-info {
	padding-top: 8px;
}

.sp-title {
	margin: 0 0 12px;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: #16352b;
	line-height: 1.2;
}

.sp-rating {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 16px;
	color: #ffc107;
	font-size: 15px;
}

.sp-rating span {
	margin-left: 8px;
	color: #6b7b7d;
	font-size: 13px;
	font-weight: 500;
}

.sp-short {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: #4a5a5c;
}

.sp-buy-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 14px 16px;
	background: #f2fbf4;
	border: 1px solid #d9ebe0;
	border-radius: 10px;
}

.sp-buy-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.sp-buy-name {
	font-size: 15px;
	font-weight: 700;
	color: #16352b;
}

.sp-buy-meta {
	font-size: 14px;
	font-weight: 600;
	color: #157347;
}

.sp-buy-meta em {
	font-style: normal;
	font-weight: 500;
	color: #5a7a68;
}

.sp-buy-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.sp-qty {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #16352b;
}

.sp-qty input {
	width: 72px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid #d9ebe0;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: #16352b;
	text-align: center;
}

.sp-btn-cart,
.sp-btn-buy {
	height: 40px;
	padding: 0 16px;
	border: none;
	border-radius: 6px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sp-btn-cart {
	background: #67da48;
	color: #fff;
}

.sp-btn-cart:hover {
	background: #157347;
}

.sp-btn-buy {
	background: #16352b;
	color: #fff;
}

.sp-btn-buy:hover {
	background: #157347;
}

@media (max-width: 576px) {
	.sp-buy-actions {
		width: 100%;
	}

	.sp-btn-cart,
	.sp-btn-buy {
		flex: 1;
	}
}

.sp-highlights {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sp-highlights li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 550;
	color: #21343a;
}

.sp-highlights li i {
	color: #157347;
	font-size: 12px;
}

.sp-form-col .sp-quote-card {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 12px 30px rgba(15, 35, 40, 0.06);
	border: 1px solid #eee;
	position: sticky;
	top: 16px;
}

.sp-quote-form label.row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sp-quote-form textarea {
	min-height: 72px;
}

/* Tabs full width */
.sp-tabs-wrap {
	margin-top: 48px;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.sp-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid #e8e8e8;
	background: #f7faf8;
}

.sp-tab {
	padding: 16px 28px;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #5a6b6d;
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease;
}

.sp-tab.is-active {
	color: #157347;
	background: #fff;
}

.sp-tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: #157347;
}

.sp-tab-panels {
	padding: 28px 32px;
}

.sp-tab-panel h3 {
	margin: 0 0 14px;
	font-size: 22px;
	color: #16352b;
}

.sp-tab-panel h4 {
	margin: 22px 0 12px;
	font-size: 17px;
	color: #16352b;
}

.sp-tab-panel p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.7;
	color: #4a5a5c;
}

.sp-tab-panel ul {
	margin: 0;
	padding-left: 20px;
	color: #4a5a5c;
}

.sp-tab-panel ul li {
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.5;
}

.sp-spec-table {
	width: 100%;
	border-collapse: collapse;
}

.sp-spec-table th,
.sp-spec-table td {
	padding: 14px 16px;
	border-bottom: 1px solid #eef2f2;
	text-align: left;
	font-size: 14px;
}

.sp-spec-table th {
	width: 32%;
	font-weight: 600;
	color: #16352b;
	background: #f7faf8;
}

.sp-spec-table td {
	color: #4a5a5c;
}

@media (max-width: 1100px) {
	.sp-grid {
		grid-template-columns: 1fr 1fr;
	}

	.sp-form-col {
		grid-column: 1 / -1;
	}

	.sp-form-col .sp-quote-card {
		position: static;
	}

	.sp-form-col .quote-form .row.two-col {
		grid-template-columns: 1fr 1fr;
	}

	.sp-form-col .quote-form .row.size-row {
		grid-template-columns: repeat(3, 1fr);
	}

	.mega-menu-inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.sp-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.sp-tabs {
		overflow-x: auto;
	}

	.sp-tab-panels {
		padding: 20px 18px;
	}

	.sp-form-col .quote-form .row.two-col,
	.sp-form-col .quote-form .row.size-row {
		grid-template-columns: 1fr;
	}

	.mega-menu-inner {
		grid-template-columns: 1fr;
	}
}


/* Product Reviews */
.sp-reviews {
	padding: 48px 0 20px;
	background: #f7faf8;
}

.sp-reviews-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.sp-reviews-title {
	margin: 6px 0 0;
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 700;
	color: #16352b;
}

.sp-reviews-summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid #d9ebe0;
	border-radius: 10px;
}

.sp-reviews-score {
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: #157347;
}

.sp-reviews-summary p {
	margin: 4px 0 0;
	font-size: 13px;
	color: #6b7b7d;
}

.sp-reviews-stars {
	display: flex;
	gap: 3px;
	color: #67da48;
	font-size: 14px;
}

.sp-reviews-stars.small {
	font-size: 12px;
	margin-top: 4px;
}

.sp-reviews-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 24px;
	align-items: start;
}

.sp-reviews-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sp-review-card {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	padding: 20px;
}

.sp-review-top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.sp-review-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #157347;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

.sp-review-top strong {
	display: block;
	font-size: 14px;
	color: #16352b;
}

.sp-review-date {
	margin-left: auto;
	font-size: 12px;
	color: #99aeb0;
	white-space: nowrap;
}

.sp-review-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: #4a5a5c;
}

.sp-review-form {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 12px;
	padding: 24px;
	position: sticky;
	top: 16px;
}

.sp-review-form h3 {
	margin: 0 0 16px;
	font-size: 18px;
	color: #16352b;
}

.sp-review-form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.sp-review-form label span {
	font-size: 13px;
	font-weight: 600;
	color: #16352b;
}

.sp-review-form input,
.sp-review-form select,
.sp-review-form textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid #e6e6e6;
	background: #fbfcfd;
	font-size: 14px;
	font-family: inherit;
	color: #222;
}

.sp-review-form textarea {
	min-height: 110px;
	resize: vertical;
	margin-bottom: 4px;
}

.sp-review-form .submit-btn1 {
	width: 100%;
	margin-top: 4px;
}

@media (max-width: 992px) {
	.sp-reviews-layout {
		grid-template-columns: 1fr;
	}

	.sp-review-form {
		position: static;
	}
}



/* =========================================================
   Description tabs / Quotation / Offer gallery (v1.1)
   ========================================================= */

.description-tabs-section {
	padding: 0 16px 20px;
}

.description-tabs-section .box-design-title {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.description-tabs {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.description-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	border-bottom: 1px solid #e6ebe8;
	padding-bottom: 10px;
}

.description-tab-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: #5a6b63;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease, background 0.2s ease;
}

.description-tab-btn:hover {
	color: #157347;
	background: #f2fbf4;
}

.description-tab-btn.is-active {
	color: #157347;
	background: #f2fbf4;
}

.description-tab-btn.is-active::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -11px;
	height: 3px;
	background: #67da48;
	border-radius: 3px 3px 0 0;
}

.description-tab-panel {
	display: none;
}

.description-tab-panel.is-active {
	display: block;
}

.description-tab-content {
	height: auto !important;
	max-height: none;
	box-shadow: 0 8px 28px rgba(34, 34, 34, 0.06);
}

.description-tabs-section .box-design-content,
.description-tabs-section .box-design-right {
	display: none;
}

/* Quotation section */
.quotation-section {
	width: 100%;
	background: #f4f6f7;
	padding: 48px 0;
}

.quotation-container {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 36px;
	align-items: start;
}

.quotation-title {
	color: #16352b;
	font-weight: 700;
	margin: 0 0 10px;
}

.quotation-lead {
	color: #5a6b63;
	margin: 0 0 22px;
	max-width: 520px;
}

.quotation-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.quotation-benefits li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.quotation-icon,
.quotation-check {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 12px;
	background: #157347;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative;
	overflow: hidden;
	line-height: 0;
	text-align: center;
	margin-top: 1px;
	box-shadow: 0 6px 14px rgba(21, 115, 71, 0.2);
	flex-shrink: 0;
	padding: 0 !important;
}

.quotation-icon svg,
.quotation-check svg {
	width: 24px !important;
	height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	display: block !important;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff !important;
	stroke: #ffffff !important;
	fill: none !important;
	stroke-width: 2 !important;
	flex-shrink: 0;
}

.quotation-icon svg *,
.quotation-check svg * {
	stroke: #ffffff !important;
	fill: none !important;
	color: #ffffff !important;
	stroke-width: 2 !important;
}

.quotation-help-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #e8f7ea;
	color: #157347;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative;
	overflow: hidden;
	line-height: 0;
	flex-shrink: 0;
	padding: 0 !important;
}

.quotation-help-icon svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	margin: 0 !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	stroke: #157347 !important;
	fill: none !important;
}

.quotation-help-icon svg * {
	stroke: #157347 !important;
	fill: none !important;
}

.quotation-benefits strong {
	display: block;
	color: #16352b;
	font-size: 15px;
	margin-bottom: 2px;
}

.quotation-benefits span {
	display: block;
	color: #6f7d76;
	font-size: 13px;
	line-height: 1.55;
}

.quotation-help {
	margin-top: 32px;
	padding: 18px 20px;
	background: #fff;
	border-radius: 12px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	box-shadow: 0 8px 24px rgba(22, 53, 43, 0.06);
}

.quotation-help strong {
	display: block;
	color: #16352b;
	margin-bottom: 4px;
}

.quotation-help p {
	margin: 0;
	font-size: 14px;
	color: #5a6b63;
}

.quotation-help p span {
	display: block;
	font-size: 13px;
	color: #818589;
}

.quotation-help-email {
	display: inline-block;
	margin-top: 4px;
	color: #157347;
	font-weight: 600;
	font-size: 14px;
}

.quotation-form {
	background: #fff;
	border: 1px solid #dfe5e2;
	border-radius: 14px;
	padding: 18px 18px 16px;
	box-shadow: 0 10px 28px rgba(22, 53, 43, 0.07);
}

.quotation-form-title {
	font-size: 18px;
	font-weight: 700;
	color: #16352b;
	margin: 0 0 12px;
}

.quotation-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 10px;
}

.quotation-form-grid .quotation-dims {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px 10px;
}

.quotation-form .form-group {
	gap: 4px;
	margin: 0;
}

.quotation-form .form-group label {
	font-size: 12px;
	font-weight: 600;
	color: #16352b;
	line-height: 1.2;
}

.quotation-form .form-group input[type="text"],
.quotation-form .form-group input[type="email"],
.quotation-form .form-group textarea,
.quotation-form .form-group select {
	border: 1px solid #e4e8e6;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	font-family: inherit;
	background: #fafafa;
	color: #222;
	min-height: 38px;
}

.quotation-form .form-group textarea {
	min-height: 56px;
	max-height: 80px;
	resize: vertical;
}

.quotation-form .form-group select:focus,
.quotation-form .form-group input:focus,
.quotation-form .form-group textarea:focus {
	border-color: #157347;
	outline: none;
}

.quotation-file {
	margin-top: 8px;
}

.quotation-form .file-upload {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 1px dashed #d5ddd9;
	border-radius: 6px;
	padding: 8px 10px;
	background: #fafafa;
}

.quotation-form .file-name {
	font-size: 12px;
	color: #6f7d76;
}

.quotation-form .file-choose {
	appearance: none;
	border: 0;
	background: #157347;
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 12px;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
}

.quotation-submit {
	width: 100%;
	margin-top: 10px;
	padding: 12px 0 !important;
	font-size: 14px !important;
}

.quotation-form .required {
	font-size: 14px;
}

@media (max-width: 991px) {
	.quotation-container {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 575px) {
	.quotation-form-grid,
	.quotation-form-grid .quotation-dims {
		grid-template-columns: 1fr 1fr;
	}

	.quotation-form {
		padding: 16px 14px;
	}
}

/* Offer gallery (CupPrint-style) */
.offer-gallery-section .cta-container1 {
	align-items: center;
	gap: clamp(28px, 4vw, 56px);
}

.offer-gallery-wrap {
	display: flex !important;
	min-width: 0;
	flex: 1 1 420px;
	overflow: hidden;
}

.offer-gallery {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow: hidden;
}

.offer-gallery--empty {
	min-height: 220px;
	align-items: center;
	justify-content: center;
	border: 1px dashed rgba(255, 255, 255, 0.25);
	border-radius: 16px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	padding: 24px;
	text-align: center;
}

.offer-gallery-row {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.offer-gallery-track {
	display: flex;
	gap: 12px;
	width: max-content;
	animation: offer-marquee 28s linear infinite;
}

.offer-gallery-track--reverse {
	animation-direction: reverse;
	animation-duration: 32s;
}

.offer-gallery-track--tags {
	animation-duration: 24s;
	align-items: center;
}

.offer-gallery-track img {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 14px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.08);
}

.offer-gallery-tags {
	overflow: hidden;
	padding: 4px 0;
}

.offer-gallery-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}

@keyframes offer-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.offer-gallery-track {
		animation: none;
	}
}

.testimonials-heading-one-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	align-items: baseline;
}

.testimonials-heading-one-line .highlight-green {
	white-space: nowrap;
}

@media (min-width: 992px) {
	.testimonials-heading-one-line {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
}

@media (max-width: 899px) {
	.offer-gallery-wrap {
		display: none !important;
	}
}

.blog-title {
	font-size: var(--section-heading);
	line-height: 1.15;
}

.info-desc {
	font-size: var(--section-body);
}

/* =========================================================
   v1.2.6 — process cards, heading width, button under text
   ========================================================= */

.description-tabs-section {
	align-items: stretch;
}

.description-tabs-layout {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.description-tabs-heading {
	text-align: left;
	margin-bottom: 18px;
}

.description-tabs-section .box-design-title {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	max-width: none;
	width: 100%;
	font-size: var(--section-heading);
	font-weight: 700;
	color: #16352b;
	line-height: 1.2;
}

.description-tab-content {
	max-height: 320px !important;
	height: auto !important;
	overflow-y: auto !important;
}

.description-tab-content h3 {
	color: #16352b;
	font-size: var(--text-lg);
	font-weight: 700;
	margin: 0 0 12px;
}

.description-tab-content p,
.description-tab-content li {
	color: #3d4a44;
	font-size: var(--text-sm);
	line-height: 1.65;
}

.cta-section {
	height: auto;
	min-height: 280px;
	padding: 48px 0;
}

.cta-section .cta-container {
	justify-content: center;
}

.cta-section .cta-copy {
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cta-section .cta-label,
.cta-section .cta-title {
	text-align: center;
}

.cta-section .cta-desc-clr {
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.cta-section .cta-action {
	margin-top: 24px;
	margin-right: 0;
	display: flex;
	justify-content: center;
}

.cta-section .cta-title,
.cta-section .cta-title .highlight-green {
	max-width: none;
	width: auto;
}

.offer-gallery-section .cta-action1 {
	margin-top: 24px;
	margin-right: 0;
}

.offer-gallery-section .cta-title1,
.offer-gallery-section .cta-title1 .highlight-green1 {
	font-size: var(--section-heading);
	max-width: none;
	width: auto;
}

.cta-section1 {
	height: auto;
	min-height: 320px;
	padding: 48px 0;
}

.latest-blog-header {
	align-items: center;
}

.latest-blog-header .blog-action {
	margin-top: 0;
	margin-right: 0;
	justify-content: flex-end;
}

.blog-title,
.blog-title .green,
.order-title,
.order-title .highlight-green,
.faqs-title,
.faqs-title .highlight-green,
.cta-title,
.cta-title .highlight-green,
.cta-title1,
.cta-title1 .highlight-green1,
.quotation-title {
	font-size: var(--section-heading);
	max-width: none !important;
	width: auto;
}

/* Process: level columns + visible icons */
.innovation-container {
	display: flex;
	align-items: stretch;
}

.innovation-container .process-content {
	flex: 1 1 55%;
	min-width: 0;
	order: 1;
	display: flex;
	flex-direction: column;
}

.innovation-container .process-side-media {
	flex: 0 1 40%;
	order: 2;
	display: flex !important;
	align-items: stretch;
	justify-content: center;
	align-self: stretch;
}

.innovation-container .process-side-image,
.innovation-container .process-side-placeholder {
	width: 100%;
	max-width: none;
	height: 100%;
	min-height: 100%;
	aspect-ratio: auto;
	align-self: stretch;
}

.innovation-container .process-side-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Process step cards */
.innovation-section .info-card {
	background: #157347;
	box-shadow: 0 8px 22px rgba(21, 115, 71, 0.22);
}

.innovation-section .info-title {
	color: #ffffff;
}

.innovation-section .info-desc {
	color: rgba(255, 255, 255, 0.9);
}

/* Icon circle: theme green so white icons show clearly */
.innovation-section .info-icon1 {
	background: #0d4d30;
	color: #ffffff;
}

.innovation-section .info-icon1--image {
	background: #0d4d30;
	overflow: hidden;
	padding: 8px;
}

.innovation-section .info-icon1--image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	filter: brightness(0) invert(1);
}

@media (max-width: 991.98px) {
	.innovation-container {
		flex-direction: column;
	}

	.innovation-container .process-content,
	.innovation-container .process-side-media {
		order: 0;
		flex: 1 1 auto;
		width: 100%;
	}

	.innovation-container .process-side-image,
	.innovation-container .process-side-placeholder {
		min-height: 280px;
		aspect-ratio: 4 / 5;
		height: auto;
	}
}