@font-face {font-family: 'cocoon'; font-weight: normal; font-style: normal; font-display: auto;
		src: url('https://cocoonmedicalspa.com/wp-content/uploads/dynamic_avia/avia_icon_fonts/cocoon/cocoon.woff2') format('woff2'),
		url('https://cocoonmedicalspa.com/wp-content/uploads/dynamic_avia/avia_icon_fonts/cocoon/cocoon.woff') format('woff'),
		url('https://cocoonmedicalspa.com/wp-content/uploads/dynamic_avia/avia_icon_fonts/cocoon/cocoon.ttf') format('truetype'),
		url('https://cocoonmedicalspa.com/wp-content/uploads/dynamic_avia/avia_icon_fonts/cocoon/cocoon.svg#cocoon') format('svg'),
		url('https://cocoonmedicalspa.com/wp-content/uploads/dynamic_avia/avia_icon_fonts/cocoon/cocoon.eot'),
		url('https://cocoonmedicalspa.com/wp-content/uploads/dynamic_avia/avia_icon_fonts/cocoon/cocoon.eot?#iefix') format('embedded-opentype');
		} #top .avia-font-cocoon, body .avia-font-cocoon, html body [data-av_iconfont='cocoon']:before{ font-family: 'cocoon'; }


/* #Icons
================================================== */
[data-av_icon]:before {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: normal;
	content: attr(data-av_icon);
	speak: never;
    font-size: 24px;
}

/* ============================================
   SPICE HAVEN RESTAURANT — Global Stylesheet
   ============================================ */
@font-face {
    font-family: "Font Awesome 7 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../webfonts/fa-regular-400.woff2);
}
@import url("../webfonts/fa-regular-400.woff2");
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* ---------- CSS Variables ---------- */
:root {
	--bg:			#FFFFFF;
	--sand:			#F8F3EA;
	--ivory:		#FFFCE5;
	--grey: 		#666666;
	--lgrey: 		#dddddd;
	--cocoon: 		#CE982C;
	--white:    	#ffffff;
	--black:    	#000000;
	--font-display: 'Playfair Display',  "Times New Roman", serif;
	--font-body:   'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fa-family-classic: "Font Awesome 7 Free";
    --fa-font-solid: normal 900 1em / 1 var(--fa-family-classic);
    --fa-style-family-classic: var(--fa-family-classic);
}
#hero,
#what-is-fue,
#hair-restoration-areas,
#before-after,
#faq,
#contact {
    scroll-margin-top: 120px;
}

p {
  font-family: "PT Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
 
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display",  "Times New Roman", serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  color: var(--cocoon);
}
.t-left { text-align: left;}
.t-right { text-align: right;}
.t-center { text-align: center;}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html   { scroll-behavior: smooth; }
body   { font-family: var(--font-body); background-color: var(--bg); color: var(--grey); overflow-x: hidden; font-size: clamp(17px, 1.5vw, 17px);}
img    { display: block; max-width: 100%; height: auto; }
a      { text-decoration: underline; color: var(--cocoon); }

.footer a, .nav-links a      { text-decoration: none; }


ul {list-style-position:inside; padding: 0px; margin-bottom: 10px;}

p { font-size: clamp(17px, 1.5vw, 17px); line-height: 1.85; margin-bottom: 10px}
h2 { font-family: var(--font-display); font-size: 35px; line-height: 1.1; text-align: center; }
h3 { font-size: 20px; font-family: var(--font-display);  margin-top:10px;}

/* ============================================
   NAVBAR  — Logo centered top row, links row below
   ============================================ */
.topnav {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	background-color: var(--white);
	z-index: 1000;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	/* two-row column layout */
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* ── Row 1: logo ── */
.nav-top-row {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px 0;
	position: relative;       /* anchor for hamburger */
}

.logo {
	font-family: var(--font-display);
	font-size: clamp(22px, 3.5vw, 42px);
	letter-spacing: 4px;
	text-align: center;
}

.logo img {
	display: block;
	max-width: 90%;
	height: auto;
}

/* ── Row 2: links ── */
.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2vw, 44px);
	padding: 10px 24px 14px;
	border-top: 1px solid rgba(0,0,0,0.09);
	margin-top: 10px;
	flex-wrap: wrap;
}

