:root {
	--primary-green: #0e3b2f;
	--accent-gold: #c89a4b;
	--light-bg: #f7eee5;
	--text-main: #1f2933;
	--text-muted: #6b7280;
	--left-shadow:
		rgba(141 120 93) -20px 0px 55px,
		rgba(0, 0, 0, 0.12) -12px 0px 30px,
		rgba(0, 0, 0, 0.12) -4px 0px 6px,
		rgba(0, 0, 0, 0.17) -12px 0px 13px,
		rgba(0, 0, 0, 0.09) -3px 0px 5px;
	--container-width: 1160px
}
 
 
 html {
     background-color: #ffffff!Important;
 }



html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stop {
	overflow: hidden;
}

.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

html {
	scroll-behavior: smooth;
}

main section {
	background-color: #fff !important;
}

@font-face {
	font-family: 'esthatic';
	src: url('AESTHETICSTYLES-ITALIC.OTF') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'HeadingNowTrial';
	src: url('HeadingNowTrial-26Bold.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: 'Poppins-Light';
	src: url('Poppins-Thin.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: 'codelight';
	src: url('CODE_Light.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'nclgasdrifo';
	src: url('NCLGasdrifo-Demo.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'esthatic-bold';
	src: url('AESTHETICSTYLES-REGULAR.TTF') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


/* Nav bar dropdown */
/* ================= DESKTOP DEFAULT ================= */
.nav-links {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nav-mobile {
	display: none;
}


/* Desktop nav layout fix */
.nav {
	display: flex;
	align-items: center;
}

/* Push contact button to right */
.nav .desktopbutton {
	margin-left: auto;
}

/* Optional: spacing */
.nav .desktopbutton .nav-cta {
	margin-left: 20px;
}

/* ================= DESKTOP DROPDOWN ================= */
.desktop-dropdown {
	position: relative;
}

.desktop-dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	min-width: 220px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: 0.3s ease;
	z-index: 99;
}

.desktop-dropdown-menu a {
	display: block;
	padding: 6px 18px;
	color: #000;
	white-space: nowrap;
}

.desktop-dropdown-menu a:hover {
	background: #f5f5f5;
}

.desktop-dropdown:hover .desktop-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ================= MOBILE ACCORDION ================= */
.mobile-accordion {
	border-bottom: 1px solid #eee;
}

.mobile-accordion-title {
	padding: 14px 0;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
}

.mobile-accordion-title::after {
	/* content: "▾"; */
	transition: transform 0.3s ease;
}

.mobile-accordion-content {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	padding-left: 15px;
	transition: max-height 0.4s ease, opacity 0.3s ease;
}

.mobile-accordion-content a {
	display: block;
	padding: 10px 0;
	font-size: 14px;
}

.mobile-accordion.active .mobile-accordion-content {
	max-height: 2000px;
	opacity: 1;
}

.mobile-accordion.active .mobile-accordion-title::after {
	transform: rotate(180deg);
}

/* ================= MOBILE VIEW ================= */
@media (max-width: 991px) {

	.nav-links {
		display: none;
	}

	.nav-mobile {
		display: none;
		flex-direction: column;
	}

	.nav-mobile.open {
		display: flex;
	}

	.desktop-dropdown-menu a {
		display: none;
	}
}


.new-clients , .existing-clients p {
    font-family: 'Satoshi', system-ui, -apple-system!important;
}


.vivid-font {
	font-family: 'HeadingNowTrial';
	font-size: 98px;
	font-weight: 400;
	line-height: 54px;
	margin-bottom: 40px;

}

.truezero-font-bold {
	font-family: 'Poppins-Light';
	font-size: 35px;
	letter-spacing: .02em;
	text-transform: capitalize;
}

.truezero-font {
	font-family: 'Sarlotte', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 54px;
	font-weight: 400;
	line-height: 54px;
}


.facials-font-bold {
	font-family: 'codelight', serif;
	font-size: 44px;
	font-weight: 400;
	letter-spacing: .02em;
}


.facials-font {
	font-family: 'nclgasdrifo', serif;
	font-size: 52px;
	line-height: 1.1;
	margin-bottom: 22px;
	color: #000 !important;
}


.scar-delete-font-bold {
	font-family: 'esthatic-bold', serif;
	font-size: 44px;
	font-weight: 400;
	letter-spacing: .02em;
}

.scar-delete-font {
	font-family: 'esthatic', serif;
	font-size: 52px;
	line-height: 1.1;
	margin-bottom: 22px;
}

.scar-delete-h2 {
	font-family: 'esthatic', serif;
}

@media (min-width: 968px) {
	.scar-delete-h2-full {
		font-size: 42px !important;
	}
}


.facials-h2-full span {
	font-family: 'codelight', serif;
}




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

body {
	font-family: 'Satoshi', system-ui, -apple-system;
	color: var(--text-main);
	background-color: #fff;
	width: 100%;
	line-height: 1.6
}


.video-card-shadow {
	background: #fdf8f3;

	/* Left side shadow only */
	box-shadow: var(--left-shadow);
}


/* Hero main + sub: Sarlotte */
.hero-heading-main,
.hero-heading-sub span {
	font-family: 'Sarlotte', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	white-space: nowrap;
	/* Prevents line break */
}


.signature-continue {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;

}



/* All H2: Poppins 275 */
h2,
.condition-name {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-weight: 275;
	/* custom weight from your self‑hosted Poppins files */
}


img {
	max-width: 100%;
	display: block
}

a {
	text-decoration: none;
	color: #0b3b30
}

.container {
	width: 100%;
	max-width: 98% !important;
	margin: 0 auto;
	padding: 0 16px
}

header {
	top: 0;
	/*background-color: white;*/
	z-index: 109;
	position: relative;
}

.hero {
    z-index: 49;
    position: relative;
}

.nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 18px 0
}

.logo {
	display: contents;
	align-items: center;
}

.two-logo img {
	width: 20% !important;
}

@media (max-width: 768px) {
	.two-logo img {
		width: 38% !important;
	}


	.vivid-font {
		font-family: 'HeadingNowTrial';
		font-size: 50px;
		font-weight: 400;
		line-height: 54px;
		margin-bottom: 10px;
		margin-top: -30px;

	}
}

.vivid-font {
	white-space: nowrap;
	/* Prevent line break */
	/* Keep content in one line */
	align-items: center;
	/* Vertical center align */
	gap: 6px;
	/* Space between text and image */
}

.vivid-font img {
	display: inline-block;
	vertical-align: middle;
	/* Align with text baseline */
	max-height: 1em;
	/* Optional: match text height */
}

.logo img {
	width: 10%
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 28px;
	font-size: 15px;
	color: #111827;
	margin-left: 40px
}

.nav-links a {
	position: relative
}

.nav-links a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 1.5px;
	background-color: var(--primary-green);
	transition: width .25s ease
}

.nav-links a:hover::after {
	width: 100%
}

.nav-cta {
	padding: 10px 26px;
	border-radius: 999px;
	background-color: var(--primary-green);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition: background-color .25s ease, transform .1s ease, box-shadow .25s ease
}

.nav-cta:hover {
	background-color: #06241b;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px #0f172a40
}

.nav-cta-overlay {
	position: absolute;
	top: 20px;
	right: 22px;
	z-index: 5
}

.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	margin-left: auto
}

.hamburger span {
	display: block;
	height: 2px;
	width: 100%;
	background-color: #111827;
	border-radius: 999px;
	transition: transform .25s ease, opacity .25s ease
}

.hamburger.active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg)
}

.hamburger.active span:nth-child(2) {
	opacity: 0
}

.hamburger.active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg)
}

.nav-mobile {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 99;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	gap: 18px;
	padding: 16px 20px 20px;
	font-size: 15px
}

.nav-mobile a {
	padding: 4px 0
}

.nav-mobile .nav-cta {
	align-self: flex-start
}

.hero {
	padding: 60px 0 80px
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	/* gap: 46px; */
	align-items: center
}

.hero-eyebrow {
	font-size: 56px;
	color: #0b3b30 !important;

	letter-spacing: .02em;
	font-weight: 275;
	/* extra light matching your Poppins preference */
}


.hero-heading-main {

	font-size: 52px;
	line-height: 1.1;
	color: var(--primary-green);
	margin-bottom: 4px
}

.hero-heading-sub {

	font-size: 65px;
	line-height: 1.1;
	color: var(--primary-green);
	margin-bottom: 22px
}

.hero-heading-sub span {
	position: relative
}

.hero-heading-sub span::after {
	content: '+';

	font-size: 32px;
	position: absolute;
	top: -4px;
	right: -18px;
	color: var(--primary-green)
}

.hero-body {
	font-size: 15px;
	color: var(--text-muted);
	max-width: 80%;
	margin-bottom: 80px
}

.hero-body p+p {
	margin-top: 10px
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 20px;
	margin-bottom: 30px
}

.hero-rating {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--text-muted)
}

.hero-rating-avatars {
	display: flex;
	align-items: center
}

.hero-rating-avatars .avatar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 2px solid #fff;
	overflow: hidden;
	background-color: #d1d5db;
	background-size: cover;
	background-position: center
}

.hero-rating-avatars .avatar:nth-child(1) {
	background-image: url(../images/user-1.webp)
}

.hero-rating-avatars .avatar:nth-child(2) {
	background-image: url(../images/user-2.webp)
}

.hero-rating-avatars .avatar:nth-child(3) {
	background-image: url(../images/user-3.webp)
}

.hero-rating-avatars .avatar+.avatar {
	margin-left: -10px
}

.hero-rating-badge {
	background-color: var(--primary-green);
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	margin-left: -8px;
	white-space: nowrap
}

.hero-rating-score {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	color: #111827
}

.hero-rating-stars {
	color: #fbbf24;
	font-size: 13px
}

.hero-media-wrap {
	display: flex;
	justify-content: flex-end
}

.hero-media-card {
	width: 100%;
	max-width: 500px;
	background-color: var(--light-bg);
	border-radius: 28px;
	padding: 30px 0px 0px 0px;
	position: relative;
	overflow: visible;
	/* Ensure this is visible */
}

.ba-wrapper {
	position: relative;
	width: 105%;
	left: -12px;
	aspect-ratio: 3 / 4;
	border-radius: 24px;
	overflow: visible;
}

.ba-wrapper img {
	position: absolute;
	top: 0;
	/* Center the image horizontally */
	left: 50%;
	transform: translateX(-50%);
	/* Increase width to make it overflow, e.g., 120% */
	width: 120%;
	height: 100%;
	/* Ensure the image does not stretch */
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

.ba-wrapper .ba-after {
	clip-path: inset(0 0 0 50%);
}

.ba-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	background-color: #fff;
	left: 50%;
	transform: translateX(-1px);
	cursor: pointer;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* Ensure handle sits on top of overflowing images */
	z-index: 10;
}

.ba-handle-knob {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background-color: var(--primary-green);
	border: 2px solid #fff;
	margin-bottom: 10px;
}

.ba-wrapper::selection,
.ba-wrapper ::selection {
	background: transparent;
	color: inherit;
}

.ba-wrapper,
.ba-wrapper * {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.hero-media-meta {
	display: flex;
	justify-content: center;
	gap: 30px;
	font-size: 12px;
	color: var(--text-muted)
}

.hero-media-meta span {
	position: relative;
	padding-top: 2px
}

.hero-media-meta span::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	width: 10px;
	height: 2px;
	border-radius: 999px;
	background-color: var(--accent-gold)
}

.ba-wrapper::selection,
.ba-wrapper ::selection {
	background: transparent;
	color: inherit
}

.ba-wrapper::-moz-selection,
.ba-wrapper ::-moz-selection {
	background: transparent;
	color: inherit
}

.ba-wrapper,
.ba-wrapper * {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none
}

@media (min-width: 960px) {
	.hero-media-wrap {
		margin-top: -170px
	}
}

@media (max-width: 960px) {
	.hero {
		padding: 0px 0 0px
	}

	.hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px
	}

	.hero-media-wrap {
		justify-content: center;
		margin-top: 0
	}

	.hero-heading-main,
	.hero-heading-sub {
		font-size: 40px
	}
}

@media (max-width: 768px) {
	.hamburger {
		display: flex
	}

	.ba-wrapper {
		width: 108%;
	}

	.nav-mobile {
		display: none
	}

	.nav-mobile.open {
		display: flex
	}

	.hero-heading-main,
	.hero-heading-sub {
		font-size: 34px
	}

	.hero-heading-sub span::after {
		font-size: 26px;
		right: -14px
	}

	.hero-media-card {
		max-width: 360px
	}
}

@media (max-width: 480px) {
	.logo img {
		width: 30%
	}


	.hero-eyebrow {
		font-size: 28px;
		margin-bottom: 0px;
	}

	.hero-heading-main,
	.hero-heading-sub {
		font-size: 25px
	}

	.hero-actions {
		flex-direction: column;
		align-items: flex-start
	}

	.hero-rating {
		flex-direction: column;
		align-items: flex-start
	}
}

.btn-pill {
	--btn-height: 52px;
	--btn-radius: 999px;
	--btn-border: 2px;
	--btn-color: #0e3b2f;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	height: var(--btn-height);
	padding: 0 64px 0 26px;
	border-radius: var(--btn-radius);
	border: var(--btn-border) solid var(--btn-color);
	background-color: transparent;
	color: var(--btn-color);
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
	overflow: visible;
	box-shadow: 0 4px 10px #0f172a1a;
	transform: translateY(0) scale(1);
	transition: box-shadow .35s cubic-bezier(0.19, 1, 0.22, 1), transform .35s cubic-bezier(0.19, 1, 0.22, 1), background-color .25s ease-out, color .25s ease-out
}

.btn-pill-right {
	position: absolute;
	top: 50%;
	right: -2px;
	transform: translateY(-50%);
	width: calc(var(--btn-height) + 4px);
	height: calc(var(--btn-height) + 4px);
	border-radius: 999px;
	background-color: var(--btn-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px #fff
}

.btn-pill-arrow {
	color: #fff;
	font-size: 20px
}

.btn-pill:hover {
	background-color: #0e3b2f08;
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 14px 30px #0f172a38 0 6px 12px #0f172a24
}

.btn-pill:active {
	transform: translateY(-1px) scale(0.99);
	box-shadow: 0 8px 18px #0f172a33 0 3px 8px #0f172a29
}

.hero-media-wrap {
	display: flex;
	justify-content: flex-end;
	position: relative
}

.hero-contact-btn {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	padding: 10px 34px;
	border-radius: 999px;
	background-color: #0e3b2f;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	border: 0;
	outline: 6px solid #fff;
	outline-offset: 3px;
	cursor: pointer;
	transition: background-color .25s ease, transform .1s ease
}

.hero-contact-btn:hover {
	background-color: #06241b
}


.nav-cta-index {
	margin-right: 0px !important;
}

.nav-cta {
	margin-right: 36px;
	padding: 10px 26px;
	border-radius: 999px;
	background-color: var(--primary-green);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition: background-color .25s ease, transform .1s ease, box-shadow .25s ease
}

.nav-cta:hover {
	background-color: #06241b;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px #0f172a40
}

@media (max-width: 768px) {
	.hero-contact-btn {
		display: none
	}

	.nav-links .hide-nov-mobile {
		display: none
	}

	.nav-links {
		gap: 10px;
		font-size: 12px;
		position: absolute;
		margin-left: 130px;
	}

	.hero-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px
	}

	.hero-grid>div:first-child {
		order: 2
	}

	.hero-media-wrap {
		order: 1;
		justify-content: center
	}

	.hero {
		text-align: center
	}

	.hero-body {
		margin: 0 auto 24px
	}

	.hero-actions {
		justify-content: center
	}

	.hero-rating {
		justify-content: center;
		margin: auto;
	}

	.hero-rating-score {
		margin: auto;
		text-align: center;
		justify-content: center;
	}

	.hero-rating-avatars {
		margin: auto;
	}

	.btn-pill {
		margin: auto;
	}
}

.condition-section {
	padding: 60px 0
}

.condition-title {

	font-size: 32px;
	margin-bottom: 12px
}

.condition-divider,
.condition-bottom-divider {
	border-top: 1px solid #111827
}

.condition-bottom-divider {
	margin-top: 40px
}

.condition-grid {
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 60px;
	row-gap: 40px
}

.condition-card {
	max-width: 320px
}

.condition-heading {
	display: flex;
	align-items: center;
	margin-bottom: 24px
}

.condition-line {
	flex: 1;
	height: 2px;
	background-color: #111827;
	margin-right: 18px
}

.condition-name {

	font-size: 40px;
}

.condition-text {
	font-size: 15px;
	color: #6b7280;
	line-height: 1.7;
	margin-bottom: 34px
}

.condition-link {
	display: inline-block;
	font-size: 20px;
	color: #111827;
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 1px solid #111827
}

.condition-card::after {
	content: "";
	display: block;
	border-bottom: 1px solid #d1d5db;
	margin-top: 40px
}

/* desktop: already 4 columns – keep as is */

/* tablet & mobile: 2 columns, nice spacing */
@media (max-width: 992px) {
	.condition-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
		row-gap: 40px;
	}

	.condition-card {
		max-width: none;
	}

	.condition-name {
		font-size: 34px;
	}
}

/* small mobile: still 2 columns, but tighter */
@media (max-width: 600px) {

	.condition-section {
		padding: 40px 0;
	}

	.condition-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 32px;
	}

	.condition-card {
		max-width: none;
		text-align: left;
		/* keep text like design */
	}

	.condition-heading {
		justify-content: flex-start;
	}

	.condition-line {
		max-width: 70px;
	}

	.condition-name {
		font-size: 28px;
	}

	.condition-text,
	.condition-link {
		text-align: left;
		line-height: 20px;
	}

	/* optional: remove extra bottom line if you use it */
	.condition-card::after {
		margin-top: 32px;
		width: 100%;
	}
}

.signature-section {
	padding: 60px 0
}

.signature-title {
	text-align: center;
	font-size: 32px;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 32px;
	font-weight: 400
}

.signature-accent {
	color: #0e3b2f;
	font-weight: 275;
}

.signature-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0
}

.signature-tile {
	position: relative;
	min-height: 230px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	transition: transform .25s ease, box-shadow .25s ease;
	cursor: pointer
}

.signature-tile-img {
	background-size: cover;
	background-position: center
}

.signature-tile-text {
	background-color: #f7eee5;
	padding: 26px 28px 30px
}

.signature-text-wrap {
	text-align: center;
	max-width: 320px
}

.signature-heading-main {

	font-size: 30px;
	margin-bottom: 10px
}

.signature-heading-sub {

	font-size: 22px;
	margin-bottom: 8px
}

.signature-logo-text {
	font-size: 18px;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 6px
}

.signature-body-text {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.7;
	margin-bottom: 18px
}

.signature-continue {
	margin-bottom: 18px;
	background: none;
	border: none;
	font-size: 16px;
	color: #111827;
	cursor: pointer;
	padding: 0 0 4px;
	border-bottom: 1px solid #111827
}

.signature-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px #0f172a38
}

@media (max-width: 992px) {
	.signature-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.signature-tile {
		min-height: 220px
	}
}

@media (max-width: 600px) {
	.signature-section {
		padding: 40px 0
	}

	.signature-tiles {
		grid-template-columns: 1fr
	}

	.signature-tile {
		min-height: 220px
	}

	.signature-tile-text {
		align-items: center;
		text-align: center
	}
}

.instagram {
	padding: 60px 0px 60px 0;
}

.treatments-carousel {
	padding: 60px 0
}

.tc-label {
	max-width: 420px;
	margin: 0 auto 18px;
	text-align: center;
	font-size: 18px;
	color: #0e3b2f;
	border: 1px solid #0e3b2f;
	border-radius: 999px;
	padding: 8px 18px
}

.tc-heading {
	text-align: center;
	font-size: 26px;
	margin-bottom: 36px;
	color: #0e3b2f;
	font-weight: 100
}

.tc-slider-wrapper {
	position: relative
}

.tc-slider-viewport {
	overflow: hidden
}

.tc-slider-track {
	display: flex;
	transition: transform .5s cubic-bezier(0.19, 1, 0.22, 1)
}

.tc-slide {
	min-width: 100%;
	padding: 16px 0 24px;
	display: flex;
	justify-content: center
}

.tc-oval {
	width: 100%;
	max-width: 80%;
	background-color: #f7eee5;
	border-radius: 999px;
	padding: 15px 20px;
	margin: 0 auto
}

.tc-oval-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: 36px
}

.tc-image-wrap {
	border-radius: 999px;
	overflow: hidden
}

.tc-image-wrap img {
	width: 86%;
	height: 100%;
	object-fit: cover
}

.tc-content {
	color: #0e3b2f
}

.tc-title {
	font-weight: 100;
	font-size: 40px;
	margin-bottom: 14px
}

.tc-text {
	font-size: 15px;
	color: #4b5563;
	line-height: 1.7
}

.tc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: none;
	background-color: #fff;
	color: #0e3b2f;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 8px 20px #0f172a2e;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
	z-index: 5
}

.tc-arrow-left {
	left: 120px
}

.tc-arrow-right {
	right: 120px
}

.tc-arrow:hover {
	transform: translateY(-50%) translateY(-1px);
	box-shadow: 0 12px 26px #0f172a40;
	background-color: #f9fafb
}

.tc-dots {
	margin-top: 18px;
	display: flex;
	justify-content: center;
	gap: 8px
}

.tc-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: none;
	background-color: #d1d5db;
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease
}

.tc-dot-active {
	width: 18px;
	background-color: #0e3b2f
}

@media (max-width: 900px) {
	.tc-oval {
		border-radius: 30px;
		padding: 24px 20px
	}

	.tc-oval-inner {
		grid-template-columns: 1fr
	}

	.tc-image-wrap {
		max-width: 320px;
		text-align: center;
		margin: auto;
		justify-content: center;
		display: flex;
	}

	.tc-title {
		text-align: center
	}

	.tc-text {
		text-align: center
	}

	.tc-arrow-left {
		left: 10px
	}

	.tc-arrow-right {
		right: 10px
	}
}

@media (max-width: 600px) {
	.tc-heading {
		font-size: 22px
	}

	.tc-title {
		font-size: 32px
	}

	.tc-arrow {
		width: 38px;
		height: 38px;
		font-size: 18px
	}
}

.blog-strip {
	background-color: #f4f7f7;
	padding: 50px 0
}

.blog-strip-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px
}

.blog-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	flex: 1.4
}

.blog-card-img {
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 10px
}

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

.blog-card-text {
	font-size: 13px;
	color: #4b5563
}

.blog-cta {
	flex: .7;
	text-align: center
}

.blog-cta-title {
	font-size: 24px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #0e3b2f;
	margin-bottom: 24px
}

.blog-view-btn {
	padding: 10px 26px;
	border-radius: 999px;
	border: 1px solid #111827;
	background-color: #fff;
	cursor: pointer;
	font-size: 14px;
	transition: background-color .2s ease, transform .1s ease, box-shadow .2s ease
}

.blog-view-btn:hover {
	background-color: #f9fafb;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px #0f172a2e
}

@media (max-width: 960px) {
	.blog-strip-inner {
		flex-direction: column;
		align-items: stretch
	}

	.blog-cta {
		order: -1
	}
}

@media (max-width: 700px) {

	.blog-card-text {

		text-align: center;

	}

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


	.blog-cards {
		grid-template-columns: 1fr
	}

	.blog-card {
		text-align: center;
	}

	.blog-card-img img {
		height: 200px
	}

	.blog-cta-title {
		font-size: 20px
	}
}

.clinic-section {
	padding: 70px 0
}

.clinic-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 120px;
	align-items: center
}

.clinic-images {
	position: relative
}

.clinic-main-img img {
	width: 100%;
	border-radius: 12px;
	object-fit: cover
}

.clinic-overlay-img {
	position: absolute;
	bottom: 100px;
	left: 60%;
	transform: translateX(-10%);
	width: 55%;
	box-shadow: 0 18px 40px #0f172a4d;
	border-radius: 12px;
	overflow: hidden
}

.clinic-overlay-img img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.clinic-content {
	color: #0e3b2f
}

.clinic-title {
	font-size: 26px;
	line-height: 1.4;
	margin-bottom: 26px
}

.clinic-hours {
	margin-bottom: 18px;
	font-size: 14px;
	color: #4b5563
}

.clinic-hours-row {
	display: grid;
	grid-template-columns: auto auto 1fr;
	column-gap: 10px;
	margin-bottom: 8px
}

.ch-day {
	white-space: nowrap
}

.ch-sep {
	text-align: center
}

.ch-time {
	white-space: nowrap
}

.clinic-note {
	font-size: 14px;
	color: #6b7280;
	margin-bottom: 24px
}

.clinic-btn {
	margin-top: 4px
}

@media (max-width: 960px) {
	.clinic-section {
		padding: 50px 0
	}

	.clinic-inner {
		grid-template-columns: 1fr;
		gap: 32px
	}

	.clinic-images {
		max-width: 100%;
		width: 100%;
		margin: 0 auto
	}

	.clinic-content {
		text-align: center;
		padding: 0 16px;
		box-sizing: border-box
	}

	.clinic-hours-row {
		justify-content: center
	}
}

