/* =====================================================================
MAISON ÉLORA — STYLESHEET TABLE OF CONTENTS
Search for the section title (e.g. "TESTIMONIAL SLIDER") to jump there.
-----------------------------------------------------------------------
01. ROOT VARIABLES
02. RESET & BASE
03. BUTTONS
04. NAVBAR
05. HERO SLIDER (Swiper.js)
06. INTRO
07. SERVICES
08. ABOUT
09. FEATURE
10. BEFORE / AFTER
11. PRICING
12. OFFER
13. GALLERY
14. TESTIMONIALS (card styling)
15. TESTIMONIAL SLIDER (Swiper.js — nav & pagination)   [NEW]
16. APPOINTMENT
17. FAQ
18. CTA
19. FOOTER
20. ANIMATION
21. RESPONSIVE
===================================================================== */

/* =================================
01. ROOT VARIABLES
================================= */
:root {
--cream: #f7f2eb;
--cream-2: #eee5da;
--brown: #29231f;
--brown-2: #594e47;
--gold: #d8a866;
--rose: #c98a7d;
--white: #ffffff;
--border: #ded4c8;
--font-heading: "Playfair Display", serif;
--font-accent: "Cormorant Garamond", serif;
--font-body: "DM Sans", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--cream);
color: var(--brown);
overflow-x: hidden;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
}
h1, h2, h3, h4, h5 {
font-family: var(--font-heading);
}
.container {
max-width: 1240px;
}
.section-space {
padding:80px 0;
}
.eyebrow {
color: var(--gold);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
margin-bottom:10px;
}
.section-heading {
font-size: clamp(38px, 5vw, 45px);
line-height: 1.08;
margin-bottom: 20px;
}
.section-text {
color: var(--brown-2);
line-height: 1.9;
}

	/* Accessible focus state for keyboard users (a11y) */
	a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--brown);
color: #fff;
padding: 12px 20px;
z-index: 2000;
font-size: 13px;
letter-spacing: .5px;
}
.skip-link:focus {
left: 10px;
top: 10px;
}
/* =================================
	   BUTTONS
	================================= */

	.btn-elora {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--brown);
color: #fff;
padding: 15px 28px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
border-color: var(--gold);
border: 1px solid rgba(255, 255, 255, .7);
transition: .35s ease;
}
.btn-elora:hover, .btn-elora:focus-visible {
background: var(--gold);
border-color: var(--gold);
color: #fff;
transform: translateY(-2px);
border: 1px solid rgba(255, 255, 255, .7);
}
.btn-light-elora {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border: 1px solid rgba(255, 255, 255, .65);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
transition: .35s ease;
}
.btn-light-elora:hover, .btn-light-elora:focus-visible {
background: #fff;
color: var(--brown);
}
/* =================================
	   NAVBAR
	================================= */

	.main-header {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 999;
padding: 24px 0;
transition: .4s ease;
}
.main-header.scrolled {
background: rgba(41, 35, 31, .8);
box-shadow: 0 8px 30px rgba(41, 35, 31, .08);
padding: 14px 0;
backdrop-filter: blur(12px);
}
.main-header.scrolled .brand, .main-header.scrolled .nav-link {
color: var(--white);
}
.brand {
color: #fff;
font-family: var(--font-heading);
font-size: 30px;
letter-spacing: 1px;
white-space: nowrap;
}
.brand span {
color: var(--gold);
}
.nav-link {
color: #fff;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 10px;
transition: .3s;
}
.nav-link:hover, .nav-link:focus-visible {
color: var(--gold);
}
.header-book {
border: 1px solid rgba(255, 255, 255, .7);
padding: 11px 20px;
color: #fff;
font-size:14px;
text-transform: uppercase;
letter-spacing: 1.5px;
transition: .3s;
}
.header-book:hover, .header-book:focus-visible {
background: var(--gold);
border-color: var(--gold);
color: #fff;
}
.main-header.scrolled .header-book {
border-color: var(--white);
color: var(--white);
color: #fff;
border-color: var(--gold);
}
.main-header.scrolled .header-book:hover {
color: #fff;
border-color: var(--gold);
}
.navbar-toggler {
color: #fff;
border: 0;
font-size: 28px;
}
.main-header.scrolled .navbar-toggler {
color: var(--white);
}
/* =================================
	   HERO SLIDER (Swiper.js)
	================================= */

.hero-slider {
position: relative;
height: 100vh;
min-height: 780px;
max-height: 980px;
}
.heroSwiper, .heroSwiper .swiper-wrapper, .heroSwiper .swiper-slide {
height: 100%;
}
.hero-slide {
position: relative;
height: 100%;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-slide-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1);
animation: kenBurns 9s ease-in-out infinite alternate;
will-change: transform;
}
.hero-slide-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(60, 40, 20, .85), rgba(60, 40, 20, .45));
}
.hero-slider::after {
content: "";
position: absolute;
width: 480px;
height: 480px;
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 50%;
right: -180px;
bottom: -180px;
pointer-events: none;
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
max-width: 760px;
color: #fff;
}
.hero-eyebrow {
color: #e0bb85;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 11px;
font-weight: 700;
margin-bottom: 22px;
}
.hero-content h1 {
font-size: clamp(50px, 7vw, 92px);
line-height: 1.02;
margin-bottom: 30px;
}
.hero-content h1 em {
font-family: var(--font-accent);
color: #dfbd8a;
font-style: italic;
}
.hero-content p {
max-width: 570px;
color: rgba(255, 255, 255, .85);
line-height: 1.9;
margin-bottom: 35px;
}
.hero-actions {
display: inline-block;
gap: 12px;
flex-wrap: wrap;
}
.hero-scroll {
position: absolute;
bottom: 35px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, .8);
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
z-index: 4;
}
@keyframes kenBurns {
from {
transform: scale(1);
}
to {
transform: scale(1.12);
}
}
/* Swiper pagination — luxury bullet styling */
	.hero-slider .swiper-pagination {
bottom: 40px !important;
left: auto !important;
right: 8% !important;
width: auto !important;
display: flex;
gap: 10px;
justify-content: flex-end;
}
.hero-slider .swiper-pagination-bullet {
width: 34px;
height: 3px;
border-radius: 0;
background: rgba(255, 255, 255, .4);
opacity: 1;
transition: .3s ease;
}
.hero-slider .swiper-pagination-bullet-active {
background: var(--gold);
width: 50px;
}
/* Swiper custom navigation arrows — luxury circular style */
.hero-slider .swiper-button-prev, .hero-slider .swiper-button-next {
width: 54px;
height: 54px;
border: 1px solid rgba(255, 255, 255, .45);
border-radius: 50%;
color: #fff;
background: var(--gold);
top: 50%;
transition: .3s ease;
}
.hero-slider .swiper-button-prev:hover, .hero-slider .swiper-button-next:hover {
background: var(--gold);
border-color: var(--gold);
}
.hero-slider .swiper-button-prev::after, .hero-slider .swiper-button-next::after {
font-size: 16px;
}
.hero-slider .swiper-button-prev {
left: 30px;
}
.hero-slider .swiper-button-next {
right: 30px;
}
@media (max-width: 767px) {
.hero-slider .swiper-button-prev, .hero-slider .swiper-button-next {
display: none;
}
.hero-slider .swiper-pagination {
right: 50% !important;
transform: translateX(50%);
}
}

.hero-slide h1 .hw-wrap{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .14em;margin-bottom:-.14em}
.hero-slide h1 .hw{display:inline-block}