.nav-links a {
	font-size: clamp(17px, 1.1vw, 20px);
	color: var(--grey);
	padding: 4px 2px;
	border-bottom: 2px solid transparent;
	transition: color .2s, border-color .2s;
	white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
	color: var(--cocoon);
	border-bottom-color: var(--cocoon);
}

/* ── Hamburger (hidden on desktop) ── */
.nav-hamburger {
	display: none;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--grey);
	padding: 4px 8px;
	line-height: 1;
}





/* Dark gradient overlay — bottom-heavy for readability */

/* ============================================
   HERO — content and image
   ============================================ */

.hero{
	background:#F8F3EA;
	padding-top:120px;
	overflow:hidden;
}


.hero-container{
	max-width:1400px;
	margin:auto;
	display:grid;
	grid-template-columns:47% 53%;
	align-items:center;
	gap:40px;
	padding:0 60px;
}

.hero-content {
    z-index: 2;
    margin: 100px 0px;
}

.hero-subtitle{
	letter-spacing:4px;
	font-size:15px;
	font-family:'PT Sans';
	color:#555;
	margin-bottom:25px;
}

.hero h1{
	font-family:'Playfair Display';
	font-size:42px;
	line-height:1.05;
	font-weight:700;
	color:#CE982C;
	margin-bottom:30px;
}

.hero-divider{
	display:flex;
	align-items:center;
	gap:18px;
	margin-bottom:35px;
}

.hero-divider span{
	height:1px;
	width:90px;
	background:#CE982C;
	opacity:.4;
}

.hero-divider img{
	width:22px;
}

.hero-text{
	font-family:'PT Sans';
	font-size:17px;
	line-height:1.8;
	color:#555;
	max-width:500px;
}

.hero-buttons{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
    margin-bottom: 0px;
}

.btn-primary{
	background:#CE982C;
	padding:16px 16px;
	color:#fff;
	text-decoration:none;
	border-radius:6px;
	font-weight:bold;
	transition:.3s;
	margin-bottom: 30px;
}

.btn-primary:hover{
	opacity: .6;
}

.btn-secondary{
	border:2px solid #CE982C;
	padding:16px 16px;
	color:#CE982C;
	text-decoration:none;
	border-radius:6px;
	font-weight:bold;
	background:#fff;
	margin-bottom: 30px;
}
.btn-secondary:hover{
	opacity: .6;
}
.hero-image{
	position:relative;
}

.hero-image img{
	width:100%;
	display:block;
	border-radius:120px 0 0 120px;
}