@media (max-width: 600px) {

	.clinic-section,
	.clinic-inner,
	.clinic-images,
	.clinic-content {
		width: 100%;
		max-width: 100%;
		overflow: hidden
	}

	.clinic-title {
		font-size: 22px;
		line-height: 1.35;
		word-wrap: break-word
	}

	.clinic-hours {
		padding: 0 8px
	}

	.clinic-hours-row {
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 4px
	}

	.ch-day,
	.ch-sep,
	.ch-time {
		white-space: normal
	}

	.clinic-overlay-img {
		position: relative;
		bottom: auto;
		left: auto;
		transform: none;
		width: 90%;
		margin: -60px auto 0
	}
}

.site-footer {
	background-color: #f4f7f7;
	padding: 60px 0 40px
}

.footer-cta-card {
	background: linear-gradient(90deg, #0f4b3a 0%, #28a88b 60%, #0f4b3a 100%);
	border-radius: 34px;
	padding: 40px 46px;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: center;
	color: #fff;
	margin-bottom: 52px
}

.footer-cta-title {
	font-size: 32px;
	margin-bottom: 16px
}

.footer-cta-text {
	font-size: 14px;
	max-width: 420px;
	line-height: 1.7
}

.footer-store-buttons {
	margin-top: 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px
}

.store-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid #fffc;
	background-color: #0f172a1f;
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	backdrop-filter: blur(4px)
}

.store-icon {
	font-family: "Font Awesome 5 Brands", system-ui, sans-serif;
	font-size: 18px
}

.store-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start
}

.store-small {
	font-size: 10px;
	opacity: .8
}

.store-main {
	font-size: 14px;
	font-weight: 600
}

.footer-cta-right {
	justify-content: flex-end
}

.footer-cta-right img {
	max-width: 250px;
	height: auto
}

.footer-main {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
	gap: 60px;
	align-items: flex-start;
	margin-bottom: 40px
}

.footer-contact-title {
	font-size: 28px;
	color: #0e3b2f;
	margin-bottom: 26px
}

.footer-email-form {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 999px;
	padding: 4px;
	max-width: 380px;
	box-shadow: 0 10px 30px #0f172a1f
}

.footer-email-form input {
	flex: 1;
	border: none;
	outline: none;
	padding: 10px 16px 10px 20px;
	border-radius: 999px;
	font-size: 14px
}

.footer-email-form input::placeholder {
	color: #9ca3af
}

.footer-email-btn {
	width: 52px;
	height: 40px;
	border-radius: 999px;
	border: none;
	background-color: #0e3b2f;
	color: #fff;
	font-size: 20px;
	cursor: pointer
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px
}

.footer-col h4 {
	font-size: 14px;
	font-weight: 600;
	color: #0e3b2f;
	margin-bottom: 12px
}

.footer-col a {
	display: block;
	font-size: 13px;
	color: #6b7280;
	text-decoration: none;
	margin-bottom: 6px
}

.footer-col a:hover {
	color: #0e3b2f
}

.footer-bottom-nav {
	border-top: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
	padding: 18px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px
}

.footer-nav-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.footer-pill {
	border-radius: 999px;
	border: 1px solid #e5e7eb;
	background-color: #fff;
	padding: 6px 14px;
	font-size: 12px;
	color: #111827;
	cursor: pointer
}

.footer-pill-active {
	background-color: #0e3b2f;
	color: #fff
}

.footer-pill-icon {
	font-size: 10px;
	margin-right: 6px
}

.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.footer-social-icon {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid #e5e7eb;
	background-color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}

.footer-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: #9ca3af;
	gap: 10px
}

.footer-meta-links {
	display: flex;
	gap: 18px
}

.footer-meta-links a {
	color: #6b7280;
	text-decoration: none
}

@media (max-width: 960px) {
	.site-footer {
		padding: 40px 0 32px
	}

	.footer-cta-card {
		grid-template-columns: 1fr;
		text-align: center;
		padding: 30px 22px
	}

	.footer-cta-left,
	.footer-cta-right {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.footer-cta-text {
		margin: 0 auto
	}

	.footer-store-buttons {
		justify-content: center
	}

	.footer-cta-right {
		margin-top: 18px
	}

	.footer-main {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center
	}

	.footer-contact-title {
		text-align: center
	}

	.footer-email-form {
		margin: 0 auto;
		max-width: 100%
	}

	.footer-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		justify-items: center;
		text-align: left
	}
}

@media (max-width: 640px) {
	.footer-cta-card {
		padding: 26px 18px;
		border-radius: 24px
	}

	.footer-cta-title {
		font-size: 22px
	}

	.footer-main {
		gap: 26px
	}

	.footer-columns {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: center
	}

	.footer-col h4 {
		margin-bottom: 6px
	}

	.footer-bottom-nav {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 12px
	}

	.footer-nav-pills {
		justify-content: center
	}

	.footer-social {
		justify-content: center
	}

	.footer-meta {
		flex-direction: column;
		text-align: center;
		gap: 6px
	}

	.site-footer .container {
		padding-left: 16px;
		padding-right: 16px
	}

	.footer-main {
		grid-template-columns: 1fr;
		gap: 24px;
		text-align: center
	}

	.footer-contact {
		width: 100%
	}

	.footer-contact-title {
		font-size: 22px;
		line-height: 1.3;
		word-wrap: break-word;
		max-width: 100%;
		margin: 0 auto 18px
	}

	.footer-email-form {
		width: 100%;
		max-width: 100%
	}
}

html,
body {
	overflow-x: hidden
}

@media (max-width: 640px) {
	.site-footer .container {
		padding-left: 16px;
		padding-right: 16px
	}

	.footer-email-form {
		width: 90%;
		max-width: 100%;
		margin: 0 auto;
		box-sizing: border-box
	}

	.footer-email-form input {
		min-width: 0
	}

	.footer-contact-title {
		font-size: 22px;
		line-height: 1.3;
		word-wrap: break-word;
		margin-bottom: 16px
	}


	.desktopbutton {
		display: none;
	}
}


@media (min-width: 900px) {
	.swiper-slide {
		width: 20% !important;
	}
}

.custom_tb_sb__b_cont {
	display: none;
}


/*  */


.video-section {
	max-width: 380px;
	margin: 0 auto;
}

.video-card {
	background: #fdf8f3;
	border-radius: 12px;

}


.facials .video-container {
	box-shadow:
		20px 0 40px rgb(252 115 18 / 20%), 40px 10px 60px rgba(253, 248, 243, 0.4), inset 8px 0 20px rgba(255, 255, 255, 0.3);
}

.video-container {
	position: relative;
	aspect-ratio: 3/4;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;

	/* Left side center glow shadow */
	box-shadow:
		20px 0 40px rgb(252 115 18 / 20%), 40px 10px 60px rgba(253, 248, 243, 0.4), inset 8px 0 20px rgba(255, 255, 255, 0.3);
}

.video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	/* border-radius: 20px; */
}

.play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	border: 2px solid rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
}

.play-overlay:hover {
	transform: translate(-50%, -50%) scale(1.08);
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.play-icon {
	width: 0;
	height: 0;
	border-left: 20px solid #ffffff;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	margin-left: 2px;
}


.scar-delete a {
	color: #7B4E24 !important;
}

.scar-delete button {
	background-color: #7B4E24 !important;
}



.facials a {
	color: #ef2260 !important;
}

.facials button {
	background-color: #ef2260 !important;
}


.facials .btn-pill {
	border: 2px solid #ef2260 !important;
	background-color: transparent !important;


}


.truezero .btn-pill-right {
	background-color: #9F76FF !important;
}



.truezero a {
	color: #9F76FF !important;
}

.truezero button {
	background-color: #9F76FF !important;
}


.truezero .btn-pill {
	border: 2px solid #9F76FF !important;
	background-color: transparent !important;


}


.vivid button {
	background-color: #FFBC00 !important;
}


.vivid .btn-pill {
	border: 2px solid #FFBC00 !important;
	background-color: transparent !important;


}

.vivid .btn-pill-right {
	background-color: #FFBC00 !important;
}



.facials .btn-pill-right {
	background-color: #ef2260 !important;
}



.truezero-video .video-container {
	box-shadow: 20px 0 40px rgb(157 123 249 / 24%), 40px 10px 60px rgba(253, 248, 243, 0.4), inset 8px 0 20px rgba(255, 255, 255, 0.3);
}

.vivid-video .video-container {
	box-shadow: 20px 0 40px rgb(11 59 48 / 29%), 40px 10px 60px rgba(253, 248, 243, 0.4), inset 8px 0 20px rgba(255, 255, 255, 0.3) !important;
}







.scar-delete .btn-pill {
	border: #7B4E24 !important;
	background-color: transparent !important;


	--btn-height: 52px;
	--btn-radius: 999px;
	--btn-border: 2px;
	--btn-color: #000;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	height: var(--btn-height);
	padding: 0 64px 0 26px;
	border-radius: var(--btn-radius);
	border: var(--btn-border) solid #7B4E24 !important;
	background-color: transparent;
	color: var(--btn-color);
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
	overflow: visible;
	box-shadow: 0 4px 10px #0f172a1a;
	transform: translateY(0) scale(1);
	transition: box-shadow .35s cubic-bezier(0.19, 1, 0.22, 1), transform .35s cubic-bezier(0.19, 1, 0.22, 1), background-color .25s ease-out, color .25s ease-out;
}

.scar-delete .btn-pill-right {
	background-color: #7B4E24;
}


.treatments-section {

	background: #fff;
}

.section-header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 60px;
}

.section-title {
	font-family: 'esthatic-bold', serif;
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 500;
	color: #955828;
	margin-bottom: 20px;
	line-height: 1.1;
}

.section-subtitle {
	font-size: 16px;
	color: #8c8c8c;
	line-height: 1.7;
}

.slider-container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 16px;
}

.slider-track {
	display: flex;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	gap: 20px;
}

.slide {
	flex: 0 0 26%;
	text-align: center;
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.slide:hover {
	transform: translateY(-8px);
}

.slide-image {
	max-width: 300px;
	width: 300px;
	height: 280px;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.slide-label {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #000;
	margin-top: 16px;
	font-weight: 275;
	letter-spacing: 0.5px;
}

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

.dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #e5d6c5;
	cursor: pointer;
	transition: all 0.3s ease;
}

.dot.active {
	background: #955828;
	transform: scale(1.3);
}


.treatments-section2 p {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 100;
}


.treatments-section-container {
	padding: 40px;
	border: 2px solid black;
	border-radius: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-title {
	font-size: 36px;
	font-weight: 300;
	line-height: 1.2;
}

.section-header p {
	font-size: 16px;
	color: #666;
	max-width: 800px;
	margin: 20px auto 0;
	line-height: 1.6;
}

/* DESKTOP: Perfect 4-grid */
@media (min-width: 769px) {
	.slider-track.condition-div {
		display: grid !important;
		grid-template-columns: repeat(4, 260px);
		gap: 30px;
		justify-content: center;
		max-width: 1200px;
		margin: 0 auto;
		transform: none !important;
		transition: none !important;
	}

	.slider-dots {
		display: none !important;
	}

	.slide {
		width: 260px !important;
	}
}

/* MOBILE: Perfect 1-slide slider */
@media (max-width: 768px) {
	.treatments-section-container {
		padding: 20px;
	}

	.section-header {
		margin-bottom: 40px;
	}

	.section-title {
		font-size: 28px !important;
	}

	.section-header p {
		font-size: 14px;
	}

	.slider-track.condition-div {
		display: flex !important;
		width: 400%;
		/* 4 slides total */
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		gap: 20px;
		padding: 0 20px;
	}

	.slide {
		flex: 0 0 25%;
		/* Each slide = 25% of track */
		max-width: 300px;
	}

	.benefit-card-enhanced {
		width: 92% !important;
		height: 360px;
	}

	.slider-dots {
		display: flex !important;
		justify-content: center;
		gap: 12px;
		margin-top: 32px;
	}

	.dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #e5e7eb;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.dot.active {
		background: #084532;
		transform: scale(1.3);
	}
}

/* Tablet: 3-column */
@media (max-width: 1024px) and (min-width: 769px) {
	.slider-track.condition-div {
		grid-template-columns: repeat(3, 240px);
		gap: 25px;
	}
}


.faq-section {
	padding: 100px 0;
	background: #fff;
}

.faq-grid {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 60px;
	max-width: 1200px;
	margin: 0 auto;
	align-items: start;
}

/* Mobile: Reset order to natural HTML flow */
@media (max-width: 860px) {
	.faq-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Remove all order properties - follows HTML order */
	.faq-left,
	.faq-right {
		order: unset;
		text-align: center;
	}
}


.faq-title {
	font-family: 'esthatic-bold', serif;
	font-size: clamp(36px, 6vw, 52px);
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: 40px;
	background: linear-gradient(135deg, #955828 0%, #a6633a 50%, #955828 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	display: inline-block;
}


.contion-h2 .faq-title {
	font-family: 'esthatic-bold', serif;
	font-size: clamp(36px, 6vw, 52px);
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: 40px;
	background: linear-gradient(135deg, #955828 0%, #044533 50%, #044533 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	display: inline-block;
}

.contion-h2 .faq-question {
	color: #054533;
	border: 1px solid rgb(7 70 51) !important;
}


.contion-h2 .faq-question::after {
	color: #054533;
}

.contion-h2 .faq-answer {
	color: #054533;
}

.faq-title span {
	background: linear-gradient(135deg, #3b3b3b 0%, #2d1b0f 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.faq-item {
	margin-bottom: 24px;
}

.faq-question {
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #7B4E24;
	padding: 20px 24px;
	border-radius: 16px 16px 16px 4px;
	border: 1px solid rgba(229, 214, 197, 0.5);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	font-weight: 275;
}

.faq-question::after {
	content: "▼";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	color: #955828;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:not(.active) .faq-question::after {
	transform: translateY(-50%) rotate(0deg);
}

.faq-item.active .faq-question::after {
	transform: translateY(-50%) rotate(180deg);
}


.faq-answer {
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	color: #7B4E24;
	line-height: 1.65;
	padding: 0 24px 20px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	background: #FDEBD7A1;
	border-left: 3px solid #e5d6c5;
	border-radius: 0 0 16px 4px;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
	max-height: 120px;
	padding: 16px 24px 20px;
	opacity: 1;
}

.faq-right {
	position: relative;
}

.faq-image-container {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
	aspect-ratio: 3/4;
}

.faq-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	border: 2px solid rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.play-overlay:hover {
	transform: translate(-50%, -50%) scale(1.08);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

.play-icon {
	width: 0;
	height: 0;
	border-left: 20px solid #955828;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	margin-left: 2px;
}

@media (min-width: 860px) {

	.conditionsfaq .faq-item {
		width: 70%;
		margin: auto;
		margin-bottom: 30px;
	}

}

/* Mobile Responsive */
@media (max-width: 860px) {
	.faq-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}


}

@media (max-width: 480px) {
	.faq-section {
		padding: 60px 0;
	}

	.faq-question {
		padding: 16px 20px;
		font-size: 16px;
	}
}


.testimonial-section {
	margin-bottom: 100px;
	position: relative;
	overflow: hidden;
}

.testimonial-container {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	padding: 60px 0px 0px 0px;

}

.testimonial-image {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
	aspect-ratio: 3/4;
}

.testimonial-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(16px);
	border: 3px solid rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
}

.play-overlay:hover {
	transform: translate(-50%, -50%) scale(1.1);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.play-icon {
	width: 0;
	height: 0;
	border-left: 22px solid #ffffff;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	margin-left: 3px;
}

.testimonial-content {
	padding-left: 40px;
}

.testimonial-text {
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	line-height: 1.75;
	color: #6b7280;
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

.testimonial-text::before {
	content: '"';
	font-family: "Playfair Display", serif;
	font-size: 120px;
	font-weight: 500;
	color: rgba(149, 88, 40, 0.1);
	position: absolute;
	left: -20px;
	top: -10px;
	line-height: 1;
	z-index: -1;
}

.testimonial-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 32px;
	border-radius: 999px;
	background: #ffffff;
	border: 2px solid #e5d6c5;
	color: #3b3b3b;
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	position: relative;
	overflow: hidden;
}

.testimonial-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.6s ease;
}

.testimonial-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
	border-color: #d9c8a9;
}

.testimonial-cta:hover::before {
	left: 100%;
}

.cta-arrow {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #955828;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 500;
	transition: background 0.3s ease;
}

.testimonial-cta:hover .cta-arrow {
	background: #7a451a;
}

/* Mobile Responsive */
@media (max-width: 860px) {
	.testimonial-container {
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	.testimonial-content {
		padding-left: 0;

	}

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

	.testimonial-text::before {
		font-size: 80px;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media (max-width: 480px) {
	/* .testimonial-section {
		padding: 60px 0;
	} */

	.testimonial-text {
		font-size: 15px;
	}
}


/* ........... */


.contact-banner {
	background-image: url('../images/contact-banner.webp');
	background-position: left bottom;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	height: 250px;
}

.conditions-banner {
	background-image: url('../images/contion-banner.webp') !important;
}

.contact-banner::before {

	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 60%;
	background: linear-gradient(to right, #084532 35%, rgba(0, 0, 0, 0.4) 68%, transparent 88%);
	z-index: 1;
	border-radius: 40px;
}

.footer-cta-left {
	position: relative;
	z-index: 2;
	/* Text stays above gradient */
}


.contact-banner h1 {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-weight: 275;
	font-size: 42px
}


@media (max-width: 768px) {
	.contact-banner {
		min-height: 0px;
		height: 82px;
	}

	.contact-banner::before {
		width: 70%;
		/* Slightly wider on mobile */
		border-radius: 30px;
		/* Scaled border-radius */
	}

	.contact-banner .footer-cta-left {
		display: block !important;
	}

	.contact-banner h1 {
		font-size: clamp(28px, 10vw, 42px);
		/* Smaller mobile range */
	}
}

@media (max-width: 480px) {
	.contact-banner h1 {
		font-size: 14px;
		text-align: left;
	}
}

.consultation-section {
	padding: 60px 0;
}

.consultation-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.consultation-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: start;
}

.consultation-card {
	background: white;
	border-radius: 24px;
	padding: 48px;

	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	height: fit-content;
}

.consultation-content h3 {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-weight: 275;
}

.consultation-content h3 {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-weight: 275;
	font-size: 28px;
	color: #084532;
}

.consultation-content h3 span {
	font-family: 'esthatic', serif;
	font-size: 45px;
	font-weight: 275;
	line-height: 42px;
}

.consultation-section,
.contact-hero {
	padding: 50px 0 0 0;
}

.consultation-content p {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-weight: 275;
	color: #084532;
}


.contact-item span {
	color: #C0905A;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-weight: 275;
	font-size: 20px;
}

.contact-item {
	padding: 5px 0px;
}

.contact-icon {
	color: #084532;
	margin-right: 12px
}


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

	.consultation-card {
		padding: 36px 28px;
	}

	.consultation-section,
	.contact-hero {
		padding: 0px 0;
	}

	.consultation-content h3 {

		font-size: 22px;
		line-height: 28px;

	}

	.contact-item span {
		color: #C0905A;
		font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
			'Segoe UI', sans-serif;
		font-weight: 275;
		font-size: 15px;

	}


	.consultation-content h3 span {
		font-family: 'esthatic', serif;
		font-size: 32px;
	}
}


.btn-center-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 20px 0;
	/* Vertical spacing */
}

.consultation-btn {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	background: #084532;
	color: #d4a574;
	padding: 12px 12px;
	border-radius: 10px;
	font-size: 18px;
	font-weight: 275;
	text-align: center;
	display: inline-block;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
	line-height: 1.2;
	margin: 0;
	/* Remove margin from button */
}


.clinic-section {
	padding: 100px 0;

}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.clinic-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
	/* Increased from 60px to 80px for more space */
	align-items: start;
}


.clinic-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	border: 3px solid #1a5c37;
	border-radius: 24px;
	backdrop-filter: blur(10px);
}


.clinic-section-home .clinic-content {
	border: unset !important;
	display: block !important;
}

@media (min-width: 768px) {
	.clinic-section-home .clinic-content {
		margin-top: 290px;
	}

}

.appointment-title {
	font-size: 32px;
	font-weight: 800;
	color: #1a5c37;
	margin: 0 0 40px 0;
	text-align: center;
	letter-spacing: -0.5px;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;

	font-weight: 275;
}

.form-container {
	width: 100%;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.treatment-card {
	background: rgba(26, 92, 55, 0.1);
	border: 2px solid #1a5c37;
	border-radius: 12px;
	padding: 16px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #1a5c37;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.treatment-card:hover {
	color: white;
}

.form-group {
	grid-column: span 3;
}


.form-group {

	display: flex;
	align-items: center;

	padding: 12px 0;
}

.form-group label {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 13px;
	font-weight: 275;
	color: #1a5c37;
	min-width: 80px;
	/* Fixed width for labels */
	text-align: left;
}


.required {
	color: #e74c3c;
}

/* CENTER ALIGN for location label only */
.form-group.full-width:nth-child(4) label {
	text-align: center !important;
	min-width: auto;
	margin: 0 auto 8px;
	display: block;
	width: 100%;
}

.form-group.full-width .select-wrapper {
	flex: none;
	width: 100%;
	margin-top: 8px;
}

.form-group.full-width {
	grid-column: span 3;
	flex-direction: column;
	align-items: center;
}

select {
	width: 100%;
	border-radius: 12px;
	color: #2d1a0e;
	font-size: 15px;
	border: unset;
}


.form-group.full-width {
	grid-column: span 3;
}

.form-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1a5c37;
	margin-bottom: 8px;
}

.required {
	color: #e74c3c;
}

.form-group input,
.select-wrapper {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid #1a5c37;
	border-radius: 12px;
	font-size: 15px;
	color: #2d1a0e;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.form-group input:focus,
.select-wrapper:focus-within {
	outline: none;
	border-color: #166d3f;
	background: rgba(26, 92, 55, 0.1);
}

.select-wrapper {
	position: relative;
}


.select-icon {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #1a5c37;
	font-size: 12px;
	pointer-events: none;
}

.form-submit {
	grid-column: span 3;
	background: #1a5c37;
	color: white;
	border: 2px solid #1a5c37;
	border-radius: 6px;
	/* ✅ 6px radius */
	padding: 12px 24px;
	/* ✅ Tight padding around text only */
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 1px;
	display: inline-block;
	/* ✅ Background fits text only */
	margin: 0 auto;
	/* ✅ Center align */
	text-align: center;
	width: fit-content;
	/* ✅ No full width */
}

.form-submit:hover {
	background: white;
	color: #1a5c37;
	transform: translateY(-2px);
	border-color: #166d3f;
}


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


	.form-grid {
		grid-template-columns: 1fr;
		display: block !important
	}

	.form-group {
		display: block;
	}

	.form-group {
		grid-column: span 1;
	}

	.form-group label {
		text-align: center;
	}

	.treatment-card {
		margin-top: 10px;
		margin-bottom: 10px;
	}
}




.conditions-span-heading {
	color: #084532;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 275;
	font-size: 70%;
	background-image: linear-gradient(34deg, transparent -132%, #c29063 88%);
	background-repeat: no-repeat;
	background-size: 100% 2px;
	/* Full width, 2px thick */
	background-position: 0 100%;
	/* Bottom aligned */
	padding-bottom: 4px;
	/* Underline spacing */
}




.pigmentation-accordion {
	padding: 0px 0 60px 0;
}

.section-header h2 {
	font-size: 3rem;
	font-weight: 300;
	line-height: 1.1;
	margin-bottom: 1rem;
}

.conditions-span-heading {
	color: #084532;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 100;
	font-size: 70%;
	background-image: linear-gradient(180deg, transparent 20%, #c29063 70%);
	background-repeat: no-repeat;
	background-size: 100% 2px;
	background-position: 0 100%;
	padding-bottom: 4px;
}



.pigmentation-grid {
	background: #FFFAF0;
	border-radius: 0px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
	border: 1px solid #e9ecef;
	margin-top: 3rem;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 3rem;
	align-items: start;
}

.tabs-column {
	display: flex;
	flex-direction: column;
}

.tab-item {
	position: relative;
	padding: 1.5rem 1.75rem;
	border: 2px solid #e9ecef;
	/* Light gray border */
	border-radius: 0px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-weight: 500;
	color: #333;
	background: white;
	font-size: 0.95rem;
}

.tab-item:hover {
	border-color: #d1d9e0;
	/* Slightly darker hover */
}

.tab-item.active {
	border-color: #084532 !important;
	/* Green active border */
	background: #f8f9fa;
	box-shadow: 0 0 0 3px rgba(8, 69, 50, 0.1);
	/* Green glow */
}


.tab-item span {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	font-weight: 100;
	display: block;
	margin-right: 2rem;
	/* Space for chevron */
}

.tab-item svg {
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	transition: transform 0.3s ease;
}

.tab-item.active svg {
	transform: translateY(-50%) rotate(180deg);
	/* Rotate on active */
}



.content-column {
	padding: 35px;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	text-align: center;
}

.content-panel {
	display: none;
}

.content-panel.active {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	animation: slideIn 0.4s ease-out;
}

.content-main h3 {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	font-weight: 100;
	font-size: 1.6rem;
	color: #044533;
	margin-bottom: 1rem;
}

.content-main p {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 100;
	color: #666;
	line-height: 1.7;
	margin-bottom: 1rem;
}

.treatments-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.treatment-item h4 {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 100;
	font-size: 1.1rem;
	color: #084532;
	margin-bottom: 1rem;
}

.treatment-chips {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

.chip {

	color: #495057;
	padding: 0.6rem 1.2rem;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Mobile Styles - Vertical Stack */
/* Desktop: Normal side-by-side */
@media (min-width: 769px) {
	.pigmentation-grid {
		grid-template-columns: 280px 1fr;
	}


}

/* Mobile: Tabs + Content + Inactive Tabs at Bottom */
@media (max-width: 768px) {
	.pigmentation-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
		padding: 1.5rem;
		display: block;
		/* Allow reordering */
	}

	.content-column {
		padding: 14px;
	}


	.content-main h3 {
		font-size: 15px;
	}

	.tabs-column {
		flex-direction: column;
		gap: 0.5rem;
	}

	.content-column {
		margin-bottom: 1rem;
	}

	.tab-item:not(.active) {
		opacity: 0.7;
		border-color: #e9ecef;
	}

	.tab-item.active {
		order: -1;
		opacity: 1;
		margin-bottom: 1rem;
	}
}


/* Hide default active content-panel in MOBILE ONLY */
@media (max-width: 768px) {
	.content-panel.active {
		display: none !important;
		/* Hide default active */
	}

	.content-panel.active.show {
		/* Show when clicked */
		display: flex !important;
	}
}

/* Desktop: Keep normal behavior */
@media (min-width: 769px) {
	.content-panel.active {
		display: flex;
	}
}


.treatment-item-actions .btn-pill-right {
	background-color: #044533;
}


.treatment-item-actions .btn-pill {
	border: var(--btn-border) solid #004534 !important;
}

.content-main h3,
.treatment-item h4 {
	text-decoration: underline;
}



.benefits-grid {
	padding: 80px 0;
}

.benefits-header h2 {
	font-size: 48px;
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
	margin-bottom: 64px;
}

.benefits-slider-container {
	position: relative;
	overflow: hidden;
}

.benefits-grid-wrapper {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.benefit-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 32px;
	border-radius: 20px;
	background: white;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.benefit-image {
	width: 120px;
	height: 120px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.benefit-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.benefit-text h3 {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin: 0;
}

/* MOBILE: 2-column slider */
@media (max-width: 768px) {
	.benefits-grid-wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.benefits-slide {
		display: flex;
		gap: 24px;
	}

	.benefits-slide:not(.active) {
		display: none;
	}

	.slider-dots {
		display: flex;
		justify-content: center;
		gap: 12px;
		margin-top: 32px;
	}

	.dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #d1d5db;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.dot.active {
		background: #084532;
		transform: scale(1.2);
	}
}

/* Tablet: 3-column */
@media (max-width: 1024px) and (min-width: 769px) {
	.benefits-grid-wrapper {
		grid-template-columns: repeat(3, 1fr);
	}
}



.condition-div .benefit-card-enhanced {
	width: 260px;
	border-radius: 24px;
	overflow: hidden;
	/* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); */
	background: #FFEED5;
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.condition-div .card-image-section {
	position: relative;
	height: 240px;
	/* Taller for title overlay */
	overflow: hidden;
}

.condition-div .slide-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.condition-div .green-gradient-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(transparent 0%,
			rgba(8, 69, 50, 0.9) 78%,
			rgba(8, 69, 50, 0.95) 100%);
}

.condition-div .image-overlay-title {
	position: absolute;
	bottom: 32px;
	left: 24px;
	right: 24px;
	color: white;
	font-size: 20px;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 100;
	line-height: 1.2;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
	z-index: 2;
	font-family: 'Poppins', sans-serif;
}

.condition-div .card-content-section {
	padding: 25px;
	background: #FFEED5;
	display: flex;
	align-items: flex-start;
}

.overlay-description {
	color: #333;
	font-size: 13px;
	line-height: 1.55;
	margin: 0;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 100;
}

/* Mobile */
@media (max-width: 768px) {
	.condition-div .benefit-card-enhanced {
		flex: 0 0 90%;
		max-width: 340px;
		height: 360px;
	}

	.condition-div .card-image-section {
		height: 220px;
	}

	.condition-div .image-overlay-title {
		bottom: 28px;
		left: 20px;
		right: 20px;
		font-size: 18px;
	}


	.card-content-section {
		padding: 25px 25px 65px 25px !important;
		text-align: center;
	}
}


.treatments-section-container {
	padding: 40px;
	border: 2px solid black;
	border-radius: 20px;
}


/*  */



.treatments-section-one {
	padding: 60px 0;
}

.treatments-section-one .section-header {
	text-align: center;
	margin-bottom: 60px;
}

.treatments-section-one .section-title {
	font-size: 36px;
	font-weight: 300;
	line-height: 1.2;
}

/* DESKTOP: Perfect 4-grid centered */
@media (min-width: 769px) {
	.treatments-section-one .slider-track {
		display: grid !important;
		grid-template-columns: repeat(4, 260px);
		gap: 75px;
		justify-content: center;
		max-width: 1200px;
		margin: 0 auto;
		transform: none !important;
		transition: none !important;
	}

	.treatments-section-one .slide {
		width: 260px;
	}

	.treatments-section-one .slider-dots {
		display: none !important;
	}
}

/* MOBILE: Single slide carousel */
@media (max-width: 768px) {
	.treatments-section-one {
		padding: 40px 20px;
	}

	.treatments-section-one .section-header {
		margin-bottom: 40px;
	}

	.treatments-section-one .section-title {
		font-size: 28px;
	}

	/* Single slide width slider */
	.treatments-section-one .slider-track {
		display: flex !important;
		width: 400%;
		/* 4 slides total */
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		gap: 20px;
	}

	.treatments-section-one .slide {
		flex: 0 0 90%;
		/* Nearly full width */
		max-width: 260px;
		margin: 0 auto;
	}

	.treatments-section-one .slide-image {
		width: 100%;
		height: 280px;
		object-fit: cover;
		border-radius: 20px;
	}

	.treatments-section-one .slide-label {
		text-align: center;
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-top: 12px;
	}

	.treatments-section-one .slider-dots {
		display: flex !important;
		justify-content: center;
		gap: 12px;
		margin-top: 32px;
	}

	.treatments-section-one .dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #e5e7eb;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.treatments-section-one .dot.active {
		background: #084532;
		transform: scale(1.3);
	}
}

/* Tablet: 3-column */
@media (max-width: 1024px) and (min-width: 769px) {
	.treatments-section-one .slider-track {
		grid-template-columns: repeat(3, 240px);
		gap: 25px;
	}
}



.treatments-section-container {
	padding: 40px;
	border: 2px solid black;
	border-radius: 20px;
}

.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-title {
	font-size: 36px;
	font-weight: 300;
}

.section-header p {
	font-size: 16px;
	color: #666;
	max-width: 800px;
	margin: 20px auto 0;
}



/* DESKTOP: 4-grid static */
@media (min-width: 769px) {
	#sliderTrackk {
		display: grid !important;
		grid-template-columns: repeat(4, 260px);
		gap: 30px;
		justify-content: center;
		transform: none !important;
	}

	#dotsss {
		display: none !important;
	}
}

/* MOBILE: 1-slide slider */
@media (max-width: 768px) {
	.treatments-section-container {
		padding: 20px;
	}

	#sliderTrackk {
		display: flex !important;
		width: 400%;
		gap: 8px;
		transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.slide {
		flex: 0 0 25%;
	}

	#dotsss {
		display: flex !important;
		justify-content: center;
		gap: 12px;
		margin-top: 32px;
	}

	.dot {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #e5e7eb;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.dot.active {
		background: #084532;
		transform: scale(1.3);
	}

	.overlay-description {

		font-size: 12px !Important;
	}
}

.condition-div .benefit-card-enhanced {
	width: 260px;
	border-radius: 24px;
	overflow: hidden;
	/* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); */
	background: #FFEED5;
	transition: transform 0.3s ease;
}

.condition-div .card-image-section {
	position: relative;
	height: 240px;
}

.condition-div .slide-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.condition-div .green-gradient-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(transparent 0%, rgba(8, 69, 50, 0.9) 78%, rgba(8, 69, 50, 0.95) 100%);
}