/* =================================
	   INTRO
================================= */

	.intro {
background: #fff;
}
.intro-number {
font-family: var(--font-heading);
font-size: 85px;
color: var(--gold);
line-height: 1;
}
.intro-line {
width: 70px;
height: 1px;
background: var(--gold);
margin: 20px 0;
}
/* =================================
	   SERVICES
	================================= */

	.service-card {
position: relative;
padding: 45px 32px;
background: var(--cream);
border: 1px solid var(--border);
height: 100%;
overflow: hidden;
transition: .4s ease;
background: #fff;
}
.service-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 3px;
background: var(--gold);
transition: .4s;
}
.service-card:hover, .service-card:focus-within {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(41, 35, 31, .10);
}
.service-card:hover::before, .service-card:focus-within::before {
width: 100%;
}
.service-icon {
width: 65px;
height: 65px;
border: 1px solid var(--gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 25px;
margin-bottom: 25px;
transition: .4s;
}
.service-card:hover .service-icon {
background: var(--gold);
color: #fff;
transform: rotate(8deg);
}
.service-card h3 {
font-size: 28px;
margin-bottom: 14px;
}
.service-card p {
color: var(--brown-2);
font-size: 14px;
line-height: 1.8;
margin-bottom: 22px;
}
.service-link {
color: var(--brown);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.service-link i {
color: var(--gold);
margin-left: 5px;
transition: .3s;
}
.service-link:hover i {
margin-left: 12px;
}

/* =====================================================
   ABOUT SECTION — MODERN UPDATE
   Load AFTER style.css and responsive.css
===================================================== */
.bg2 { background:#ede3d5; position:relative; overflow:hidden; }
.bg2::before {
  content:""; position:absolute; width:520px; height:520px; right:-180px; top:-160px;
  border-radius:50%; background:radial-gradient(circle, rgba(189,149,93,.18), transparent 70%);
  pointer-events:none;
}
.bg2::after {
  content:""; position:absolute; width:320px; height:320px; left:-140px; bottom:-140px;
  border-radius:50%; border:1px solid rgba(189,149,93,.35); pointer-events:none;
}
.bg2 .container { position:relative; z-index:1; }

/* Image */
.about-image-wrap { position:relative; padding-right:35px; }
.about-image-wrap::before {
  content:""; position:absolute; top:22px; left:-22px; right:13px; bottom:-22px;
  border:1px solid var(--gold); border-radius:280px 280px 0 0; z-index:0; transition:.5s ease;
}
.about-image-wrap::after {
  content:""; position:absolute; top:-28px; right:8px; width:120px; height:120px;
  background-image:radial-gradient(var(--gold) 1.6px, transparent 1.6px);
  background-size:16px 16px; opacity:.55; z-index:0;
}
.about-image-wrap:hover::before { top:12px; left:-12px; bottom:-12px; }
.about-image {
  position:relative; z-index:1; width:100%; height:640px; object-fit:cover;
  border-radius:280px 280px 0 0; box-shadow:0 30px 70px rgba(41,35,31,.18);
}

/* Stamp */
.about-stamp {
  position:absolute; z-index:3; right:0; bottom:60px; width:145px; height:145px;
  border-radius:50%; background:var(--brown); color:#fff; display:flex;
  align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-heading); font-size:18px; line-height:1.3; padding:20px;
  box-shadow:0 15px 40px rgba(41,35,31,.35); animation:aboutFloat 4s ease-in-out infinite alternate;
}
.about-stamp::before {
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:1px dashed var(--gold); animation:aboutSpin 18s linear infinite;
}

/* Eyebrow + heading */
.bg2 .eyebrow { display:flex; align-items:center; gap:14px; }
.bg2 .eyebrow::before { content:""; width:42px; height:1px; background:var(--gold); }
.bg2 .section-heading::after {
  content:""; display:block; width:0; height:2px; margin-top:24px;
  background:linear-gradient(90deg, var(--gold), var(--rose)); transition:width 1s ease .4s;


}
.bg2 .section-heading.aos-animate::after { width:90px; }
.bg2 .section-heading em { font-family:var(--font-accent); color:var(--gold); font-style:italic; }

/* Points as cards */
.about-points {
  list-style:none; padding:0; margin:30px 0 34px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.about-points li {
  display:flex; align-items:center; gap:12px; margin:0; padding:14px 16px;
  color:var(--brown); font-size:14.5px; font-weight:500;
  background:rgba(255,255,255,.55); border:1px solid rgba(189,149,93,.25);
  border-left:3px solid var(--gold);
  transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
}
.about-points li:hover { transform:translateX(8px); background:#fff; box-shadow:0 12px 30px rgba(41,35,31,.08); }
.about-points i {
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--gold);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; transition:.35s ease;
}
.about-points li:hover i { background:var(--brown); transform:rotate(360deg); }
.about-points[data-aos] li { opacity:0; transform:translateY(20px); }
.about-points.aos-animate li { animation:aboutItemIn .6s ease forwards; }
.about-points.aos-animate li:nth-child(1){animation-delay:.15s}
.about-points.aos-animate li:nth-child(2){animation-delay:.30s}
.about-points.aos-animate li:nth-child(3){animation-delay:.45s}
.about-points.aos-animate li:nth-child(4){animation-delay:.60s}

/* Button */
.bg2 .btn-elora i { transition:transform .3s ease; }
.bg2 .btn-elora:hover i { transform:translateX(6px); }

@keyframes aboutSpin { to { transform:rotate(360deg); } }
@keyframes aboutFloat { from { transform:translateY(0); } to { transform:translateY(-10px); } }
@keyframes aboutItemIn { to { opacity:1; transform:translateY(0); } }

/* Responsive */
@media (max-width:991px) {
  .about-image { height:520px; }
  .about-image-wrap { padding-right:22px; }
  .about-image-wrap::before { left:-12px; right:10px; }
}
@media (max-width:575px) {
  .about-image { height:420px; border-radius:200px 200px 0 0; }
  .about-image-wrap::before { border-radius:200px 200px 0 0; }
  .about-stamp { width:115px; height:115px; font-size:15px; bottom:40px; }
  .about-points { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .about-stamp, .about-stamp::before { animation:none !important; }
  .about-points li { opacity:1 !important; transform:none !important; animation:none !important; }
}

/* =================================
	   FEATURE
	================================= */

	.feature {
background: var(--brown);
color: #fff;
}
.feature-image {
height: 620px;
object-fit: cover;
width: 100%;
}
.feature-content {
padding: 70px 8%;
}
.feature-content .section-text {
color: rgba(255, 255, 255, .7);
}
.feature-list {
list-style: none;
padding: 0;
margin: 30px 0;
}
.feature-list li {
padding: 13px 0;
border-bottom: 1px solid rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .8);
display: flex;
justify-content: space-between;
}
.feature-list span {
color: var(--gold);
}
/* =================================
	   BEFORE AFTER
	================================= */

	.before-after {
position: relative;
height: 560px;
overflow: hidden;
user-select: none;
}
.before-after img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
inset: 0;
}
.after-image {
clip-path: inset(0 50% 0 0);
}
.ba-divider {
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: 3px;
background: #fff;
transform: translateX(-50%);
z-index: 5;
pointer-events: none;
}
.ba-handle {
position: absolute;
left: 50%;
top: 50%;
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff;
border: 0;
transform: translate(-50%, -50%);
z-index: 6;
display: flex;
align-items: center;
justify-content: center;
color: var(--brown);
box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
cursor: ew-resize;
}
.ba-label {
position: absolute;
top: 25px;
padding: 9px 14px;
background: rgba(41, 35, 31, .75);
color: #fff;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 4;
}
.before-label {
left: 25px;
}
.after-label {
right: 25px;
}
/* =================================
	   PRICING
	================================= */

	.pricing {
background: #fff;
}
.price-card {
padding: 45px 35px;
border: 1px solid var(--border);
height: 100%;
position: relative;
transition: .4s;
}
.price-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(41, 35, 31, .09);
}
.price-card.featured {
background: var(--brown);
color: #fff;
transform: translateY(-15px);
}
.price-card.featured:hover {
transform: translateY(-22px);
}
.popular {
position: absolute;
top: 0;
right: 25px;
background: var(--gold);
color: #fff;
padding: 8px 13px;
font-size: 8px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.price-card h3 {
font-size: 30px;
margin-bottom: 10px;
}
.price-card p {
color: var(--brown-2);
font-size: 13px;
line-height: 1.7;
}
.price-card.featured p {
color: rgba(255, 255, 255, .65);
}
.price {
font-family: var(--font-heading);
font-size: 52px;
color: var(--gold);
margin: 25px 0;
}
.price small {
font-family: var(--font-body);
font-size: 12px;
color: inherit;
}
.price-features {
list-style: none;
padding: 0;
margin: 25px 0;
}
.price-features li {
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.featured .price-features li {
border-color: rgba(255, 255, 255, .12);
}
.price-features i {
color: var(--gold);
margin-right: 8px;
}
/* =================================
	   OFFER
	================================= */

.offer-banner {
background:
linear-gradient(90deg, rgba(41, 35, 31, .94), rgba(41, 35, 31, .55)), url("../img/skin-rituals.jpg") center/cover;
padding: 85px 8%;
color: #fff;
}
.offer-banner h2 {
font-size: clamp(40px, 5vw, 65px);
}
.offer-badge {
display: inline-flex;
width: 125px;
height: 125px;
border-radius: 50%;
border: 1px solid var(--gold);
align-items: center;
justify-content: center;
text-align: center;
color: var(--gold);
font-family: var(--font-heading);
font-size: 22px;
line-height: 1.2;
}
/* =================================
	   GALLERY
	================================= */

.gallery-item {
position: relative;
overflow: hidden;
}
.gallery-item img {
width: 100%;
height: 390px;
object-fit: cover;
transition: .6s;
}
.gallery-item:hover img {
transform: scale(1.07);
}
.gallery-overlay {
position: absolute;
inset: auto 15px 15px 15px;
background: rgba(41, 35, 31, .85);
color: #fff;
padding: 15px 18px;
transform: translateY(100px);
transition: .4s;
}
.gallery-item:hover .gallery-overlay, .gallery-item:focus-within .gallery-overlay {
transform: translateY(0);
}
.gallery-overlay small {
color: var(--gold);
text-transform: uppercase;
letter-spacing: 1.5px;
}

.gallery-overlay a {color:#fff}
/* =================================
	   TESTIMONIALS
	================================= */

	.testimonial-section {
background: var(--cream-2);
}
.testimonial-card {
background: #fff;
padding: 50px;
text-align: center;
max-width: 850px;
margin: auto;
}
.quote-icon {
font-size: 42px;
color: var(--gold);
}
.testimonial-card p {
font-family: var(--font-heading);
font-size: clamp(22px, 3vw, 31px);
line-height: 1.55;
margin: 20px 0;
}
.stars {
color: var(--gold);
letter-spacing: 3px;
}
/* =================================
	   15. TESTIMONIAL SLIDER (Swiper.js)
	================================= */

	.testimonial-slider-wrap {
position: relative;
max-width: 850px;
margin: 0 auto;
}
.testimonialSwiper {
padding-bottom: 52px;
}
.testimonialSwiper .testimonial-card {
margin: 0 auto;
}
.testimonial-pagination {
position: static !important;
margin-top: 8px;
display: flex;
justify-content: center;
gap: 8px;
}
.testimonial-pagination .swiper-pagination-bullet {
width: 9px;
height: 9px;
background: var(--border);
opacity: 1;
margin: 0 !important;
transition: .3s ease;
}
.testimonial-pagination .swiper-pagination-bullet-active {
background: var(--gold);
width: 26px;
border-radius: 5px;
}
.testimonial-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid var(--border);
background: #fff;
color: var(--brown);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
z-index: 5;
transition: .3s ease;
}
.testimonial-nav:hover, .testimonial-nav:focus-visible {
background: var(--gold);
border-color: var(--gold);
color: #fff;
}
.testimonial-prev {
left: -70px;
}
.testimonial-next {
right: -70px;
}
@media (max-width: 1200px) {
.testimonial-prev {
left: 0;
}
.testimonial-next {
right: 0;
}
}
@media (max-width: 575px) {
.testimonial-nav {
display: none;
}
}
/* =================================
	   16. APPOINTMENT
	================================= */

	.appointment {
background: #fff;
}
.appointment-form {
background: var(--cream);
padding: 45px;
}
.form-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--brown-2);
margin-bottom: 6px;
}
.form-control, .form-select {
height: 55px;
border-radius: 0;
border: 1px solid var(--border);
background: #fff;
font-size: 13px;
}
.form-control:focus, .form-select:focus {
border-color: var(--gold);
box-shadow: none;
}
textarea.form-control {
height: 130px;
resize: none;
}
/* =================================
	   FAQ
	================================= */

	.faq {
background: var(--cream);
}
.accordion-item {
background: transparent;
border: 0;
border-bottom: 1px solid var(--border);
}
.accordion-button {
background: transparent;
box-shadow: none !important;
padding: 24px 0;
color: var(--brown);
font-family: var(--font-heading);
font-size: 21px;
}
.accordion-button:not(.collapsed) {
color: var(--gold);
background: transparent;
}
.accordion-body {
padding: 0 0 25px;
color: var(--brown-2);
line-height: 1.8;
}
/* =================================
	   CTA
	================================= */

.final-cta {
background: var(--brown);
color: #fff;
text-align: center;
padding: 100px 20px;
}
.final-cta h2 {
font-size: clamp(43px, 6vw, 50px);
max-width: 850px;
margin: auto auto 25px;
}
.final-cta p {
max-width: 600px;
margin: 0 auto 30px;
color: rgba(255, 255, 255, .65);
line-height: 1.8;
}
/* =================================
	   FOOTER
	================================= */

	footer {
background: #1e1a17;
color: #fff;
padding-top: 0;
position: relative;
}
/* =================================
	   FOOTER — NEWSLETTER BANNER
	================================= */
.footer-newsletter {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
background: linear-gradient(120deg, var(--gold), var(--rose));
color: #fff;
padding: 22px 22px 22px 55px;
border-radius: 999px;
margin-top:0;
transform: translateY(-55px);
box-shadow: 0 25px 60px rgba(41, 35, 31, .25);
top:-60px;
}
.footer-newsletter h3 {
font-size: 24px;
margin-bottom: 6px;
}
.footer-newsletter p {
color: rgba(255, 255, 255, .85);
font-size: 15px;
margin: 0;
}
/* White capsule containing the input + inset round button, like the reference */
.footer-newsletter .newsletter-form {
border: 0;
background: #fff;
border-radius: 999px;
padding: 6px;
min-width: 420px;
flex: 1 1 420px;
max-width: 560px;
}
.footer-newsletter .newsletter-form input {
padding: 14px 26px;
color: var(--brown);
font-size: 15px;
}
.footer-newsletter .newsletter-form input::placeholder {
color: #b9aca3;
}
.footer-newsletter .newsletter-form button {
background: var(--rose);
border: 3px solid #fff;
border-radius: 999px;
padding: 0 34px;
height: 52px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
}
.footer-newsletter .newsletter-form button:hover {
background: var(--brown);
border-color: #fff;
}
/* Faint dot pattern behind the footer columns */
.footer-pattern {
position: absolute;
inset: 0;
top: 0;
background-image: radial-gradient(rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
background-size: 22px 22px;
pointer-events: none;
z-index: 0;
}
.footer-cols {
position: relative;
z-index: 1;
margin-top: -20px;
}
.footer-heading {
position: relative;
padding-bottom: 14px;
}
.footer-heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 26px;
height: 2px;
background: var(--gold);
}
.footer-contact p {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.footer-contact-icon {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 14px;
}
/* Circular social icons to match the softer, rounded footer style */
.socials a {
border-radius: 50%;
}
/* Back-to-top button — tall pill, fixed to the viewport corner */
.back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
width: 42px;
height: 68px;
border-radius: 25px;
border: 0;
background: var(--gold);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
z-index: 998;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
box-shadow: 0 10px 25px rgba(41, 35, 31, .3);
transition: .3s ease;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover, .back-to-top:focus-visible {
background: var(--rose);
}
.footer-brand {
font-family: var(--font-heading);
font-size: 31px;
}
.footer-brand span {
color: var(--gold);
}
footer p {
color: rgba(255, 255, 255, .6);
line-height: 1.85;
font-size: 15px;
}
footer h2.footer-heading {
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 22px;
color: #fff;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: 12px;
position: relative;
padding-left: 16px;
}
.footer-links li::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 6px;
height: 6px;
background: var(--gold);
}
.footer-links a {
color: rgba(255, 255, 255, .6);
font-size: 15px;
transition: .3s;
}
.footer-links a:hover, .footer-links a:focus-visible {
color: var(--gold);
}
.newsletter-form {
display: flex;
border: 1px solid rgba(255, 255, 255, .18);
margin-top: 10px;
}
.newsletter-form input {
flex: 1;
background: transparent;
border: 0;
padding: 14px 16px;
color: #fff;
font-size: 13px;
}
.newsletter-form input::placeholder {
color: rgba(255, 255, 255, .4);
}
.newsletter-form input:focus {
outline: none;
}
.newsletter-form button {
background: var(--gold);
border: 0;
color: #fff;
padding: 0 20px;
font-size: 16px;
}
.socials {
display: flex;
gap: 8px;
}
.socials a {
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, .15);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: .3s;
}
.socials a:hover, .socials a:focus-visible {
background: var(--gold);
border-color: var(--gold);
}
.copyright {
border-top: 1px solid rgba(255, 255, 255, .08);
margin-top: 55px;
padding: 22px 0;
color: rgba(255, 255, 255, .45);
font-size: 13px;
}
/* =================================
	   ANIMATION
	================================= */