/* Scroll hint — bottom-right of hero */
.hero-scroll-hint {
	position: absolute;
	bottom: 28px;
	left: 36px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.hero-scroll-hint span {
	font-size: 9px;
	letter-spacing: 3px;
	color: var(--grey);
	writing-mode: vertical-rl;
	text-orientation: mixed;
}

.scroll-line {
	width: 1px;
	height: 48px;
	background: linear-gradient(to bottom,var(--grey), transparent);
}




/* ============================================
   BreadCrumb
   ============================================ */

.breadcrumb, .update {
    font-size: 14px;
    color: var(--grey);
    margin: 10px 20px 10px 20px;
    margin-right: 20px;
    text-align: end;
}

.breadcrumb a{
	color: var(--cocoon);
	text-decoration:none;
}

.breadcrumb a:hover{
	opacity: .6;
}


/* ============================================
   STRIP BACKGROUND COLORS
   ============================================ */

.bgc-1 { background-color: var(--white); }
.bgc-2 { background-color: var(--sand); }
.bgc-3 { background-color: var(--ivory); }
.bgc-4 { background-color: var(--grey); color: var(--white); }
.bgc-5 { background-color: var(--black); }
.divider { border-top: thin solid var(--grey); }

/* ============================================
   STRIP NO PADDING
   ============================================ */

.strip-no-padding { padding:0px; }

/* ============================================
   STRIP PADDING
   ============================================ */

.strip-padding { padding: 70px 50px; }
/* ============================================
   CONTENT HOLDER
   ============================================ */

.content-holder { margin: auto; }

/* ============================================
   GRID CONTAINER 2 WITH BOX
   ============================================ */

.grid-container-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-container-2 h3 {
	margin-bottom: 18px;
}

.grid-container-2 > div {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: solid 1px var(--lgrey);
    border-radius: 5px;
    background-color: var(--white);
}

.grid-container-2 img {
	object-fit: cover;
	transition: transform .35s ease, opacity .35s ease;
	margin-bottom: 10px;
	border-radius: 10px;
	margin: auto;
}

.grid-container-2 video {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
}

.grid-container-2 > div:hover .price { transform: translateY(0); }


/* ============================================
   GRID CONTAINER 3 WITH BOX
   ============================================ */

.grid-container-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-container-3 h3 {
	margin-bottom: 18px;
}

.grid-container-3 > div {
	position: relative;
	overflow: hidden;
	padding: 20px;
	border: solid 1px var(--lgrey);
	border-radius: 5px;
	background-color: var(--white);
}

.grid-container-3 img {
	object-fit: cover;
	transition: transform .35s ease, opacity .35s ease;
	margin-bottom: 10px;
	border-radius: 10px;
	margin: auto;
}
.grid-container-3 .right {
	float: right;
}

.grid-container-3 video {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
}

.grid-container-3 > div:hover .price { transform: translateY(0); }


/* ============================================
   GRID CONTAINER 4 WITH BOX
   ============================================ */
.grid-container-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.grid-container-4 h3 {
	margin-bottom: 18px;
}

.grid-container-4 > div {
	position: relative;
	overflow: hidden;
	padding: 10px;
	border: solid 1px var(--lgrey);
	border-radius: 5px;
}

.grid-container-4 img {
	object-fit: cover;
	transition: transform .35s ease, opacity .35s ease;
	margin-bottom: 10px;
	border-radius: 10px;
	margin: auto;
}

.grid-container-4 video {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
}

.grid-container-4 > div:hover .price { transform: translateY(0); }



/* ============================================
   GRID CONTAINER 5 WITH BOX
   ============================================ */
.grid-container-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.grid-container-5 h3 {
	margin-bottom: 18px;
}

.grid-container-5 > div {
	position: relative;
	overflow: hidden;
	padding: 10px;
	border: solid 1px var(--lgrey);
	border-radius: 5px;
	background-color: var(--white);
}

.grid-container-5 img {
	object-fit: cover;
	transition: transform .35s ease, opacity .35s ease;
	margin-bottom: 10px;
	border-radius: 10px;
	margin: auto;
}

.grid-container-5 video {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
}

.grid-container-5 > div:hover .price { transform: translateY(0); }

/* ============================================
PHOTO GRID 4
============================================ */
.grid-container4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.grid-container4 h3 {
	margin-bottom: 18px;
	font-family: var(--font-display);
}

.grid-container4 a {
	border-bottom: 2px solid var(--grey);
	line-height: 1.85;
	
}

.grid-container4 a:hover { opacity: .6; }
.grid-container4 > div {
	position: relative;
	overflow: hidden;
	padding: 20px;
	border-right: solid 1px #d09a2a;
}
.grid-container4 .last {
	border-right: none;
}

.grid-container4 img {
	width: 100px;
	margin: 10px auto;
}


/* ============================================
BEFORE AFTER IMAGES
============================================ */

.box-beforeafter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 20px;
    padding: 50px 0px;
    flex-wrap: wrap;
}

.before-after1 {
	font-family: var(--font-display);
	font-size: clamp(28px, 6vw, 24px);
	line-height: 1.1;
	flex: 1;
}



/* ============================================
MID STRIP
============================================ */

.mid-strip {
	line-height: 1.85;	
	max-width: 900px;
	margin: auto;
}

.steps {
	background-color: #d09a2a;
	border-radius: 50px;
	width:30px;
	height: 30px;
	padding: 2px;
	text-align: center;
	margin: auto;
	color: white;	
}

/* ============================================
   STRIP BACKGROUND COLORS
   ============================================ */

.fa-star {
	color:	var(--cocoon);
    font-size: 27px;
}
.rating {
	font-size: 27px;
}
.info-box {
    font-size: 14px;
    border: solid thin var(--lgrey);
    padding: 12px;
    max-width: 620px;
    margin: auto;
    text-align: left;
	background: var(--white);
}
.info-box img {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 20px;
}


/* ============================================
IMAGE DUO
============================================ */
.image-box {
	display: flex;
	gap: 6px;
	padding: 6px 6px 6px 6px;
}

.img1, .img2 { flex: 1; overflow: hidden; }

.img1 img, .img2 img {
	width: 100%;
	height: clamp(200px, 35vw, 500px);
	object-fit: cover;
	transition: transform .4s ease;
}
.img1 img:hover, .img2 img:hover { transform: scale(1.03); }