.condition-div .image-overlay-title {
	position: absolute;
	bottom: 32px;
	left: 24px;
	right: 24px;
	color: white;
	font-size: 20px;
	font-weight: 100;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
	z-index: 2;
}

.condition-div .card-content-section {
	padding: 25px;
	background: #FFEED5;
}

.overlay-description {
	color: #333;
	font-size: 14px;
	margin: 0;
}


.true-zero-btn-icon {
	background-color: rgb(159 118 255) !important;
}


.transform-skin-section {
	padding: 40px 0;
	background-color: white;
}

.transform-skin-section .transform-container {
	max-width: 90%;
	margin: 0 auto;
	padding: 0 20px;
}

/* Desktop Card */
.transform-skin-section .transform-desktop {
	display: none;
}

@media (min-width: 1025px) {
	.transform-skin-section .transform-desktop {
		display: block;
	}

	.transform-skin-section .desktop-card {
		position: relative;
		height: 600px;
		border-radius: 30px;
		overflow: hidden;
		border: 4px solid #3b9dd9;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
	}

	.transform-skin-section .desktop-card .transform-image {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.transform-skin-section .transform-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: relative;
	}

	/* Add gradient overlay */
	.transform-skin-section .transform-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg,
				rgba(0, 0, 0, 0.5) 0%,
				/* Dark at top */
				rgba(0, 0, 0, 0) 50%,
				/* Transparent middle */
				rgba(0, 0, 0, 0.4) 100%
				/* Dark at bottom */
			);
		z-index: 1;
		pointer-events: none;
	}

	/* Ensure content is above gradient */
	.transform-skin-section .transform-content {
		position: relative;
		z-index: 2;
	}

	.transform-skin-section .desktop-card .transform-content {

		position: absolute;
		left: 60px;
		top: 25%;
		transform: translateY(-50%);
		z-index: 2;
		max-width: 400px;
	}

	.transform-skin-section .desktop-card .transform-content-bottom {

		position: absolute;
		left: 60px;
		top: 77%;

		transform: translateY(-50%);
		z-index: 2;
		max-width: 100%;
	}

	.transform-skin-section .circular-text {
		position: absolute;
		right: 40px;
		bottom: 90px;
		z-index: 3;
	}
}

/* Mobile Card */
.transform-skin-section .transform-mobile {
	display: block;
}

@media (min-width: 1025px) {
	.transform-skin-section .transform-mobile {
		display: none;
	}
}

.transform-skin-section .mobile-card {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	border: 3px solid #3b9dd9;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.transform-skin-section .mobile-card .transform-image {
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
}

.transform-skin-section .mobile-card .transform-content {
	padding: 30px 20px;
	position: relative;
	z-index: 2;
}

/* Shared Styles */
.transform-skin-section .transform-card {
	background: rgba(100, 100, 100, 0.7);
	position: relative;
}

.transform-skin-section .transform-content {
	color: white;
}

.transform-skin-section .transform-title {
	font-size: 44px;
	font-family: 'esthatic' !important;
	font-weight: 275;
	margin: 0 0 10px 0;

	letter-spacing: 2px;
}

.transform-skin-section .transform-title p {

	font-family: 'esthatic' !important;
}

.transform-skin-section .transform-subtitle {
	font-size: 32px;
	font-style: italic;
	margin: 0 0 40px 0;
	font-family: 'esthatic';
	font-weight: 275;
}

.transform-skin-section .transform-subtitle em {
	font-style: italic;
	font-weight: 400;
}

.transform-skin-section .treatable-areas {
	margin-top: 100px;
}

.transform-skin-section .area-label {
	color: white;
	display: block;
	font-size: 16px;
	margin-bottom: 15px;
	letter-spacing: 1px;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 100;
	opacity: 0.9;
}

.transform-skin-section .area-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.transform-skin-section .area-btn {
	padding: 10px 24px;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	background: transparent;
	color: white;
	border-radius: 25px;
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: 'Poppins', system-ui, sans-serif;
}

.transform-skin-section .area-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: white;
}

.transform-skin-section .area-btn:active {
	background: rgba(255, 255, 255, 0.25);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
	.transform-skin-section {
		padding: 20px 0;
	}

	.transform-skin-section .transform-title {
		font-size: 36px;
	}

	.transform-skin-section .transform-subtitle {
		font-size: 26px;
	}

	.transform-skin-section .mobile-card .transform-image {
		height: 350px;
	}

	.transform-skin-section .mobile-card .transform-content {
		padding: 25px 20px;
	}
}

@media (max-width: 640px) {
	.transform-skin-section .transform-skin-section {
		padding: 40px 0;
	}

	.transform-skin-section .transform-title {
		font-size: 28px;
		margin-bottom: 5px;
		z-index: 9999;
		position: relative;
	}

	.transform-skin-section .transform-subtitle {
		font-size: 20px;
		margin-bottom: 25px;
	}

	.transform-skin-section .mobile-card {
		border-radius: 18px;
		border-width: 2px;
	}

	.transform-skin-section .mobile-card .transform-image {
		height: 100%;
	}

	.transform-skin-section .mobile-card .transform-content {
		position: absolute;
		left: 0px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		max-width: 400px;
	}

	.transform-skin-section .area-label {
		font-size: 13px;
		margin-bottom: 12px;
	}

	.transform-skin-section .area-buttons {
		gap: 8px;
	}

	.transform-skin-section .area-btn {
		padding: 0px 4px;
		font-size: 9px;

	}


	.transform-skin-section .transform-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%,
				/* Dark at top */
				rgba(0, 0, 0, 0) 50%,
				/* Transparent middle */
				rgba(0, 0, 0, 0.4) 100%
				/* Dark at bottom */
			);
		z-index: 1;
		pointer-events: none;
	}
}


.chemical-peels-section {
	padding: 60px 0;
	background-color: white;

}

.chemical-peels-section::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,
			rgba(61, 157, 217, 0.08) 0%,
			rgba(61, 157, 217, 0.04) 100%);
	pointer-events: none;
	z-index: -1;
}

.chemical-peels-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Main Card */
.chemical-peels-card {
	display: flex;
	align-items: center;
	gap: 70px;

}

/* Gradient Smudge Background */
.chemical-peels-card::before {
	content: '';
	position: absolute;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle at center, rgba(218, 165, 107, 0.12) 0%, transparent 70%);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
	bottom: -100px;
	right: -150px;
}

.chemical-peels-image-wrapper {
	flex: 0 0 45%;
	position: relative;
	z-index: 1;
	box-shadow: 20px 0 40px rgba(255, 248, 243, 0.6), 40px 10px 60px rgba(253, 248, 243, 0.4), inset 8px 0 20px rgba(255, 255, 255, 0.3);

}

.chemical-peels-image {
	width: 100%;
	height: auto;
	border-radius: 20px;
	object-fit: cover;
	box-shadow: 0 20px 50px rgba(61, 157, 217, 0.15);
	z-index: 999;
	position: relative;
}

.chemical-peels-content {
	flex: 1;
	position: relative;
	z-index: 1;
}

.chemical-peels-title {
	font-size: 30px;
	font-weight: 275;
	color: #084532;
	font-family: 'Poppins', system-ui, sans-serif;
	margin: 0 0 8px 0;
	letter-spacing: 0.5px;
	line-height: 1.3;
}

.chemical-peels-subtitle {
	font-size: 50px;
	font-style: italic;
	font-weight: 275;
	color: #084532;
	font-family: 'esthatic';
	margin: 0 0 35px 0;
	letter-spacing: 1px;
	line-height: 1.2;
}

.chemical-peels-description {
	font-size: 16px;
	line-height: 1.8;
	color: #555;
	font-family: 'Poppins', system-ui, sans-serif;
	margin: 0 0 22px 0;
	font-weight: 400;
	letter-spacing: 0.3px;
}

.chemical-peels-description:last-child {
	margin-bottom: 0;
}

/* Tablet - 1024px */
@media (max-width: 1024px) {
	.chemical-peels-section {
		padding: 60px 0;
	}

	.chemical-peels-card {
		gap: 50px;
		padding: 45px;
		border-radius: 20px;
	}

	.chemical-peels-card::before {
		width: 300px;
		height: 300px;
		bottom: -80px;
		right: -120px;
	}

	.chemical-peels-image-wrapper {
		flex: 0 0 50%;
	}

	.chemical-peels-title {
		font-size: 26px;
	}

	.chemical-peels-subtitle {
		font-size: 40px;
		margin-bottom: 30px;
	}

	.chemical-peels-description {
		font-size: 15px;
		line-height: 1.7;
		margin-bottom: 20px;
	}
}

/* Mobile - 768px (Stack Vertically, Alternating Order) */
@media (max-width: 768px) {
	.chemical-peels-section {
		padding: 50px 0;
	}

	.chemical-peels-card {
		flex-direction: column-reverse;
		gap: 30px;
		padding: 35px 20px;
		border-radius: 18px;
		border-width: 2px;
	}

	.chemical-peels-image-wrapper {
		flex: 1 1 100%;
	}

	.chemical-peels-content {
		flex: 1 1 100%;
	}

	.chemical-peels-card::before {
		width: 250px;
		height: 250px;
		top: -80px;
		right: auto;
		bottom: auto;
		left: -100px;
	}

	.chemical-peels-title {
		font-size: 24px;
	}

	.chemical-peels-subtitle {
		font-size: 36px;
		margin-bottom: 25px;
	}

	.chemical-peels-description {
		font-size: 14px;
		line-height: 1.7;
		margin-bottom: 18px;
	}
}

/* Small Mobile - 640px */
@media (max-width: 640px) {
	.chemical-peels-section {
		padding: 40px 0;
	}

	.chemical-peels-card {
		padding: 25px 15px;
		gap: 20px;
	}

	.chemical-peels-image {
		border-radius: 16px;
		border-width: 2px;
	}

	.chemical-peels-title {
		font-size: 22px;
		margin-bottom: 6px;
	}

	.chemical-peels-subtitle {
		font-size: 32px;
		margin-bottom: 20px;
	}

	.chemical-peels-description {
		font-size: 13px;
		margin-bottom: 15px;
	}

	.chemical-peels-card::before {
		width: 180px;
		height: 180px;
	}
}



/*  */



.benefits-peels-section {
	padding: 60px 0;
	background-color: white;
}

.benefits-peels-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.benefits-peels-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 60px;
}

.benefits-peels-title {
	font-size: 52px;
	font-weight: 300;
	color: #084532;
	font-family: 'Poppins', system-ui, sans-serif;
	margin: 0;
	line-height: 1.2;
	flex: 1;
}

.benefits-peels-title em {
	font-style: italic;
	font-family: 'esthatic';
	font-weight: 400;
	font-size: 56px;
}

.benefits-peels-logo {
	flex-shrink: 0;
	position: relative;
	width: 180px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.circular-text-svg {
	position: absolute;
	width: 180px;
	height: 180px;
}

.logo-center {
	position: relative;
	z-index: 2;
	text-align: center;
}

.logo-text-main {
	font-size: 48px;
	font-weight: 700;
	color: #d4a574;
	font-family: 'Poppins', sans-serif;
	letter-spacing: 2px;
	margin-bottom: 2px;
}

.logo-text-sub {
	font-size: 9px;
	color: #084532;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.4;
}

/* Desktop Grid */
.benefits-peels-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px;
}

.benefit-peels-item {
	padding: 0;
	text-align: left;
}

.benefit-peels-header-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.benefit-icon-svg {
	flex-shrink: 0;
}

.benefit-peels-heading {
	font-size: 18px;
	font-weight: 600;
	color: #084532;
	font-family: 'Poppins', sans-serif;
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 2px solid #084532;
	flex: 1;
}

.benefit-peels-text {
	font-size: 14px;
	color: #666;
	line-height: 1.8;
	font-family: 'Poppins', sans-serif;
	margin: 0;
	padding: 0px 20px 0px 30px;
}

/* Mobile Slider */
.benefits-peels-slider-wrapper {
	display: none;
}

/* Desktop Grid */
.benefits-peels-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px;
}

/* Tablet - Stack to 2 columns */
@media (max-width: 1024px) {
	.benefits-peels-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}


	.benefits-peels-logo {
		display: none;
	}

	.benefits-peels-title {
		margin-bottom: 50px !important;
	}
}

/* Mobile - Stack One by One */
@media (max-width: 768px) {
	.benefits-peels-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}



	.benefit-peels-heading {
		font-size: 16px;
	}

	.benefit-peels-text {
		font-size: 13px;
		line-height: 1.7;
	}
}

@media (max-width: 480px) {
	.benefits-peels-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.benefit-peels-item {
		padding: 20px;
		border-radius: 12px;
	}

	.benefit-peels-heading {
		font-size: 15px;
	}

	.benefit-peels-text {
		font-size: 12px;
	}
}



@media (min-width: 923px) {

	.treatment-before .ba-wrapper {
		width: 80% !important;
	}

}


.treatment-before {
	padding: 60px 0;
}


.treatment-before .testimonial-content {
	padding-left: 0px !important;
	text-align: center;
}


.treatment-before {
	flex-direction: row;
	gap: 0;
	background-image: url("../images/Rectangle-161125194-1024x191.webp");
	background-position: center center;
	background-repeat: repeat-x;
	background-size: auto;
	background-color: white;
}



.treatment-before .scar-delete-h2-full {
	margin-top: -10px;
}



.treatments-section-one-1 {
	flex-direction: row;
	gap: 0;
	background-image: url(../images/Rectangle-161125194-1024x191.webp);
	background-position: center center;
	background-repeat: repeat-x;
	background-size: auto;
	background-color: white;
}



.conditionsfaq h2 {

	font-family: 'esthatic-bold', serif;
	font-size: clamp(36px, 6vw, 52px);
	font-weight: 300;
	line-height: 1.1;
	margin-bottom: 3rem;
	color: #004534;
}



.absolute {
	position: absolute;
}

.bottom-0 {
	bottom: 0;
}

.right-\[-2rem\] {
	right: -2rem;
}

.z-0 {
	z-index: 0;
}

.size-\[300px\] {
	height: 300px;
	width: 300px;
}

.left-right-with-graphic__blob {
	background: var(--E1A790---Rosy-2, #e1a790);
	border-radius: 9999px;
	filter: blur(40px);
}

.left-\[-2rem\] {
	left: -2rem;
}


.glow-change-section {
	margin-bottom: 150px;
	background-color: #ffffff;
}

.glow-change-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.glow-change-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

/* Left side */
.glow-change-left {
	flex: 1.1;
}

.glow-change-title {
	font-family: 'codelight', system-ui, sans-serif;
	font-weight: 100;
	font-size: 50px;
	letter-spacing: 0px;
	line-height: 1.25;
	color: #000;
	text-transform: uppercase;
	margin: 0 0 30px 0;
}

.glow-change-description {
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.9;
	color: #777777;
	max-width: 430px;
	margin: 0 0 40px 0;
}

/* Bullet points */
.glow-change-points {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.glow-point {
	display: flex;
	align-items: center;
	gap: 18px;
}

.glow-icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #ff2b6c;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	box-shadow: 0 12px 25px rgba(255, 43, 108, 0.45);
}

.glow-text {
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #222222;
}

/* Right side */
.glow-change-right {
	flex: 1;
	display: flex;
	justify-content: center;
}

.glow-image-wrapper {
	position: relative;
	width: 360px;
	height: 430px;
}

.glow-image-glow {
	position: absolute;
	inset: -20px;
	/* Extend 20px beyond image */
	border-radius: 30px;
	/* Larger radius for spread */
	background:
		radial-gradient(circle 189px at 18% 51%, rgba(255, 43, 108, 0.7) 0%, transparent 50%),
		radial-gradient(circle 100px at 84% 55%, rgba(255, 43, 108, 0.6) 0%, transparent 50%),
		radial-gradient(circle 100px at -123% 80%, rgba(255, 43, 108, 0.5) 0%, transparent 50%),
		radial-gradient(circle 148px at 97% 60%, rgba(255, 68, 130, 0.4) 0%, transparent 121%);
	filter: blur(12px);
	/* Stronger blur for spread */
	z-index: 1;
	animation: glowPulse 2s ease-in-out infinite alternate;
}

/* Add pulsing animation */
@keyframes glowPulse {
	0% {
		opacity: 0.8;
		transform: scale(1);
	}

	100% {
		opacity: 1;
		transform: scale(1.05);
	}
}


.glow-main-image {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
	display: block;
}

/* Tablet */
@media (max-width: 1024px) {
	.glow-change-wrapper {
		gap: 40px;
	}

	.glow-change-title {
		font-size: 40px;
		letter-spacing: 4px;
	}

	.glow-image-wrapper {
		width: 320px;
		height: 380px;
	}
}

/* Mobile Layout */
@media (max-width: 768px) {
	.glow-change-wrapper {
		flex-direction: column;
		gap: 40px;
		align-items: center;
	}

	.glow-change-section {
		margin-bottom: 0px;
	}

	.glow-change-left {
		text-align: center;
		order: 2;
		/* Title & text second */
	}

	.glow-change-right {
		order: 1;
		/* Image first */
	}

	/* 2 points first line, 1 point second line */
	.glow-change-points {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		max-width: 400px;
	}

	.glow-point:nth-child(1),
	.glow-point:nth-child(2) {
		flex: 1 1 45%;
	}

	.glow-point:nth-child(3) {
		flex: 1 1 100%;
		margin-top: 10px;
	}

	.glow-change-title {
		font-size: 28px;
		letter-spacing: 2px;
		margin-bottom: 25px;
	}

	.glow-change-description {
		font-size: 13px;
		max-width: 90%;
		margin-bottom: 30px;
	}

	.glow-text {
		font-size: 10px;
	}

	.glow-change-section {
		padding: 60px 0px 100px 0px;
		background-color: #ffffff;
	}


	@media (max-width: 768px) {
		.truezero .hero-grid {
			gap: 10px;
		}
	}



}

.section-title.truezero-h2-full {
	display: flex;
	align-items: baseline;
	/* Align image with text baseline */
	gap: 8px;
	/* Space between text & image */
	line-height: 1.2;
	font-size: 50px;
	font-family: 'Poppins-Light';

	white-space: nowrap;
	/* Prevent wrapping */
	justify-content: center;
}

.section-title img {
	display: inline-block;
	/* Inline with text */
	vertical-align: baseline;
	/* Perfect text alignment */
	margin: 0;
	/* Remove default margins */
	line-height: 1;
	width: 25%;
}


/* Small mobile */
@media (max-width: 480px) {
	.glow-change-points {
		gap: 15px;
	}

	.section-title img {
		width: 35%;
	}

	.glow-point:nth-child(1),
	.glow-point:nth-child(2) {
		flex: 1 1 40%;
	}

	.glow-point:nth-child(3) {
		flex: 1 1 100%;
	}

	.glow-icon {
		width: 38px;
		height: 38px;
		font-size: 16px;
	}


	.glow-point {
		justify-content: center;
	}
}


.facials-video .video-container {
	box-shadow: 20px 0 40px rgb(239 34 96 / 12%), 40px 10px 60px rgba(253, 248, 243, 0.4), inset 8px 0 20px rgba(255, 255, 255, 0.3) !important;

}



.true-zero-experience {
	padding: 60px 0px 0px 0px;
}

.true-zero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Perfect 50/50 equal columns */
	gap: 60px;
	align-items: start;
	/* Top alignment */
	max-width: 1200px;
	margin: auto;
	padding: 0 20px;
	/* Side padding only */
}



