/* ==========================================================
   Let's Relax Wellness Kolkata – Stylesheet
   ----------------------------------------------------------
   1. Variables & base      6. Why choose us
   2. Buttons & helpers     7. Gallery
   3. Navbar                8. CTA, contact, map
   4. Hero carousel         9. Footer
   5. About & services     10. Floating actions & modals
   ========================================================== */

/* ---------- 1. Variables & base ---------- */
:root {
  --green: #24483F;
  --green-dark: #1A352E;
  --green-deep: #132721;
  --gold: #C9A66B;
  --gold-dark: #B08D52;
  --cream: #F7F3EC;
  --beige: #EFE6D6;
  --light-green: #E8F0EB;
  --white: #FFFFFF;
  --text: #2B2B2B;
  --muted: #6B6B6B;

  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'Poppins', system-ui, sans-serif;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow-sm: 0 4px 18px rgba(36, 72, 63, .08);
  --shadow: 0 14px 40px rgba(36, 72, 63, .14);
  --ease: cubic-bezier(.25, .8, .25, 1);
  --nav-h: 78px;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  font-size: 15.5px;
  line-height: 1.75;
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); color: var(--green); font-weight: 600; }
a { color: var(--green); text-decoration: none; transition: color .3s; }
a:hover { color: var(--gold-dark); }
img { max-width: 100%; }

.section { padding: 90px 0; }
.bg-light-green { background: var(--light-green); }
.bg-green { background: var(--green); }
.text-gold { color: var(--gold) !important; }

.section-eyebrow {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 600;
  margin-bottom: .5rem;
}
.section-title { font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.2; margin-bottom: .75rem; }
.section-sub { max-width: 620px; margin: 0 auto; color: var(--muted); }
.bg-green .section-sub { color: rgba(255,255,255,.75); }

.title-divider {
  width: 70px; height: 3px; margin: 0 auto 1.2rem;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
}
.title-divider.ms-0 { background: linear-gradient(90deg, var(--gold), transparent); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 2. Buttons ---------- */
.btn { border-radius: 50px; font-weight: 500; letter-spacing: .02em; transition: all .35s var(--ease); }
.btn-lg { padding: .8rem 1.8rem; font-size: 1rem; }
.btn-sm { padding: .45rem 1rem; font-size: .82rem; }
.btn:focus-visible { box-shadow: 0 0 0 .25rem rgba(201,166,107,.45); }

.btn-gold { background: var(--gold); color: var(--white); border: 2px solid var(--gold); }
.btn-gold:hover, .btn-gold:focus { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,166,107,.4); }

.btn-primary-green { background: var(--green); color: var(--white); border: 2px solid var(--green); }
.btn-primary-green:hover, .btn-primary-green:focus { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(36,72,63,.3); }

.btn-outline-green { color: var(--green); border: 2px solid var(--green); background: transparent; }
.btn-outline-green:hover { background: var(--green); color: var(--white); }

.btn-outline-light { border-width: 2px; }
.btn-outline-light:hover { color: var(--green); transform: translateY(-2px); }

/* ---------- 3. Navbar ---------- */
#mainNav {
  padding: 14px 0;
  transition: background .4s, padding .4s, box-shadow .4s;
  background: linear-gradient(180deg, rgba(10,22,18,.6), transparent);
}
#mainNav.scrolled { background: rgba(26,53,46,.97); padding: 8px 0; box-shadow: 0 6px 24px rgba(0,0,0,.18); backdrop-filter: blur(8px); }

.brand-logo { border-radius: 50%; object-fit: cover; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
#mainNav .brand-logo { width: 54px; height: 54px; transition: width .4s, height .4s; }
#mainNav.scrolled .brand-logo { width: 46px; height: 46px; }

.brand-text { font-family: var(--font-head); color: var(--white); font-size: 1.25rem; line-height: 1.05; font-weight: 600; }
.brand-text small { display: block; font-family: var(--font-body); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-top: 3px; }

#mainNav .nav-link { color: rgba(255,255,255,.88); font-size: .9rem; font-weight: 500; padding: .5rem .85rem; position: relative; }
#mainNav .nav-link::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .25rem;
  height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease);
}
#mainNav .nav-link:hover, #mainNav .nav-link.active { color: var(--gold); }
#mainNav .nav-link:hover::after, #mainNav .nav-link.active::after { transform: scaleX(1); }