/* ============================================
GREEN BANNER
============================================ */
.box-section {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 0px;
	flex-wrap: wrap;
}

.box1 {
	font-family: var(--font-display);
	line-height: 1.1;
	flex: 1;
	min-width: 220px;
}
.box2 {
    flex: 1;
    min-width: 220px;
    line-height: 1.85;
    padding: 20px 50px;
}

.box2 a:hover { opacity: .6; }

.box3 {
    flex: 1;
    min-width: 220px;
    line-height: 1.85;
}

.box3 a:hover { opacity: .6; }

iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

/* ============================================
CTA BUTTON
============================================ */

.CTA-btn1 {
	display: inline-block;
	background: #d09a2a;
	font-size: clamp(14px, 0.8vw, 18px);
	letter-spacing: 1px;
	padding: 20px;
	margin: 10px;
	text-decoration: none;
	transition: opacity .2s !important;
	border: 1px solid #d09a2a;
	line-height: 1.5vw;	
	text-transform: uppercase;
	border-radius: 5px;
	background: #d09a2a;
	color: var(--white);
	font-weight: bold;
}

.CTA-btn1:hover {    
	opacity: .6;
}

.CTA-btn1 img {
	display: inline-block;
	margin-right: 10px !important;
	vertical-align: text-bottom;
	height: 20px;
	margin-bottom: 0px !important;
	float: none !important;
	font-weight: bold;
}

.CTA-btn2 {
	display: inline-block;
	background: #ffffff;
	color: var(--grey);
	font-size: clamp(14px, 0.8vw, 18px);
	letter-spacing: 1px;
	padding: 20px;
	margin: 10px;
	text-decoration: none;
	transition: opacity .2s !important;
	border: 1px solid #d09a2a;
	line-height: 1.5vw;	
	text-transform: uppercase;
	border-radius: 5px;
	font-weight: bold;
}

.CTA-btn2:hover {    
	opacity: .6;
}

.CTA-btn2 img {
	display: inline-block;
	margin-right: 10px !important;
	vertical-align: text-bottom;
	height: 20px;
	margin-bottom: 0px !important;
	float: none !important;
}

.btn {
    font-size: 24px;
    margin-right: 5px;
    line-height: 1.5vw;
    margin-bottom: -3px;
	font-weight: bold;
}

/* ============================================
FOOTER
============================================ */
.footer {
	background-color: var(--black);
	padding: 36px 28px 22px;
}

.footer-logo svg {
	height: 44px;
	width: 55px;
	margin-bottom: 18px;
}

.footer-box {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 22px;
	color: #ffffff;
}

.footer-box1 { flex: 1; min-width: 160px; padding: 0px 20px;}
.footer-box1 p { font-size: 14px; letter-spacing: 1px; color: #ffffff; }
.footer-box1 b {
	font-family: var(--font-display);
	font-size: clamp(32px, 5vw, 62px);
	display: block;
	line-height: 1;
}

.footer-box2 {
	flex: 1;
	min-width: 140px;
	font-size: 13px;
	line-height: 1.75;
	padding-top: 8px;
}

/* ── Footer nav: column layout (like user requested) ── */
.footer-box3 {
	flex: 1;
	min-width: 120px;
	display: flex;
	flex-direction: column;   /* VERTICAL column of links */
	align-items: flex-start;
	gap: 8px;
	padding: 0px 20px;
	padding-top: 8px;
}
.footer-box3 strong {
	color: #d09a2a;
}

.footer-box3 a {
	font-size: 14px;
	letter-spacing: 1.5px;
	color: var(--white);
	transition: color .2s;
}
.footer-box3 a:hover  {    
	opacity: .6;
}

.footer > p:last-child {
	font-size: 11px;
	color: #ffffff;
	margin-top: 14px;
	border-top: 1px solid #d09a2a;
	padding-top: 12px;
}


/* ============================================
CONTACT SECTION
============================================ */
.contact-box {
	background-color: var(--bg);
	display: flex;
	gap: 36px;
	padding: clamp(36px, 5vw, 80px) clamp(24px, 6vw, 72px);
	flex-wrap: wrap;
	align-items: flex-start;
}

.text-box {
	font-family: var(--font-display);
	font-size: clamp(36px, 7vw, 76px);
	flex: 1;
	min-width: 180px;
	line-height: 1.1;
}

.text-content,
.text-content2 {
	flex: 1;
	min-width: 180px;
	font-size: clamp(13px, 1.5vw, 15px);
	line-height: 2;
}

.text-content a, .text-content2 a {
	display: inline-block;
	letter-spacing: 1.5px;
	font-size: 13px;
	color: var(--grey);
	border-bottom: 2px solid var(--grey);
	padding-bottom: 1px;
	transition: opacity .2s;
}
.text-content a:hover, .text-content2 a:hover { opacity: .6; }
.text-content2 p { font-size: 14px; color: var(--grey); }



.form-popup {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.52);
	z-index: 2000;
	align-items: center;
	justify-content: center;
}
.form-popup.active { display: flex; }