.vivid-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Perfect 50/50 equal columns */
	gap: 60px;
	align-items: start;
	/* Top alignment */
	max-width: 90%;
	margin: auto;
	padding: 0 20px;
	/* Side padding only */
}

.experience-left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Perfect vertical center */
	height: 100%;
	/* Full grid height */
	padding: 0 !important;
}

.experience-text {
	flex: 1;
	/* Take available space */
	display: flex;
	align-items: center;
	/* Center text inside */
}

.experience-text p {
	margin: 0;
	padding: 0;
}


.experience-main-title {
	font-family: 'codelight', serif;
	font-size: 52px;
	font-weight: 100;
	color: #2c7a8f;
	line-height: 1.1;
	letter-spacing: 0.02em;
	margin: 0 0 40px 0;
	text-transform: uppercase;
}

.experience-subtitle {
	font-family: 'HeadingNowTrial';
	font-size: 50px;
	font-weight: 600;
	color: #000;
	margin: 0 0 25px 0;
	letter-spacing: 1px;
}

.experience-title {
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 40px;
	font-weight: 100;
	color: #000;
	margin: 0 0 25px 0;
	letter-spacing: 1px;
	text-align: center;
}

.experience-text p {
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	line-height: 1.8;
	color: #666;
	margin: 0;
}

.experience-right {
	padding: 0;
	/* Zero padding */
	position: relative;
}

.doctor-container {
	position: relative;
	display: flex;
	justify-content: center;
}

.doctor-badge {
	position: absolute;
	top: 25px;
	right: 25px;
	background: linear-gradient(135deg, #2c7a8f, #3d9dd9);
	color: white;
	padding: 14px 28px;
	border-radius: 35px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	z-index: 2;
	box-shadow: 0 10px 30px rgba(44, 122, 143, 0.4);
}

.doctor-image {
	width: 50%;
	object-fit: cover;
	border-radius: 25px;
	display: block;
}

/* Tablet */
@media (max-width: 1024px) {
	.true-zero-grid {
		gap: 50px;
		padding: 0 15px;
	}

	.experience-main-title {
		font-size: 46px;
	}

	.doctor-image {
		height: 420px;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.true-zero-experience {
		margin-top: 80px;
	}

	.true-zero-grid {
		grid-template-columns: 1fr;
		/* Stack single column */
		gap: 40px;
		max-width: 100%;
		padding: 0 15px;
	}

	.experience-main-title {
		font-size: 38px;
		text-align: center;
	}

	.experience-subtitle {
		text-align: center;
	}

	.experience-text {
		text-align: center;
	}

	.doctor-badge {
		position: static;
		margin: 0 auto 20px;
		display: inline-block;
	}

	.doctor-image {
		height: 350px;
		border-radius: 20px;
	}
}

/* Small mobile */
@media (max-width: 480px) {
	.true-zero-grid {
		gap: 30px;
		padding: 0 10px;
	}

	.experience-main-title {
		font-size: 32px;
	}

	.doctor-image {
		width: 100%;
		height: 100%
	}
}


.vivid-hero-section {
	background: linear-gradient(135deg, #FFF8ED 0%, #FFF2E5 100%);
	padding: 120px 0;
	position: relative;
	overflow: hidden;
}

.vivid-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.vivid-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.vivid-left {
	padding-right: 40px;
}

.vivid-title {
	font-family: 'codelight', sans-serif;
	/* Your thin font */
	font-size: clamp(64px, 12vw, 120px);
	font-weight: 300;
	line-height: 0.9;
	color: #000;
	margin: 0 0 20px 0;
	letter-spacing: -0.02em;
}

.vivid-accent {
	color: #FF6B35 !important;
	/* Orange accent */
	font-weight: 400;
}

.vivid-subtitle {
	font-family: 'Poppins', sans-serif;
	font-size: clamp(32px, 6vw, 56px);
	font-weight: 600;
	color: #FF6B35;
	margin: 0 0 60px 0;
	line-height: 1;
}

.btn-appointment {
	background: #FF6B35;
	color: white;
	padding: 20px 40px;
	font-size: 18px;
	font-weight: 600;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 12px 30px rgba(255, 107, 53, 0.3);
}

.btn-appointment:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 40px rgba(255, 107, 53, 0.4);
}

.vivid-right {
	position: relative;
}

.vivid-model-wrap {
	width: 100%;
	height: 500px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
}

.vivid-model-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* RESPONSIVE */
@media (max-width: 768px) {
	.vivid-grid {
		grid-template-columns: 1fr;
		gap: 50px;
		text-align: center;
	}

	.vivid-left {
		padding-right: 0;
		order: 1;
	}

	.vivid-right {
		order: 2;
	}

	.vivid-model-wrap {
		height: 350px;
	}

	.btn-appointment {
		padding: 16px 32px;
		font-size: 16px;
	}

	.testimonial-container {
		grid-template-columns: unset !important;
	}

	.vivid-grid,
	.true-zero-grid {

		margin-left: 0% !important;
		margin-right: 0% !important;
	}


}

.vivid-grid {
	margin-right: 5%;
}

.vivid-grid,
.true-zero-grid {
	gap: unset !important;
}

.true-zero-grid {
	margin-left: 15%;
}

@media (max-width: 480px) {
	.vivid-hero-section {
		padding: 80px 0;
	}

	.vivid-model-wrap {
		height: 280px;
	}

}



.vivid-above-footer {
	background: linear-gradient(135deg, #FFF8ED 0%, #FFF2E5 100%);
}

.vivid-strip-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.vivid-strip-grid {
	display: flex;
	gap: 60px;
	align-items: center;
	justify-content: space-between;
}

.vivid-text {
	flex: 1;
	padding-right: 30px;
}

.vivid-main-title {
	font-family: 'HeadingNowTrial';
	font-size: clamp(56px, 10vw, 100px);
	font-weight: 300;
	color: #000;
	margin: 0 0 16px 0;
	line-height: 0.95;
	letter-spacing: -0.015em;
}

.vivid-orange {
	color: #FF6B35 !important;
	font-weight: 400;
}

.vivid-sub-title {
	font-family: 'Poppins', sans-serif;
	font-size: clamp(32px, 6vw, 52px);
	font-weight: 700;
	color: #FF6B35;
	margin: 0 0 40px 0;
	line-height: 1;
}

.vivid-cta-btn {
	background: #FF6B35;
	color: white;
	padding: 20px 42px;
	font-size: 18px;
	font-weight: 600;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	box-shadow: 0 15px 35px rgba(255, 107, 53, 0.35);
	letter-spacing: 0.5px;
}

.vivid-cta-btn:hover {
	transform: translateY(-4px);
	box-shadow: 0 25px 50px rgba(255, 107, 53, 0.45);
}

.vivid-image-side {
	flex: 1;
	max-width: 480px;
}

.vivid-model-photo {
	width: 100%;
	height: 420px;
	object-fit: cover;
}

/* RESPONSIVE - Flex stack */
@media (max-width: 768px) {
	.vivid-strip-grid {
		flex-direction: column;
		gap: 0px;
		text-align: center;
	}

	.vivid-text {
		padding-right: 0;
		order: 1;
	}

	.vivid-image-side {
		order: 2;
	}

	.vivid-model-photo {
		height: 320px;
	}
}

@media (max-width: 480px) {
	.vivid-above-footer {
		padding: 60px 0 0px;
	}

	.vivid-model-photo {
		height: 260px;
	}

	.vivid-cta-btn {
		padding: 16px 32px;
		font-size: 16px;
	}
}



/* Base Section Styles */
.tune-aesthetics-section {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	padding: 80px 20px 120px;
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
	color: #666666;
	overflow: hidden;
	/* Clips the background wave */
}

.tune-container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 2;
}

/* Background Wave Styling */
.tune-bg-wave {
	position: absolute;
	top: 20%;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	opacity: 0.8;
}

.tune-bg-wave svg {
	width: 100%;
	height: 100%;
}

/* Header Section */
.tune-header {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 60px;
}

.tune-title.aboutus {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif !important;
	font-size: 38px;
	font-weight: 400;
	color: #0e4032;
	/* Dark Green */
	margin-bottom: 24px;
	position: relative;
	display: inline-block;
}

.tune-description {
	font-size: 16px;
	line-height: 1.7;
	color: #7a7a7a;
	font-weight: 300;
}

.tune-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* Star Icons */
.tune-star-icon {
	font-size: 24px;
	position: absolute;
}

.top-star {
	top: -5px;
	right: -25px;
	color: #0e4032;
	font-size: 20px;
}

/* Content/Circles Wrapper */
.tune-content-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-top: 20px;
}

/* Circle Common Styles */
.tune-circle {
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 40px;
	aspect-ratio: 1 / 1;
	/* Maintains perfect circle */
	flex-shrink: 0;
	position: relative;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Green Circle Specifics */
.tune-circle-green {
	background-color: #0e4032;
	color: #ffffff;
	width: 420px;
	height: 420px;
	z-index: 5;
}

.tune-circle-green h3 p {
	font-family: 'Sarlotte', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 56px;
	font-weight: 400;
	line-height: 1;
	margin: 0;
}

.circle-star-top {
	top: 80px;
	right: 100px;
	color: #ffffff;
	font-size: 32px;
}

/* Beige Circle Specifics */
.tune-circle-beige {
	background-color: #ffe8d1;
	color: #666666;
	width: 420px;
	height: 420px;
	margin-left: -60px;
	/* Overlap effect */
	z-index: 10;
	padding: 50px;
}

.tune-circle-beige h4 {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 32px;
	color: #0e4032;
	margin: 0 0 20px 0;
	font-weight: 400;
}

.tune-circle-beige p {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
	color: #7a7a7a;
}

.circle-star-bottom {
	bottom: 40px;
	right: 80px;
	color: #ffffff;
	font-size: 40px;
}

@media (min-width: 1024px) {

	.tune-circle-green h3 p {
		font-size: 65px;
		text-align: justify;
	}

}

/* Responsive Design */
@media (max-width: 1024px) {
	.tune-circle-green {
		width: 400px;
		height: 400px;
	}

	.tune-circle-green h3 {
		font-size: 42px;
	}

	.tune-circle-beige {
		width: 350px;
		height: 350px;
	}
}

@media (max-width: 768px) {
	.tune-header {
		padding: 0 15px;
	}

	.tune-title {
		font-size: 30px;
	}

	.tune-content-wrapper {
		flex-direction: column;
		gap: 20px;
	}

	.tune-circle-green {
		width: 340px;
		height: 340px;
	}

	.tune-circle-green h3 {
		font-size: 36px;
	}

	.tune-circle-beige {
		width: 340px;
		height: 340px;
		margin-left: 0;
		/* Remove negative margin on mobile */
		margin-top: -20px;
		/* Vertical overlap instead */
	}

	.circle-star-top {
		top: 20px;
		right: 60px;
	}

	.circle-star-bottom {
		bottom: 30px;
		right: 60px;
	}

	.tune-bg-wave {
		display: none;
	}
}

@media (max-width: 480px) {

	.tune-circle-green,
	.tune-circle-beige {
		width: 300px;
		height: 300px;
		padding: 20px;
	}

	.tune-circle-green h3 {
		font-size: 32px;
	}

	.tune-circle-beige h4 {
		font-size: 26px;
	}

	.tune-circle-beige p {
		font-size: 13px;
	}
}



/* Section Base */
.fs-section-wrapper {
	background-color: #fffbf5 !important;
	padding: 80px 20px;
	font-family: 'Lato', sans-serif;
	color: #666;
	box-sizing: border-box;
	width: 100%;
}

.fs-content-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Header Styles */
.fs-header-block {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 60px;
}

.fs-main-heading {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 48px;
	color: #0e4032;
	font-weight: 300;
	margin-bottom: 24px;
	line-height: 1.2;
	margin-top: 0;
}

.fs-sub-description {
	font-size: 16px;
	line-height: 1.6;
	color: #7a7a7a;
	font-weight: 400;
	margin: 0;
}

/* Grid Layout */
.fs-cards-layout {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
}

/* Card Styles */
.fs-profile-card {
	flex: 1;
	min-width: 280px;
	max-width: 350px;
	border: 1px solid #8fad9d;
	border-radius: 30px;
	padding: 40px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: transparent;
	box-sizing: border-box;
	transition: transform 0.3s ease;
}

.fs-profile-card:hover {
	transform: translateY(-5px);
}

/* Image/Avatar Styles */
.fs-avatar-frame {
	width: 80%;
	height: 100%;
	border-radius: 50%;
	margin-bottom: 30px;
	margin-top: -70px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.fs-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Name Styles */
.fs-profile-name {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 24px;
	color: #4a6b5d;
	font-weight: 300;
	margin: 0;
	text-align: center;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
	.fs-main-heading {
		font-size: 42px;
	}

	.fs-cards-layout {
		gap: 20px;
	}
}

@media (max-width: 768px) {
	.fs-header-block {
		margin-bottom: 40px;
	}

	.fs-main-heading {
		font-size: 36px;
	}

	.fs-profile-card {
		min-width: 100%;
		max-width: 400px;
		margin-top: 10px
	}

	/* .fs-avatar-frame {
        width: 150px;
        height: 150px;
    } */

	.fs-profile-name {
		font-size: 22px;
	}
}



/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500&family=Playfair+Display:wght@400;500&display=swap');

/* Section Base */
.th-section-wrapper {
	background-color: #ffffff;
	padding: 80px 20px;
	font-family: 'Lato', sans-serif;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}

.th-grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 30px;
	max-width: 1200px;
	width: 100%;
}

/* 1. Main Content Block */
.th-content-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 20px;
}

.th-headline {
	font-family: 'Lato', sans-serif;
	/* Visually matches the sans-serif headline in image */
	font-size: 42px;
	line-height: 1.2;
	color: #0e4032;
	font-weight: 500;
	margin: 0 0 24px 0;
}

.th-description {
	font-size: 14px;
	line-height: 1.6;
	color: #888;
	margin: 0 0 40px 0;
	max-width: 300px;
}

/* Button */
.th-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	border: 1px solid #0e4032;
	border-radius: 50px;
	padding: 5px 5px 5px 24px;
	width: fit-content;
	transition: all 0.3s ease;
	max-width: 240px;
}

.th-cta-text {
	color: #555;
	font-size: 15px;
	font-weight: 400;
	margin-right: 15px;
}

.th-cta-icon {
	background-color: #0e4032;
	color: white;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 2. Tall Cards */
.th-card-tall {
	border-radius: 30px;
	padding: 40px 30px;
	height: 380px;
	box-sizing: border-box;
	position: relative;
	border: 1px solid #ddd;
	display: flex;
	flex-direction: column;
}

/* Double Border Effect for first card */
.th-card-double-border::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	right: 10px;
	bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 30px;
	z-index: 0;
	pointer-events: none;
}

.th-card-double-border {
	background: white;
	z-index: 1;
	/* Clean up the overlap */
	margin-left: 10px;
	margin-top: 10px;
	height: calc(380px - 10px);
	/* Adjust height to match alignment */
}

.th-card-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.th-stat-number-large {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 64px;
	color: #0e4032;
	line-height: 1;
	margin-bottom: 20px;
}