.navbar-toggler { border: 1px solid rgba(201,166,107,.6); color: var(--gold); font-size: 1.6rem; padding: .1rem .55rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(201,166,107,.35); }

@media (max-width: 991.98px) {
  #mainNav .navbar-collapse { background: var(--green-dark); margin-top: 10px; border-radius: var(--radius-sm); padding: .75rem 1rem 1rem; box-shadow: var(--shadow); }
  #mainNav .nav-link::after { display: none; }
  #mainNav .nav-link { border-bottom: 1px solid rgba(255,255,255,.07); }
}

/* ---------- 4. Hero carousel ---------- */
.hero, .hero .carousel-item { height: 100vh; min-height: 600px; }
.hero .carousel-item { background-size: cover; background-position: center; }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,25,20,.85) 0%, rgba(19,39,33,.6) 50%, rgba(0,0,0,.35) 100%);
}
.hero-content {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--nav-h); color: var(--white); max-width: 1140px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem; color: var(--gold);
  text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; font-weight: 500; margin-bottom: 1rem;
}
.hero-eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--gold); }
.hero-title { color: var(--white); font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 600; line-height: 1.12; margin-bottom: 1.2rem; max-width: 780px; }
.hero-text { font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 560px; color: rgba(255,255,255,.88); font-weight: 300; margin-bottom: 2rem; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Subtle text animation on active slide */
.hero .carousel-item .hero-eyebrow,
.hero .carousel-item .hero-title,
.hero .carousel-item .hero-text,
.hero .carousel-item .hero-btns { opacity: 0; transform: translateY(25px); }
.hero .carousel-item.active .hero-eyebrow { animation: heroUp .8s .2s var(--ease) forwards; }
.hero .carousel-item.active .hero-title { animation: heroUp .9s .4s var(--ease) forwards; }
.hero .carousel-item.active .hero-text { animation: heroUp .9s .6s var(--ease) forwards; }
.hero .carousel-item.active .hero-btns { animation: heroUp .9s .8s var(--ease) forwards; }
@keyframes heroUp { to { opacity: 1; transform: none; } }

/* Slow Ken Burns zoom */
.hero .carousel-item.active { animation: kenburns 12s ease-out forwards; }
@keyframes kenburns { from { background-size: 110%; } to { background-size: 100%; } }
@media (max-aspect-ratio: 1/1) { .hero .carousel-item.active { animation: none; } }

.hero .carousel-control-prev, .hero .carousel-control-next { width: 6%; opacity: .6; }
.hero .carousel-indicators { margin-bottom: 2rem; }
.hero .carousel-indicators [data-bs-target] { width: 34px; height: 3px; border: 0; background: var(--gold); }

@media (max-width: 767.98px) {
  .hero, .hero .carousel-item { height: 92vh; min-height: 560px; }
  .hero .carousel-control-prev, .hero .carousel-control-next { display: none; }
  .hero-btns .btn { flex: 1 1 auto; }
  .hero .carousel-indicators { margin-bottom: 4.5rem; }
}

/* ---------- 5. About ---------- */
.about-img-wrap { position: relative; padding: 0 0 30px 30px; }
.about-img-wrap::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 65%; height: 70%;
  border: 2px solid var(--gold); border-radius: var(--radius); z-index: 0;
}
.about-img { position: relative; z-index: 1; border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.about-badge {
  position: absolute; z-index: 2; right: -10px; bottom: 60px;
  background: var(--green); color: var(--white); border-radius: var(--radius);
  padding: 1rem 1.3rem; display: flex; align-items: center; gap: .8rem;
  box-shadow: var(--shadow); font-family: var(--font-head); font-size: 1.05rem; line-height: 1.25;
}
.about-badge i { font-size: 2rem; color: var(--gold); }
.about-points li { padding: .3rem 0; display: flex; gap: .6rem; align-items: center; }
.about-points i { color: var(--gold-dark); font-size: 1.15rem; }
@media (max-width: 575.98px) {
  .about-img-wrap { padding: 0 0 18px 18px; }
  .about-badge { right: 12px; bottom: 36px; padding: .7rem .95rem; font-size: .88rem; }
  .contact-item a { font-size: .8rem; } }

/* ---------- Services ---------- */
.service-card {
  background: var(--white); border-radius: var(--radius); overflow: hidden; height: 100%;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow); }