/* =================================
	   ON-LOAD OFFER POPUP
	================================= */
.promo-overlay {
position: fixed;
inset: 0;
background: rgba(20, 17, 15, .7);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 3000;
opacity: 0;
visibility: hidden;
transition: opacity .35s ease, visibility .35s ease;
}
.promo-overlay.show {
opacity: 1;
visibility: visible;
}
.promo-popup {
position: relative;
display: flex;
background: #fff;
max-width: 820px;
width: 100%;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
transform: translateY(24px) scale(.97);
opacity: 0;
transition: transform .4s ease, opacity .4s ease;
}
.promo-overlay.show .promo-popup {
transform: translateY(0) scale(1);
opacity: 1;
}
.promo-image {
flex: 0 0 42%;
background-size: cover;
background-position: center;
}
.promo-content {
flex: 1;
padding: 50px 45px;
text-align: center;
}
.promo-content h3 {
font-size: clamp(26px, 3vw, 32px);
margin-bottom: 16px;
line-height: 1.2;
}
.promo-content h3 em {
font-family: var(--font-accent);
color: var(--gold);
font-style: italic;
}
.promo-content p {
color: var(--brown-2);
line-height: 1.7;
margin-bottom: 26px;
}
.promo-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.promo-form input {
height: 52px;
border: 1px solid var(--border);
padding: 0 18px;
font-size: 14px;
text-align: center;
}
.promo-form input:focus {
outline: none;
border-color: var(--gold);
}
.promo-form .btn-elora {
justify-content: center;
}
.promo-close {
position: absolute;
top: 16px;
right: 16px;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: rgba(41, 35, 31, .06);
color: var(--brown);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
z-index: 2;
transition: .3s;
}
.promo-close:hover, .promo-close:focus-visible {
background: var(--brown);
color: #fff;
}
.promo-dismiss {
display: block;
margin: 16px auto 0;
border: 0;
background: none;
color: var(--brown-2);
font-size: 12px;
text-decoration: underline;
}
.promo-dismiss:hover {
color: var(--brown);
}
@media (max-width: 767px) {
.promo-image {
display: none;
}
.promo-content {
padding: 40px 28px;
}
.footer-newsletter {
flex-direction: column;
align-items: stretch;
text-align: center;
padding: 30px 22px;
border-radius: 30px;
gap: 20px;
margin-top: 55px;
top: -60px;
transform: none;
}
.footer-newsletter .newsletter-form {
min-width: 0;
max-width: none;
width: 100%;
flex: 1 1 auto;
}
.back-to-top {
right: 18px;
bottom: 18px;
width: 42px;
height: 42px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-slide-bg {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}



/* Header height ke barabar scroll offset */
section {
scroll-margin-top:30px;
}

/* =====================================================================
   ABOUT PAGE (about.html) — added styles
   Uses the existing theme variables: cream, brown, gold, rose
===================================================================== */

/* About: page hero */
.ab-hero { position:relative; padding:200px 0 110px; color:var(--white); overflow:hidden;}
.ab-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.ab-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(60, 40, 20, .85), rgba(60, 40, 20, .45)); }

.ab-hero .container { position:relative; z-index:1; }
.ab-hero h1 { font-size:clamp(40px, 6vw, 74px); line-height:1.05; margin-bottom:20px; }
.ab-hero h1 em { font-family:var(--font-accent); color:var(--gold); font-style:italic; }
.ab-hero p { max-width:100%; color:rgba(255,255,255,.75); line-height:1.8; font-size:18px; }
.ab-crumb { display:flex; gap:10px; margin-bottom:26px; font-size:13px; letter-spacing:1px; color:rgba(255,255,255,.65); }
.ab-crumb a { color:var(--white); }
.ab-crumb a:hover { color:var(--gold); }