.th-stat-label-large {
	font-size: 20px;
	color: #4a6b5d;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

/* Chart Card */
.th-card-chart {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 60px;
	/* Push bars up slightly */
}

.th-chart-container {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	height: 200px;
	width: 100%;
	justify-content: center;
}

.th-bar {
	width: 25px;
	background-color: #ddd;
	border-radius: 4px;
}

/* 3. Wide Bottom Cards */
.th-card-wide {
	border: 1px solid #ccc;
	border-radius: 24px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 160px;
}

.th-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.th-bullet {
	color: #0e4032;
	font-size: 24px;
	margin-right: 10px;
}

.th-stat-number-small {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 32px;
	color: #0e4032;
	flex-grow: 1;
}

.th-icon-circle {
	width: 45px;
	height: 45px;
	background-color: #ddd;
	border-radius: 50%;
}

.th-stat-label-small {
	font-size: 14px;
	color: #0e4032;
	font-weight: 500;
	margin: 0;
	padding-left: 15px;
	/* Align with text not bullet */
}

/* Responsive Design */
@media (max-width: 1024px) {
	.th-grid-container {
		grid-template-columns: 1fr 1fr;
		/* 2 Column Grid for Tablet */
	}

	.th-content-block {
		grid-column: span 2;
		margin-bottom: 30px;
		align-items: center;
		text-align: center;
		padding-right: 0;
	}

	.th-description {
		max-width: 600px;
	}

	.th-headline {
		font-size: 36px;
	}

	/* Make bottom cards wrap nicely */
	.th-card-wide {
		grid-column: span 1;
	}

	/* Last card spans full width or naturally flows */
	.th-card-wide:last-child {
		grid-column: span 2;
		/* Optional: Center last item */
		width: 50%;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.th-grid-container {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.th-card-tall {
		height: 300px;
		width: 100%;
	}

	.th-card-double-border {
		margin-left: 5px;
		width: calc(100% - 10px);
	}

	.th-card-wide {
		width: 100%;
		min-height: 140px;
	}

	.th-card-wide:last-child {
		width: 100%;
	}

	.th-headline {
		font-size: 32px;
	}
}


/* Main Section */
.doc-slider-section {
	background-color: #fffbf5 !important;
	padding: 80px 0;
	font-family: 'Lato', sans-serif;
	width: 100%;
	overflow: hidden;
	/* Prevents body scrollbar jitter */
	position: relative;
}

.doc-wrapper {
	max-width: 1400px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

/* Typography */
.doc-header {
	margin-bottom: 50px;
	padding: 0 20px;
}

.doc-title {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 48px;
	color: #0e4032;
	margin: 0 0 10px;
	font-weight: 400;
}

.doc-subtitle {
	font-size: 18px;
	color: #8fa398;
	margin: 0;
	font-weight: 300;
}

/* Carousel Container (Mask) */
.doc-carousel-container {
	width: 100%;
	height: 450px;
	/* Fixed height to prevent layout shifts */
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
	/* Initial alignment */
}

/* Track (Moving Part) */
.doc-track {
	display: flex;
	align-items: center;
	gap: 40px;
	/* Space between cards */
	position: absolute;
	left: 50%;
	/* Center the track starting point */
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	/* Smooth Slide */
	will-change: transform;
}

/* Card Styles */
.doc-card {
	width: 280px;
	height: 340px;
	background: #fff;
	border-radius: 30px;
	flex-shrink: 0;
	position: relative;
	transition: all 0.5s ease;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
	opacity: 0.6;
	transform: scale(0.9);
}

.doc-card-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	box-sizing: border-box;
}

.doc-img-box {
	width: 100%;
	height: 220px;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 15px;
	position: relative;
	z-index: 1;
}

.doc-img-box img {
	width: 80%;
	height: 100%;
	margin: auto;
	object-fit: cover;
	object-position: top;
	transition: all 0.5s ease;
}

.doc-content {
	text-align: center;
	width: 100%;
}

.doc-name {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 20px;
	color: #0e4032;
	margin: 5px 0;
}

.doc-role {
	font-size: 14px;
	color: #8fa398;
	margin: 0;
}

.doc-social {
	display: none;
	/* Hidden on inactive */
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	text-decoration: none;
	color: #0077b5;
	font-weight: 700;
	font-size: 14px;
}

.doc-icon {
	width: 24px;
	height: 24px;
	background: #0077b5;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	font-size: 13px;
}

/* ACTIVE STATE */
.doc-card.active {
	width: 320px;
	height: 380px;
	background: #7ca996;
	/* Green BG */
	opacity: 1;
	transform: scale(1);
	box-shadow: 0 25px 50px rgba(124, 169, 150, 0.4);
	z-index: 10;
}

.doc-card.active .doc-card-inner {
	justify-content: flex-end;
	/* Push content down */
	padding-bottom: 25px;
}

.doc-card.active .doc-img-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	z-index: 0;
	margin: 0;
}

.doc-card.active .doc-img-box img {
	height: 80%;
	/* Partial fill */
	background: #7ca996;
}

/* Floating White Box */
.doc-card.active .doc-content {
	background: #fff;
	width: 90%;
	padding: 15px;
	border-radius: 20px;
	z-index: 2;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.doc-card.active .doc-social {
	display: flex;
}

/* Dots */
.doc-dots {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.doc-dot {
	width: 12px;
	height: 12px;
	background: #d1d5db;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	transition: 0.3s;
}

.doc-dot.active {
	background: #0e4032;
	transform: scale(1.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.doc-carousel-container {
		height: 400px;
	}

	.doc-card {
		width: 260px;
		height: 320px;
	}

	.doc-card.active {
		width: 280px;
		height: 360px;
	}

	.doc-title {
		font-size: 32px;
	}
}




/* Section Base */
.cl-section {
	background-color: #fffbf5;
	padding: 80px 0;
	font-family: 'Lato', sans-serif;
	overflow: hidden;
	/* Prevents scrollbars */
	width: 100%;
	position: relative;
}

.cl-container {
	max-width: 1400px;
	margin: 0 auto;
	text-align: center;
}

/* Header */
.cl-header {
	margin-bottom: 50px;
	padding: 0 20px;
}

.cl-title {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 48px;
	color: #0e4032;
	margin: 0 0 10px;
	font-weight: 400;
}

.cl-subtitle {
	font-size: 18px;
	color: #8fa398;
	margin: 0;
	font-weight: 300;
}

/* Carousel Window (Mask) */
.cl-carousel-window {
	width: 100%;
	height: 450px;
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
}

/* Track (Moving Part) */
.cl-track {
	display: flex;
	align-items: center;
	gap: 40px;
	/* Gap between cards */
	position: absolute;
	left: 50%;
	/* Start from center */
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
}

/* Card Styles */
.cl-card {
	width: 280px;
	height: 340px;
	background: #ffffff;
	border-radius: 30px;
	flex-shrink: 0;
	position: relative;
	transition: all 0.5s ease;
	cursor: pointer;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
	opacity: 0.5;
	/* Faded inactive */
	transform: scale(0.9);
	/* Smaller inactive */
}

.cl-card-inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	box-sizing: border-box;
}

.cl-img-box {
	width: 100%;
	height: 220px;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 15px;
	position: relative;
	z-index: 1;
}

.cl-img-box img {
	width: 80%;
	height: 100%;
	margin: auto;
	object-fit: cover;
	object-position: top;
	transition: all 0.5s ease;
}

/* Typography */
.cl-content {
	text-align: center;
	width: 100%;
}

.cl-name {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 20px;
	color: #0e4032;
	margin: 5px 0;
	font-weight: 600;
}

.cl-role {
	font-size: 14px;
	color: #8fa398;
	margin: 0;
	font-weight: 300;
}

/* LinkedIn Badge (Hidden by default) */
.cl-linkedin {
	display: none;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
	text-decoration: none;
	color: #0077b5;
	font-weight: 700;
	font-size: 14px;
}

.cl-icon {
	width: 24px;
	height: 24px;
	background: #0077b5;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	font-size: 13px;
	font-family: sans-serif;
	font-weight: bold;
}

/* --- ACTIVE STATE --- */
.cl-card.active {
	width: 320px;
	height: 380px;
	background: #7ca996;
	/* Sage Green */
	opacity: 1;
	transform: scale(1);
	box-shadow: 0 25px 50px rgba(124, 169, 150, 0.4);
	z-index: 10;
}

.cl-card.active .cl-card-inner {
	justify-content: flex-end;
	/* Push content to bottom */
	padding-bottom: 25px;
}

/* Image becomes background in active state */
.cl-card.active .cl-img-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	z-index: 0;
	margin: 0;
}

.cl-card.active .cl-img-box img {
	height: 80%;
	/* Partial fill */
	background: #7ca996;
	/* Seamless blend */
}

/* White Content Box */
.cl-card.active .cl-content {
	background: #ffffff;
	width: 90%;
	padding: 15px;
	border-radius: 20px;
	z-index: 2;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.cl-card.active .cl-linkedin {
	display: flex;
}

/* Dots */
.cl-dots {
	margin-top: 10px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.cl-dot {
	width: 10px;
	height: 10px;
	background: #e0e0e0;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	transition: 0.3s;
	padding: 0;
}

.cl-dot.active {
	background: #0e4032;
	/* Dark Green */
	transform: scale(1.2);
}

/* Responsive */
@media (max-width: 768px) {
	.cl-title {
		font-size: 32px;
	}

	.cl-carousel-window {
		height: 400px;
	}

	.cl-card {
		width: 260px;
		height: 320px;
	}

	.cl-card.active {
		width: 280px;
		height: 360px;
	}
}


/* Import Google Fonts to match design */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lato:wght@300;400&family=Oswald:wght@400;500&display=swap');

:root {
	--dp-primary-green: #0e4032;
	/* Dark Green for "Dermatologist" */
	--dp-accent-sage: #a8c6b6;
	/* Pale Green for background text */
	--dp-text-black: #1a1a1a;
	/* Black for "As Tune" */
	--dp-text-gray: #7a7a7a;
	/* Body text gray */
	--dp-bg-white: #ffffff;
	--dp-font-heading: 'Oswald', sans-serif;
	/* Condensed look */
	--dp-font-body: 'Lato', sans-serif;
	--dp-font-display: 'Anton', sans-serif;
	/* For the big "Dr.Sheena" */
}

/* Section Reset & Base */
.doctor-profile-section {
	background-color: var(--dp-bg-white);
	padding: 80px 20px;
	font-family: var(--dp-font-body);
	box-sizing: border-box;
	overflow: hidden;
	/* Prevent big text overflow */
}

.doctor-profile-section * {
	box-sizing: border-box;
}

/* Container */
.doctor-profile-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 60px;
}

/* --- Left Column: Image Area --- */
.doctor-image-wrapper {
	position: relative;
	flex: 1;
	max-width: 500px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

/* Big Background Text "Dr.Sheena" */
.doctor-bg-text {
	position: absolute;
	top: -40px;
	left: 0;
	font-family: var(--dp-font-heading);
	font-size: 100px;
	line-height: 0.9;
	color: var(--dp-accent-sage);
	opacity: 0.6;
	text-transform: uppercase;
	font-weight: 500;
	z-index: 1;
	letter-spacing: -2px;
	transform: rotate(-2deg);
	/* Slight design touch */
	pointer-events: none;
	white-space: nowrap;
}

/* Image Container */
.doctor-image-card {
	position: relative;
	z-index: 2;
	/* Sits above text */
	width: 100%;
	/* Simulating the chair/background vibe if image is transparent */
	border-radius: 20px;
	display: flex;
	justify-content: center;
}

.doctor-photo {
	width: 100%;
	max-width: 400px;
	height: auto;
	display: block;
	object-fit: cover;
	/* Drop shadow to pop against the text */
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

/* --- Right Column: Content Area --- */
.doctor-content-wrapper {
	flex: 1;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Heading Styles */
.doctor-heading {
	font-family: var(--dp-font-heading);
	font-size: 56px;
	line-height: 1.1;
	text-transform: uppercase;
	/* Condensed fonts often look best uppercase, but design is mixed case. We keep normal case. */
	text-transform: none;
	margin: 0 0 30px 0;
	letter-spacing: -1px;
}

.doctor-heading .text-black {
	color: var(--dp-text-black);
	font-weight: 400;
	display: block;
	/* Stacks on very narrow screens if needed, but inline usually */
	display: inline;
}

.doctor-heading .text-green {
	color: var(--dp-primary-green);
	font-weight: 500;
}

/* Body Text Styles */
.doctor-body-text p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--dp-text-gray);
	margin-bottom: 24px;
	font-weight: 400;
}

.doctor-body-text p:last-child {
	margin-bottom: 0;
}

/* --- Responsive Styles --- */

/* Tablet / Laptop adjustment */
@media (max-width: 1024px) {
	.doctor-profile-container {
		gap: 40px;
	}

	.doctor-bg-text {
		font-size: 80px;
		top: -20px;
	}

	.doctor-heading {
		font-size: 42px;
	}
}

/* Mobile / Small Tablet Stack */
@media (max-width: 768px) {
	.doctor-profile-container {
		flex-direction: column;
		gap: 50px;
	}

	/* Center Image Area */
	.doctor-image-wrapper {
		width: 100%;
		align-items: center;
		margin-top: 20px;
		/* Space for the big text sticking out top */
	}

	/* Center background text relative to image on mobile */
	.doctor-bg-text {
		font-size: 70px;
		left: 50%;
		transform: translateX(-50%) rotate(0deg);
		top: -40px;
		width: 100%;
		text-align: center;
	}

	/* Center Content Area */
	.doctor-content-wrapper {
		text-align: center;
		width: 100%;
	}

	.doctor-heading {
		font-size: 36px;
		margin-bottom: 20px;
	}

	.doctor-body-text p {
		font-size: 15px;
		text-align: center;
		/* Per requirements */
	}
}

@media (max-width: 480px) {
	.doctor-heading {
		font-size: 32px;
	}

	.doctor-bg-text {
		font-size: 50px;
		top: -30px;
	}
}


/* =========================================
   Refactored Inline Styles
   ========================================= */

/* Navigation */
.nav-external-link-wrapper {
	margin: auto;
	margin-right: 70px;
}

/* Hero & Grid */
.hero-grid-centered {
	justify-content: center;
	display: flex;
	gap: 80px;
}

.hero-actions-end {
	justify-content: end;
}

.hero-actions-center {
	justify-content: center;
}

/* Text Colors & Decor */
.color-black {
	color: black !important;
}

.color-dark-green {
	color: #084532;
}

.pigmentation-heading-color {
	color: #084532;
}

.tune-aesthetics-underline {
	text-decoration-line: underline;
	text-decoration-color: #cea27a;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.font-size-80 {
	font-size: 80%;
}

/* Flex Utilities */
.flex-center-h2 {
	justify-content: center;
	display: flex;
}

.treatment-actions-centered {
	margin-top: 30px;
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
}

/* Layout & Spacing */
.section-relative-z {
	z-index: 9999;
	position: relative;
	padding: 60px 10px 10px 10px;
}

.testimonial-padding {
	padding: 100px 0px;
}

.spacer-neg-80 {
	background-color: #fff;
	padding: 53px;
	margin-top: -105px;
	position: relative;
	z-index: 99999999;
}

.spacer-neg-52 {
	background-color: #fff;
	padding: 50px 230px 0px 0px;
	margin-top: -52px;
	position: relative;
	z-index: 99999999;
}

.bg-light-gray {
	background-color: #e9eeed !important;
}

/* Images & Icons */
.icon-width-50 {
	width: 50%;
}

.icon-width-70 {
	width: 70%;
}

.icon-width-30 {
	width: 30%;
}

.signature-item-logo {
	margin-bottom: 10px !important;
	width: 50%;
	margin: auto;
	text-align: center;
}

.footer-store-icon {
	width: 30px;
}

@media (max-width: 768px) {

	/* Hamburger Base */
	.hamburger {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 30px;
		height: 24px;
		cursor: pointer;
		z-index: 99;
		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}

	.hamburger span {
		display: block;
		height: 3px;
		width: 100%;
		background: var(--text-main, #1f2933);
		border-radius: 3px;
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		transform-origin: center;
	}

	/* X Transformation */
	.hamburger.active span:nth-child(1) {
		transform: rotate(45deg) translate(6px, 6px);
	}

	.hamburger.active span:nth-child(2) {
		opacity: 0;
		transform: scale(0);
	}

	.hamburger.active span:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -9px);
	}

	/* Smooth Mobile Nav */
	.nav-mobile {
		transform: translateX(100%);
		transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		opacity: 0;
	}

	.nav-mobile.open {
		transform: translateX(0);
		opacity: 1;
	}


}

/* Signature Tiles Backgrounds */
.signature-tile-bg-1 {
	background-image: url('../images/tile-1.webp');
}

.signature-tile-bg-2 {
	background-image: url('../images/tile-2.webp');
}

.signature-tile-bg-3 {
	background-image: url('../images/tile-3.webp');
}

.signature-tile-bg-4 {
	background-image: url('../images/tile-4.webp');
}

.signature-tile-bg-5 {
	background-image: url('../images/tile-5.webp');
}

/* Widgets & Iframes */
.taggbox-widget {
	width: 100%;
	height: 100%;
	overflow: auto;
}

.iframe-full-width {
	border: 0;
	width: 100%;
}

/* Charts */
.chart-bar-50 {
	height: 50%;
}

.chart-bar-30 {
	height: 30%;
}

.chart-bar-45 {
	height: 45%;
}

.chart-bar-70 {
	height: 70%;
}


/* Moved from index.html style block */
@media (max-width: 768px) {
	.hero-grid.hero-grid-reverse-mobile {
		display: grid;
		grid-template-columns: 1fr;
	}

	.hero-grid.hero-grid-reverse-mobile>div:first-child {
		order: 2;
	}

	.hero-grid.hero-grid-reverse-mobile>div:last-child {
		order: 1;
	}

	.hero-media-card {
		padding: 0px !important;
	}
}

/* Moved from facials-of-the-future.html style block */
@media (max-width: 768px) {
	.hero-grid.hero-grid-centered>div:first-child {
		order: unset !important
	}

	.hero-media-wrap.hero-media-wrap-centered {
		order: unset !important;
		justify-content: center
	}
}

@media (min-width: 968px) {
	.hero.scra-delete {
		padding: 30px 0px 250px;
	}

	.hero.scra-delete .video-section {
		width: 90% !important;
	}
}

@media (max-width: 960px) {
	.hero.hero-padding-fix {
		padding: 40px 0 0px !important;
	}
}


/* Additional Vivid Styles */
.text-center-mb-70 {
	text-align: center;
	margin-bottom: 70px;
}

.color-gold {
	color: #EDC315;
}

.color-dark-gray {
	color: #464646;
}

.hero-actions-start {
	justify-content: start;
}

.color-orange {
	color: #EB8C31;
}


/* Scar Delete Colors */
.color-brown {
	color: #7B4E24;
}


/* Scar Delete Colors */
.color-brown {
	color: #7B4E24;
}

/* True Zero Specific Styles */
.glow-icon1 {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #ffffff;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	box-shadow: 0 12px 25px rgb(255 43 108 / 0%);
}

.glow-image-glow {
	background: radial-gradient(circle 189px at 18% 51%, rgb(157 123 249) 0%, transparent 50%),
		radial-gradient(circle 100px at 84% 55%, #9f76ff 0%, transparent 50%),
		radial-gradient(circle 100px at -123% 80%, #9f76ff 0%, transparent 50%),
		radial-gradient(circle 148px at 97% 60%, rgb(157 123 249) 0%, transparent 121%) !important;
}


/* Testimonial specific padding */
.testimonial-padding {
	padding: 100px 0px;
}










/* Unique Section Container */
.skin-care-section {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 60px 20px;
	background-color: #fff;
}

.skin-care-container {
	max-width: 1200px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Media/Image Column */
.skin-media-wrapper {
	flex: 0 0 40%;
	/* Approx width of image column */
	position: relative;
	/* Padding to allow glow to be visible without cutoff */
	padding-left: 30px;
}

.skin-image-container {
	position: relative;
	width: 100%;
	/* Aspect ratio based on image (~3:4) */
	padding-bottom: 125%;
	/* Soft warm glow behind the container */
	box-shadow: -40px 10px 80px -30px rgb(140 107 72 / 94%);
	background-color: #fff;
	/* Ensure background behind image is solid */
}

.skin-main-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

}

/* Play Button Overlay */
.play-button-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(2px);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.6);
	transition: transform 0.3s ease;
	z-index: 2;
}

.play-button-overlay:hover {
	transform: translate(-50%, -50%) scale(1.05);
}

.play-icon {
	margin-left: 4px;
	/* Optical centering for play triangle */
}

/* Content Column */
.skin-content-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Typography */
.skin-typography {
	margin-bottom: 20px;
}

.skin-subheading {
	font-family: 'esthatic-bold', serif;
	font-size: 3rem;
	font-weight: 400;
	color: #1a1a1a;
	line-height: 1.1;
	margin-bottom: -10px;
	/* Slight overlap or tight spacing */
	letter-spacing: -0.02em;
}

.skin-heading {
	font-family: 'esthatic', serif;
	/* Script font match */
	font-size: 5.5rem;
	font-weight: 400;
	color: #8c6b48;
	/* Bronze/Brown tone */
	line-height: 1;
	margin-left: 5px;
}

.skin-description {
	font-family: 'Satoshi', system-ui, -apple-system;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #777;
	margin-bottom: 40px;
	max-width: 95%;
}

/* Button Styling */
.skin-cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	border: 1px solid #8c6b48;
	border-radius: 50px;
	/* Capsule shape */
	padding: 6px 6px 6px 25px;
	transition: all 0.3s ease;
	background: transparent;
	margin: auto;
}

.cta-text {
	font-family: 'Satoshi', system-ui, -apple-system;
	color: #000000;
	font-size: 0.95rem;
	font-weight: 500;
	margin-right: 15px;
}

.cta-icon-wrapper {
	background-color: #8c6b48;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	/* Capsule pill shape end */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	/* Makes it a pill shape like design */
	width: 50px;
}

.skin-cta-button:hover {
	background-color: #faf8f5;
}

/* Responsive Behavior */
@media screen and (max-width: 768px) {
	.skin-care-section {
		padding: 40px 20px;
	}

	.skin-care-container {
		flex-direction: column;
		padding: 0;
		gap: 40px;
	}

	.skin-media-wrapper {
		flex: none;
		width: 100%;
		max-width: 400px;
		/* Limit image size on mobile */
		padding-left: 0;
	}

	.skin-image-container {
		/* Adjusted glow for mobile */
		box-shadow: 0px 10px 50px -20px rgba(140, 107, 72, 0.4);
	}

	.skin-content-wrapper {
		align-items: center;
		text-align: center;
	}

	.skin-subheading {
		font-size: 2.5rem;
	}

	.skin-heading {
		font-size: 4.5rem;
	}

	.skin-description {
		max-width: 100%;
		font-size: 1rem;
	}
}




/* ..... */


/* Section Container */
.vivid-section {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0px 20px 80px 20px;
	background-color: #fff;
}

/* Grid Layout Strategy 
   Using Grid allows us to easily reorder elements for mobile 
   without duplicating HTML or using absolute positioning.
*/
.vivid-container {
	max-width: 1100px;
	width: 100%;
	display: grid;
	/* Desktop: 2 columns. 
       Left col (Title + Desc) takes 45%, Right col (Image) takes remaining space. */
	grid-template-columns: 0.8fr 1fr;
	/* Desktop Areas: Title and Desc on left, Image spans both rows on right */
	grid-template-areas:
		"title image"
		"desc image";
	column-gap: 60px;
	row-gap: 20px;
	align-items: center;
	/* Vertically center content */
}

/* Title Styling */
.vivid-title-wrapper {
	grid-area: title;
	align-self: end;
	/* Push title closer to description */
	margin-bottom: 10px;
}

.vivid-heading {
	font-family: 'HeadingNowTrial';
	/* Condensed bold font */
	font-size: 5rem;
	line-height: 1;
	color: #000;
	text-transform: uppercase;
	font-weight: 700;
}

/* The yellow 'ViViD' part */
.vivid-highlight {
	color: #f2c94c;
	/* Matches the golden yellow in design */
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 0.8;
	position: relative;
	top: 10px;
	/* Optical alignment */
	margin: 0 5px;
}

.vivid-highlight img {
	width: 100px;
}

/* The small 'BRILLIANT' text */
.vivid-subtext {
	font-size: 0.8rem;
	color: #555;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-top: 5px;
	text-transform: uppercase;
	font-family: 'Roboto', sans-serif;
}

/* Description Styling */
.vivid-content-wrapper {
	grid-area: desc;
	align-self: start;
}

.vivid-description {
	font-size: 1.05rem;
	line-height: 1.6;
	color: #7a869a;
	/* Muted grey-blue text color */
	max-width: 90%;
	font-family: 'Satoshi', system-ui, -apple-system;
}

/* Media/Image Styling */
.vivid-media-wrapper {
	grid-area: image;
	display: flex;
	justify-content: center;
	position: relative;
}

.vivid-image-container {
	position: relative;
	width: 100%;
	max-width: 500px;
	/* Constrain max width */
	aspect-ratio: 1 / 1;
	/* Square aspect ratio as per image */

	/* THE GLOW EFFECT */
	/* Soft teal/green glow behind the image */
	box-shadow: -30px 20px 80px -20px rgba(50, 168, 140, 0.5);

	background-color: #f0f0f0;
}

.vivid-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Play Button */
.play-btn-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.3s ease, background 0.3s ease;
	z-index: 2;
}

.play-btn-overlay:hover {
	transform: translate(-50%, -50%) scale(1.1);
	background: rgba(255, 255, 255, 0.4);
}

.play-icon {
	margin-left: 4px;
	/* Optical center */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
	.vivid-section {
		padding: 40px 20px;
	}

	.vivid-container {
		/* Switch to single column */
		grid-template-columns: 1fr;
		/* Reorder areas: Title -> Image -> Description */
		grid-template-areas:
			"title"
			"image"
			"desc";
		gap: 30px;
		text-align: center;
	}

	.vivid-title-wrapper {
		justify-self: center;
		margin-bottom: 0;
	}

	.vivid-heading {
		font-size: 3.5rem;
		/* Smaller font for mobile */
	}

	.vivid-content-wrapper {
		justify-self: center;
	}

	.vivid-description {
		max-width: 100%;
		font-size: 1rem;
	}

	.vivid-image-container {
		/* Adjust shadow for mobile */
		box-shadow: 0px 15px 50px -15px rgba(50, 168, 140, 0.5);
	}

	.vivid-highlight img {
		width: 75px;
	}
}



/* Main Section */
.results-section {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 80px 20px 0px 20px;
	background-color: #fff;
	overflow: hidden;
	/* To clip the large background text if it goes too wide */
}

.results-container {
	max-width: 1100px;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* Top Header Styling */
.results-header-wrapper {
	text-align: center;
	margin-bottom: 50px;
}

.results-main-title {
	font-family: 'HeadingNowTrial';
	font-size: 4rem;
	text-transform: uppercase;
	color: #000;
	line-height: 1;
	margin: 0;
}

.separator {
	margin: 0 10px;
}

.highlight-gold {
	color: #f2c94c;
	/* Golden Yellow */
}

/* Content Row Layout */
.results-content-row {
	display: flex;
	align-items: flex-start;
	/* Align top */
	justify-content: space-between;
	gap: 60px;
}

/* Left Column Styling */
.doctor-visual-col {
	flex: 0 0 40%;
	display: flex;
	justify-content: center;
	position: relative;
	padding-top: 20px;
	/* Space for the BG text to peek out */
}

.visual-wrapper {
	position: relative;
	width: 100%;
	max-width: 350px;
	display: flex;
	justify-content: center;
}

/* "Dr.Sheena" Background Text */
.bg-name-text {
	position: absolute;
	top: -45px;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'HeadingNowTrial';
	font-size: 5.5rem;
	color: #aebdb6;
	/* Muted greenish grey */
	opacity: 0.6;
	z-index: 0;
	white-space: nowrap;
	line-height: 1;
}

/* Image Container & Glow */
.doctor-img-container {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: 10px;
	background: transparent;
}

.doctor-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	/* In a real scenario, this would be a transparent PNG. 
       Standard img styling applied here. */
}

/* Right Column Styling */
.doctor-text-col {
	flex: 1;
	padding-top: 20px;
	/* Align roughly with the face of the doctor */
}

.doctor-title {
	font-family: 'HeadingNowTrial';
	font-size: 3.5rem;
	line-height: 1.1;
	color: #000;
	margin-bottom: 25px;
	text-transform: capitalize;
}

.highlight-green {
	color: #0f4c3a;
	/* Dark Forest Green */
	font-weight: 700;
}

.doctor-desc {
	font-size: 1.05rem;
	line-height: 1.8;
	color: #7a869a;
	/* Muted grey/blue */
	max-width: 95%;
}

/* Responsive Design */
@media screen and (max-width: 900px) {
	.results-main-title {
		font-size: 3rem;
	}

	.bg-name-text {
		font-size: 4rem;
		top: -30px;
	}
}

@media screen and (max-width: 768px) {
	.results-section {
		padding: 40px 20px;
	}

	.results-header-wrapper {
		margin-bottom: 40px;
	}

	.results-main-title {
		font-size: 3.5rem;
		/* Smaller header on mobile */
		display: flex;
		flex-direction: column;
		/* Stack the title parts */
		align-items: center;
		gap: 5px;
	}

	.separator {
		display: none;
		/* Hide dash when stacked */
	}

	.results-content-row {
		flex-direction: column;
		gap: 50px;
		align-items: center;
	}

	.doctor-visual-col {
		flex: none;
		width: 100%;
	}

	.doctor-text-col {
		text-align: center;
		padding-top: 0;
	}

	.doctor-title {
		font-size: 2.8rem;
	}

	.doctor-desc {
		max-width: 100%;
		font-size: 1rem;
	}
}



/* Layout Containers */
.ba-section {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 80px 20px;
}

.ba-container {
	max-width: 1100px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 80px;
}

/* Text Styling */
.ba-text {
	flex: 1;
}

.ba-description {
	font-size: 1.05rem;
	line-height: 1.8;
	color: #7a869a;
	text-align: left;
	margin: 0;
}

/* Visual Column */
.ba-visual {
	flex: 0 0 45%;
	display: flex;
	justify-content: center;
}

/* --- SLIDER CORE CSS --- */

.slider-wrapper {
	/* position: relative;
	width: 100%; */
	/* max-width: 450px; */
	/* Maintain 4:5 Aspect Ratio */
	/* aspect-ratio: 4/5; */
	/* overflow: hidden;
	cursor: col-resize; */
	/* box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1); */
	/* Prevent selection during drag */
	/* user-select: none;
	-webkit-user-select: none; */
	/* Add rounded corners as shown in the example */
	/* border-radius: 20px; */
}

/* Common styles for both layers */
.image-layer {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	border-radius: 20px;
	/* Ensure images respect the container's radius */
}

/* Base Layer (After) - Always Full Width */
.after-layer {
	width: 100%;
	z-index: 1;
}

/* Top Layer (Before) - Width changes via JS */
.before-layer {
	width: 50%;
	/* Start at 50% */
	z-index: 2;
}

/* Image Styling */
.image-layer img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	display: block;
	/* Ensure images respect the container's radius */
	border-radius: 20px;
}

/* IMPORTANT: The After image is strictly 100% of the wrapper. */
.after-layer img {
	width: 100%;
}

/* Make the 'before' image grayscale to match the requested style. */
#beforeImage {
	filter: grayscale(100%);
}

/* Labels */
.label {
	position: absolute;
	top: 20px;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	font-size: 0.85rem;
	font-weight: 500;
	border-radius: 4px;
	pointer-events: none;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0;
	transition: opacity 0.3s;
}

/* Show labels on hover */
.slider-wrapper:hover .label {
	opacity: 1;
}

.label-after {
	right: 20px;
}

.label-before {
	left: 20px;
}

/* Handle/Dragger Styling - Simple Line */
.slider-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	/* Moves with JS */
	width: 2px;
	/* Thin line */
	transform: translateX(-50%);
	z-index: 3;
	pointer-events: none;
	display: flex;
	justify-content: center;
}

.handle-line {
	position: absolute;
	height: 100%;
	width: 2px;
	background: #fff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
	.ba-container {
		flex-direction: column-reverse;
		gap: 40px;
	}

	.ba-visual {
		flex: none;
		width: 100%;
	}

	.ba-text {
		text-align: center;
	}
}



/* Section Wrapper */
.smooth-section {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0px 20px 130px 20px;
	background-color: #fff;
	overflow: hidden;
}

/* Container */
.smooth-container {
	max-width: 1100px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

/* Text Column */
.smooth-text-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-right: 20px;
}

/* Typography */
.smooth-pre-title {
	font-family: 'Poppins-Light';
	font-weight: 300;
	font-size: 2.2rem;
	color: #444;
	margin-bottom: 0px;
	letter-spacing: -0.5px;
}

.smooth-main-title {
	font-family: 'Sarlotte', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 500;
	font-size: 4.5rem;
	line-height: 1.1;
	color: #000;
	margin-bottom: 30px;
}

.italic-title {
	font-family: 'Sarlotte', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 400;
}