.service-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--beige); }
.service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.service-card:hover .service-img img { transform: scale(1.1); }
.service-icon {
  position: absolute; right: 18px; top: -27px; width: 54px; height: 54px; border-radius: 50%;
  background: var(--green); color: var(--gold); display: grid; place-items: center; font-size: 1.35rem;
  border: 4px solid var(--white); box-shadow: 0 6px 16px rgba(36,72,63,.25); z-index: 3;
  transition: background .4s, color .4s, transform .4s var(--ease);
}
.service-icon i { line-height: 1; }
.service-card:hover .service-icon { background: var(--gold); color: var(--white); transform: rotate(-10deg) scale(1.05); }
.service-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(19,39,33,.35)); }
.service-body { position: relative; padding: 1.8rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.service-body h3 { font-size: 1.25rem; padding-right: 56px; margin-bottom: .5rem; }
.service-body p { font-size: .88rem; color: var(--muted); line-height: 1.65; flex: 1; }
.service-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.service-actions .btn { flex: 1; padding-left: .4rem; padding-right: .4rem; white-space: nowrap; }

/* ---------- 6. Why choose us ---------- */
#why-us { position: relative; overflow: hidden; }
#why-us::before {
  content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%;
  border: 1px solid rgba(201,166,107,.18); top: -220px; right: -180px;
}
.feature-box {
  height: 100%; padding: 2rem 1.75rem; border-radius: var(--radius);
  background: rgba(255,255,255,.04); border: 1px solid rgba(201,166,107,.22);
  transition: background .4s, transform .4s var(--ease), border-color .4s;
}
.feature-box:hover { background: rgba(255,255,255,.08); transform: translateY(-6px); border-color: var(--gold); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(201,166,107,.15); color: var(--gold); font-size: 1.4rem; margin-bottom: 1.2rem;
}
.feature-box h3 { color: var(--white); font-size: 1.35rem; margin-bottom: .5rem; }
.feature-box p { color: rgba(255,255,255,.75); margin: 0; font-size: .92rem; }

/* ---------- 7. Gallery ---------- */
.gallery-item {
  display: block; position: relative; overflow: hidden; border-radius: var(--radius-sm);
  aspect-ratio: 1 / 1; cursor: zoom-in; border: 0; padding: 0; width: 100%; background: var(--beige);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery-item::after {
  content: '\F52A'; font-family: 'bootstrap-icons'; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: 1.8rem; color: var(--white);
  background: rgba(36,72,63,.55); opacity: 0; transition: opacity .4s;
}
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.08); }
.gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; }
.gallery-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

#lightboxModal .modal-content { position: relative; }
#lightboxImg { max-height: 82vh; width: 100%; object-fit: contain; }
.lightbox-nav button {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.9); color: var(--green); font-size: 1.2rem;
}
.lightbox-nav button:hover { background: var(--gold); color: var(--white); }
#lbPrev { left: 10px; }
#lbNext { right: 10px; }