/* About: active nav link */
.nav-link.active { color:var(--gold) !important; }

/* About: stats strip */
.ab-stats { position:relative; background:var(--brown); color:var(--white); padding:100px 0; overflow:hidden; }
.ab-stats::before { content:""; position:absolute; width:520px; height:520px; right:-160px; top:-220px; border-radius:50%; border:1px solid rgba(189,149,93,.25); box-shadow:0 0 0 60px rgba(189,149,93,.05); }
.ab-stats .container { position:relative; z-index:1; }
.ab-stats-head { margin-bottom:60px; }
.ab-stats-head h2 { font-size:clamp(30px, 4vw, 46px); line-height:1.15; }
.ab-stats-head h2 em { font-family:var(--font-accent); color:var(--gold); font-style:italic; }
.ab-stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid rgba(255,255,255,.12); }
.ab-stat { text-align:center; padding:44px 20px; border-right:1px solid rgba(255,255,255,.12); transition:.4s ease; position:relative; }
.ab-stat:last-child { border-right:0; }
.ab-stat::after { content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; background:var(--gold); transition:.5s ease; transform:translateX(-50%); }
.ab-stat:hover { background:rgba(255,255,255,.04); }
.ab-stat:hover::after { width:60%; }
.ab-stat > i { display:inline-flex; width:54px; height:54px; align-items:center; justify-content:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:22px; margin-bottom:20px; transition:.4s ease; }
.ab-stat:hover > i { background:var(--gold); color:var(--brown); transform:rotateY(180deg); }
.ab-stat strong { display:block; font-family:var(--font-heading); font-size:clamp(40px, 5vw, 62px); color:var(--gold); line-height:1; margin-bottom:12px; font-variant-numeric:tabular-nums; }
.ab-stat-label { font-size:12px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.7); }

/* About: team */
.ab-team { background:var(--cream-2); }
.ab-team .section-heading em { font-family:var(--font-accent); color:var(--gold); font-style:italic; }
.ab-member { background:var(--cream); border:1px solid var(--border); padding:14px 14px 0; transition:.4s ease; outline-offset:4px; }
.ab-member:hover, .ab-member:focus-within { transform:translateY(-8px); box-shadow:0 22px 46px rgba(41,35,31,.14); border-color:var(--gold); }
.ab-photo img { width:100%; height:100%; object-fit:cover; transition:transform .8s ease; filter:saturate(.95); }
.ab-member:hover .ab-photo img, .ab-member:focus-within .ab-photo img { transform:scale(1.08); }
.ab-info { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:26px 22px; color:var(--white); background:linear-gradient(180deg, rgba(41,35,31,0) 25%, rgba(41,35,31,.94) 100%); opacity:0; transform:translateY(24px); transition:.5s ease; }
.ab-member:hover .ab-info, .ab-member:focus-within .ab-info { opacity:1; transform:none; }
.ab-info p { font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.85); margin-bottom:16px; }
.ab-social { display:flex; gap:10px; }
.ab-social a { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:var(--white); transition:.3s ease; }
.ab-social a:hover { background:var(--gold); border-color:var(--gold); transform:translateY(-3px); }
.ab-meta { text-align:center; padding:22px 10px 24px; position:relative; }
.ab-meta::before { content:""; display:block; width:36px; height:2px; background:var(--gold); margin:0 auto 16px; transition:width .4s ease; }
.ab-member:hover .ab-meta::before { width:70px; }
.ab-meta h3 { font-size:22px; margin-bottom:6px; }
.ab-meta span { color:var(--brown-2); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
@media (hover:none) { .ab-info { opacity:1; transform:none; background:linear-gradient(180deg, rgba(41,35,31,0) 20%, rgba(41,35,31,.94) 100%); } }

/* About: responsive */
@media (max-width:991px) {
  .ab-hero { padding:150px 0 80px; }
  .ab-stats { padding:70px 0; }
  .ab-stats-grid { grid-template-columns:repeat(2, 1fr); }
  .ab-stat:nth-child(2) { border-right:0; }
  .ab-stat:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.12); }
}