.smooth-description {
	font-family: 'Satoshi', system-ui, -apple-system;
	font-size: 1.05rem;
	line-height: 1.7;
	color: #7a869a;
	margin-bottom: 40px;
	max-width: 90%;
}

/* Button Styling */
.smooth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	border: 1px solid #8b5cf6;
	/* Purple Border */
	border-radius: 50px;
	padding: 5px 5px 5px 25px;
	transition: all 0.3s ease;
	background: transparent;
}

.btn-text {
	color: #444;
	font-weight: 400;
	font-size: 0.95rem;
	margin-right: 15px;
}

.btn-icon {
	background-color: #8b5cf6;
	/* Vivid Purple */
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	width: 55px;
}

.smooth-btn:hover {
	background-color: #f5f3ff;
}

/* Image Column */
.smooth-image-col {
	flex: 0 0 40%;
	position: relative;
	display: flex;
	justify-content: center;
}

.smooth-img-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 3/4;
	/* Purple Glow - Negative margin moves it left like design */
	box-shadow: -60px 0px 100px -20px rgba(139, 92, 246, 0.4);
}

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

/* Responsive Design */
@media screen and (max-width: 900px) {
	.smooth-pre-title {
		font-size: 2rem;
	}

	.smooth-main-title {
		font-size: 3.5rem;
	}
}

@media screen and (max-width: 768px) {
	.smooth-section {
		padding: 50px 20px;
	}

	.smooth-container {
		flex-direction: column;
		gap: 40px;
	}

	/* REORDERING LOGIC: 
       We use 'order' property to move the image visually to the top
    */

	.smooth-image-col {
		width: 100%;
		max-width: 400px;
		/* -1 brings it before the text column (which has default order 0) */
		order: -1;
		margin-bottom: 20px;
	}

	.smooth-text-col {
		width: 100%;
		padding-right: 0;
		text-align: center;
		align-items: center;
		order: 1;
	}

	.smooth-description {
		max-width: 100%;
		font-size: 1rem;
	}

	.smooth-img-wrapper {
		/* Center the glow on mobile */
		box-shadow: 0px 0px 80px -10px rgb(139 92 246 / 21%);
	}
}



/* ........ */


/* Section Wrapper */
.ultimate-section {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 20px 20px 120px 20px;
	background-color: #fff;
	overflow: hidden;
}

/* Container */
.ultimate-container {
	max-width: 80%;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Visual Column */
.ultimate-visual-col {
	flex: 0 0 45%;
	display: flex;
	justify-content: flex-start;
	/* Align image to left */
	position: relative;
}

.ultimate-img-wrapper {
	position: relative;
	width: 100%;
	/* Aspect ratio 1:1 or slightly portrait */
	aspect-ratio: 4/5;

	/* The Pink Glow Effect */
	/* Negative margin pulls shadow to the left */
	box-shadow: -37px 0px 88px -37px rgba(251, 30, 99, 0.35);
}

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

/* Content Column */
.ultimate-content-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Typography */
.ultimate-top-text {
	font-family: 'codelight', serif;
	font-weight: 200;
	/* Very thin */
	font-size: 3rem;
	color: #333;
	margin: 0;
	line-height: 1;
	letter-spacing: -1px;
	text-transform: uppercase;
}

.ultimate-main-heading {
	font-family: 'nclgasdrifo', serif;
	font-weight: 400;
	font-size: 5rem;
	line-height: 1;
	color: #000;
	margin: 0 0 30px 0;
	letter-spacing: -2px;
}

.ultimate-description {
	font-family: 'Satoshi', system-ui, -apple-system;
	font-size: 1.05rem;
	line-height: 1.7;
	color: #777;
	/* Grey text */
	margin-bottom: 40px;
	max-width: 95%;
}

/* Button Styling */
.ultimate-btn-wrapper {
	display: flex;
	justify-content: flex-end;
	/* Button aligns to the right as per design */
	width: 100%;
}

.ultimate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	border: 1px solid #e91e63;
	/* Pink Border */
	border-radius: 50px;
	padding: 5px 5px 5px 20px;
	transition: all 0.3s ease;
	background: transparent;
}

.btn-text {
	color: #444;
	font-weight: 400;
	font-size: 0.95rem;
	margin-right: 15px;
	font-family: 'Lato', sans-serif;
}

.btn-icon {
	background-color: #e91e63;
	/* Pink Background */
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	/* Pill shape end */
	width: 55px;
}

.ultimate-btn:hover {
	background-color: #fce4ec;
	/* Light pink tint hover */
}

/* Responsive Design */
@media screen and (max-width: 900px) {
	.ultimate-top-text {
		font-size: 2.5rem;
	}

	.ultimate-main-heading {
		font-size: 4rem;
	}
}

@media screen and (max-width: 768px) {
	.ultimate-section {
		padding: 50px 20px;
	}

	.ultimate-container {
		flex-direction: column;
		gap: 40px;
	}

	/* Mobile Order: Image First, Text Second */
	.ultimate-visual-col {
		width: 100%;
		max-width: 400px;
		order: -1;
		justify-content: center;
	}

	.ultimate-content-col {
		order: 1;
		text-align: center;
		align-items: center;
	}

	.ultimate-btn-wrapper {
		justify-content: center;
		/* Center button on mobile */
	}

	.ultimate-top-text {
		font-size: 2rem;
	}

	.ultimate-main-heading {
		font-size: 3.5rem;
	}

	.ultimate-description {
		text-align: center;
		font-size: 1rem;
	}

	.ultimate-img-wrapper {
		/* Adjust glow for mobile centering */
		box-shadow: 0px 10px 80px -20px rgba(233, 30, 99, 0.35);
	}
}


/* Ensure the video fits the container exactly like the image */
.skin-main-video {
	display: none;
	/* Hidden by default */
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ensures video fills the area without stretching */
	border-radius: inherit;
	/* Inherits any border radius from the container */
}

/* Ensure the container maintains size relative to its content */
.skin-image-container {
	position: relative;
	/* You might want a set height/width or aspect-ratio here 
       to prevent jumping if the image loads slowly */
}

/* Styling for the play button to make it clickable */
.play-button-overlay {
	cursor: pointer;
	/* Ensure it is positioned over the image */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}


/* Ensure the video fits exactly like the image */
.vivid-video {
	display: none;
	/* Hidden initially */
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	/* Matches container rounded corners if any */
}

/* Ensure the button is clickable */
.play-btn-overlay {
	cursor: pointer;
	z-index: 2;
	/* Keeps button above image */
}


/* Video Styling */
.glow-change-video {
	display: none;
	/* Hidden by default */
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Fills the box perfectly */
	border-radius: inherit;
	/* Inherits corners from wrapper */
	position: relative;
	z-index: 5;
	/* Ensures it sits above the glow background if needed */
}

/* Make the play button clickable */
.play-overlay {
	cursor: pointer;
	z-index: 10;
}


.glow-video-3 {
	display: none;
	/* Hidden by default */
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	position: relative;
	z-index: 5;
}

/* Ensure play button is clickable */
.play-overlay {
	cursor: pointer;
	z-index: 10;
}


/* Wrapper to hold image and video in same place */
.transform-media-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	/* Or auto, depending on your layout */
	overflow: hidden;
	/* Ensures video stays inside corners */
	border-radius: inherit;
	/* Keeps rounded corners if parent has them */
}

/* Video Styling */
.transform-video {
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	/* Sits on top */
	top: 0;
	left: 0;
	z-index: 5;
}

/* Play Button Styling */
.transform-media-wrapper .play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	z-index: 10;
}


.transform-content,
.transform-content-bottom {
	z-index: 99999;
}


/* Overlay background */
.popup-overlay {
	display: none;
	/* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	justify-content: center;
	align-items: center;
}

/* Main Popup Box */
.popup-content {
	background: #fff;
	width: 90%;
	max-width: 900px;
	display: flex;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	font-family: 'esthatic-bold';
	/* Use a serif font for that elegant look */
}

.side {
	padding: 40px;
	flex: 1;
}

/* Left Section */
.existing-clients {
	background-color: var(--light-bg);
	;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* Form Styles */
.form-row {
	display: flex;
	gap: 15px;
}

.form-group {
	margin-bottom: 15px;
	flex: 1;
}

label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
}

input {
	width: 100%;
	padding: 12px;
	border: 1px solid #eee;
	background: #f4f4f4;
	border-radius: 4px;
}

/* Buttons */
.btn-outline,
.btn-submit {
	padding: 12px 30px;
	border-radius: 25px;
	text-decoration: none;
	display: inline-block;
	border: 1px solid var(--border-color);
	background: transparent;
	cursor: pointer;
	transition: 0.3s;
}

.btn-submit {
	background: #f4f4f4;
	width: fit-content;
	margin-top: 20px;
}

/* Responsive: Stack on small screens */
@media (max-width: 768px) {
	.popup-content {
		flex-direction: column;
		height: 90vh;
		overflow-y: auto;
	}
}

.close-btn {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 24px;
	border: none;
	background: none;
	cursor: pointer;
}


.black-divider {
	width: 90%;
	height: 1px;
	background-color: #000000;
	margin: auto;
	padding: 0;
	text-align: center;
}



.breadcrumbs-section {
	background-color: white;
}

/* Breadcrumb Container */
.breadcrumbs {
	font-family: 'Arial', sans-serif;
	font-size: 18px;
	/* Standard size for desktop */
	color: #0d3d2e;

	margin: 15px 0;
	white-space: nowrap;
	/* Prevents wrapping to new lines */
	overflow-x: auto;
	/* Allows horizontal swipe on small screens */
	display: flex;
	align-items: center;
	padding-bottom: 5px;
	/* Space for a scrollbar if needed */
	scrollbar-width: none;
	/* Hides scrollbar on Firefox */
}

.breadcrumbs::-webkit-scrollbar {
	display: none;
	/* Hides scrollbar on Chrome/Safari */
}

.breadcrumbs a {
	text-decoration: none;
	color: #0d3d2e;
	opacity: 0.8;
	transition: opacity 0.2s;
}

.breadcrumbs a:hover {
	opacity: 1;
	text-decoration: underline;
}

.breadcrumbs span.separator {
	margin: 0 8px;
	font-size: 14px;
	color: #666;
}

.breadcrumbs strong {
	font-weight: 600;
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
	.breadcrumbs {
		font-size: 14px;
		/* Smaller text for mobile */
		margin: 10px 0;
	}

	.breadcrumbs span.separator {
		margin: 0 5px;
	}
}


.breadcrumbs span.separator {
	margin: 0 10px;
	font-size: 14px;
	color: #666;
	display: inline-block;
	/* Ensures it maintains its own space */
	flex-shrink: 0;
	/* IMPORTANT: Prevents the browser from squishing it to 0px */
	min-width: 10px;
	/* Guarantees visibility */
}

/* Responsive adjustments for mobile */
@media (max-width: 480px) {
	.breadcrumbs {
		font-size: 14px;
		padding: 5px 10px;
		flex-wrap: wrap;
		/* Add some padding so it doesn't touch the screen edge */
	}

	.breadcrumbs span.separator {
		margin: 0 6px;
		/* Slightly tighter spacing for small screens */
		font-size: 12px;
	}
}




/* --- VARIABLES --- */
:root {
	--tune-bg-beige: #efe5d9;
	/* Background for Spot Delete card */
	--tune-bg-white: #ffffff;
	--tune-text-dark: #262626;
	--tune-text-grey: #8e8e8e;
	--tune-blue-tick: #0095f6;
	--tune-red-heart: #ed4956;
	--tune-card-width: 320px;
	/* Base width */
	--tune-border-radius: 3px;
	--tune-border-color: #dbdbdb;
}

/* --- LAYOUT CONTAINER --- */
#tune-gallery-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#tune-cards-track {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 600px;
	/* Fixed height container */
	position: relative;
	perspective: 1000px;
}

/* --- CARD STYLES --- */
.tune-social-card {
	width: var(--tune-card-width);
	background: var(--tune-bg-white);
	border: 1px solid var(--tune-border-color);
	border-radius: var(--tune-border-radius);
	position: absolute;
	transition: all 0.4s ease-in-out;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	background-color: white;
}

/* CARD HEADER */
.tune-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px;
	background: white;
}

.tune-user-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tune-avatar-circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
	padding: 2px;
}

.tune-avatar-img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: white;
	display: block;
	border: 2px solid white;
	object-fit: cover;
}

.tune-username {
	font-weight: 600;
	font-size: 14px;
	color: var(--tune-text-dark);
	display: flex;
	align-items: center;
	gap: 4px;
}

.tune-verified-icon {
	width: 12px;
	height: 12px;
	fill: var(--tune-blue-tick);
}

.tune-menu-dots {
	font-weight: bold;
	font-size: 18px;
	color: var(--tune-text-dark);
	cursor: pointer;
}

/* CARD CONTENT AREA */
.tune-content-area {
	position: relative;
	width: 100%;
	/* Minimal height to match aspect ratio */
	min-height: 320px;
	display: flex;
	flex-direction: column;
}

/* Specific Styling for Center Card (Beige) */
.tune-theme-beige .tune-content-area {
	background-color: var(--tune-bg-beige);
	padding: 20px 0;
	text-align: center;
}

/* Specific Styling for Side Cards (White/Scar) */
.tune-theme-white .tune-content-area {
	background-color: #fcfcfc;
	padding: 0px 0 0 0;
	text-align: center;
}

/* HEADLINES */
.tune-headline {
	font-size: 28px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
	color: #4a3b32;
	/* Dark brownish text */
}

.tune-headline.scar-text {
	color: #6d5045;
}

.tune-headline.spot-text {
	color: #1c3d31;
	/* Dark green tone */
}

.tune-description-text {
	font-size: 12px;
	line-height: 1.4;
	color: #4a3b32;
	padding: 0 20px;
	margin-bottom: 15px;
	font-weight: 500;
}

/* IMAGES CONTAINER */
.tune-comparison-container {
	display: flex;
	width: 100%;
	margin-top: auto;
	position: relative;
}

.tune-half-img {
	width: 100%;
	/* Fixed height for image area */
	object-fit: cover;
	position: relative;
}

.tune-img-tag {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	padding: 2px 6px;
	font-size: 10px;
	border-radius: 2px;
}

/* Simulating the "Sessions" tag */
.tune-session-tag {
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: white;
	font-size: 11px;
	background: rgba(0, 0, 0, 0.3);
	padding: 2px 5px;
	border-radius: 3px;
	z-index: 10;
}

/* ACTION BAR (Like, Comment, Share) */
.tune-action-bar {
	padding: 10px 14px;
	display: flex;
	justify-content: space-between;
	background: white;
}

.tune-actions-left {
	display: flex;
	gap: 16px;
}

.tune-icon {
	width: 24px;
	height: 24px;
	cursor: pointer;
	transition: transform 0.2s;
}

.tune-icon:hover {
	transform: scale(1.1);
}

.tune-icon-heart {
	fill: var(--tune-red-heart);
}

.tune-icon-outline {
	fill: none;
	stroke: var(--tune-text-dark);
	stroke-width: 2;
}

/* FOOTER DETAILS */
.tune-card-footer {
	padding: 0 14px 14px 14px;
	background: white;
}

.tune-likes-count {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

.tune-caption {
	font-size: 14px;
	margin-bottom: 6px;
}

.tune-caption strong {
	margin-right: 5px;
}

.tune-hashtag {
	color: #00376b;
}

.tune-comments-link {
	color: var(--tune-text-grey);
	font-size: 14px;
	margin-bottom: 6px;
	cursor: pointer;
}

.tune-timestamp {
	font-size: 10px;
	color: var(--tune-text-grey);
	text-transform: uppercase;
}

/* --- CAROUSEL LOGIC CLASSES --- */

/* CENTER ITEM */
.tune-pos-center {
	transform: translateX(0) scale(1);
	z-index: 10;
	opacity: 1;
}

/* LEFT ITEM */
.tune-pos-left {
	transform: translateX(-110%) scale(0.85);
	/* 110% to create gap */
	z-index: 5;
	opacity: 1;
	cursor: pointer;
}

/* RIGHT ITEM */
.tune-pos-right {
	transform: translateX(110%) scale(0.85);
	z-index: 5;
	opacity: 1;
	cursor: pointer;
}

/* --- PAGINATION DOTS --- */
#tune-pagination {
	display: flex;
	gap: 6px;
	margin-top: 10px;
}

.tune-dot {
	width: 6px;
	height: 6px;
	background-color: #dbdbdb;
	border-radius: 50%;
	cursor: pointer;
}

.tune-dot.active {
	background-color: #0095f6;
}

/* --- BUTTON --- */
#tune-visit-btn {
	margin-top: 25px;
	background: transparent;
	border: 1px solid #262626;
	color: #262626;
	padding: 10px 30px;
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
	letter-spacing: 0.5px;
	transition: background 0.2s;
}

#tune-visit-btn:hover {
	background: #262626;
	color: white;
}

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 900px) {

	/* On medium screens, reduce gap */
	.tune-pos-left {
		transform: translateX(-90%) scale(0.8);
	}

	.tune-pos-right {
		transform: translateX(90%) scale(0.8);
	}
}

@media (max-width: 768px) {

	/* Mobile: Single Div View */
	#tune-cards-track {
		height: auto;
		min-height: 600px;
	}

	.tune-social-card {
		position: relative;
		display: none;
		transform: none !important;
		width: 85%;
		max-width: 380px;
		margin: 0 auto;
	}

	.tune-social-card.tune-pos-center {
		display: block;
		/* Show only center */
	}

	/* Hide side cards on mobile per request "responsive single div" */
	.tune-social-card.tune-pos-left,
	.tune-social-card.tune-pos-right {
		display: none;
	}
}


.trusted-wrapper * {
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
	margin: 0;
	padding: 0;
}

/* --- CONTAINER --- */
#trusted-section {
	width: 100%;
	background-color: #ffffff;
	overflow: hidden;
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 800px;
}

.trusted-heading-container {
	text-align: center;
	margin-bottom: 50px;
}

.trusted-heading {
	font-size: 28px;
	font-weight: 400;
	color: #355e4e;
	display: inline-block;
	border-bottom: 2px solid #355e4e;
	padding-bottom: 5px;
	letter-spacing: -0.5px;
}

/* --- CAROUSEL TRACK --- */
#trusted-track {
	position: relative;
	width: 100%;
	max-width: 1600px;
	/* Increased max-width to allow gaps */
	height: 600px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
	perspective: 1000px;
}

/* --- CARD WRAPPER --- */
.trusted-card-group {
	position: absolute;
	width: 270px;
	/* Fixed width */
	transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;

	/* Initial State */
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}

/* --- VIDEO CONTAINER --- */
.trusted-video-frame {
	width: 100%;
	height: 460px;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	background: #000;
}

.trusted-video-element {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* OVERLAYS */
.trusted-overlay-icon {
	position: absolute;
	width: 28px;
	height: 28px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(2px);
	z-index: 2;
}

.trusted-icon-left {
	bottom: 15px;
	left: 15px;
}

.trusted-icon-right {
	bottom: 15px;
	right: 15px;
}

.trusted-svg {
	width: 14px;
	height: 14px;
	fill: white;
}

/* --- PROFILE INFO --- */
.trusted-profile-row {
	display: flex;
	align-items: center;
	gap: 10px;
	transition: opacity 0.3s;
}

.trusted-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid white;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.trusted-username {
	font-size: 14px;
	color: #333;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 5px;
}

.trusted-blue-tick {
	width: 14px;
	height: 14px;
	fill: #0095f6;
}

/* --- POSITIONS LOGIC (DESKTOP) --- */
/* Increased translate values to create the gap */

/* 1. CENTER (Active) */
.trusted-pos-center {
	transform: translateX(0) scale(1.1);
	opacity: 1;
	z-index: 20;
	pointer-events: auto;
	cursor: default;
}

/* 2. INNER LEFT (L1) - Gap Added */
.trusted-pos-l1 {
	transform: translateX(-320px) scale(0.9);
	/* Pushed out to 320px */
	opacity: 0.8;
	z-index: 15;
	pointer-events: auto;
	cursor: pointer;
}

/* 3. INNER RIGHT (R1) - Gap Added */
.trusted-pos-r1 {
	transform: translateX(320px) scale(0.9);
	opacity: 0.8;
	z-index: 15;
	pointer-events: auto;
	cursor: pointer;
}

/* 4. OUTER LEFT (L2) - Gap Added */
.trusted-pos-l2 {
	transform: translateX(-620px) scale(0.75);
	/* Pushed out to 620px */
	opacity: 0.5;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
}

/* 5. OUTER RIGHT (R2) - Gap Added */
.trusted-pos-r2 {
	transform: translateX(620px) scale(0.75);
	opacity: 0.5;
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
}

/* Hidden items */
.trusted-pos-hidden {
	transform: translateX(0) scale(0.5);
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

/* --- PAGINATION --- */
.trusted-pagination {
	display: flex;
	gap: 8px;
	margin-top: 30px;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 400px;
}

.trusted-dot {
	width: 8px;
	height: 8px;
	background: #e0e0e0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.3s;
}

.trusted-dot.active {
	background: #355e4e;
	transform: scale(1.2);
}

/* --- RESPONSIVE --- */

/* Tablet: Squeeze gaps slightly */
@media (max-width: 1200px) {
	.trusted-pos-l1 {
		transform: translateX(-260px) scale(0.85);
	}

	.trusted-pos-r1 {
		transform: translateX(260px) scale(0.85);
	}

	.trusted-pos-l2,
	.trusted-pos-r2 {
		opacity: 0;
		pointer-events: none;
	}

	/* Hide outer on tablet */
}

/* Mobile: Show only 1 */
@media (max-width: 768px) {
	#trusted-track {
		height: 520px;
	}

	.trusted-card-group {
		width: 90%;
		max-width: 300px;
	}

	.trusted-pos-center {
		transform: translateX(0) scale(1);
		/* No scale on mobile */
		opacity: 1;
	}

	/* HIDE NEIGHBORS COMPLETELY */
	.trusted-pos-l1,
	.trusted-pos-r1,
	.trusted-pos-l2,
	.trusted-pos-r2,
	.trusted-pos-hidden {
		display: none;
		opacity: 0;
	}
}



.cust-wrapper * {
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
	margin: 0;
	padding: 0;
}

/* --- SECTION CONTAINER --- */
#cust-reviews-section {
	width: 100%;
	background-color: #ffffff;
	padding: 60px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}

/* --- HEADING --- */
.cust-heading-container {
	width: 100%;
	max-width: 1200px;
	margin-bottom: 50px;
	text-align: left;
	/* Aligned left as per image */
	padding-left: 10px;
}

.cust-heading {
	font-size: 32px;
	font-weight: 300;
	/* Thin look as per image */
	color: #355e4e;
	/* Dark green */
	letter-spacing: -0.5px;
}

/* --- CAROUSEL WINDOW --- */
.cust-carousel-window {
	width: 100%;
	max-width: 1200px;
	overflow: hidden;
	position: relative;
	padding: 10px 0;
	/* Space for shadows/borders */
}

.cust-track {
	display: flex;
	transition: transform 0.5s ease-in-out;
	width: 100%;
	/* Will be calculated by JS if needed, but flex handles it */
}

/* --- REVIEW CARD --- */
.cust-card {
	/* Desktop: 3 items visible = 33.333% width */
	min-width: 33.333%;
	padding: 0 30px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	position: relative;
	background: #fff;
}

/* VERTICAL DIVIDER LINE (Desktop) */
.cust-card::after {
	content: '';
	position: absolute;
	right: 0;
	top: 10%;
	height: 80%;
	width: 1px;
	background-color: #000;
	/* Sharp black line */
	opacity: 1;
}

/* Remove divider from the last card in the group */
/* We will handle 'visual' last item via JS or CSS nth-child logic usually, 
           but for a carousel, we'll keep it simple: 
           The line is part of the card design. */

/* --- QUOTE ICON --- */
.cust-quote-icon {
	color: #0d4c3a;
	/* Deep green */
	font-size: 60px;
	font-family: serif;
	/* Serif font for the quote mark */
	line-height: 1;
	margin-bottom: -10px;
	font-weight: 900;
}

/* --- CARD CONTENT --- */
.cust-card-title {
	font-size: 20px;
	font-weight: 600;
	color: #000;
}

.cust-card-body {
	font-size: 14px;
	color: #555;
	line-height: 1.6;
	min-height: 60px;
	/* Uniform height */
}

/* --- FOOTER (Avatar + Info) --- */
.cust-card-footer {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 10px;
}

.cust-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
	/* Blue lighting effect from image */
	filter: brightness(1.1) contrast(1.1);
	background: #ccc;
}

.cust-user-details {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cust-username {
	font-size: 16px;
	font-weight: 500;
	color: #222;
}

.cust-stars {
	display: flex;
	gap: 2px;
}

.cust-star-svg {
	width: 14px;
	height: 14px;
	fill: #f4c150;
	/* Golden yellow */
}

/* --- PAGINATION --- */
.cust-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}

.cust-dot {
	width: 8px;
	height: 8px;
	background-color: #d1d1d1;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.3s;
}

.cust-dot.active {
	background-color: #555;
	/* Dark grey active state */
}


/* --- RESPONSIVE LOGIC --- */
@media (max-width: 900px) {

	/* Tablet: Maybe 2 items? Sticking to 1 for simplicity or 2 */
	.cust-card {
		min-width: 50%;
	}
}