/* ---------- 8. CTA ---------- */
.cta-section {
  position: relative; padding: 120px 0; color: var(--white);
  background-size: cover; background-position: center; background-attachment: fixed;
}
@media (max-width: 991.98px) { .cta-section { background-attachment: scroll; padding: 90px 0; } }
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(19,39,33,.92), rgba(36,72,63,.78)); }
.cta-icon { font-size: 2.4rem; color: var(--gold); display: block; margin-bottom: 1rem; }
.cta-title { color: var(--white); font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.cta-text { max-width: 600px; margin: 0 auto 2rem; color: rgba(255,255,255,.85); font-size: 1.05rem; }

/* ---------- Contact ---------- */
.contact-info {
  background: var(--green); color: rgba(255,255,255,.85); border-radius: var(--radius);
  padding: 2.5rem 2rem; height: 100%; box-shadow: var(--shadow);
}
.contact-info h3 { color: var(--white); font-size: 1.6rem; margin-bottom: .2rem; }
.contact-info > p { color: var(--gold); letter-spacing: .15em; text-transform: uppercase; font-size: .75rem; }
.contact-item { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.contact-icon {
  flex: 0 0 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(201,166,107,.15); color: var(--gold); font-size: 1.1rem;
}
.contact-item h4 { color: var(--gold); font-family: var(--font-body); font-size: .78rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: .2rem; }
.contact-item a, .contact-item address { color: var(--white); font-size: .95rem; line-height: 1.6; }
.contact-item a:hover { color: var(--gold); }

.form-card { background: var(--white); border-radius: var(--radius); padding: 2.5rem 2rem; box-shadow: var(--shadow); height: 100%; }
.form-card h3 { font-size: 1.6rem; }
.form-label { font-size: .85rem; font-weight: 500; color: var(--green); margin-bottom: .35rem; }
.form-control, .form-select {
  border-radius: var(--radius-sm); border: 1px solid #DCD5C8; padding: .7rem 1rem; font-size: .93rem; background-color: #FDFBF8;
}
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(201,166,107,.22); background-color: var(--white); }
@media (max-width: 575.98px) { .form-card, .contact-info { padding: 2rem 1.25rem; } }

/* ---------- Map (contact section) ---------- */
.map-card { height: 100%; min-height: 420px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--beige); }
.map-card iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
@media (max-width: 575.98px) { .map-card, .map-card iframe { min-height: 320px; } }

/* ---------- 9. Footer ---------- */
.site-footer { background: var(--green-deep); color: rgba(255,255,255,.7); padding: 1.4rem 0; text-align: center; font-size: .88rem; border-top: 2px solid var(--gold); }
@media (max-width: 991.98px) { .site-footer { padding-bottom: calc(1.4rem + 56px); } } /* room for mobile action bar */

/* ---------- 10. Floating actions ---------- */
.side-enquire {
  position: fixed; right: 0; top: 50%; z-index: 1040;
  transform: translateY(-50%); writing-mode: vertical-rl; text-orientation: mixed;
  rotate: 180deg;
  background: var(--gold); color: var(--white); border: 0;
  padding: 1.1rem .65rem; border-radius: 0 12px 12px 0;
  font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: .55rem;
  box-shadow: -4px 6px 20px rgba(0,0,0,.2); transition: background .3s, padding .3s;
}
.side-enquire i { display: inline-block; rotate: 90deg; font-size: 1.05rem; }
.side-enquire:hover, .side-enquire:focus-visible { background: var(--green); padding-left: .9rem; }
/* Phones & tablets use the bottom action bar instead of the side tab */
@media (max-width: 991.98px) { .side-enquire { display: none; } }
@media (max-width: 575.98px) {
  .hero-btns .btn { flex: 1 1 100%; }
}

.mobile-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045;
  display: flex; box-shadow: 0 -6px 20px rgba(0,0,0,.18);
}
.mobile-actions a, .mobile-actions button {
  flex: 1; border: 0; padding: .95rem .5rem; font-weight: 600; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.ma-call { background: var(--green); color: var(--white); }
.ma-call:hover { color: var(--gold); }
.ma-call i { animation: ring 2.4s infinite; }
.ma-enquire { background: var(--gold); color: var(--white); }
@keyframes ring { 0%, 20%, 100% { transform: rotate(0); } 5%, 15% { transform: rotate(-15deg); } 10% { transform: rotate(15deg); } }

.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 1030; width: 46px; height: 46px; border-radius: 50%;
  background: var(--green); color: var(--gold); align-items: center; justify-content: center;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: all .35s;
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--gold); color: var(--white); }

/* ---------- Enquiry modal ---------- */
.enquiry-modal { border: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.modal-side { background-size: cover; background-position: center; position: relative; }
.modal-side::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,39,33,.75), rgba(19,39,33,.92)); }
.modal-side-inner { position: relative; height: 100%; padding: 2.5rem 2rem; color: rgba(255,255,255,.85); display: flex; flex-direction: column; justify-content: center; }
.modal-side-inner h3 { color: var(--white); font-size: 1.6rem; }
.modal-side-inner .btn { align-self: flex-start; }
.enquiry-modal .modal-header { padding: 1.5rem 1.75rem 0; }
.enquiry-modal .modal-title { font-size: 1.7rem; }
.enquiry-modal .modal-body { padding: 1rem 1.75rem 1.75rem; }
.modal-backdrop.show { opacity: .7; }