/* =====================================================================
   INNER PAGES (services.html, contact.html, 404.html) — added styles
===================================================================== */
.ab-hero h1 em { font-style:italic; }
.sv-card { display:flex; gap:26px; background:var(--white); border:1px solid var(--border); padding:36px; height:100%; transition:.4s ease; }
.sv-card:hover { transform:translateY(-6px); border-color:var(--gold); box-shadow:0 18px 40px rgba(41,35,31,.1); }
.sv-card h3 { font-size:26px; margin-bottom:8px; }
.sv-card p { color:var(--brown-2); line-height:1.8; }
.sv-list { list-style:none; padding:0; margin:18px 0 22px; }
.sv-list li { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px dashed var(--border); font-size:15px; }
.sv-list li span:last-child { color:var(--gold); font-weight:700; }
.ct-card { display:flex; gap:18px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--border); }
.ct-card > i { width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:20px; }
.ct-card h3 { font-size:19px; margin-bottom:4px; }
.ct-card p { margin:0; color:var(--brown-2); }
.ct-card a { color:var(--gold); }
.ct-card a:hover { color:var(--gold); }
.ct-hp { position:absolute; left:-9999px; opacity:0; height:0; }
.form-status { margin:14px 0 0; font-size:14px; min-height:20px; }
.form-status.ok { color:#3c7a4a; }
.form-status.error { color:#b3463c; }
.err404 { padding:210px 0 130px; }
.err-code { font-family:var(--font-heading); font-size:clamp(90px, 18vw, 220px); line-height:1; color:var(--gold); opacity:.9; }
@media (max-width:575px) { .sv-card { flex-direction:column; padding:28px; } }

/* =====================================================================
   ABOUT — FAQ + CONTACT CARD
===================================================================== */
.faq-section { background:var(--cream); }
.faq-section .section-heading { font-size:clamp(36px, 4.4vw, 54px); margin-bottom:14px; }
.faq-intro { margin-bottom:48px; }
.faq-accordion .accordion-item { background:transparent; border:0; border-bottom:1px solid var(--border); border-radius:0; }
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-bottom-color:var(--brown); }
.faq-accordion .accordion-header { margin:0; font-family:var(--font-heading); }
.faq-accordion .accordion-button { padding:22px 0; font-size:21px; line-height:1.35; gap:20px; border-radius:0; transition:color .3s ease; }
.faq-accordion .accordion-button:not(.collapsed) { color:var(--gold); background:transparent; }
.faq-accordion .accordion-button::after {
  content:""; flex:none; width:40px; height:40px; margin-left:auto; border-radius:50%;
  background-color:transparent; transform:none !important; transition:background-color .3s ease;
  background-image:linear-gradient(var(--brown), var(--brown)), linear-gradient(var(--brown), var(--brown));
  background-size:16px 1.5px, 1.5px 16px; background-position:center; background-repeat:no-repeat;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  background-color:var(--white);
  background-image:linear-gradient(var(--brown), var(--brown));
  background-size:16px 1.5px;
}
.faq-accordion .accordion-body { padding:0 0 26px; max-width:620px; color:var(--brown-2); line-height:1.8; }

.faq-card { position:relative; height:100%; min-height:560px; border-radius:12px; overflow:hidden; display:flex; align-items:flex-start; justify-content:center; text-align:center; color:#fff; background:var(--brown); }
.faq-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.faq-card-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(41,35,31,.72) 0%, rgba(41,35,31,.35) 55%, rgba(41,35,31,.1) 100%); }
.faq-card-body { position:relative; z-index:1; padding:70px 40px 40px; max-width:420px; }
.faq-card h3 { font-size:clamp(30px, 3vw, 40px); line-height:1.15; margin-bottom:18px; }
.faq-card p { line-height:1.8; margin-bottom:28px; color:rgba(255,255,255,.92); }
.faq-card-btn { display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--brown); padding:16px 30px; border-radius:50px; font-size:15px; font-weight:500; transition:.3s ease; }
.faq-card-btn i { font-size:13px; transition:transform .3s ease; }
.faq-card-btn:hover, .faq-card-btn:focus-visible { background:var(--gold); color:#fff; }
.faq-card-btn:hover i { transform:translateX(4px); }
.faq-card .faq-card-call { margin:30px 0 0; font-size:15px; }
.faq-card .faq-card-call a { color:#fff; border-bottom:1px solid rgba(255,255,255,.5); }
.faq-card .faq-card-call a:hover { color:var(--gold); border-color:var(--gold); }
@media (max-width:991px) { .faq-card { min-height:460px; } .faq-intro { margin-bottom:32px; } }
@media (max-width:575px) { .faq-accordion .accordion-button { font-size:18px; padding:18px 0; } .faq-card-body { padding:56px 24px 32px; } }

/* =====================================================================
   SERVICES — TREATMENT IMAGE CARDS
===================================================================== */
.tr-card { position:relative; display:flex; flex-direction:column; min-height:540px; padding:30px; border-radius:8px; overflow:hidden; color:#fff; background:var(--brown); isolation:isolate; }
.tr-card-bg { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transition:transform .8s ease; }
.tr-card::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(41,35,31,.82) 0%, rgba(41,35,31,.55) 38%, rgba(41,35,31,.08) 75%, rgba(41,35,31,.35) 100%); }
.tr-card:hover .tr-card-bg { transform:scale(1.06); }
.tr-price { display:block; font-size:15px; font-weight:500; margin-bottom:18px; }
.tr-card h2 { font-size:clamp(24px, 2.2vw, 29px); line-height:1.2; margin-bottom:14px; }
.tr-card p { max-width:380px; line-height:1.75; font-size:15px; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tr-link { align-self:flex-start; margin-top:auto; display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:15px; padding-bottom:3px; border-bottom:1px solid #fff; transition:.3s ease; }
.tr-link i { font-size:12px; transition:transform .3s ease; }
.tr-link:hover, .tr-link:focus-visible { color:var(--gold); border-color:var(--gold); }
.tr-link:hover i { transform:translateX(4px); }
.tr-num { position:absolute; right:26px; bottom:14px; font-family:var(--font-heading); font-size:78px; line-height:1; color:rgba(255,255,255,.28); pointer-events:none; }
@media (max-width:575px) { .tr-card { min-height:460px; padding:26px; } .tr-num { font-size:64px; } }
@media (prefers-reduced-motion:reduce) { .tr-card-bg { transition:none; } .tr-card:hover .tr-card-bg { transform:none; } }

/* =====================================================================
   GALLERY PAGE — grid, filters, lightbox
===================================================================== */
.gl-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px 40px; flex-wrap:wrap; margin-bottom:46px; }
.gl-head .section-heading { font-size:clamp(36px, 4.4vw, 54px); margin-bottom:14px; }
.gl-filters { display:flex; flex-wrap:wrap; gap:10px; }
.gl-filter { background:transparent; border:1px solid var(--border); color:var(--brown); padding:11px 24px; border-radius:50px; font-family:var(--font-body); font-size:14px; letter-spacing:.3px; cursor:pointer; transition:.3s ease; }
.gl-filter:hover { border-color:var(--gold); color:var(--gold); }
.gl-filter.active { background:var(--brown); border-color:var(--brown); color:#fff; }

.gl-grid { display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:270px; grid-auto-flow:dense; gap:18px; }
.gl-grid.is-filtered .gl-item { grid-row:auto; grid-column:auto; }
.gl-item { position:relative; display:block; overflow:hidden; border-radius:8px; background:var(--cream-2); isolation:isolate; }
.gl-tall { grid-row:span 2; }
.gl-wide { grid-column:span 2; }
.gl-hide { display:none; }
.gl-in { animation:glIn .55s ease both; }
@keyframes glIn { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
.gl-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s ease; }
.gl-item::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(41,35,31,0) 45%, rgba(41,35,31,.82) 100%); opacity:0; transition:opacity .4s ease; }
.gl-item:hover img, .gl-item:focus-visible img { transform:scale(1.07); }
.gl-item:hover::after, .gl-item:focus-visible::after { opacity:1; }
.gl-cap { position:absolute; left:24px; right:80px; bottom:22px; z-index:2; color:#fff; display:flex; flex-direction:column; gap:4px; opacity:0; transform:translateY(14px); transition:.4s ease; }
.gl-cap small { color:var(--gold); font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; }
.gl-cap strong { font-family:var(--font-heading); font-weight:400; font-size:22px; line-height:1.2; }
.gl-zoom { position:absolute; right:20px; bottom:20px; z-index:2; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; color:var(--brown); font-size:15px; opacity:0; transform:scale(.7); transition:.4s ease; }
.gl-item:hover .gl-cap, .gl-item:focus-visible .gl-cap { opacity:1; transform:none; }
.gl-item:hover .gl-zoom, .gl-item:focus-visible .gl-zoom { opacity:1; transform:none; }
@media (hover:none) {
  .gl-item::after { opacity:1; }
  .gl-cap { opacity:1; transform:none; }
  .gl-zoom { display:none; }
}
@media (max-width:991px) {
  .gl-grid { grid-template-columns:repeat(2, 1fr); grid-auto-rows:240px; gap:14px; }
  .gl-head { margin-bottom:34px; }
}
@media (max-width:575px) {
  .gl-grid { grid-template-columns:1fr; grid-auto-rows:320px; }
  .gl-tall, .gl-wide { grid-row:auto; grid-column:auto; }
  .gl-filter { padding:9px 18px; }
}

/* Lightbox */
body.gl-lock { overflow:hidden; }
.gl-lb { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; background:rgba(24,20,17,.96); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
.gl-lb.open { opacity:1; visibility:visible; }
.gl-lb-top { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:22px 28px; color:rgba(255,255,255,.75); font-size:14px; letter-spacing:1px; }
.gl-lb-btn { width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; font-size:18px; cursor:pointer; transition:.3s ease; }
.gl-lb-btn:hover, .gl-lb-btn:focus-visible { background:var(--gold); border-color:var(--gold); }
.gl-lb-btn[hidden] { display:none; }
.gl-lb-prev { position:absolute; left:28px; top:50%; transform:translateY(-50%); }
.gl-lb-next { position:absolute; right:28px; top:50%; transform:translateY(-50%); }
.gl-lb-stage { margin:0; width:100%; padding:80px 110px 36px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.gl-lb-img { max-width:100%; max-height:calc(100vh - 230px); width:auto; height:auto; object-fit:contain; border-radius:4px; opacity:0; transform:scale(.98); transition:opacity .4s ease, transform .4s ease; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.gl-lb-img.loaded { opacity:1; transform:none; }
.gl-lb-stage figcaption { text-align:center; color:#fff; display:flex; flex-direction:column; gap:6px; }
.gl-lb-stage figcaption small { color:var(--gold); font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.gl-lb-stage figcaption strong { font-family:var(--font-heading); font-weight:400; font-size:clamp(20px, 2.4vw, 28px); }
@media (max-width:767px) {
  .gl-lb-stage { padding:76px 16px 100px; }
  .gl-lb-img { max-height:calc(100vh - 290px); }
  .gl-lb-prev, .gl-lb-next { top:auto; bottom:26px; transform:none; width:48px; height:48px; }
  .gl-lb-prev { left:24px; }
  .gl-lb-next { right:24px; }
  .gl-lb-top { padding:18px 20px; }
}
@media (prefers-reduced-motion:reduce) {
  .gl-item img, .gl-cap, .gl-zoom, .gl-lb, .gl-lb-img { transition:none; }
  .gl-in { animation:none; }
}

/* =====================================================================
   PACKAGES PAGE — comparison table
===================================================================== */
.pk-table-wrap {background:var(--white); border:1px solid var(--border); border-radius:8px; }
.pk-table { width:100%; min-width:680px; border-collapse:collapse; text-align:center; }
.pk-table th, .pk-table td { padding:22px 24px; border-bottom:1px solid var(--border); font-size:15px; vertical-align:middle; }
.pk-table tbody tr:last-child th, .pk-table tbody tr:last-child td { border-bottom:0; }
.pk-table thead th { font-family:var(--font-heading); font-weight:400; font-size:24px; padding-top:34px; padding-bottom:30px; }
.pk-table thead th span { display:block; margin-top:6px; font-family:var(--font-body); font-size:15px; color:var(--gold); font-weight:700; }
.pk-table tbody th { text-align:left; font-family:var(--font-heading); font-weight:400; font-size:18px; width:22%; }
.pk-table .pk-hl { background:var(--cream); }
.pk-table td i { color:var(--gold); margin-right:8px; font-size:17px; vertical-align:-2px; }
.pk-no { color:var(--border); font-size:20px; }
.pk-table td { color:var(--brown-2); }
@media (max-width:575px) { .pk-table th, .pk-table td { padding:16px 14px; font-size:14px; } .pk-table thead th { font-size:20px; } }

/* =====================================================================
   BLOG — listing + details
===================================================================== */
.bl-chip { position:absolute; top:16px; left:16px; z-index:2; background:rgba(255,255,255,.94); color:var(--brown); padding:7px 14px; border-radius:50px; font-size:12px; font-weight:600; letter-spacing:.3px; }
.bl-chip-solid { position:static; display:inline-block; background:var(--gold); color:#fff; }
.bl-meta { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--brown-2); margin:14px 0 12px; }
.bl-meta span + span::before, .bl-meta time + span::before { content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--gold); margin-right:18px; vertical-align:middle; }

.bl-feature { display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:center; margin-bottom:90px; }
.bl-feature-img { display:block; border-radius:8px; overflow:hidden; aspect-ratio:5/4; background:var(--cream-2); }
.bl-feature-img img { width:100%; height:100%; object-fit:cover; transition:transform .9s ease; }
.bl-feature:hover .bl-feature-img img { transform:scale(1.05); }
.bl-feature-body h2 { font-size:clamp(30px, 3.4vw, 46px); line-height:1.12; margin:0 0 18px; }
.bl-feature-body h2 a, .bl-card h3 a { color:inherit; transition:color .3s ease; }
.bl-feature-body h2 a:hover, .bl-card h3 a:hover { color:var(--gold); }
.bl-feature-body p { color:var(--brown-2); line-height:1.85; margin-bottom:28px; max-width:520px; }
.bl-feature-body .bl-meta { margin-top:18px; }

.bl-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:36px; padding-top:50px; border-top:1px solid var(--border); }
.bl-toolbar-title { font-size:clamp(28px, 3vw, 38px); margin:0; }

.bl-card { height:100%; display:flex; flex-direction:column; }
.bl-thumb { position:relative; display:block; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--cream-2); }
.bl-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .9s ease; }
.bl-card:hover .bl-thumb img { transform:scale(1.07); }
.bl-body { padding-top:4px; display:flex; flex-direction:column; flex:1; }
.bl-card h3 { font-size:24px; line-height:1.25; margin:0 0 12px; }
.bl-card p { color:var(--brown-2); font-size:15px; line-height:1.75; margin:0 0 20px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bl-more { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:10px; color:var(--brown); font-size:15px; font-weight:500; padding-bottom:3px; border-bottom:1px solid var(--brown); transition:.3s ease; }
.bl-more i { font-size:13px; transition:transform .3s ease; }
.bl-more:hover { color:var(--gold); border-color:var(--gold); }
.bl-more:hover i { transform:translateX(4px); }
#blGrid > div[hidden] { display:none; }

/* Details */
.bl-progress { position:fixed; top:0; left:0; height:3px; width:0; background:var(--gold); z-index:2500; }
.bl-hero { padding-bottom:90px; }
.bl-hero h1 { font-size:clamp(32px, 4.8vw, 58px); max-width:900px; margin-bottom:26px; }
.bl-hero-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; font-size:14px; color:rgba(255,255,255,.8); }
.bl-article { max-width:760px; }
.bl-article p, .bl-article li { color:var(--brown-2); font-size:17px; line-height:1.95; }
.bl-article p { margin-bottom:24px; }
.bl-article a:not(.bl-tags a) { color:var(--gold); border-bottom:1px solid currentColor; }
.bl-article a:not(.bl-tags a):hover { color:var(--white)}
.bl-lead { font-size:20px !important; line-height:1.8 !important; color:var(--brown) !important; }
.bl-article h2 { font-size:clamp(26px, 2.8vw, 34px); margin:48px 0 18px; }
.bl-article blockquote { margin:44px 0; padding:6px 0 6px 30px; border-left:3px solid var(--gold); font-family:var(--font-heading); font-size:clamp(22px, 2.4vw, 28px); line-height:1.4; color:var(--brown); }
.bl-article figure { margin:44px 0; }
.bl-article figure img { width:100%; border-radius:8px; display:block; }
.bl-article figcaption { margin-top:12px; font-size:14px; color:var(--brown-2); text-align:center; }
.bl-list { list-style:none; padding:0; margin:0 0 28px; }
.bl-list li { position:relative; padding:12px 0 12px 34px; border-bottom:1px solid var(--border); }
.bl-list li::before { content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:13px; color:var(--gold); }
.bl-share { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:54px; padding:26px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.bl-tags, .bl-share-btns { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.bl-tags > span, .bl-share-btns > span { font-size:14px; font-weight:600; color:var(--brown); margin-right:4px; }
.bl-tags a { border:1px solid var(--border); border-radius:50px; padding:7px 16px; font-size:13px; color:var(--brown-2); transition:.3s ease; }
.bl-tags a:hover { border-color:var(--gold); color:var(--gold); }
.bl-share-btns a, .bl-share-btns button { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; background:transparent; color:var(--brown); font-size:16px; cursor:pointer; transition:.3s ease; }
.bl-share-btns a:hover, .bl-share-btns button:hover, .bl-share-btns button.copied { background:var(--gold); border-color:var(--gold); color:#fff; }
.bl-author { display:flex; gap:20px; align-items:flex-start; margin-top:36px; padding:28px; background:var(--cream); border-radius:8px; }
.bl-author-mark { flex:none; width:60px; height:60px; border-radius:50%; background:var(--brown); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-size:28px; }
.bl-author strong { font-family:var(--font-heading); font-weight:400; font-size:20px; }
.bl-author p { margin:6px 0 0; font-size:15px; line-height:1.7; }

.bl-side { position:sticky; top:120px; display:flex; flex-direction:column; gap:28px; }
.bl-widget { border:1px solid var(--border); border-radius:8px; padding:28px; }
.bl-widget h3 { font-size:22px; margin:0 0 20px; }
.bl-recent-list, .bl-cats { list-style:none; margin:0; padding:0; }
.bl-recent { display:flex; gap:14px; align-items:center; padding:12px 0; color:var(--brown); }
.bl-recent img { width:72px; height:72px; object-fit:cover; border-radius:6px; flex:none; }
.bl-recent strong { display:block; font-family:var(--font-heading); font-weight:400; font-size:16px; line-height:1.3; transition:color .3s ease; }
.bl-recent small { display:block; margin-top:4px; color:var(--brown-2); font-size:12px; }
.bl-recent:hover strong { color:var(--gold); }
.bl-cats a { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); color:var(--brown); font-size:15px; transition:color .3s ease; }
.bl-cats li:last-child a { border-bottom:0; }
.bl-cats a span { color:var(--brown-2); }
.bl-cats a:hover { color:var(--gold); }
.bl-side-cta { position:relative; border-radius:8px; padding:36px 28px; color:#fff; text-align:center; overflow:hidden; background:linear-gradient(rgba(41,35,31,.82), rgba(41,35,31,.82)), url("../img/glow-rituals-spa.jpg") center/cover; }
.bl-side-cta h3 { font-size:26px; margin-bottom:10px; }
.bl-side-cta p { color:rgba(255,255,255,.8); margin-bottom:22px; }
.bl-related { background:var(--cream); }

@media (max-width:991px) {
  .bl-feature { grid-template-columns:1fr; gap:30px; margin-bottom:60px; }
  .bl-side { position:static; }
}
@media (max-width:575px) {
  .bl-hero { padding-bottom:70px; }
  .bl-article p, .bl-article li { font-size:16px; }
  .bl-author { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .bl-feature-img img, .bl-thumb img { transition:none; } }


/* =====================================================================
   22. MODERN HOVER EFFECTS  (rotating neon border · glow · lift)
   Pure CSS, no JS. Uses a CSS registered property for the animated border.
   Paste at the END of style.css. Change colours in the tokens below.
   ===================================================================== */

:root {
  /* ===== CHANGE BORDER COLOURS HERE ===== */
  --fx-c1: #d8a866;                     /* arc colour 1 (gold)        */
  --fx-c2: #f0648c;                     /* arc colour 2 (pink)        */
  --fx-c3: #ffd9a0;                     /* arc colour 3 (light gold)  */
  --fx-base: rgba(216, 168, 102, .75);  /* full border on hover       */
  --fx-glow: rgba(216, 168, 102, .45);  /* outer glow                 */
  --fx-w: 3px;                          /* border thickness           */
  --fx-speed: 3s;                       /* rotation speed             */
}

/* ---- Ready colour presets: copy ONE line set into :root above ----
   Neon cyan+pink : --fx-c1:#00d4ff; --fx-c2:#ff2d78; --fx-c3:#7c3aed; --fx-base:rgba(0,212,255,.6);  --fx-glow:rgba(0,212,255,.4);
   Purple+blue    : --fx-c1:#a855f7; --fx-c2:#06b6d4; --fx-c3:#a855f7; --fx-base:rgba(168,85,247,.6); --fx-glow:rgba(168,85,247,.4);
   Green          : --fx-c1:#10b981; --fx-c2:#a3e635; --fx-c3:#10b981; --fx-base:rgba(16,185,129,.6); --fx-glow:rgba(16,185,129,.4);
   Only gold      : --fx-c1:#d8a866; --fx-c2:#fff2cf; --fx-c3:#d8a866; --fx-base:rgba(216,168,102,.8); --fx-glow:rgba(216,168,102,.45);
   Different colour for ONE card type, e.g.:
   .price-card { --fx-c1:#a855f7; --fx-c2:#06b6d4; --fx-base:rgba(168,85,247,.6); }
*/

@property --fx-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes fxSpin { to { --fx-angle: 360deg; } }

/* ---------- 1. Rotating gradient ring (hidden until hover) ---------- */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  :is(.service-card, .price-card, .testimonial-card, .tr-card, .faq-card, .bl-thumb)::after,
  .gl-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    padding: var(--fx-w);
    background: conic-gradient(from var(--fx-angle),
        var(--fx-base) 0%,
        var(--fx-c1) 12%,
        var(--fx-c2) 30%,
        var(--fx-c3) 48%,
        var(--fx-base) 62%,
        var(--fx-base) 100%);
    /* show only the border ring, not the fill */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    animation: fxSpin var(--fx-speed) linear infinite paused;
    transition: opacity .4s ease;
  }
}
.testimonial-card { position: relative; }

:is(.service-card, .price-card, .testimonial-card, .tr-card, .faq-card, .bl-thumb):is(:hover, :focus-within)::after,
.gl-item:is(:hover, :focus-visible)::before {
  opacity: 1;
  animation-play-state: running;
}

/* old gold top-bar on service cards is replaced by the neon ring */
.service-card::before { display: none; }

/* ---------- 2. Lift + glow (uses `translate`, so it never clashes
                with AOS or with the old `transform` rules) ---------- */
.tr-card, .gl-item, .bl-card, .testimonial-card, .faq-card, .ct-card {
  transition: translate .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s ease;
}

/* cancel the OLD transform-lift so lifts don't add up */
.service-card:hover, .service-card:focus-within,
.price-card:hover { transform: none; }
.price-card.featured:hover { transform: translateY(-15px); }   /* keep featured offset */

@media (hover: hover) and (pointer: fine) {
  .service-card:hover, .price-card:hover, .tr-card:hover, .bl-card:hover {
    translate: 0 -10px;
    box-shadow: 0 22px 46px -14px var(--fx-glow), 0 0 26px -6px var(--fx-glow);
  }
  .price-card.featured:hover { translate: 0 -7px; }
  .gl-item:hover { translate: 0 -6px; box-shadow: 0 18px 38px -12px var(--fx-glow); }
  .testimonial-card:hover,
  .faq-card:hover { box-shadow: 0 0 30px -8px var(--fx-glow); }
  .bl-card:hover { box-shadow: none; }                         /* flat card: only lift */
  .bl-card:hover .bl-thumb { box-shadow: 0 16px 34px -12px var(--fx-glow); }
}
.service-card:focus-within { translate: 0 -10px; box-shadow: 0 22px 46px -14px var(--fx-glow); }

/* AOS limits transitions to opacity/transform and adds a delay —
   this makes hover instant and smooth on AOS-animated cards */
:is(.service-card, .price-card, .tr-card, .gl-item, .bl-card, .testimonial-card)[data-aos] {
  transition-property: opacity, transform, translate, box-shadow !important;
}
:is(.service-card, .price-card, .tr-card, .gl-item, .bl-card, .testimonial-card).aos-animate:hover {
  transition-delay: 0s !important;
}

/* ---------- 3. Card inner details ---------- */
.service-icon { transition: .6s ease; }
.service-card:hover .service-icon {
  transform: rotate(360deg) scale(1.08);
  box-shadow: 0 0 0 7px rgba(216, 168, 102, .16), 0 0 20px var(--fx-glow);
}
.service-card:hover .service-link i { transform: translateX(6px); }
.bl-feature-img { overflow: hidden; }
.bl-feature-img img { transition: transform .9s ease; }
.bl-feature:hover .bl-feature-img img { transform: scale(1.06); }

/* contact rows (flat cards): icon fills + glows */
.ct-card > i { transition: .4s ease; }
.ct-card:hover > i { background: var(--gold); color: #fff; box-shadow: 0 0 20px var(--fx-glow); }

/* ---------- 4. Buttons ---------- */
.btn-elora i, .btn-light-elora i { transition: transform .35s ease; }
.btn-elora:hover i, .btn-light-elora:hover i { transform: translateX(6px); }
.btn-elora:hover, .btn-elora:focus-visible,
.header-book:hover, .header-book:focus-visible {
  box-shadow: 0 10px 26px -6px var(--fx-glow), 0 0 18px -4px var(--fx-glow);
}
.btn-light-elora:hover, .btn-light-elora:focus-visible {
  translate: 0 -3px;
  box-shadow: 0 10px 26px -8px rgba(255, 255, 255, .45);
}

/* ---------- 5. Menu: gradient underline grows from the centre ---------- */
.nav-link {
  background: linear-gradient(90deg, var(--fx-c1), var(--fx-c2)) no-repeat 50% 100% / 0 2px;
}
.nav-link:hover, .nav-link:focus-visible, .nav-link.active { background-size: 60% 2px; }
@media (max-width: 991px) {
  .nav-link:hover, .nav-link:focus-visible, .nav-link.active { background-size: 30px 2px; background-position: 0 100%; }
}

/* ---------- 6. Footer, socials, back-to-top, filters ---------- */
.footer-links a { display: inline-block; }
.footer-links a:hover, .footer-links a:focus-visible { translate: 6px 0; }
.socials a:hover, .socials a:focus-visible {
  translate: 0 -5px;
  box-shadow: 0 8px 20px -4px var(--fx-glow), 0 0 14px -2px var(--fx-glow);
}
.back-to-top:hover, .back-to-top:focus-visible {
  translate: 0 -5px;
  box-shadow: 0 12px 26px -6px var(--fx-glow);
}
.gl-filter:hover { translate: 0 -2px; box-shadow: 0 6px 16px -6px var(--fx-glow); }

/* ---------- 7. Touch devices & reduced motion ---------- */
@media (hover: none) {
  :is(.service-card, .price-card, .testimonial-card, .tr-card, .faq-card, .bl-thumb)::after,
  .gl-item::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.service-card, .price-card, .testimonial-card, .tr-card, .faq-card, .bl-thumb)::after,
  .gl-item::before { animation: none; }
  .service-card, .price-card, .tr-card, .gl-item, .bl-card { translate: none !important; }
  .service-card:hover .service-icon { transform: none; }
}


/* =====================================================================
   TESTIMONIALS — MODERN SPLIT LAYOUT (text left, image right)
   (overrides the older testimonial rules above)
===================================================================== */
.testimonial-section {
  background: linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
}
.testimonial-slider-wrap { max-width: 1120px; }
.testimonialSwiper { padding: 10px 0 40px; margin: -10px 0 -40px; }
.testimonialSwiper .swiper-slide { height: auto; }

.testimonial-slider-wrap .testimonial-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 520px;
  margin: 0;
  padding: 14px;
  text-align: left;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: none;
}
.testimonial-slider-wrap .testimonial-card:hover { box-shadow: none; }

/* ---- text side ---- */
.t-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 52px 118px 48px;
}
.testimonial-slider-wrap .quote-icon {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(216, 168, 102, .16);
  font-size: 32px; line-height: 1;
}
.testimonial-slider-wrap .stars {
  margin-bottom: 18px;
  font-size: 14px;
  letter-spacing: 4px;
}
.testimonial-slider-wrap .testimonial-card p {
  margin: 0 0 30px;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.5;
  color: var(--brown);
}
.testimonial-card figcaption {
  display: flex; align-items: center; gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.t-avatar {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--rose));
  color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
}
.t-name { display: block; font-size: 16px; font-weight: 700; color: var(--brown); }
.t-role { display: block; margin-top: 2px; font-size: 13px; color: var(--brown-2); }

/* ---- image side ---- */
.t-media {
  position: relative;
  min-height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--cream-2);
}
.t-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.t-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 10, 0) 45%, rgba(20, 14, 10, .55) 100%);
  pointer-events: none;
}
.t-chip, .t-rating {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
}
.t-chip { left: 18px; bottom: 18px; }
.t-rating { right: 18px; top: 18px; }
.t-rating i { color: var(--gold); font-style: normal; }