@media (max-width: 600px) {

	/* Mobile: 1 item visible */
	.cust-card {
		min-width: 100%;
		border-right: none;
		/* Remove vertical line on mobile */
		padding: 0 10px;
		/* Less padding */
		align-items: center;
		/* Center align for mobile looks better */
		text-align: center;
	}

	.cust-heading-container {
		text-align: center;
	}

	/* Remove the vertical divider on mobile */
	.cust-card::after {
		display: none;
	}

	.cust-card-footer {
		flex-direction: column;
		text-align: center;
	}
}


:root {
	--bg-dark: #3e3a37;
	/* Dark Mocha */
	--text-gold: #c5a47e;
	/* Gold/Beige */
	--text-bread: #0e4032;
	/* Breadcrumb Green */
}

/* Base Reset */
.tune-hero-section {
	padding: 20px;
	background: #fff;
	font-family: 'Arial', sans-serif;
	box-sizing: border-box;
}

.tune-container {
	max-width: 1300px;
	margin: 0 auto;
	width: 100%;
}

/* Breadcrumb */
.tune-breadcrumb {
	font-family: 'Arial', sans-serif;
	margin-bottom: 20px;
	color: var(--text-bread);
	font-size: 15px;
	font-weight: 500;
}

.tune-breadcrumb a {
	text-decoration: none;
	color: inherit;
}

.tune-breadcrumb .sep {
	margin: 0 8px;
}


.tune-banner {
	/* Horizontal: Dark Left -> White Center -> Dark Right */
	background: linear-gradient(to right, #261c1a, #261c1a, #402a2aa8, #261c1a);

	/* Keep existing properties */
	border-radius: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	min-height: 500px;
	position: relative;
}

/* MOBILE (Max-width 768px) */
@media (max-width: 768px) {
	.tune-banner {
		/* Vertical: Dark Top -> White Middle -> Dark Bottom */
		background: linear-gradient(to bottom, #261c1a, #402a2aa8);

		/* Keep existing mobile flex properties */
		flex-direction: column;
		align-items: center;
	}
}


/* Left Content Area */
.tune-banner-content {
	flex: 1;
	/* Takes 50% width */
	padding: 60px 40px 60px 80px;
	z-index: 2;
	max-width: 650px;
}

/* Typography */
.tune-title {
	font-family: 'esthatic';
	color: var(--text-gold);
	display: flex;
	flex-direction: column;
	margin: 0 0 40px 0;
	line-height: 1.25;
}

.t-light {
	font-size: 48px;
	font-weight: 400;
	font-style: normal;
}

.t-italic {
	font-size: 62px;
	font-weight: 400;
	font-style: italic;
	margin: 8px 0;
}

/* Button */
.tune-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50px;
	padding: 6px 6px 6px 28px;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	transition: 0.3s;
	background: transparent;
	width: fit-content;
}

.tune-btn:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: #fff;
}

.tune-btn span {
	margin-right: 20px;
}

.icon-circle {
	width: 42px;
	height: 42px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Right Image Area */
.tune-banner-image {
	flex: 1;
	/* Takes 50% width */
	/* height: 600px; */
	/* Taller than container to allow good cropping */
	display: flex;
	position: relative;
	/* Aligns image to the bottom right */
	align-items: flex-end;
}

.tune-banner-image img {
	width: 430px;
	height: 100%;
	object-fit: cover;
	/* Ensures image covers area without stretch */
	object-position: top center;
	display: block;
}

/* --- RESPONSIVE CSS --- */

/* Tablet (1024px) */
@media (max-width: 1024px) {
	.tune-banner-content {
		padding: 50px 30px;
	}

	.t-light {
		font-size: 36px;
	}

	.t-italic {
		font-size: 48px;
	}

	.tune-banner {
		min-height: 450px;
	}

	.tune-banner-image {
		height: 500px;
	}
}

/* Mobile (768px) - Switching to Stacked Layout */
@media (max-width: 768px) {
	.tune-banner {
		flex-direction: column;
		/* Stack Text on Top, Image Bottom */
		align-items: flex-start;
		border-radius: 24px;
		min-height: auto;
	}

	.tune-banner-content {
		padding: 40px 20px;
		width: 100%;
		/* Full width */
		box-sizing: border-box;
		text-align: center;
		/* Center text on mobile */
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.tune-banner-image {
		width: 100%;
		/* Full width */
		height: 350px;
		/* Shorter height for mobile */
	}

	/* Adjust font sizes for mobile */
	.t-light {
		font-size: 32px;
	}

	.t-italic {
		font-size: 40px;
		margin: 5px 0;
	}

	.tune-btn {
		width: auto;
		padding: 5px 5px 5px 20px;
	}

	.tune-btn span {
		font-size: 14px;
	}
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
	.t-light {
		font-size: 26px;
	}

	.t-italic {
		font-size: 32px;
	}

	.tune-banner-image {
		height: 300px;
	}
}






@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Lato:wght@300;400&display=swap');

:root {
	--gold: #c5a47e;
	--dark-text: #1a1a1a;
	--grey-text: #666666;
	--card-radius: 30px;
}

/* Base Layout */
.treatments-section {
	padding: 80px 20px;
	background-color: #ffffff;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
}

.treatments-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Header */
.treatments-header {
	text-align: center;
	margin-bottom: 60px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.treatments-title {
	font-family: 'esthatic-bold';
	font-size: 48px;
	color: var(--dark-text);
	font-weight: 400;
	margin: 0 0 20px 0;
}

.treatments-title .highlight {
	font-family: 'esthatic';
	color: var(--gold);
	font-weight: 400;
}

.treatments-subtitle {
	font-size: 16px;
	color: var(--grey-text);
	line-height: 1.6;
	font-weight: 300;
	margin: 0 auto;
	max-width: 650px;
}

/* Grid Layout */
.treatments-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

/* Card Styles */
.treatment-card {
	position: relative;
	border-radius: var(--card-radius);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	/* Aspect ratio matches the tall vertical cards in design (approx 3:4.5) */
	aspect-ratio: 280 / 420;
	transition: transform 0.3s ease;
	cursor: pointer;
}

/* .treatment-card:hover {
	transform: translateY(-5px);
} */

/* Overlay Gradient */
.card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Gradient from transparent top to dark bottom to make text readable */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(62, 58, 55, 0.4) 60%, rgba(62, 58, 55, 0.95) 100%);
	z-index: 1;
}

/* Card Content */
.card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 25px;
	box-sizing: border-box;
	z-index: 2;
	text-align: left;
}

.card-title {
	font-family: 'Poppins-Light';
	font-size: 26px;
	color: #ffffff;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 15px 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Tags */
.card-tags {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

.tag {
	font-size: 9px;
	font-weight: 100;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.1);
	padding: 4px 10px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	backdrop-filter: blur(2px);
}

/* Button */
.card-btn {
	display: inline-block;
	background-color: #ffffff;
	color: var(--dark-text);
	text-decoration: none;
	padding: 10px 70px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.3px;
	transition: all 0.3s;
	min-width: 120px;
}

.card-btn:hover {
	background-color: #f0f0f0;
	transform: scale(1.05);
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* Tablet (1024px) -> 2 Columns */
@media (max-width: 1024px) {
	.treatments-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 700px;
		margin: 0 auto;
	}

	.treatments-title {
		font-size: 40px;
	}
}

/* Mobile (768px) -> 1 Column */
@media (max-width: 768px) {
	.treatments-grid {
		grid-template-columns: 1fr;
		max-width: 380px;
		/* Limits width of single card on mobile */
	}

	.treatments-header {
		margin-bottom: 40px;
	}

	.treatments-title {
		font-size: 32px;
	}

	.treatments-subtitle {
		font-size: 14px;
		padding: 0 10px;
	}

	.treatment-card {
		/* Slightly taller aspect ratio on mobile looks better */
		aspect-ratio: 3/4;
	}
}



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Lato:wght@300;400;700&display=swap');

:root {
	--sf-bg: #fffbf5;
	/* Cream background from image */
	--sf-green: #0e4032;
	--sf-gold: #c5a47e;
	--sf-border: #e0e0e0;
	--sf-text: #666;
}

/* SECTION BASE */
.sf-section {
	background-color: #f8f3ed !important;
	padding: 80px 20px;
	font-family: 'Lato', sans-serif;
	overflow: hidden;
}

.sf-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* TYPOGRAPHY SHARED */
.sf-heading {
	font-family: 'esthatic-bold';
	font-size: 42px;
	color: var(--sf-green);
	line-height: 1.2;
	margin: 0 0 20px 0;
	font-weight: 400;
}

.sf-italic {
	font-style: italic;
	font-weight: 400;
}

.sf-line {
	display: inline-block;
	width: 80px;
	height: 1px;
	background-color: var(--sf-gold);
	vertical-align: middle;
	margin-left: 15px;
}

/* ==================== 
   PART 1: TESTIMONIALS 
   ==================== */

.sf-testimonials-wrapper {
	margin-bottom: 100px;
}

.sf-testi-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 40px;
}

/* Nav Buttons */
.sf-nav-buttons {
	display: flex;
	gap: 15px;
}

.sf-arrow {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid var(--sf-gold);
	background: transparent;
	color: var(--sf-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s;
}

.sf-arrow:hover {
	background-color: var(--sf-gold);
	color: #fff;
}

/* Ensure the track is wide enough and allows flex layout */
.sf-slider-tracker {
	display: flex;
	gap: 30px;
	width: max-content;
	/* Allows track to be as wide as needed */
	will-change: transform;
	/* Transition is handled by JS, so we default to none here to avoid conflicts on load */
	transition: none;
}

/* Ensure window hides the overflow */
.sf-slider-container {
	overflow: unset;
	width: 100%;
	position: relative;
}

/* Review Card */
.sf-card {
	min-width: 350px;
	/* Fixed width per card */
	max-width: 320px;
	background: #fff;
	border: 1px solid var(--sf-gold);
	border-radius: 20px;
	padding: 30px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.sf-quote-mark {
	font-family: serif;
	font-size: 60px;
	color: var(--sf-gold);
	line-height: 0.5;
	margin-bottom: 10px;
}

.sf-card-title {
	font-weight: 700;
	color: #111;
	margin: 0 0 10px 0;
	font-size: 16px;
}

.sf-card-body {
	font-size: 14px;
	color: var(--sf-text);
	line-height: 1.6;
	margin-bottom: 20px;
	flex-grow: 1;
}

.sf-divider {
	height: 1px;
	background-color: var(--sf-gold);
	width: 40px;
	margin-bottom: 20px;
}

.sf-card-footer {
	display: flex;
	align-items: center;
	gap: 15px;
}

.sf-avatar {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	object-fit: cover;
}

.sf-user-details {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.sf-username {
	font-size: 14px;
	font-weight: 700;
	color: var(--sf-green);
}

.sf-stars {
	color: #f4c150;
	font-size: 12px;
}

.sf-read-more {
	text-decoration: none;
	font-size: 12px;
	color: #333;
	display: flex;
	align-items: center;
	font-weight: 600;
	white-space: nowrap;
}

/* ==================== 
   PART 2: FAQ 
   ==================== */

.sf-faq-wrapper {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	/* Left takes less space */
	gap: 60px;
	align-items: start;
	margin-top: 100px;
}

/* Left Badge */
.sf-med-badge {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--sf-gold);
	border-radius: 50px;
	padding: 8px 25px 8px 8px;
	/* Padding for pill shape */
	gap: 15px;
	margin-top: 30px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.sf-badge-img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.sf-badge-info {
	display: flex;
	flex-direction: column;
}

.sf-badge-label {
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sf-badge-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--sf-green);
}

/* Right Accordion */
.sf-accordion-item {
	border-bottom: 1px solid var(--sf-gold);
	margin-bottom: 0;
}

.sf-accordion-header {
	width: 100%;
	background: none;
	border: none;
	padding: 25px 0;
	text-align: left;
	font-size: 18px;
	color: var(--sf-green);
	font-weight: 500;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

.sf-icon-chevron {
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--sf-green);
	border-bottom: 2px solid var(--sf-green);
	transform: rotate(45deg);
	/* Arrow Down */
	transition: transform 0.3s;
	flex-shrink: 0;
}

.sf-accordion-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.sf-accordion-inner {
	padding-bottom: 25px;
	font-size: 15px;
	color: var(--sf-gold);
	/* Using the goldish/tan text from design */
	line-height: 1.6;
}

/* Open State */
.sf-accordion-item.sf-open .sf-icon-chevron {
	transform: rotate(-135deg);
	/* Arrow Up */
}

.sf-accordion-item.sf-open .sf-accordion-body {
	max-height: 200px;
	/* Arbitrary large height */
}

/* ==================== 
   RESPONSIVE 
   ==================== */
@media (max-width: 1024px) {
	.sf-faq-wrapper {
		gap: 30px;
	}
}

@media (max-width: 768px) {

	/* Testimonials Mobile */
	.sf-testi-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.sf-card {
		min-width: 280px;
		/* Smaller cards */
	}

	/* FAQ Mobile */
	.sf-faq-wrapper {
		grid-template-columns: 1fr;
	}

	.sf-heading {
		font-size: 32px;
	}

	.sf-accordion-header {
		font-size: 16px;
	}
}



/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');

:root {
	--text-green: #0e4032;
	/* Dark Green for breadcrumb */
	--text-dark: #1a1a1a;
	/* Main text color */
	--bg-skin: #ebdcd1;
	/* Fallback skin color */
}

/* Base Setup */
.conditions-hero-section {
	padding: 20px;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-weight: 100;
	background-color: #ffffff;
	box-sizing: border-box;
}

.ch-container {
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
}

/* Breadcrumb */
.ch-breadcrumb {
	margin-bottom: 25px;
	color: var(--text-green);
	font-size: 16px;
	font-weight: 500;
}

.ch-breadcrumb a {
	text-decoration: none;
	color: inherit;
	transition: opacity 0.3s;
}

.ch-breadcrumb a:hover {
	opacity: 0.7;
}

.ch-breadcrumb .sep {
	margin: 0 8px;
}

/* Banner Card */
.ch-banner {
	/* Using a skin texture image to match design */
	/* Fallback color if image doesn't load */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	border-radius: 40px;
	width: 100%;
	min-height: 450px;

	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

/* Optional: Overlay to tint the texture to match the exact pinkish/nude tone */
.ch-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(235, 220, 209, 0.85);
	/* Adjust opacity for texture visibility */
	z-index: 1;
}

/* Typography */
.ch-heading {
	position: relative;
	z-index: 2;
	font-weight: 300;
	/* Light weight matches design */
	font-size: 42px;
	line-height: 1.5;
	color: #1a1a1ad9;
	margin: 0;
	max-width: 900px;

}

/* --- RESPONSIVE --- */

/* Tablet (1024px) */
@media (max-width: 1024px) {
	.ch-banner {
		min-height: 350px;
		border-radius: 30px;
	}

	.ch-heading {
		font-size: 32px;
	}
}

/* Mobile (768px) */
@media (max-width: 768px) {
	.conditions-hero-section {
		padding: 15px;
	}

	.ch-banner {
		min-height: 280px;
		border-radius: 20px;
		padding: 30px 20px;
	}

	.ch-heading {
		font-size: 24px;
		line-height: 1.4;
	}

	/* On mobile, remove <br> effect by forcing layout */
	.ch-heading br {
		display: none;
	}
}



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Lato:wght@300;400;500&display=swap');

:root {
	--cf-gold: #c5a47e;
	--cf-dark: #1a1a1a;
	--cf-grey-btn: #f5f5f5;
	--cf-grey-text: #888;
	--cf-active-grey: #8c8c8c;
	/* Dark grey for active button */
	--cf-radius: 30px;
}

/* SECTION BASE */
.conditions-filter-section {
	padding: 80px 20px;
	background-color: #ffffff;
	font-family: 'Lato', sans-serif;
}

.cf-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* HEADER */
.cf-header {
	text-align: center;
	margin-bottom: 40px;
}

.cf-title {
	font-family: 'esthatic-bold';
	font-size: 48px;
	color: var(--cf-dark);
	font-weight: 400;
	margin: 0;
}

.cf-italic {
	font-style: italic;
	color: var(--cf-gold);
	font-weight: 400;
}

/* FILTER NAVIGATION */
.cf-filter-nav {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 50px;
}

.cf-filter-btn {
	padding: 12px 30px;
	border-radius: 50px;
	border: none;
	background-color: var(--cf-grey-btn);
	color: #555;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	min-width: 100px;
}

.cf-filter-btn:hover {
	background-color: #e0e0e0;
}

/* Active State (Dark Grey) */
.cf-filter-btn.active {
	background-color: var(--cf-active-grey);
	color: #ffffff;
	font-weight: 500;
}

/* GRID LAYOUT */
.cf-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	min-height: 400px;
	/* Prevents layout jump when filtering */
}

/* CARD STYLES */
.cf-card {
	position: relative;
	border-radius: var(--cf-radius);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	aspect-ratio: 280 / 420;
	/* Vertical Layout */
	cursor: pointer;
	transition: transform 0.3s ease, opacity 0.4s ease;
	opacity: 1;
	transform: scale(1);
}

.cf-card:hover {
	transform: translateY(-5px);
}

/* Animation Class for JS */
.cf-card.hide {
	display: none;
}

.cf-card.fade-in {
	animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Overlay */
.cf-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* Gradient: Transparent top -> Dark bottom */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(60, 50, 45, 0.4) 60%, rgba(60, 50, 45, 0.95) 100%);
	z-index: 1;
}

/* Card Content */
.cf-card-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 30px 20px;
	box-sizing: border-box;
	z-index: 2;
	/* display: flex; */
	flex-direction: column;
	align-items: center;
}

.cf-card-title {
	font-family: 'Poppins-Light';
	font-size: 28px;
	color: #ffffff;
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 15px 0;
	text-transform: capitalize;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.cf-tags {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.cf-tag {
	font-size: 10px;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-color: rgba(255, 255, 255, 0.1);
	padding: 5px 12px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	backdrop-filter: blur(2px);
}

.cf-btn {
	display: inline-block;
	background-color: #ffffff;
	color: var(--cf-dark);
	text-decoration: none;
	padding: 12px 28px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.3s;
	min-width: 140px;
}

.cf-btn:hover {
	background-color: #f0f0f0;
	transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
	.cf-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 700px;
		margin: 0 auto;
	}

	.cf-title {
		font-size: 40px;
	}
}

@media (max-width: 768px) {
	.cf-header {
		margin-bottom: 30px;
	}

	.cf-title {
		font-size: 32px;
	}

	/* Scrollable Filter on Mobile */
	.cf-filter-nav {
		justify-content: flex-start;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: 10px;
		margin-bottom: 30px;
		/* Hide scrollbar visually */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.cf-filter-nav::-webkit-scrollbar {
		display: none;
	}

	.cf-grid {
		grid-template-columns: 1fr;
		max-width: 380px;
	}

	.cf-card-title {
		font-size: 26px;
	}
}



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Lato:wght@300;400&display=swap');

:root {
	--ht-green: #0e4032;
	--ht-gold: #c5a47e;
	--ht-text-dark: #1a1a1a;
	--ht-text-grey: #666666;
}

/* Base Layout */
.how-treat-section {
	padding: 80px 20px;
	background-color: #ffffff;
	font-family: 'Lato', sans-serif;
	text-align: center;
}

.ht-container {
	max-width: 1000px;
	margin: 0 auto;
}

/* Header */
.ht-header {
	margin-bottom: 60px;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.ht-title {
	font-family: 'esthatic-bold';
	font-size: 48px;
	color: var(--ht-text-dark);
	font-weight: 400;
	margin: 0 0 20px 0;
}

.ht-italic {
	font-style: italic;
	color: var(--ht-gold);
	font-weight: 400;
}

.ht-subtitle {
	font-size: 16px;
	color: var(--ht-text-grey);
	line-height: 1.6;
	font-weight: 300;
}

/* Features Row */
.ht-features-row {
	display: flex;
	justify-content: space-around;
	/* Distributes items evenly */
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
}

/* Individual Feature Item */
.ht-feature-item {
	display: flex;
	align-items: center;
	gap: 15px;
}

/* Icon Circle */
.ht-icon-circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	flex-shrink: 0;
	box-shadow: 0 5px 15px rgba(14, 64, 50, 0.2);
	transition: transform 0.3s ease;
}

.ht-icon-circle svg {
	width: 28px;
	height: 28px;
}

.ht-feature-item:hover .ht-icon-circle {
	transform: scale(1.1);
}

/* Feature Text */
.ht-feature-text {
	/* Using Sans-serif based on image analysis */
	font-size: 18px;
	color: var(--ht-text-dark);
	font-weight: 400;
	margin: 0;
	white-space: nowrap;
	/* Keeps text on one line */
}

/* --- Responsive --- */

/* Tablet (1024px) */
@media (max-width: 1024px) {
	.ht-title {
		font-size: 42px;
	}
}

/* Mobile (768px) */
@media (max-width: 768px) {
	.how-treat-section {
		padding: 60px 20px;
	}

	.ht-title {
		font-size: 32px;
	}

	.ht-features-row {
		flex-direction: column;
		/* Stack items vertical */
		align-items: flex-start;
		/* Align left or center */
		gap: 25px;
		width: fit-content;
		margin: 0 auto;
		/* Center the stack */
	}

	.ht-feature-item {
		width: 100%;
	}

	.ht-feature-text {
		font-size: 16px;
	}

	.ht-icon-circle {
		width: 50px;
		height: 50px;
	}

	.ht-icon-circle svg {
		width: 24px;
		height: 24px;
	}
}


@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

:root {
	--cs-green: #0e4032;
	/* Main green color */
	--cs-quote: #0e4032;
	--cs-text: #555555;
	--cs-divider: #000000;
	--cs-gold: #f4c150;
	--cs-bg: #ffffff;
}

.clients-say-section {
	padding: 60px 20px;
	background-color: var(--cs-bg);
	color: var(--cs-text);
}

.cs-container {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

/* Horizontal Lines */
.cs-divider {
	height: 1px;
	background-color: var(--cs-divider);
	width: 100%;
	opacity: 1;
}

.cs-divider.top {
	margin-bottom: 40px;
}

.cs-divider.bottom {
	margin-top: 40px;
}

/* Heading */
.cs-heading {
	font-size: 36px;
	color: var(--cs-green);
	font-weight: 300;
	margin: 0 0 50px 0;
	/* Mimics the font in image */
}

/* Slider Layout */
.cs-slider-wrapper {
	display: flex;
	align-items: center;
	gap: 20px;
	position: relative;
}

/* Navigation Arrows */
.cs-nav-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--cs-green);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	transition: transform 0.2s;
	flex-shrink: 0;
	z-index: 2;
}

.cs-nav-btn:hover {
	transform: scale(1.2);
}

/* Carousel Window */
.cs-carousel-window {
	overflow: hidden;
	width: 100%;
	/* Masks the content */
}

.cs-track {
	display: flex;
	/* JS calculates width, but flex keeps them in a row */
	width: max-content;
	will-change: transform;
}

/* Cards */
.cs-card {
	/* On desktop, we want 3 items visible. 
       Flex-basis will be handled or width logic via CSS calc.
       Assuming container width W:
       Each card = W / 3 
    */
	width: 33.333%;
	box-sizing: border-box;
	flex-shrink: 0;
	padding: 0 20px;
	/* Spacing between content */
	border-right: 1px solid #ccc;
	/* Vertical Divider */
}

/* Remove border from the visual last item? 
   In an infinite loop, it's safer to keep borders or use transparent borders.
   The design shows separators between items. */

.cs-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cs-quote-icon {
	font-size: 60px;
	line-height: 0.5;
	color: var(--cs-quote);
	font-family: serif;
	margin-bottom: 15px;
	display: block;
	margin-top: 10px;
}

.cs-card-title {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	margin: 0 0 15px 0;
}

.cs-card-text {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 30px 0;
	color: #666;
}

/* User Profile */
.cs-user-profile {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: auto;
}

.cs-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.cs-user-info {
	display: flex;
	flex-direction: column;
}

.cs-name {
	font-size: 14px;
	font-weight: 700;
	color: #000;
}

.cs-stars {
	color: var(--cs-gold);
	font-size: 14px;
	margin-top: 2px;
}

/* Pagination Dots */
.cs-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}

.cs-dot {
	width: 8px;
	height: 8px;
	background-color: #ddd;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.3s;
}

.cs-dot.active {
	background-color: #999;
}

/* --- Responsive --- */

/* Tablet (1024px) - 2 cards visible */
@media (max-width: 1024px) {
	.cs-card {
		width: 300px;
		/* Fixed width fallback or calculated in JS */
	}
}

/* Mobile (768px) - 1 card visible */
@media (max-width: 768px) {
	.cs-heading {
		font-size: 28px;
		margin-bottom: 30px;
	}

	.cs-slider-wrapper {
		gap: 5px;
	}

	/* On mobile, arrows might be tight, can hide or make smaller */
	.cs-nav-btn {
		padding: 5px;
	}

	.cs-nav-btn svg {
		width: 15px;
		height: 30px;
	}

	/* Vertical Dividers look odd on single column, usually removed */
	.cs-card {
		border-right: none;
		padding: 0 10px;
	}
}



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Lato:wght@300;400&display=swap');