.form-container {
	background: var(--white);
	padding: 15px 15px;
	max-width: 500px;
	width: 90%;
	text-align: left;
	position: relative;
	border: solid 1px #d09a2a;
	border-radius: 5px;
}
.form-container h1 {
	font-family: var(--font-display);
	font-size: clamp(20px, 4vw, 26px);
	line-height: 1.3;
	margin-bottom: 16px;
}
.form-container p { font-size: 14px; color: var(--grey); margin-bottom: 10px; line-height: 1.75; }

.form-btn {
    display: inline-block;
    background: #F4C451;
    color: var(--grey);
    font-size: clamp(14px, 0.8vw, 18px);
    letter-spacing: 1px;
    padding: 10px;
    margin: 0px;
    text-decoration: none;
    transition: opacity .2s !important;
    line-height: 30px;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    border: thin solid #F4C451;
	border-radius: 5px;
	font-weight: bold;
}

.form-group{
	margin-bottom:20px;
}

label{
	display:block;
	margin-bottom:0px;
}

input,
select,
textarea{
	width:100%;
	padding:10px;
	border:1px solid #ddd;
	border-radius:5px;
	font-size:16px;
	box-sizing:border-box;
	font-family: var(--font-body);
}

textarea{
	min-height:120px;
	resize:vertical;
}


li { list-style: none; }
i { margin-right: 5px; }

.small {
    font-size: 6px;
    margin: 3px;
    line-height: 1.5vw;
}

.disclaimer{
	margin-top:20px;
	color:#777;
	line-height:1.5;
	margin: auto; 
	font-size: 12px; 
	width: 100%; 
	text-align: center;  
}


/* ============================================
ICON DIVIDER
============================================ */

#top .avia-font-cocoon, body .avia-font-cocoon, html body [data-av_iconfont='cocoon']:before {
    font-family: 'cocoon';
}

.hr-custom {
    margin: 0;
    display: block;
    min-height: 21px;
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}
.hr.hr-outer .hr-inner {
    width: 120px;
    max-width: 45%;
    margin: 0px 10px;
}
.hr-custom.hr-icon-yes .hr-inner {
    margin-left: 10px;
    margin-right: 10px;
}
.hr-custom .hr-inner {
    display: inline-block;
    position: relative;
    vertical-align: super;
}

.hr-inner {
    width: 100%;
    position: absolute;
    height: 1px;
    left: 0;
    top: 50%;
    width: 100%;
    margin-top: -1px;
    border-top-width: 1px;
    border-top-style: solid;
}


/* ============================================
   WHATSAPP - Bottom right corner hover.
   ============================================ */

.whatsapp-float{
    position:fixed; 
	right:25px; 
	bottom:25px;
    width:62px; 
	height:62px;
    background:#25D366; 
	border-radius:50%; 
	color: var(--white);
    display:flex; 
	align-items:center; 
	justify-content:center;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    z-index:9999; 
	transition:.25s ease;
}

.whatsapp-float:hover{
    transform:translateY(-3px) scale(1.08);
    box-shadow:0 12px 35px rgba(0,0,0,.35);
}

.whatsapp-float svg {
    width: 30px;
    height: 30px;
    margin: auto;
}