/* ---- controls: arrows + dots sit inside the card, bottom-left ---- */
.testimonial-slider-wrap .testimonial-nav {
  top: auto; bottom: 58px;
  width: 48px; height: 48px;
  transform: none;
  border-color: var(--border);
}
.testimonial-slider-wrap .testimonial-prev { left: 62px; right: auto; }
.testimonial-slider-wrap .testimonial-next { left: 120px; right: auto; }
.testimonial-slider-wrap .testimonial-pagination {
  position: absolute !important;
  left: 190px; bottom: 77px;
  width: auto !important;
  margin: 0;
  z-index: 5;
}

/* ---- slide-in motion on the active slide ---- */
.testimonialSwiper .swiper-slide-active .t-media img { animation: tmZoom 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.testimonialSwiper .swiper-slide-active .t-body > * { animation: tmUp .8s cubic-bezier(.2, .7, .2, 1) both; }
.testimonialSwiper .swiper-slide-active .t-body > :nth-child(2) { animation-delay: .08s; }
.testimonialSwiper .swiper-slide-active .t-body > :nth-child(3) { animation-delay: .16s; }
.testimonialSwiper .swiper-slide-active .t-body > :nth-child(4) { animation-delay: .26s; }
@keyframes tmZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes tmUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .testimonialSwiper .swiper-slide-active .t-media img,
  .testimonialSwiper .swiper-slide-active .t-body > * { animation: none; }
}