:root {
	--ct-green: #0e4032;
	/* Deep Green Text */
	--ct-gold: #c5a47e;
	/* Divider/Border Color */
	--ct-text: #555555;
	/* Body Text */
	--ct-bg: #ffffff;
}

/* SECTION BASE */
.combinable-section {
	padding: 80px 20px;
	background-color: var(--ct-bg);
	font-family: 'Lato', sans-serif;
	color: var(--ct-text);
}

.ct-container {
	max-width: 1100px;
	margin: 0 auto;
}

/* HEADER */
.ct-header {
	text-align: center;
	margin-bottom: 50px;
}

.ct-main-title {
	font-family: 'esthatic-bold', serif;
	font-size: 42px;
	font-weight: 400;
	color: #111;
	margin: 0;
}

.ct-italic {
	font-style: italic;
	font-weight: 400;
}

/* DIVIDER LINE */
.ct-divider {
	width: 100%;
	height: 1px;
	background-color: #e0d5c5;
	/* Muted gold/beige */
	margin: 0;
}

/* LIST ITEM LAYOUT (CSS GRID) */
.ct-item {
	display: grid;
	/* Grid Columns: Image | Arrow | Title | Description */
	grid-template-columns: 120px 60px 220px 1fr;
	align-items: center;
	gap: 30px;
	padding: 40px 0;
}

/* IMAGE */
.ct-img-box {
	width: 100px;
	height: 100px;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--ct-gold);
	flex-shrink: 0;
}

.ct-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ARROW */
.ct-arrow {
	color: var(--ct-green);
	display: flex;
	justify-content: center;
}

/* TITLE */
.ct-item-title {
	font-family: 'esthatic-bold', serif;
	font-size: 26px;
	font-style: italic;
	font-weight: 400;
	color: var(--ct-green);
	margin: 0;
	line-height: 1.2;
}

/* DESCRIPTION */
.ct-description {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ct-text);
}

.ct-description p {
	margin: 0 0 15px 0;
}

.ct-description p:last-child {
	margin: 0;
}

/* --- RESPONSIVE --- */

/* Tablet (Max 1024px) */
@media (max-width: 1024px) {
	.ct-item {
		/* Reduce gap and column widths */
		grid-template-columns: 100px 40px 180px 1fr;
		gap: 20px;
	}

	.ct-item-title {
		font-size: 22px;
	}
}

/* Mobile (Max 768px) */
@media (max-width: 768px) {
	.ct-main-title {
		font-size: 32px;
	}

	.ct-item {
		/* Stack vertically */
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: 50px 0;
		gap: 20px;
	}

	/* Rotate arrow to point down on mobile */
	.ct-arrow svg {
		transform: rotate(90deg);
	}

	.ct-img-box {
		width: 120px;
		height: 120px;
	}

	.ct-item-title {
		font-size: 24px;
		margin-bottom: 5px;
	}

	.ct-description {
		padding: 0 10px;
	}
}


@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Lato:wght@300;400;700&display=swap');

:root {
	--tb-green: #0e4032;
	--tb-gold: #c5a47e;
	--tb-text: #1a1a1a;
	--tb-bg: #ffffff;
	--tb-gray-light: #f9f9f9;
}

/* Base Styles */
.tune-blog-section {
	padding: 0px 20px;
	background-color: var(--tb-bg);
	font-family: 'Poppins-Light';
	color: var(--tb-text);
}

.tb-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Main Title */
.tb-main-title {
	text-align: center;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', sans-serif;
	font-size: 48px;
	color: var(--tb-green);
	margin-bottom: 60px;
	font-weight: 100;
}

.tb-italic {
	font-family: 'esthatic-bold', serif;
	font-style: italic;
	color: var(--tb-gold);
	font-weight: 100;
}

/* Layout: Sidebar + Content */
.tb-layout {
	display: grid;
	grid-template-columns: 200px 1fr;
	/* Sidebar width | Grid width */
	gap: 60px;
}

/* Sidebar */
.tb-cat-heading {
	font-size: 24px;
	color: var(--tb-text);
	margin-bottom: 30px;
	font-weight: 400;
}

.tb-cat-nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}

.tb-cat-btn {
	background: none;
	border: none;
	font-family: 'Satoshi', system-ui, -apple-system;
	font-size: 16px;
	color: #666;
	cursor: pointer;
	padding: 0;
	position: relative;
	transition: color 0.3s;
	text-align: left;
}

.tb-cat-btn:hover {
	color: var(--tb-text);
}

.tb-cat-btn.active {
	color: var(--tb-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-color: var(--tb-text);
}

/* Grid Area */
.tb-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 2 Columns */
	gap: 40px;
	min-height: 400px;
	/* Prevent jump on filter */
}

/* Cards */
.tb-card {
	border: 1px solid #e0e0e0;
	border-radius: 30px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.3s ease, opacity 0.4s ease;
	opacity: 1;
}

.tb-card:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transform: translateY(-5px);
}

.tb-img-wrapper {
	position: relative;
	width: 100%;
	height: 220px;
	overflow: hidden;
}

.tb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tb-tag {
	position: absolute;
	top: 15px;
	left: 15px;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 10px;
	padding: 4px 10px;
	border-radius: 20px;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}

.tb-card-body {
	padding: 25px;
	text-align: center;
}

.tb-desc {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 20px;
	font-weight: 700;
	color: var(--tb-text);
}

.tb-link {
	font-size: 12px;
	color: #000;
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.3s;
}

.tb-link:hover {
	color: var(--tb-text);
}

/* Pagination */
.tb-pagination {
	margin-top: 60px;
	display: flex;
	justify-content: center;
	gap: 15px;
	align-items: center;
}

.tb-page-btn {
	background: none;
	border: none;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	color: #888;
	cursor: pointer;
	padding: 5px 10px;
	transition: all 0.3s;
}

.tb-page-btn:hover {
	color: var(--tb-green);
}

.tb-page-btn.active {
	color: var(--tb-gold);
	font-weight: 700;
}

.tb-page-arrow {
	font-size: 18px;
}

/* Animation Classes */
.hidden {
	display: none;
}

.fade-in {
	animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* RESPONSIVE */
@media (max-width: 1024px) {
	.tb-layout {
		gap: 30px;
	}
}

@media (max-width: 768px) {
	.tb-main-title {
		font-size: 36px;
		margin-bottom: 40px;
	}

	/* Stack Sidebar on Top */
	.tb-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.tb-cat-nav {
		flex-direction: row;
		overflow-x: auto;
		padding-bottom: 10px;
		width: 100%;
		white-space: nowrap;
		border-bottom: 1px solid #eee;
	}

	/* Hide Scrollbar */
	.tb-cat-nav::-webkit-scrollbar {
		display: none;
	}

	.tb-cat-btn {
		padding: 5px 10px;
		font-size: 15px;
	}

	/* 1 Column Grid */
	.tb-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}


/* SECTION CONTAINER */
.tune-blog-section {
	padding: 60px 20px;
	max-width: 1200px;
	margin: 0 auto;
}

/* MAIN TITLE */
.tb-header {
	text-align: center;
	margin-bottom: 60px;
}

.tb-main-title {
	font-size: 48px;
	color: var(--tb-green);
	font-weight: 200;
	margin: 0;
	margin-bottom: 50px;
}

.tb-italic {
	font-style: italic;
	color: var(--tb-gold);
	font-weight: 400;
}

/* LAYOUT (SIDEBAR + GRID) */
.tb-layout {
	display: grid;
	grid-template-columns: 200px 1fr;
	/* Sidebar Fixed | Content Fluid */
	gap: 60px;
}

/* SIDEBAR NAV */
.tb-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tb-cat-heading {
	font-size: 24px;
	margin: 0 0 10px 0;
	font-weight: 400;
}

.tb-cat-nav {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.tb-cat-link {
	text-decoration: none;
	font-size: 16px;
	color: #666;
	transition: all 0.3s;
	position: relative;
	width: fit-content;
	cursor: pointer;
}

.tb-cat-link:hover {
	color: var(--tb-text);
}

/* Active State Style */
.tb-cat-link.active {
	color: var(--tb-text);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-color: var(--tb-text);
}

/* BLOG GRID */
.tb-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 2 Columns per design */
	gap: 40px;
	min-height: 400px;
}

/* CARD STYLES */
.tb-card {
	border: 1px solid var(--tb-border);
	border-radius: 30px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.tb-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Hide logic for JS filtering */
.tb-card.hidden {
	display: none;
}

/* Fade Animation */
.tb-card.fade-in {
	animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tb-img-box {
	position: relative;
	width: 100%;
	height: 240px;
	overflow: hidden;
}

.tb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.tb-card:hover .tb-img {
	transform: scale(1.05);
}

.tb-tag {
	position: absolute;
	top: 15px;
	left: 15px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 10px;
	padding: 5px 12px;
	border-radius: 20px;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}

.tb-card-content {
	padding: 30px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-grow: 1;
}

.tb-desc {
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 20px 0;
	font-weight: 700;
	color: var(--tb-text);
}

.tb-continue {
	margin-top: auto;
	font-size: 12px;
	color: #666;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.3s;
}

.tb-continue:hover {
	color: var(--tb-text);
}

/* PAGINATION */
.tb-pagination {
	grid-column: 1 / -1;
	/* Span full width */
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-top: 40px;
	font-size: 16px;
	color: #888;
}

.tb-page-link {
	cursor: pointer;
	transition: color 0.3s;
}

.tb-page-link:hover,
.tb-page-link.active {
	color: var(--tb-gold);
	font-weight: 700;
}

/* RESPONSIVE CSS */
@media (max-width: 1024px) {
	.tb-layout {
		grid-template-columns: 150px 1fr;
		gap: 30px;
	}
}

@media (max-width: 768px) {
	.tb-main-title {
		font-size: 36px;
	}

	/* Stack Sidebar on top */
	.tb-layout {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Horizontal Scroll Menu for Categories */
	.tb-sidebar {
		width: 100%;
		overflow: hidden;
	}

	.tb-cat-nav {
flex-direction: row!IMPORTANT; overflow-x: auto!IMPORTANT; white-space: nowrap!IMPORTANT; padding-bottom: 10px!IMPORTANT; overflow-x: auto !important; scrollbar-width: thin!IMPORTANT; scrollbar-color: #999 #eee!IMPORTANT;
	}
	
	
	.tbd-cat-nav {
    display: flex !important;
    flex-direction: row !important;
    white-space: nowrap !important;

    overflow-x: scroll !important;
    overflow-y: hidden !important;

    padding-bottom: 14px;
    gap: 10px;

    /* Firefox */
    scrollbar-width: auto;
    scrollbar-color: #888 #eaeaea;
}

/* Chrome / Edge / Safari */
.tbd-cat-nav::-webkit-scrollbar {
    height: 8px;
}

.tbd-cat-nav::-webkit-scrollbar-track {
    background: #eaeaea;
}

.tbd-cat-nav::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.tbd-cat-nav::-webkit-scrollbar-thumb:hover {
    background: #555;
}


	.tb-cat-nav::-webkit-scrollbar {
		display: none;
	}

	.tb-cat-link {
		padding: 5px 10px;
		background: #f9f9f9;
		border-radius: 15px;
		font-size: 14px;
	}

	.tb-cat-link.active {
		background: var(--tb-text);
		color: #fff;
		text-decoration: none;
	}

	/* Single Column Grid */
	.tb-grid {
		grid-template-columns: 1fr;
	}
}


/* --- Scoped Styles --- */
.tune-blog-detail-section {
	padding: 60px 20px;
	background-color: #ffffff;
	font-family: 'Lato', sans-serif;
	color: #1a1a1a;
	line-height: 1.6;
}

.tbd-container {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 200px 1fr;
	/* Sidebar width | Content width */
	gap: 60px;
}

/* Sidebar */
.tbd-sidebar {
	position: sticky;
	top: 20px;
	height: fit-content;
}

.tbd-cat-title {
	font-family: 'Lato', sans-serif;
	font-size: 24px;
	margin: 0 0 20px 0;
	font-weight: 400;
}

.tbd-cat-nav {
	display: flex!important;
	flex-direction: column!important;
	gap: 15px;
}

.tbd-cat-link {
	text-decoration: none;
	color: #666;
	font-size: 15px;
	transition: all 0.3s;
	font-weight: 400;
}

.tbd-cat-link:hover,
.tbd-cat-link.active {
	color: #0e4032;
	/* Green */
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: #c5a47e;
	/* Gold */
}

/* Content */
.tbd-content {
	width: 100%;
}

.tbd-h1 {
	font-size: 34px;
	font-weight: 500;
	color: #0e4032;
	margin: 0 0 30px 0;
	line-height: 1.3;
}

.tbd-h2 {
	font-size: 26px;
	font-weight: 500;
	color: #0e4032;
	margin: 40px 0 20px 0;
}

.tbd-main-img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 25px;
	object-fit: cover;
	max-height: 500px;
}

.tbd-text-block p {
	margin-bottom: 20px;
	color: #555;
	font-size: 16px;
	text-align: justify;
}

/* CTA Button */
.tbd-cta-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 8px 8px 25px;
	border: 1px solid #0e4032;
	border-radius: 50px;
	text-decoration: none;
	color: #0e4032;
	font-size: 14px;
	transition: 0.3s;
	margin-top: 20px;
	width: fit-content;
}

.tbd-cta-btn span {
	margin-right: 15px;
	font-weight: 500;
}

.tbd-cta-icon {
	width: 32px;
	height: 32px;
	background-color: #0e4032;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.tbd-cta-btn:hover {
	background-color: #f4f9f7;
}

/* Share Section */
.tbd-share-row {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 50px 0;
	padding-top: 20px;
	border-top: 1px solid #eaeaea;
}

.tbd-share-label {
	font-weight: 700;
	font-size: 16px;
	color: #000;
}

.tbd-socials {
	display: flex;
	gap: 12px;
}

.tbd-social-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #0e4032;
	/* Placeholder bg */
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	transition: transform 0.2s;
}

/* Use specific brand colors if desired, here keeping uniform per design */
.tbd-social-icon.facebook {
	background: #1877F2;
}

.tbd-social-icon.x {
	background: #000;
}

.tbd-social-icon.instagram {
	background: #E1306C;
}

.tbd-social-icon.linkedin {
	background: #0077B5;
}

.tbd-social-icon.reddit {
	background: #FF4500;
}

.tbd-social-icon:hover {
	transform: translateY(-2px);
}

/* Related Posts */
.tbd-related-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 25px;
	color: #1a1a1a;
}

.tbd-related-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}

.tbd-card {
	border: 1px solid #e0e0e0;
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.3s;
}

.tbd-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.tbd-card-img-wrap {
	position: relative;
	height: 180px;
	overflow: hidden;
}

.tbd-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tbd-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 10px;
	text-transform: uppercase;
	backdrop-filter: blur(2px);
}

.tbd-card-body {
	padding: 20px;
	text-align: center;
}

.tbd-card-title {
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 15px;
}

.tbd-card-link {
	font-size: 12px;
	color: #666;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s;
}

.tbd-card-link:hover {
	color: #0e4032;
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.tbd-container {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.tbd-cat-nav {
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
		/* Hide scrollbar */
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.tbd-cat-nav::-webkit-scrollbar {
		display: none;
	}

	.tbd-cat-link {
		padding: 6px 15px;
		background: #f5f5f5;
		border-radius: 20px;
	}

	.tbd-cat-link.active {
		background: #0e4032;
		color: white;
		text-decoration: none;
	}

	.tbd-h1 {
		font-size: 28px;
	}

	.tbd-h2 {
		font-size: 22px;
	}

	.tbd-related-grid {
		grid-template-columns: 1fr;
	}
	
	
	.tbd-sidebar {
	    order: 1;
	}
	    .tbd-cat-nav {
	        border-bottom: unset!important;
	    }
}


.tbd-share-row .instagram {
	padding: 0px;
}

/* =========================================
   Refactor: Conditions Page - Treatments Grid
   ========================================= */
.pigmentation-accordion .treatments-grid {
	width: 100% !important;
	display: block !important;
}

.pigmentation-accordion .treatments-grid .treatment-item {
	width: 100% !important;
	max-width: 100% !important;
}

.pigmentation-accordion .treatments-grid .treatment-item h4 {
	text-align: center !important;
	margin-bottom: 40px;
	font-size: 24px;
	color: #0e3b2f;
	text-decoration: underline;
	text-underline-offset: 5px;
	font-weight: 500;
	display: block !important;
	width: 100% !important;
}

.pigmentation-accordion .treatments-grid .treatment-chips {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	/* Forces 3 columns */
	justify-items: center;
	align-items: start;
	gap: 40px;
	margin-bottom: 30px;
	width: 100% !important;
	max-width: 900px !important;
	/* Prevents it from getting too wide */
	margin-left: auto !important;
	margin-right: auto !important;
}

.treatments-grid .chip {
	font-size: 18px;
	color: #4b5563;
	white-space: normal;
	/* Allow wrapping if text is long */
	text-align: center;
	display: block;
}

/* Mobile: Stack them */
@media (max-width: 900px) {
	.treatments-grid .treatment-chips {
		grid-template-columns: 1fr !important;
		gap: 20px;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================================
   Refactor: Tune Conditions Section (Recreated)
   ========================================= */

/* Container Grid */
.tune-tabs-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 60px;
	align-items: start;
}

/* Sidebar Attributes */
.tune-tabs-sidebar {
	display: flex;
	flex-direction: column;
}

/* Sidebar Link/Button */
.tune-tab-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 25px;
	background: #fff;
	border: 1px solid #eaeaea;
	border-bottom: none;
	/* Collapsed borders */
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 16px;
	color: #555;
	font-weight: 400;
}

.tune-tab-link:first-child {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.tune-tab-link:last-child {
	border-bottom: 1px solid #eaeaea;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* Active State */
.tune-tab-link.active {
	border: 1px solid #0e4032;
	/* Green border */
	background-color: #fcfefe;
	color: #0e4032;
	font-weight: 700;
	position: relative;
	z-index: 2;
	/* Bring to front */
}

.tune-tab-link svg {
	display: none;
	color: #0e4032;
	transition: transform 0.3s;
}

.tune-tab-link.active svg {
	display: block;
	transform: rotate(180deg);
}


/* Content Area */
.tune-tabs-content {
	background: transparent;
}

.tune-tab-pane {
	display: none;
	animation: fadeInPane 0.5s ease;
}

.tune-tab-pane.active {
	display: block;
}

@keyframes fadeInPane {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mobile Trigger (Hidden on Desktop) */
.tune-mobile-trigger {
	display: none;
}

.tune-pane-inner {
	/* Container for the actual content */
}

/* =========================================
   Responsive: Conditions Section
   ========================================= */
@media (max-width: 992px) {
	.tune-tabs-grid {
		display: block;
		/* Stack */
	}

	.tune-tabs-sidebar {
		display: none;
		/* Hide sidebar tabs */
	}

	.tune-tab-pane {
		display: block;
		/* Always 'block' so we can see triggers, but hide inner content */
		margin-bottom: 15px;
		background: #fff;
		border: 1px solid #eee;
		border-radius: 8px;
		overflow: hidden;
	}

	/* Logic: 
       By default, if NOT active, hide .tune-pane-inner. 
       If Active, show it.
    */
	.tune-tab-pane .tune-pane-inner {
		display: none;
	}

	.tune-tab-pane.active .tune-pane-inner {
		display: block;
		padding: 20px;
	}

	/* Mobile Trigger */
	.tune-mobile-trigger {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 18px 20px;
		background-color: #fff;
		cursor: pointer;
		font-weight: 600;
		color: #0e3b2f;
		border-bottom: 1px solid #f0f0f0;
		user-select: none;
		/* Prevent text selection */
	}

	.tune-mobile-trigger.active {
		background-color: #f1f8f6;
		/* Green tint */
		color: #0e4032;
	}

	.tune-mobile-trigger svg {
		transition: transform 0.3s;
	}

	.tune-mobile-trigger.active svg {
		transform: rotate(180deg);
	}

	/* Ensure content has spacing */
	.tune-tab-pane.active {
		border-color: #0e4032;
	}
}


.appoinment-botton-in-faq {
	color: #004534 !important;
}

:root {
	--fw-gold: #955828;
	--fw-dark: #1a1a1a;
	--fw-divider: #e6dacd;
	--fw-bg: #ffffff;
}

/* SECTION BASE */
.find-way-section {
	position: relative;
	padding: 60px 20px;
	background-color: var(--fw-bg);
	overflow: hidden;
	/* Ensures glows stay inside */
}

/* BACKGROUND GLOWS - BASE STYLES */
.fw-glow {
	position: absolute;
	border-radius: 50%;
	z-index: 1;
	/* Sit ON TOP of white bg */
	pointer-events: none;
	/* Click through */
	filter: blur(80px);
	/* Heavy blur for soft light */
}

/* 1. Left Glow (Darker Gold) */
.fw-glow-left {
	width: 500px;
	height: 500px;
	top: -100px;
	left: -150px;
	background: radial-gradient(circle, rgb(197 164 126 / 97%) 0%, rgba(255, 255, 255, 0) 70%);
}

/* 2. Right Glow (Lighter Beige) */
.fw-glow-right {
	width: 500px;
	height: 500px;
	bottom: -100px;
	right: -150px;
	background: radial-gradient(circle, rgb(204 151 94 / 97%) 0%, rgba(255, 255, 255, 0) 70%);
}

/* 3. CENTER GLOW (New Addition) */
.fw-glow-center {
	width: 800px;
	height: 600px;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgb(255 177 93 / 82%) 0%, rgba(255, 255, 255, 0) 70%);
	opacity: 0.8;
}

/* CONTAINER */
.fw-container {
	position: relative;
	z-index: 2;
	/* Content sits ON TOP of glows */
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

/* DIVIDERS */
.fw-divider {
	width: 90%;
	height: 1px;
	background-color: var(--fw-divider);
	margin: 0 auto;
}

/* CONTENT WRAPPER */
.fw-content {
	padding: 40px 0 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* IMAGE STYLING */
.fw-image-box {
	width: 100%;
	max-width: 650px;
	margin-bottom: 30px;
	/* Fades the bottom of the image into the background */
	-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.fw-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	filter: sepia(0.1) contrast(1.05);
}

/* TYPOGRAPHY */
.fw-title {
	font-family: 'esthatic-bold', serif;
	font-size: 46px;
	color: var(--fw-gold);
	margin: 0 0 10px 0;
	font-weight: 400;
}

.fw-italic {
	font-style: italic;
	font-weight: 400;
}

.fw-subtitle {
	font-size: 16px;
	color: var(--fw-dark);
	margin: 0 0 30px 0;
	font-weight: 400;
	max-width: 500px;
	line-height: 1.6;
}

/* BUTTON */
.fw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	padding: 6px 6px 6px 25px;
	border: 1px solid var(--fw-gold);
	border-radius: 50px;
	transition: all 0.3s ease;
	background: transparent;
	min-width: 160px;
	cursor: pointer;
}

.fw-btn:hover {
	background-color: #faf7f2;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(197, 164, 126, 0.2);
}

.fw-btn-text {
	color: var(--fw-gold);
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 0.5px;
}

.fw-btn-icon {
	width: 35px;
	height: 35px;
	background-color: #a68b6c;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	margin-left: 15px;
	transition: transform 0.3s;
}

.fw-btn:hover .fw-btn-icon {
	transform: translateX(3px);
	background-color: var(--fw-gold);
}

/* RESPONSIVE */
@media (max-width: 768px) {
	.fw-glow {
		/* Adjust glows for mobile */
		width: 300px;
		height: 300px;
		filter: blur(50px);
	}

	.fw-glow-center {
		width: 100%;
		height: 400px;
	}

	.fw-divider {
		width: 100%;
	}

	.fw-title {
		font-size: 32px;
	}

	.fw-subtitle {
		font-size: 14px;
		padding: 0 20px;
	}

	.fw-content {
		padding: 30px 0 40px;
	}



	.desktop-dropdown:hover .desktop-dropdown-menu {
		opacity: 0 !important;
	}

	.treatment-chips {
		flex-direction: column !important;
		align-items: flex-start !important;
	}


	.pigmentation-accordion .treatments-grid .treatment-chips {

		gap: 0px !important;
		display: block !important;
		text-align: center !important;
	}

	/* Mobile Sub-Menu Vertical Scroll (inner) */
	.mobile-sub-scroll {
		display: block;
		overflow-y: auto;
		max-height: 200px;
		/* Smaller height for card */
		padding: 0;
		overflow-x: hidden;
		white-space: normal;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.sub-scroll-item {
		display: block;
		background: transparent;
		padding: 6px 0 !important;
		border: none;
		/* remove border */
		border-bottom: 1px solid #eee;
		border-radius: 0;
		font-size: 13px !important;
		color: #333 !important;
		white-space: normal;
	}

	.sub-scroll-item:last-child {
		border-bottom: none;
	}

	/* Mobile Locations Vertical Row */
	.mobile-locations-row {
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		max-height: 450px;
		gap: 15px;
		padding-bottom: 0;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.mobile-location-card {
		width: 100%;
		max-width: none;
		flex: 0 0 auto;
		border: 1px solid #eee;
		padding: 15px;
		border-radius: 8px;
		background: #fdfdfd;
		/* prevent card collapse */
	}
}