@media(max-width:990px){
	.strip-padding { padding: 70px 30px; }
	.strip-no-padding { padding: 0px 30px; }
	.hero{ padding-top:90px; }
	.hero-container { grid-template-columns: 1fr; padding: 0; gap: 0px; }
	.hero-image{ order:1; height: 400px; }
	.hero-content{ order:2; padding:0px 30px; text-align:center; margin: 30px 0px; }
	.hero h1{ font-size:48px; }	
	.hero-divider{ justify-content:center; }
	.hero-text{ margin:auto auto 35px; font-size:19px; }
	.hero-buttons{ justify-content:center; flex-direction:column; margin-bottom: 0px; }
	.btn-primary, .btn-secondary{ width:100%; text-align:center; margin-bottom: 0px; }
	.hero-image img{ border-radius: 0;  width: 100%; height: 100%; OBJECT-FIT: cover; object-position: center center; display: block; }
	.hero-scroll-hint { display: none; }
	.grid-container-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-container-4 > div { height: auto; margin:0px; }
	.grid-container-5 { grid-template-columns: repeat(3, 1fr); }
	.grid-container-5 > div { height: auto; margin:0px; }	
	.grid-container4 { grid-template-columns: repeat(2, 1fr); padding: 0px; gap: 20px; }
	.grid-container4 > div { border: solid thin var(--lgrey) !important; margin:0px; border-radius: 5px; background-color: var(--white); }
	.box-beforeafter { grid-template-columns: repeat(2, 1fr); }
	.nav-hamburger { display: block; }
	.nav-links { display: none; flex-direction: column; align-items: flex-start; gap: 0; padding: 0 20px 14px; margin-top: 8px; }
	.nav-links a { width: 100%; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,0.07); font-size: 13px; }
	.topnav.open .nav-links { display: flex; }
}

@media (max-width: 900px) {	
	.box-beforeafter { grid-template-columns: repeat(2, 1fr); }
	.box1 { flex: auto; }
	.box1 img { max-width: 450px; margin: auto; height: 350px; margin-top: 20px; }
	.box2 { flex: auto; grid-row: 2; padding: 20px 0px; }
	.grid-container-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-container-2 > div { height: auto; }
	.grid-container-3 { grid-template-columns: repeat(2, 1fr); }
	.grid-container-3 > div { height: auto; }
	.footer-box2 { flex: auto; }
	.footer-box3 { margin: auto; min-width: 48%; flex-direction: column; gap: 18px; }
	.box-section { display: grid; gap: 0px; } }
}

@media (max-width: 768px) {
	.grid-container-2 { grid-template-columns: repeat(2, 1fr); }
	.grid-container-3 { grid-template-columns: repeat(2, 1fr); }
	.grid-container-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-container-5 { grid-template-columns: repeat(2, 1fr); }
	.image-box { flex-direction: column; }
	.img1 img, .img2 img { height: 230px; }
	.whatsapp-float{ width:58px; height:58px; right:18px; bottom:18px; }
}

@media (max-width: 650px) {
	.hero-scroll-hint { display: none; }
	.hero-stat-sep { height: 30px; margin-right: 18px; }
	.hero-stat { padding-right: 18px; }
	.grid-container-2 { grid-template-columns: repeat(1, 1fr); }
	.grid-container-2 img {  }
	.grid-container-2 > div { margin:0px; }
	.grid-container-3 { grid-template-columns: repeat(1, 1fr); }
	.grid-container-3 img {  }
	.grid-container-4 { grid-template-columns: repeat(1, 1fr);  }
	.grid-container-4 img {  }
	.grid-container-4 > div { margin:0px; }
	.grid-container-5 { grid-template-columns: repeat(1, 1fr); }
	.grid-container-5 img {  }	
	.grid-container-5 > div { margin:0px; }
	.before-after1 { flex: auto; max-width: 100%; margin: auto; }
	.box-beforeafter { grid-template-columns: repeat(1, 1fr); }
	.box1 { flex: auto; }
	.box2 { flex: auto; padding: 20px 0px; }
	.box3 { flex: auto; padding:  0px; }
	.grid-container4 { grid-template-columns: repeat(1, 1fr); text-align: left; padding:0px;}
	.grid-container4 img { float: left; margin-right: 20px; }
	.grid-container4 h3 { margin-bottom: 0px;}
	.grid-container4 p { margin-bottom: 0px; line-height: 1.6em;}
	.grid-container4 > div { margin: 5px; position: relative; overflow: hidden;  padding: 15px 15px 0px 15px; border:none;border-top: solid 1px #d09a2a; border-radius: 0; }	
	.about-box, .contact-box { flex-direction: column; }
	.footer-box { flex-direction: column; gap: 26px; }
	.footer-box1 { flex: none; margin: auto; width: 100%; }
	.footer-box1 b { font-size: 36px; }	
	.footer-box3 { flex: none; margin: auto; width: 100%; flex-direction: column; gap: 26px; }	
}