/* ---- tablet / mobile: image on top, text below ---- */
@media (max-width: 900px) {
  .testimonial-slider-wrap .testimonial-card { grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
  .t-media { order: -1; min-height: 260px; }
  .t-body { padding: 30px 28px 112px; }
  .testimonial-slider-wrap .testimonial-prev { left: 42px; }
  .testimonial-slider-wrap .testimonial-next { left: 100px; }
  .testimonial-slider-wrap .testimonial-pagination { left: 170px; }
}
@media (max-width: 575px) {
  .t-body { padding: 26px 20px 64px; }
  .t-media { min-height: 220px; }
  .testimonial-slider-wrap .testimonial-pagination { left: 50%; bottom: 32px; transform: translateX(-50%); }
}



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-stopped{overflow:hidden}
/* sticky ko overflow-hidden se bachao */
html,body{overflow-x:clip!important;overflow-y:visible!important}
.reel-scroll{overflow:visible}

.reel-scroll{--reel-bg:#14100e;--reel-cream:#f6ece4;--reel-accent:#e9c8b8;--reel-gray:#cfc6bf;--reel-pad:clamp(18px,4vw,52px);
  position:relative;width:100%;height:400vh;background:radial-gradient(circle at 50% 40%,rgba(233,200,184,.14),transparent 34%),var(--reel-bg);color:#fff}
.reel-sticky{position:sticky;top:0;width:100%;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--reel-bg);isolation:isolate}
.reel-sticky::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(circle at center,#000,transparent 78%);mask-image:radial-gradient(circle at center,#000,transparent 78%)}
.reel-mono{font-size:clamp(.72rem,1vw,.88rem);letter-spacing:.14em;text-transform:uppercase}

.reel-prelude{position:absolute;top:100px;left:var(--reel-pad);right:var(--reel-pad);z-index:5;display:flex;justify-content:space-between;gap:12px;color:var(--reel-cream)}
.reel-prelude span{opacity:.75}
.reel-side{position:absolute;top:50%;z-index:5;display:flex;gap:16px;width:max-content;min-width:min(680px,80vh);justify-content:center;align-items:center;color:var(--reel-gray);pointer-events:none}
.reel-side span{display:inline-block;white-space:nowrap;padding-inline:8px}
.reel-side-left{left:var(--reel-pad);transform:translate(-50%,-50%) rotate(-90deg)}
.reel-side-right{right:var(--reel-pad);transform:translate(50%,-50%) rotate(90deg)}

.reel-center{position:absolute;z-index:4;width:min(900px,calc(100vw - var(--reel-pad)*2));text-align:center;pointer-events:none;color:#fff}
.reel-overline{margin:0 0 16px;color:var(--reel-accent)}
.reel-title{margin:0;color:#fff;font-weight:400;font-size:clamp(3rem,9vw,8.5rem);line-height:1.02;letter-spacing:.01em;text-transform:uppercase;padding:.06em 0;overflow:hidden}
.reel-word{display:inline-block;white-space:nowrap}
.reel-char{display:inline-block;will-change:transform,opacity,filter}
.reel-intro-text{width:min(540px,86vw);margin:22px auto 0;font-size:clamp(.95rem,1.1vw,1.1rem);line-height:1.6;color:var(--reel-cream)}

.reel-frame{position:relative;z-index:3;width:300px;height:300px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 80px rgba(0,0,0,.45);will-change:width,height,transform}
.reel-video{position:relative;width:100%;height:100%;object-fit:cover;display:block;background:#000 url('assets/img/slider-2.jpg') center/cover no-repeat;will-change:transform}
.reel-dark{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,0)}
.reel-label{position:absolute;left:16px;right:16px;z-index:2;display:flex;justify-content:space-between;font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;pointer-events:none}
.reel-label-top{top:16px}.reel-label-bottom{bottom:16px}

.reel-overlay{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--reel-pad);clip-path:inset(100% 0 0 0);opacity:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.reel-overlay-inner{width:min(980px,92vw);display:flex;flex-direction:column;align-items:center}
.reel-kicker{margin:0 0 16px;color:var(--reel-accent)}
.reel-overlay .reel-title{font-size:clamp(2.4rem,8vw,7.5rem)}
.reel-overlay-text{width:min(660px,90vw);margin:22px auto 0;font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.6;color:var(--reel-cream)}
.reel-menu{margin-top:26px;display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;color:#fff}
.reel-menu a{color:inherit;text-decoration:none;transition:color .3s}
.reel-menu a:hover{color:var(--reel-accent)}
.reel-menu i{font-style:normal;color:var(--reel-accent);opacity:.8}

.reel-progress{position:absolute;left:var(--reel-pad);right:var(--reel-pad);bottom:24px;z-index:7;height:1px;background:rgba(255,255,255,.16);overflow:hidden}
.reel-progress-bar{width:0;height:100%;background:var(--reel-accent)}
.reel-note{position:absolute;right:var(--reel-pad);bottom:38px;z-index:7;display:flex;gap:8px;color:var(--reel-cream);pointer-events:none}

@media (max-width:767px){
  .reel-scroll{height:350vh}
  .reel-prelude{top:84px}
  .reel-side,.reel-note{display:none}
  .reel-frame{width:210px;height:210px}
  .reel-title{letter-spacing:0}
  .reel-menu{gap:10px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .reel-scroll{height:auto}
  .reel-sticky{position:relative;height:auto;min-height:100svh}
  .reel-center,.reel-prelude,.reel-side,.reel-note,.reel-progress,.reel-label{display:none}
  .reel-frame{width:100%;min-height:100svh;height:auto;border:0}
  .reel-video{position:absolute;inset:0}
  .reel-dark{background:rgba(0,0,0,.6)}
  .reel-overlay{position:relative;min-height:100svh;clip-path:none;opacity:1;z-index:3}
}


/*------------------------------------*/ 

.box-div { background:var(--cream); border:1px solid var(--border); padding:14px 14px 14px 14px; transition:.4s ease; outline-offset:4px; border-radius:5px }


.template {
position: relative;
-webkit-transition:all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
transition:all 3s ease;  height:450px;
}
.template:hover {
background-position:left bottom;
}
.template a {
display:block;
width:100%;
height:100%; 
}



.template {position:relative;background-size:100%!important;background-repeat:no-repeat!important;}
.index {background:url(../img/index.jpg) top center;cursor:pointer;}
.about {background:url(../img/about.jpg) top center;cursor:pointer;}
.services {background:url(../img/services.jpg) top center;cursor:pointer;}
.packages {background:url(../img/packages.jpg) top center;cursor:pointer;}
.gallery {background:url(../img/gallery.jpg) top center;cursor:pointer;}
.blog {background:url(../img/blog.jpg) top center;cursor:pointer;} 
.blog-details {background:url(../img/blog-details.jpg) top center;cursor:pointer;} 
.contact {background:url(../img/contact.jpg) top center;cursor:pointer;} 


.core-features {
border: #bd955d 2px solid;
margin-bottom: 30px;
padding: 50px 0;
text-align: center;
background: #fff;
border-radius:10px;
}



.circle {
border-radius: 50%;
color: #27ae60;
display: inline-block;
height: 120px;
width: 120px;
margin-bottom: 10px;
/* Same shadow structure in both states so the transition stays smooth */
box-shadow:0 0 0 2px #bd955d inset,0 0 0 0 rgba(189, 149, 93, 0);
transition:box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);will-change: transform, box-shadow;}

.core-features:hover .circle {box-shadow:0 0 0 2px #bd955d inset,0 0 32px 0 rgba(189, 149, 93, 1);transform: translateY(-6px) scale(1.06);}




.core-features h3 {
color: #232323;
font-size:24px;
padding: 10px 0 0 5px;
margin:0 0 15px 0; 
text-transform: capitalize;
}
.core-features p {
color: #000;
font-size: 14px;
padding: 0 10px;
font-weight:400;
margin-bottom: 0;
min-height: 40px;
}

.circle img {
display: table;
margin: 25px auto;
width: 70px;-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

}
.gray {
background-color: #f7f8fb;
padding: 30px 0;
}

.core-features:hover .circle img {
display: table;
margin: 30px auto;
width: 60px;
}





/* ==========================================================================
   PROFESSIONAL POLISH LAYER
   Uses the theme's own tokens: cream, brown, gold, rose / Playfair + DM Sans.
   ========================================================================== */

/* ---------- Hero ---------- */
.ab-hero { padding: 190px 0 120px; }
.ab-hero .eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ab-hero .eyebrow::before, .ab-hero .eyebrow::after { content: ""; width: 36px; height: 1px; background: var(--gold); }
.ab-hero p { max-width: 620px; margin: 0 auto; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.btn-outline-elora {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .55);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.btn-outline-elora:hover, .btn-outline-elora:focus-visible { background: #fff; border-color: #fff; color: var(--brown); transform: translateY(-2px); }

/* ---------- Demo section ---------- */
.ab-stats { padding: 110px 0; }
.ab-stats-head { margin-bottom: 56px; }
.section-lead { color: rgba(255, 255, 255, .65); font-size: 17px; line-height: 1.7; max-width: 460px; margin: 14px auto 0; }
.box-div {
  background: var(--cream);
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  transition: transform .4s ease, box-shadow .4s ease;
}
.box-div:hover, .box-div:focus-within { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(0, 0, 0, .38); }
.template { height: 420px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.template a { border-radius: inherit; }
.demo-label {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  margin: 18px 0 8px;
}

/* ---------- Features ---------- */
.features-section { padding: 100px 0; background: var(--cream); }
.features-head { max-width: 620px; margin: 0 auto 56px; }
.features-head .section-heading { margin-bottom: 14px; }
.features-head em { font-family: var(--font-accent); font-style: italic; color: var(--gold); }
.core-features {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 38px 18px 32px;
  margin-bottom: 28px;
  transition: translate .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.core-features:hover { translate: 0 -5px; border-color: transparent; box-shadow: 0 18px 40px rgba(41, 35, 31, .12); }
.core-features .circle { width: 92px; height: 92px; margin-bottom: 14px; box-shadow: 0 0 0 1px var(--border) inset; }
.core-features:hover .circle { box-shadow: 0 0 0 1px var(--gold) inset, 0 10px 24px rgba(216, 168, 102, .35); transform: scale(1.05); }
.core-features .circle img { width: 50px; margin: 21px auto; }
.core-features:hover .circle img { width: 50px; margin: 21px auto; }
.core-features h3 { font-size: 19px; font-weight: 500; color: var(--brown); padding: 4px 8px 0; margin: 0 0 10px; }
.core-features p { color: var(--brown-2); font-size: 14.5px; line-height: 1.7; min-height: 48px; padding: 0 14px; font-weight: 400; }

/* ---------- Footer ---------- */
.final-ctas {
  position: relative;
  overflow: hidden;
  background: var(--brown);
  color: #fff;
  padding:0;
  border-top: 3px solid var(--gold);
}
.final-ctas a { color: rgba(255, 255, 255, .75); transition: color .25s ease; }
.final-ctas a:hover, .final-ctas a:focus-visible { color: var(--gold); }
.final-ctas .btn-elora, .final-ctas .btn-elora:hover { color: #fff; }
.final-ctas .container { position: relative; }
.final-ctas .footer-cols { margin-top: 0; }
.footer-brand { font-size: 32px; line-height: 1.2; }
.footer-about { max-width: 380px; margin: 16px 0 26px; }
.final-ctas .socials a { width: 42px; height: 42px; font-size: 16px; color: #fff; }
.final-ctas .footer-heading { margin-bottom: 26px; }
.final-ctas .footer-links a { color: rgba(255, 255, 255, .7); }
.final-ctas .footer-links a:hover, .final-ctas .footer-links a:focus-visible { color: var(--gold); }
.final-ctas .footer-contact p { margin-bottom: 20px; }
.final-ctas .copyright { position: relative; margin-top: 64px; padding: 24px 0; }

@media (max-width: 767px) {
  .ab-hero { padding: 140px 0 80px; }
  .ab-stats { padding: 72px 0; }
  .features-section { padding: 72px 0; }
  .template { height: 340px; }
  .final-ctas { padding-top: 64px; }
  .final-ctas .copyright { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .box-div, .core-features, .btn-outline-elora { transition: none; }
  .box-div:hover, .core-features:hover { transform: none; translate: none; }
}