@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root,
[data-theme="logo"] {
  --green: #00963f;
  --green-dark: #007a33;
  --green-deep: #07552d;
  --green-soft: #eaf8f0;
  --dark: #000;
  --grediant: linear-gradient(135deg, #00963f 0%, #000 100%);
  --grediant-dark: linear-gradient(135deg, #000 0%, #00963f 100%);
  --mint: #f5fcf8;
  --ink: #163b27;
  --muted: #607166;
  --line: #dceee2;
  --white: #fff;
  --shadow: 0 18px 50px rgba(0, 88, 45, .10);
  --radius: 22px;

  --theme-primary: #00963f;
  --theme-primary-dark: #007a33;
  --theme-hero-bg: radial-gradient(circle at 80% 25%, #def7ea 0%, #f4fbf7 42%, #ffffff 82%);
  --theme-hero-glow-1: #bbf0d0;
  --theme-hero-glow-2: #d4f4e2;
  --theme-btn-grad: linear-gradient(135deg, #00963f 0%, #007a33 100%);
  --theme-btn-grad-hover: linear-gradient(135deg, #007a33 0%, #05552a 100%);
  --theme-accent-word: linear-gradient(135deg, #00963f 0%, #066030 100%);
  --theme-topbar-bg: #07552d;
  --theme-pulse-shadow: rgba(0, 150, 63, 0.7);
  --theme-pulse-color: #00963f;
  --theme-btn-shadow: rgba(0, 150, 63, 0.25);

  /* Elegant Texture Tokens */
  --body-bg-color: #fafdff;
  --body-texture: radial-gradient(rgba(0, 150, 63, 0.045) 1px, transparent 1px), radial-gradient(rgba(7, 85, 45, 0.02) 1px, transparent 1px);
  --body-texture-size: 28px 28px, 56px 56px;
  --body-texture-pos: 0 0, 14px 14px;
}

[data-theme="black"] {
  --green: #111111;
  --green-dark: #000000;
  --green-deep: #161616;
  --green-soft: #f4f4f5;
  --mint: #fafafa;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --white: #fff;
  --shadow: 0 18px 50px rgba(0, 0, 0, .14);
  --radius: 22px;

  --theme-primary: #111111;
  --theme-primary-dark: #000000;
  --theme-hero-bg: radial-gradient(circle at 80% 25%, #f1f2f4 0%, #f9fafb 42%, #ffffff 82%);
  --theme-hero-glow-1: #e5e7eb;
  --theme-hero-glow-2: #f3f4f6;
  --theme-btn-grad: linear-gradient(135deg, #222222 0%, #000000 100%);
  --theme-btn-grad-hover: linear-gradient(135deg, #374151 0%, #111827 100%);
  --theme-accent-word: linear-gradient(135deg, #111111 0%, #4b5563 100%);
  --theme-topbar-bg: #111111;
  --theme-pulse-shadow: rgba(0, 0, 0, 0.6);
  --theme-pulse-color: #111111;
  --theme-btn-shadow: rgba(0, 0, 0, 0.35);

  /* Elegant Texture Tokens - Black Theme */
  --body-bg-color: #fbfbfb;
  --body-texture: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px), radial-gradient(rgba(0, 0, 0, 0.018) 1px, transparent 1px);
  --body-texture-size: 28px 28px, 56px 56px;
  --body-texture-pos: 0 0, 14px 14px;
}

/* Universal Smooth Theme Transitions */
body,
.nav,
.topbar,
.hero,
.hero-rating-pill,
.btn,
.call-btn,
.hero-primary-btn,
.hero-whatsapp-btn,
.service-card,
.gallery-filter,
.offer-card,
.faq-item,
.site-footer,
.color-variant-switcher,
.variant-btn {
  transition: background 0.3s ease, background-color 0.3s ease, color 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Black Theme Specific Component Overrides */
[data-theme="black"] .topbar {
  background: #111111;
  border-bottom: 1px solid #222222;
}

[data-theme="black"] .nav {
  border-bottom: 1px solid #e5e7eb;
}

[data-theme="black"] .navlinks a {
  color: #374151;
}

[data-theme="black"] .navlinks a:hover,
[data-theme="black"] .navlinks a.active {
  color: #000000;
}

[data-theme="black"] .navlinks a.active:after {
  background: #000000;
}

[data-theme="black"] .hero {
  background: radial-gradient(circle at 80% 25%, #f1f2f4 0%, #f9fafb 42%, #ffffff 82%);
  border-bottom-color: #e5e7eb;
}

[data-theme="black"] .hero-glow-1 {
  background: #e5e7eb;
  opacity: 0.7;
}

[data-theme="black"] .hero-glow-2 {
  background: #f3f4f6;
  opacity: 0.7;
}

[data-theme="black"] .hero-rating-pill {
  border-color: #e5e7eb;
  color: #111827;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

[data-theme="black"] .pulse-dot {
  background: #111111;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  animation: heroPulseBlack 2s infinite;
}

@keyframes heroPulseBlack {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(0, 0, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

[data-theme="black"] .hero h1 {
  color: #111827;
}

[data-theme="black"] .hero-accent-word {
  background: linear-gradient(135deg, #111111 0%, #4b5563 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="black"] .hero-desc {
  color: #6b7280;
}

[data-theme="black"] .hero-primary-btn,
[data-theme="black"] .call-btn,
[data-theme="black"] .btn {
  background: linear-gradient(135deg, #222222 0%, #000000 100%);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

[data-theme="black"] .hero-primary-btn:hover,
[data-theme="black"] .call-btn:hover,
[data-theme="black"] .btn:hover {
  background: linear-gradient(135deg, #374151 0%, #111827 100%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .36);
}

[data-theme="black"] .hero-whatsapp-btn {
  border-color: #111827;
  color: #111827;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
}

[data-theme="black"] .hero-whatsapp-btn:hover {
  background: #111827;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

[data-theme="black"] .hero-trust-row {
  border-top-color: #e5e7eb;
}

[data-theme="black"] .hero-trust-item .trust-icon {
  border-color: #e5e7eb;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
}

[data-theme="black"] .hero-trust-item strong {
  color: #111827;
}

[data-theme="black"] .hero-image-frame {
  border-color: #ffffff;
  box-shadow: 0 28px 65px rgba(0, 0, 0, .18), 0 0 0 1.5px #e5e7eb;
  background: #f4f4f5;
}

[data-theme="black"] .hero-ambiance-badge {
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22);
}

[data-theme="black"] .hero-ambiance-tag {
  background: rgba(17, 24, 39, 0.94);
}

[data-theme="black"] .menu {
  background: #f3f4f6;
  color: #111827;
}

[data-theme="black"] .gallery-filter.active {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
}

.m-auto {
  margin: 0 auto;
}

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

/* Color Variant Switcher Styles */
.color-variant-switcher {
  display: inline-flex;
  align-items: center;
  background: #f0f5f2;
  border: 1px solid #d7e6dc;
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
  user-select: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="black"] .color-variant-switcher {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.variant-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #4b5563;
  font-family: "Poppins";
  font-size: 12px;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.variant-btn:hover {
  color: #111827;
}

.variant-btn .color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
  transition: transform 0.2s ease;
}

.variant-btn[data-theme-val="logo"] .color-dot {
  background: #00963f;
}

.variant-btn[data-theme-val="black"] .color-dot {
  background: #111111;
}

.variant-btn.active {
  background: #ffffff;
  color: #111827;
  font-weight: 750;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.variant-btn.active .color-dot {
  transform: scale(1.25);
}

/* Floating Quick Theme Selector Badge */
.floating-variant-dock {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 999;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  animation: floatBadgeIn 0.5s ease-out;
  transition: all 0.3s ease;
}

.floating-variant-dock:hover {
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

.floating-variant-dock .dock-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 5px;
}

@keyframes floatBadgeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .nav .color-variant-switcher {
    display: none;
  }
}

@media (max-width: 640px) {
  .floating-variant-dock {
    bottom: 85px;
    left: 14px;
    padding: 5px 6px 5px 10px;
  }

  .floating-variant-dock .dock-label {
    display: none;
  }
}

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

html {
  scroll-behavior: smooth
}

body {
  font-family: "Poppins", sans-serif;
  /* font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; */
  color: var(--ink);
  background-color: var(--body-bg-color);
  background-image: var(--body-texture);
  background-size: var(--body-texture-size);
  background-position: var(--body-texture-pos);
  background-attachment: fixed;
  line-height: 1.6;
}

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

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

.container {
  width: min(1180px, 92%);
  margin: auto
}

.topbar {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 8px), linear-gradient(135deg, #07552d 0%, #0c6a39 50%, #07552d 100%);
  color: #fff;
  font-size: 13px;
  position: relative;
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #edf5ef;
}

.nav-inner {
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px
}

.brand img {
  width: 205px;
  height: auto
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  font-weight: 650
}

.navlinks a {
  position: relative;
  padding: 30px 0;
  color: #294637
}

.navlinks a:hover,
.navlinks a.active {
  color: var(--green)
}

.navlinks a.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 2px;
  background: var(--green);
  border-radius: 4px
}

.call-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 500;
  padding: 13px 21px;
  box-shadow: 0 9px 22px rgba(0, 150, 63, .22);
  transition: .25s;
}

.call-btn:hover,
.btn:hover {
  transform: translateY(-2px);
  background: var(--green-dark)
}

.menu {
  display: none;
  border: 0;
  background: var(--green-soft);
  color: var(--green);
  font-size: 25px;
  border-radius: 12px;
  padding: 7px 11px
}

/* ==========================================================================
       Hero Section - Luxury Editorial Boutique Style
       ========================================================================== */
.hero {
  position: relative;
  background: var(--theme-hero-bg), repeating-radial-gradient(circle at 20% 80%, rgba(0, 150, 63, 0.015) 0, rgba(0, 150, 63, 0.015) 1px, transparent 1px, transparent 20px);
  overflow: hidden;
  padding: 50px 0 40px;
  border-bottom: 1px solid #e8f5ed;
}

.hero-bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.6;
}

.hero-glow-1 {
  width: 500px;
  height: 500px;
  background: #bbf0d0;
  top: -120px;
  right: -60px;
}

.hero-glow-2 {
  width: 420px;
  height: 420px;
  background: #d4f4e2;
  bottom: -80px;
  left: 5%;
}

.hero-container {
  position: relative;
  z-index: 2;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 55px;
  align-items: center;
  min-height: 530px;
}

.hero-copy {
  padding: 20px 0;
}

.hero-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #d0ecdc;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--green-deep);
  box-shadow: 0 6px 20px rgba(0, 150, 63, .08);
  margin-bottom: 22px;
  backdrop-filter: blur(10px);
}

.pulse-dot {
  width: 9px;
  height: 9px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 150, 63, 0.7);
  animation: heroPulse 2s infinite;
}

@keyframes heroPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 150, 63, 0.7);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(0, 150, 63, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 150, 63, 0);
  }
}

.rating-stars {
  color: #ffaa00;
  letter-spacing: 2px;
  font-size: 13.5px;
}

.hero h1 {
  font-family: Poppins, sans-serif;
  font-size: clamp(38px, 5vw, 48px);
  line-height: 1.08;
  color: #103823;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

.hero-accent-word {
  display: block;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  background: linear-gradient(135deg, #00963f 0%, #066030 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.05em;
  font-weight: 500;
  margin-top: 6px;
}

.hero-desc {
  max-width: 530px;
  color: #556c5e;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 30px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: 15px;
  font-weight: 750;
  border-radius: 999px;
  background: linear-gradient(135deg, #00963f 0%, #007a33 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(0, 150, 63, .30);
  transition: all .28s ease;
}

.hero-primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 150, 63, .40);
  background: linear-gradient(135deg, #007a33 0%, #05552a 100%);
}

.btn-arrow {
  transition: transform .25s ease;
}

.hero-primary-btn:hover .btn-arrow {
  transform: translateX(4px);
}

.hero-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 999px;
  border: 1.5px solid #25d366;
  background: #ffffff;
  color: #0d6e30;
  box-shadow: 0 4px 15px rgba(37, 211, 102, .12);
  transition: all .25s ease;
}

.hero-whatsapp-btn:hover {
  background: #25d366;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, .28);
}

.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid #e0f0e6;
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-trust-item .trust-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #c8ebd5;
  display: grid;
  place-items: center;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0, 120, 60, .06);
}

.hero-trust-item strong {
  display: block;
  font-size: 13px;
  color: var(--green-deep);
  line-height: 1.2;
}

.hero-trust-item span {
  display: block;
  font-size: 11.5px;
  color: var(--dark);
}

/* Hero Visual Composition */
.hero-visual-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.hero-image-frame {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 490px;
  border-radius: 220px 220px 36px 36px;
  overflow: hidden;
  border: 8px solid #ffffff;
  box-shadow: 0 28px 65px rgba(7, 85, 45, .16), 0 0 0 1.5px #d2f0e0;
  background: #eaf8f0;
}

.hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  transition: transform .6s ease;
}

.hero-image-frame:hover .hero-main-img {
  transform: scale(1.05);
}

/* Floating Salon Ambiance Mini Circle */
.hero-ambiance-badge {
  position: absolute;
  bottom: -15px;
  right: -10px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #ffffff;
  box-shadow: 0 14px 35px rgba(7, 85, 45, 0.22);
  z-index: 4;
  transition: transform .3s ease;
}

.hero-ambiance-badge:hover {
  transform: scale(1.08) rotate(3deg);
}

.hero-ambiance-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-ambiance-tag {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(7, 85, 45, 0.9);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* Floating Glassmorphism Badges */
.floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(210, 240, 222, 0.95);
  border-radius: 18px;
  padding: 10px 16px;
  box-shadow: 0 14px 35px rgba(7, 85, 45, 0.12);
  z-index: 5;
  transition: transform .3s ease;
  animation: floatBadge 4s ease-in-out infinite alternate;
}

.floating-badge:hover {
  transform: translateY(-4px);
}

@keyframes floatBadge {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-6px);
  }
}

.badge-top-left {
  top: 30px;
  left: -25px;
  animation-delay: 0.5s;
}

.badge-top-right {
  top: 55px;
  right: -20px;
  animation-delay: 1.2s;
}

.badge-bottom-left {
  bottom: 25px;
  left: -20px;
  animation-delay: 1.8s;
}

.badge-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}

.offer-tag-icon {
  font-size: 20px;
}

.floating-badge strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--green-deep);
  line-height: 1.2;
}

.floating-badge span {
  display: block;
  font-size: 11px;
  color: var(--dark);
  font-weight: 600;
}

.badge-avatars {
  display: flex;
  margin-right: -4px;
}

.mini-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  margin-left: -6px;
}

/* Hero Slider Container & Track */
.hero-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  opacity: 0.45;
  transition: opacity 0.5s ease;
}

.hero-slide.active {
  opacity: 1;
}

/* Hero Navigation Arrows */
.hero-nav-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid #d2eedc;
  color: var(--green-deep);
  font-size: 28px;
  font-weight: 300;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(7, 85, 45, 0.12);
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  line-height: 1;
  user-select: none;
}

.hero-nav-arrow:hover {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 12px 28px rgba(0, 150, 63, 0.28);
}

.hero-prev-arrow {
  left: 20px;
}

.hero-next-arrow {
  right: 20px;
}

/* Hero Slider Dots */
.hero-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  z-index: 10;
  position: relative;
}

.hero-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1.5px solid #d4ede0;
  color: var(--dark);
  font-family: "Poppins";
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 80, 40, 0.04);
}

.hero-dot-fill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b6dbca;
  transition: all 0.3s ease;
}

.hero-dot.active {
  background: var(--green-deep);
  border-color: var(--green-deep);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(7, 85, 45, 0.22);
}

.hero-dot.active .hero-dot-fill {
  background: #25d366;
  box-shadow: 0 0 8px #25d366;
}

.hero-dot:hover:not(.active) {
  border-color: var(--green);
  color: var(--green);
  transform: translateY(-1px);
}

/* Bridal Theme Modifiers for Slide 2 */
.bridal-pill {
  border-color: #f5d089;
  background: #fffdf5;
}

.bridal-pulse {
  background: #d48806;
  box-shadow: 0 0 0 0 rgba(212, 136, 6, 0.7);
}

.bridal-btn {
  background: linear-gradient(135deg, #07552d 0%, #b37feb 100%);
  background: linear-gradient(135deg, #00963f 0%, #b8860b 100%);
}

.bridal-btn:hover {
  background: linear-gradient(135deg, #07552d 0%, #8c6505 100%);
}

.bridal-frame {
  box-shadow: 0 28px 65px rgba(184, 134, 11, .18), 0 0 0 1.5px #f0d8a8;
}

/* Hero Stats Strip */
.hero-stats-strip {
  /* margin-top: 38px; */
  /*! background: #ffffff; */
  /*! border: 1px solid #e1f1e7; */
  /*! border-radius: 20px; */
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 12px 35px rgba(0, 100, 50, .06);
}

.stat-item {
  text-align: center;
  padding: 0 10px;
}

.stat-number {
  display: block;
  font-size: 50px;
  font-weight: 600;
  color: var(--green-soft);
  font-family: Poppins, sans-serif;
  line-height: 1.1;
}

.stat-label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: var(--green-soft);
  margin-top: 3px;
  font-family: "Poppins";
}

.stat-divider {
  width: 1px;
  height: 32px;
  /* background: #e4f0e8; */
}

/* Featured Services Section */
.featured-services {
  padding: 60px 0 70px;
  background: #fbfdfc;
  border-bottom: 1px solid #edf6f0;
}

.featured-services-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 34px;
}

.featured-sub {
  color: var(--dark);
  font-size: 14.5px;
  margin-top: 6px;
}

.view-all-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--green);
  color: var(--green-deep);
  font-weight: 750;
  font-size: 13.5px;
  padding: 9px 20px;
  border-radius: 999px;
  background: #fff;
  transition: all .25s ease;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 150, 63, .06);
}

.view-all-pill-btn:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 150, 63, .20);
}

.featured-services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.featured-card {
  background: #fff;
  border: 1px solid #e2efe6;
  border-radius: 20px;
  padding: 10px 10px 14px 10px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 16px rgba(7, 85, 45, .04);
  transition: transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s ease, border-color .3s ease;
  cursor: pointer;
}

.featured-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 36px rgba(0, 150, 63, .12);
  border-color: #bce3cb;
}

.featured-card-img {
  width: 100%;
  height: 125px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #f0f7f3;
}

.featured-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.featured-card:hover .featured-card-img img {
  transform: scale(1.08);
}

.featured-card-body {
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.featured-card-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--green-deep);
  line-height: 1.25;
  margin-bottom: 4px;
}

.featured-card-desc {
  display: block;
  font-size: 12px;
  color: var(--dark);
  line-height: 1.35;
  margin-bottom: 12px;
}

.featured-card-arrow {
  margin-top: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  transition: background-color .25s ease, transform .25s ease;
  align-self: flex-start;
}

.featured-card:hover .featured-card-arrow {
  background: var(--green-deep);
  transform: translateX(3px);
}

.section {
  padding: 82px 0
}

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

.round-img {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 8px solid #fff
}

.round-img img {
  width: 100%;
  height: 390px;
  object-fit: cover
}

.kicker {
  display: inline-block;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 10px
}

h2 {
  font-family: Poppins, sans-serif;
  font-size: clamp(32px, 4vw, 40px);
  line-height: 1.1;
  color: var(--green-deep)
}

.about p {
  color: var(--dark);
  margin: 18px 0
}

.script {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  color: var(--green);
  font-size: 31px;
  margin: 8px 0 24px
}

.features {
  display: flex;
  gap: 22px;
  flex-wrap: wrap
}

.feature {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700
}

.feature span {
  width: 30px;
  height: 30px;
  border: 1px solid #c9e8d3;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green)
}

/* Redesigned Premium Services Section */
.services {
  background: linear-gradient(180deg, #f7fcf9 0%, #ffffff 60%, #f4fbf7 100%);
  position: relative;
}

.services-nav-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.service-filter-btn {
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  outline: none;
}

.service-filter-btn:hover {
  border-color: var(--green);
  color: var(--green);
  transform: translateY(-2px);
}

.service-filter-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 150, 63, .28);
}

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

.service-item-card {
  background: #fff;
  border: 1.5px solid #e2efe7;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 70, 35, .05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, opacity .3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.service-item-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 45px rgba(0, 90, 45, .12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-color: #b7e3c5;
}

.service-card-media {
  position: relative;
  height: auto;
  overflow: hidden;
  background: #eef7f1;
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(0.2, 1, 0.3, 1);
}

.service-item-card:hover .service-card-media img {
  transform: scale(1.08);
}

.service-badge-pill {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(7, 85, 45, .88);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

.service-price-tag {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: #fff;
  color: var(--green-deep);
  font-weight: 850;
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
  border: 1px solid #dbeee1;
}

.service-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-card-category {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}

.service-card-content h3 {
  font-size: 20px;
  font-family: Poppins, sans-serif;
  color: var(--green-deep);
  margin-bottom: 8px;
  line-height: 1.25;
}

.service-card-content p {
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 18px;
  flex: 1;
}

.service-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.feature-chip {
  font-size: 11.5px;
  font-weight: 650;
  color: #2b553e;
  background: var(--mint);
  border: 1px solid #d4ebdd;
  padding: 4px 10px;
  border-radius: 8px;
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.service-book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--grediant);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  transition: all .25s ease;
  box-shadow: 0 4px 14px rgba(0, 150, 63, .22);
  flex: 1;
  text-align: center;
  text-transform: uppercase;
}

.service-book-btn:hover {
  background: var(--grediant-dark);
  /* background: var(--green-dark); */
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 150, 63, .3);
}

.service-whatsapp-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: all .2s ease;
  flex: none;
}

.service-whatsapp-btn:hover {
  background: #1eb956;
  transform: scale(1.08);
}

/* Trust & Assurance Banner */
.services-trust-banner {
  margin-top: 48px;
  background: #fff;
  border: 1.5px solid #d6ecde;
  border-radius: 20px;
  padding: 24px 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0, 80, 40, .05);
}

.trust-perk {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-perk-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: none;
}

.trust-perk strong {
  display: block;
  font-size: 13.5px;
  color: var(--green-deep);
}

.trust-perk span {
  display: block;
  font-size: 11.5px;
  color: var(--dark);
}

/* Gallery Section Styles */
.gallery {
  background: #fff
}

.gallery-filters {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px
}

.gallery-filter {
  border: 1.5px solid var(--line);
  background: var(--mint);
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s ease;
  outline: none;
}

.gallery-filter:hover {
  border-color: var(--green);
  color: var(--green);
  transform: translateY(-2px);
}

.gallery-filter.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 150, 63, .25);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.gallery-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #f4f9f6;
  box-shadow: 0 8px 24px rgba(0, 70, 35, .06);
  cursor: pointer;
  aspect-ratio: 1/1;
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}

.gallery-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(0.2, 1, 0.3, 1);
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 85, 45, .92) 0%, rgba(7, 85, 45, .45) 55%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  color: #fff;
  transition: opacity .35s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-tag {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
  transform: translateY(10px);
  transition: transform .35s ease;
}

.gallery-item:hover .gallery-tag {
  transform: translateY(0);
}

.gallery-title {
  font-size: 16px;
  font-weight: 750;
  line-height: 1.2;
  margin-bottom: 3px;
  transform: translateY(10px);
  transition: transform .35s ease .05s;
}

.gallery-item:hover .gallery-title {
  transform: translateY(0);
}

.gallery-subtitle {
  font-size: 12px;
  opacity: .88;
  line-height: 1.3;
  transform: translateY(10px);
  transition: transform .35s ease .1s;
}

.gallery-item:hover .gallery-subtitle {
  transform: translateY(0);
}

.gallery-zoom-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--green-deep);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  transform: scale(.7);
  opacity: 0;
  transition: all .3s ease;
}

.gallery-item:hover .gallery-zoom-icon {
  transform: scale(1);
  opacity: 1;
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 35, 18, .92);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-content {
  position: relative;
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .4);
  transform: scale(.92);
  transition: transform .3s ease;
}

.lightbox-modal.active .lightbox-content {
  transform: scale(1);
}

.lightbox-img-wrapper {
  width: 100%;
  /* max-height: 68vh; */
  background: #091b11;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightbox-img-wrapper img {
  max-width: 100%;
  max-height: auto;
  object-fit: contain;
}

.lightbox-info {
  display: none !important;
  width: 100%;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  gap: 16px;
}

.lightbox-info h4 {
  font-size: 18px;
  color: var(--green-deep);
}

.lightbox-info p {
  font-size: 13px;
  color: var(--dark);
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  border: 0;
  font-size: 17px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .2s;
  z-index: 10;
}

.lightbox-close:hover {
  background: var(--green);
}

.lightbox-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--green-deep);
  border: 0;
  font-size: 24px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .2s;
  z-index: 10;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.lightbox-nav:hover {
  background: #fff;
  color: var(--green);
  transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
  left: 16px;
}

.lightbox-next {
  right: 16px;
}

/* Contact Us Section Styles */
.contact-section {
  background: linear-gradient(180deg, #f7fcf9 0%, #ffffff 100%);
  position: relative;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: start;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 8px 25px rgba(0, 70, 35, .04);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: .25s ease;
}

.contact-card:hover {
  transform: translateY(-3px);
  border-color: #b9dfc7;
  box-shadow: 0 12px 30px rgba(0, 90, 45, .08);
}

.contact-card-icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 22px;
}

.contact-card-text small {
  color: var(--green);
  font-weight: 750;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 2px;
}

.contact-card-text strong {
  display: block;
  font-size: 15px;
  color: var(--green-deep);
  margin-bottom: 4px;
}

.contact-card-text p,
.contact-card-text a {
  color: var(--dark);
  font-size: 13px;
  line-height: 1.5;
}

.contact-links-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--mint);
  border: 1px solid #cce8d5;
  color: var(--green-dark);
  transition: .2s;
}

.action-pill:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.action-pill.whatsapp {
  background: #25d366;
  color: #fff;
  border-color: #25d366;
}

.action-pill.whatsapp:hover {
  background: #1eb956;
}

/* Map Card */
.map-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 70, 35, .04);
}

.map-header {
  padding: 12px 18px;
  background: var(--mint);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-deep);
}

.map-iframe {
  width: 100%;
  height: 180px;
  border: 0;
  display: block;
}

/* Social Strip */
.social-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 13px;
}

.social-strip strong {
  color: var(--green-deep);
  font-size: 13px;
}

.social-icons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.social-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #cde7d6;
  display: grid;
  place-items: center;
  color: var(--green);
  font-size: 13px;
  font-weight: bold;
  transition: .2s;
}

.social-icon-btn:hover {
  background: var(--green);
  color: #fff;
  transform: scale(1.1);
}

/* Booking Form Panel */
.booking-form-box {
  background: #fff;
  border: 1.5px solid #d4ebd9;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 18px 45px rgba(0, 80, 40, .07);
}

.form-header {
  margin-bottom: 22px;
}

.form-header h3 {
  font-family: Poppins, sans-serif;
  font-size: 25px;
  color: var(--green-deep);
}

.form-header p {
  color: var(--dark);
  font-size: 13px;
  margin-top: 4px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-full {
  grid-column: 1 / -1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--mint);
  font-family: "Poppins";
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 150, 63, .12);
}

.form-group textarea {
  resize: vertical;
  min-height: 85px;
}

.form-submit-btn {
  width: 100%;
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 25px rgba(0, 150, 63, .26);
  transition: .25s ease;
  margin-top: 4px;
}

.form-submit-btn:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 150, 63, .32);
}

.form-alert {
  display: none;
  padding: 14px 18px;
  border-radius: 12px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  align-items: center;
  gap: 10px;
}

.form-alert.success {
  display: flex;
  background: #e8f7ee;
  color: #065a2c;
  border: 1px solid #b7e8c8;
}

.offer {
  padding: 30px 0;
  background: linear-gradient(100deg, #e6f8ed, #f7fff9, #e0f4e8)
}

.offer-inner {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  align-items: center;
  gap: 28px
}

.offer-badge {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 18px 35px rgba(0, 150, 63, .25);
  transform: rotate(-7deg)
}

.offer h3 {
  font-family: Poppins, sans-serif;
  color: var(--green-deep);
  font-size: 27px
}

.offer p {
  color: var(--dark);
  font-size: 14px;
  margin: 6px 0 12px
}

/* Responsive Testimonials Slider Styles */
.testimonials {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.testimonials-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}

.testimonials-slider-controls {
  display: flex;
  gap: 10px;
}

.slider-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--mint);
  color: var(--green-deep);
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .25s ease;
  box-shadow: 0 4px 12px rgba(0, 70, 35, .05);
  outline: none;
}

.slider-arrow-btn:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: scale(1.06);
}

.testimonials-slider-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 10px 0 20px;
}

.testimonials-track {
  display: flex;
  transition: transform .5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.testimonial-slide {
  flex: 0 0 calc(33.333% - 16px);
  margin-right: 24px;
  box-sizing: border-box;
  display: flex;
}

.review-card-item {
  background: #fff;
  border: 1.5px solid #00963fad;
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 60, 30, .04);
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.review-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 90, 45, .10);
  border-color: #b7e3c5;
}

.review-quote-icon {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: Poppins, sans-serif;
  font-size: 48px;
  line-height: 1;
  color: #d7efe1;
  pointer-events: none;
  user-select: none;
}

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

.avatar-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e4f7eb, #c3edd3);
  color: var(--green-deep);
  font-weight: 850;
  font-size: 15px;
  display: grid;
  place-items: center;
  flex: none;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 150, 63, .15);
}

.review-user-info strong {
  display: block;
  font-size: 15px;
  color: var(--green-deep);
  line-height: 1.2;
}

.review-service-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  margin-top: 3px;
}

.review-rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.review-stars {
  color: #f5a623;
  font-size: 14px;
  letter-spacing: 1px;
}

.review-verified-badge {
  font-size: 10.5px;
  font-weight: 750;
  color: #06723b;
  background: #e9f8ee;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.review-quote-text {
  color: var(--dark);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
  font-style: italic;
}

.review-date-footer {
  font-size: 11px;
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  margin-top: auto;
}

/* Slider Dots Pagination */
.slider-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbe5d5;
  border: 0;
  cursor: pointer;
  transition: all .3s ease;
  padding: 0;
  outline: none;
}

.slider-dot.active {
  width: 28px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 3px 10px rgba(0, 150, 63, .3);
}

.contact-strip {
  background: var(--green-deep);
  color: #fff;
  padding: 34px 0
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 25px
}

.contact-item {
  display: flex;
  gap: 15px;
  align-items: flex-start
}

.contact-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: grid;
  place-items: center;
  font-size: 20px
}

.contact-item small {
  opacity: .7;
  display: block
}

.contact-item strong {
  display: block;
  margin-top: 2px
}

/* ==========================================================================
   Salon Price Chart & Rate Card Responsive Table Styles
   ========================================================================== */
.pricing-section {
  background: linear-gradient(180deg, #f7fcf9 0%, #ffffff 40%, #f4fbf7 100%);
  position: relative;
  overflow: hidden;
}

.pricing-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 36px;
}

.pricing-head .kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-soft);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 150, 63, 0.2);
}

.pricing-head h2 {
  font-family: Poppins, sans-serif;
  font-size: clamp(28px, 3.5vw, 40px);
  color: var(--green-deep);
  margin-bottom: 10px;
  line-height: 1.2;
}

.pricing-subtext {
  color: var(--dark);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Pricing Navigation Tabs */
.pricing-tabs-wrap {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 34px;
  padding: 6px;
  /* background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line); */
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 70, 35, 0.04);
  backdrop-filter: blur(8px);
}

.pricing-tab-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  outline: none;
  white-space: nowrap;
}

.pricing-tab-btn:hover {
  background: var(--green-soft);
  color: var(--green-dark);
  transform: translateY(-1px);
}

.pricing-tab-btn.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 6px 18px rgba(0, 150, 63, 0.3);
}

/* Pricing Tab Panels */
.pricing-panel {
  display: none;
  animation: priceFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-panel.active {
  display: block;
}

@keyframes priceFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* Rate Card Table Card */
.price-table-card {
  background: #ffffff;
  border: 1.5px solid #d8ede0;
  border-radius: 22px;
  box-shadow: 0 16px 45px rgba(0, 80, 40, 0.06);
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.price-table-card:hover {
  box-shadow: 0 20px 50px rgba(0, 80, 40, 0.1);
}

.price-table-header {
  padding: 22px 28px;
  background: linear-gradient(135deg, #f3faf5 0%, #e9f7ee 100%);
  border-bottom: 1.5px solid #d8ede0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.price-table-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.price-table-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--green);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
  box-shadow: 0 6px 16px rgba(0, 150, 63, 0.25);
}

.price-table-title {
  font-family: Poppins, sans-serif;
  font-size: 21px;
  font-weight: 750;
  color: var(--green-deep);
  margin: 0 0 2px 0;
}

.price-table-subtitle {
  font-size: 13px;
  color: var(--dark);
  margin: 0;
  font-weight: 500;
}

.price-table-header-badge {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #066633;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #c2e6d0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Responsive Table */
.price-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.salon-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.salon-table thead th {
  background: #f8fcf9;
  color: var(--green-deep);
  font-weight: 750;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 14px 34px;
  border-bottom: 1.5px solid #dcefe3;
  white-space: nowrap;
}

.salon-table thead th.text-end {
  text-align: right;
}

.salon-table thead th.text-center {
  text-align: center;
}

.salon-table tbody tr {
  border-bottom: 1px solid #eef5f0;
  transition: background-color 0.2s ease;
}

.salon-table tbody tr:last-child {
  border-bottom: none;
}

.salon-table tbody tr:nth-child(even) {
  background-color: #fafdfb;
}

.salon-table tbody tr:hover {
  background-color: #eef9f2;
}

.salon-table tbody td {
  padding: 14px 24px;
  vertical-align: middle;
  color: var(--ink);
  text-align: right;
}

.service-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
  opacity: 0.75;
}

.service-name-text {
  font-weight: 650;
  font-size: 14.5px;
  color: #123321;
  text-align: left;
}

.service-tag-pill {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green-dark);
  background: var(--green-soft);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-left: 6px;
}

.price-pill-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Poppins, sans-serif;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--green-deep);
  background: #ffffff;
  border: 1.5px solid #cce8d6;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 100, 50, 0.05);
  white-space: nowrap;
}

.price-pill-tag.accent {
  background: var(--green-soft);
  border-color: #a4ddb8;
  color: var(--green-dark);
}

.price-pill-tag.highlight {
  background: linear-gradient(135deg, #00963f 0%, #007a33 100%);
  color: #ffffff;
  border-color: var(--green);
  box-shadow: 0 4px 12px rgba(0, 150, 63, 0.28);
}

/* Waxing Multi-Tier Column Badges */
.wax-badge-normal {
  background: #f1f8f3;
  color: #245638;
  font-weight: 700;
}

.wax-badge-aloe {
  background: #e4f7eb;
  color: #067238;
  font-weight: 750;
}

.wax-badge-raaga {
  background: #fff3db;
  color: #925c04;
  font-weight: 750;
  border-color: #f7dfa8;
}

/* ==========================================================================
   Luxury Bridal Packages & Makeover Styling (Redesigned)
   ========================================================================== */
.bridal-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Bridal Royal Banner Header */
.bridal-hero-banner {
  background: linear-gradient(135deg, #f3faf5 0%, #e9f7ee 100%);
  border: 1.5px solid #f3d7a4;
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  box-shadow: 0 10px 30px rgba(180, 130, 40, 0.08);
  position: relative;
  overflow: hidden;
}

.bridal-hero-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(212, 160, 23, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.bridal-banner-left {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.bridal-banner-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--green);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 26px;
  flex: none;
  box-shadow: 0 8px 20px rgba(184, 134, 11, 0.3);
}

.bridal-banner-title {
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #07552d;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.bridal-banner-sub {
  font-size: 13.5px;
  color: #855c1b;
  margin: 0;
  font-weight: 500;
}

.bridal-banner-badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #925c04;
  background: #ffffff;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid #e8ca92;
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

/* Bridal Packages 2-Card Grid */
.bridal-pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}

@media (max-width: 900px) {
  .bridal-pkg-grid {
    grid-template-columns: 1fr;
  }
}

.bridal-pkg-card {
  background: #ffffff;
  border: 1.5px solid #e6e8eb;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.bridal-pkg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 70, 35, 0.1);
}

.bridal-pkg-card.featured {
  background: linear-gradient(180deg, #ffffff 0%, #fffbf2 100%);
  border: 2px solid #00963f;
  box-shadow: 0 18px 48px rgba(184, 134, 11, 0.14);
}

.bridal-pkg-card.featured::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #00963f, #018c3c, #00923e);
}

.bridal-pkg-top-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f4f6f8;
  color: #4b5563;
  border: 1px solid #e2e8f0;
}

.bridal-pkg-card.featured .bridal-pkg-top-tag {
  background: linear-gradient(135deg, #00963f 0%, #00963f 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
}

.bridal-pkg-header {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1.5px dashed #e5e7eb;
}

.bridal-pkg-card.featured .bridal-pkg-header {
  border-bottom-color: #f0dbb0;
}

.bridal-pkg-title {
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--green-deep);
  margin: 0 0 6px 0;
  line-height: 1.25;
}

.bridal-pkg-card.featured .bridal-pkg-title {
  color: #07552d;
}

.bridal-pkg-desc {
  font-size: 13.5px;
  color: var(--dark);
  margin: 0;
  line-height: 1.5;
}

/* Inclusions List with individual pricing */
.bridal-inclusions-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.bridal-inclusion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8faf9;
  border-radius: 12px;
  border: 1px solid #edf2ef;
  font-size: 13.5px;
  color: var(--ink);
  transition: all 0.2s ease;
}

.bridal-pkg-card.featured .bridal-inclusion-item {
  background: #fffcf5;
  border-color: #f7ecd2;
}

.bridal-inclusion-item:hover {
  background: #eef8f2;
  border-color: #c9ebd5;
  transform: translateX(3px);
}

.bridal-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bridal-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  flex: none;
}

.bridal-pkg-card.featured .bridal-check-icon {
  background: #eaf8f0;
  color: #925c04;
}

.bridal-item-name {
  font-weight: 650;
  color: #1e293b;
}

.bridal-item-price-tag {
  font-family: Poppins, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-deep);
  background: #ffffff;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #d4ede0;
  white-space: nowrap;
}

.bridal-pkg-card.featured .bridal-item-price-tag {
  color: #0a572f;
  border-color: #ecd5a5;
  background: #ffffff;
}

/* Bridal Card Footer with CTAs */
.bridal-pkg-footer {
  padding-top: 18px;
  border-top: 1.5px solid #edf2ef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.bridal-pkg-card.featured .bridal-pkg-footer {
  border-top-color: #f3e2bf;
}

.bridal-price-col {
  display: flex;
  flex-direction: column;
}

.bridal-price-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dark);
}

.bridal-price-value {
  font-family: Poppins, sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--green-deep);
}

.bridal-pkg-card.featured .bridal-price-value {
  color: #07552d;
}

.bridal-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--green);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 750;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 150, 63, 0.25);
}

.bridal-card-cta:hover {
  background: var(--green-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 150, 63, 0.35);
}

.bridal-pkg-card.featured .bridal-card-cta {
  background: linear-gradient(135deg, #00963f 0%, #00963f 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(184, 134, 11, 0.35);
}

.bridal-pkg-card.featured .bridal-card-cta:hover {
  background: linear-gradient(135deg, #00963f 0%, #00963f 100%);
  box-shadow: 0 8px 22px rgb(0 150 63 / 42%);
}

/* Bridal Features & Guarantees Strip */
.bridal-perks-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .bridal-perks-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .bridal-perks-strip {
    grid-template-columns: 1fr;
  }
}

.bridal-perk-item {
  background: #ffffff;
  border: 1.5px solid #dcefe3;
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 14px rgba(0, 60, 30, 0.03);
}

.bridal-perk-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
}

.bridal-perk-info strong {
  display: block;
  font-size: 13px;
  font-weight: 750;
  color: #123321;
}

.bridal-perk-info span {
  font-size: 11.5px;
  color: var(--dark);
}

/* Custom Bridal Consultation CTA Banner */
.bridal-custom-banner {
  background: linear-gradient(135deg, #073b22 0%, #032012 100%);
  border-radius: 20px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  color: #ffffff;
  box-shadow: 0 12px 36px rgba(3, 32, 18, 0.3);
  position: relative;
  overflow: hidden;
}

.bridal-custom-banner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  background: radial-gradient(circle at right, rgba(0, 150, 63, 0.25), transparent 70%);
  pointer-events: none;
}

.bridal-custom-left {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.bridal-custom-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
}

.bridal-custom-title {
  font-family: Poppins, sans-serif;
  font-size: 19px;
  font-weight: 750;
  color: #ffffff;
  margin: 0 0 3px 0;
}

.bridal-custom-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.bridal-custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 750;
  padding: 10px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  position: relative;
  z-index: 1;
}

.bridal-custom-btn:hover {
  background: #1eb956;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
}

/* Notice & GST Disclaimer Bar */
.pricing-footer-bar {
  display: none;
  margin-top: 24px;
  background: #ffffff;
  border: 1.5px solid #dcefe3;
  border-radius: 18px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 6px 20px rgba(0, 70, 35, 0.04);
  position: relative;
  z-index: 1;
}

.pricing-disclaimer-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-disclaimer-text strong {
  color: var(--green-deep);
}

.pricing-direct-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pricing-btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 750;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.pricing-btn-whatsapp:hover {
  background: #1eb956;
  transform: translateY(-2px);
}

.pricing-btn-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 750;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 150, 63, 0.25);
}

.pricing-btn-call:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
}

/* Black Theme Overrides for Rate Card */
[data-theme="black"] .pricing-head .kicker {
  background: #222222;
  color: #ffffff;
  border-color: #333333;
}

[data-theme="black"] .pricing-head h2,
[data-theme="black"] .price-table-title,
[data-theme="black"] .package-card-title {
  color: #ffffff;
}

[data-theme="black"] .pricing-tab-btn.active {
  background: #111111;
  color: #ffffff;
  border-color: #333333;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

[data-theme="black"] .price-table-card,
[data-theme="black"] .package-card,
[data-theme="black"] .pricing-footer-bar {
  background: #181818;
  border-color: #2a2a2a;
  color: #e5e7eb;
}

[data-theme="black"] .price-table-header {
  background: #202020;
  border-color: #2a2a2a;
}

[data-theme="black"] .price-table-icon {
  background: #2e2e2e;
}

[data-theme="black"] .salon-table thead th {
  background: #1e1e1e;
  color: #ffffff;
  border-color: #2e2e2e;
}

[data-theme="black"] .salon-table tbody tr {
  border-color: #262626;
}

[data-theme="black"] .salon-table tbody tr:nth-child(even) {
  background-color: #1c1c1c;
}

[data-theme="black"] .salon-table tbody tr:hover {
  background-color: #252525;
}

[data-theme="black"] .salon-table tbody td {
  color: #e5e7eb;
}

[data-theme="black"] .service-name-text {
  color: #ffffff;
}

[data-theme="black"] .price-pill-tag {
  background: #252525;
  color: #ffffff;
  border-color: #383838;
}

[data-theme="black"] .price-pill-tag.accent {
  background: #2f2f2f;
  color: #ffffff;
  border-color: #444444;
}

@media (max-width: 768px) {
  .pricing-tabs-wrap {
    border-radius: 18px;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 8px;
  }

  .pricing-tab-btn {
    padding: 8px 14px;
    font-size: 12.5px;
  }

  .price-table-header {
    padding: 16px;
  }

  .salon-table thead th,
  .salon-table tbody td {
    padding: 12px 14px;
  }

  .price-pill-tag {
    font-size: 13px;
    padding: 4px 10px;
  }
}

/* ==========================================================================
       Column Grid System Utilities
       ========================================================================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

[class*="col-"] {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

@media (min-width: 768px) {
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

@media (min-width: 992px) {
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
}

/* ==========================================================================
       Dark 4-Column Luxury Footer
       ========================================================================== */
.site-footer {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 12px), radial-gradient(circle at 50% 0%, #161616 0%, #080808 70%, #000000 100%);
  color: #ffffff;
  padding: 70px 0 25px;
  font-size: 14px;
  border-top: 1px solid #1a1a1a;
  position: relative;
}

.footer-col {
  margin-bottom: 35px;
}

.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
}

.footer-seal-badge {
  /* width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1.5px solid #ffffff; */
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* .footer-seal-inner {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #111;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      padding: 4px;
      line-height: 1.1;
    } */

.footer-seal-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}

.footer-desc-text {
  color: #b5b5b5;
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 290px;
  margin-bottom: 22px;
}

.footer-follow-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}

.footer-social-icons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #181818;
  border: 1px solid #282828;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 15px;
  transition: all .25s ease;
  text-decoration: none;
}

.footer-social-btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 150, 63, .4);
}

.footer-heading {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 22px;
}

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

.footer-nav-list a {
  color: #b5b5b5;
  font-size: 14px;
  text-decoration: none;
  transition: all .2s ease;
  display: inline-block;
}

.footer-nav-list a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

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

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #b5b5b5;
  font-size: 13.5px;
  line-height: 1.5;
}

.footer-contact-item .contact-icon-symbol {
  color: #ffffff;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item a {
  color: #b5b5b5;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-contact-item a:hover {
  color: #ffffff;
}

/* Footer Location Map Card */
.footer-map-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #282828;
  background: #141414;
  max-width: 320px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

.footer-map-frame {
  width: 100%;
  height: 165px;
  border: 0;
  display: block;
}

.footer-map-overlay-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: #1a73e8;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .2s ease;
  z-index: 2;
}

.footer-map-overlay-btn:hover {
  background: #ffffff;
  color: #0b57d0;
  transform: translateY(-1px);
}

.footer-bottom-bar {
  margin-top: 35px;
  padding-top: 22px;
  border-top: 1px solid #161616;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #777777;
  font-size: 12.5px;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom-bar a {
  color: #999999;
  text-decoration: none;
}

.footer-bottom-bar a:hover {
  color: #ffffff;
}

@media(max-width:980px) {
  .navlinks {
    display: none;
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 8px 5%;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .08)
  }

  .navlinks.show {
    display: flex
  }

  .navlinks a {
    padding: 13px 0;
    width: 100%
  }

  .navlinks a.active:after {
    display: none
  }

  .menu {
    display: block
  }

  .call-btn {
    display: none
  }

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

  .hero-copy {
    text-align: center;
    padding: 20px 0 0;
  }

  .hero-rating-pill {
    margin: 0 auto 16px;
  }

  .hero-desc {
    margin: 0 auto 24px;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-trust-row {
    justify-content: center;
  }

  .hero-visual-wrap {
    padding: 10px 0;
  }

  .hero-image-frame {
    max-width: 380px;
    height: 420px;
  }

  .badge-top-left {
    left: 0px;
  }

  .badge-top-right {
    right: 0px;
  }

  .badge-bottom-left {
    left: 10px;
  }

  .hero-stats-strip {
    padding: 14px 20px;
  }

  .stat-number {
    font-size: 20px;
  }

  .featured-services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .featured-card-img {
    height: 140px;
  }

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

  .services-trust-banner {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    padding: 22px;
  }

  .testimonial-slide {
    flex: 0 0 calc(50% - 12px);
    margin-right: 24px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .about-grid {
    grid-template-columns: 1fr
  }

  .offer-inner {
    grid-template-columns: 140px 1fr
  }

  .offer-inner .btn {
    grid-column: 2
  }

  .contact-layout {
    grid-template-columns: 1fr
  }
}

/* ==========================================================================
       Redesigned Luxury FAQ Section Styles
       ========================================================================== */
.faq-section {
  background: var(--mint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 90px 0;
  position: relative;
}

.faq-container {
  width: min(1180px, 92%);
  margin: auto;
}

.faq-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.faq-head h2 {
  font-size: clamp(28px, 4vw, 38px);
  color: var(--green-deep);
  margin-top: 8px;
  font-family: Poppins, sans-serif;
}

.faq-subtext {
  color: var(--dark);
  font-size: 15px;
  margin-top: 10px;
  line-height: 1.6;
}

/* Category Filter Pills */
.faq-category-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.faq-pill-btn {
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: "Poppins";
  font-size: 13.5px;
  font-weight: 650;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.faq-pill-btn:hover {
  border-color: var(--green);
  color: var(--green);
  transform: translateY(-1px);
}

.faq-pill-btn.active {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  box-shadow: 0 6px 18px rgba(0, 150, 63, 0.22);
}

/* 2-Column Grid: Support Card + Accordion */
.faq-grid-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 36px;
  align-items: start;
}

/* Left Support Card */
.faq-support-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: 0 10px 30px rgba(0, 70, 35, 0.05);
  position: sticky;
  top: 105px;
}

.faq-support-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.faq-support-card h3 {
  font-size: 21px;
  color: var(--green-deep);
  font-family: Poppins, sans-serif;
  margin-bottom: 10px;
}

.faq-support-card p {
  color: var(--dark);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.faq-support-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.25s ease;
  text-decoration: none;
}

.faq-support-btn.whatsapp {
  background: var(--grediant-dark);
  /* background: #25d366; */
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.22);
}

.faq-support-btn.whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
}

.faq-support-btn.phone {
  /* background: var(--green-soft);
  color: var(--green-deep); */
  background: var(--dark);
  color: var(--white);
  border: 1px solid var(--line);
}

.faq-support-btn.phone:hover {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  transform: translateY(-2px);
}

.faq-support-timings {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.support-timing-icon {
  font-size: 22px;
  flex: none;
}

.support-timing-text strong {
  display: block;
  font-size: 13px;
  color: var(--green-deep);
}

.support-timing-text span {
  display: block;
  font-size: 11.5px;
  color: var(--dark);
  margin-top: 2px;
}

/* Right Accordion */
.faq-accordion-wrap {
  width: 100%;
}

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

.faq-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 60, 30, 0.03);
}

.faq-item:hover {
  border-color: var(--green);
  box-shadow: 0 6px 20px rgba(0, 90, 45, 0.06);
}

.faq-item.active {
  border-color: var(--green);
  box-shadow: 0 10px 30px rgba(0, 90, 45, 0.09);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: "Poppins";
  cursor: pointer;
  color: var(--green-deep);
  transition: color 0.2s ease;
}

.faq-q-number {
  font-family: Inter, monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--green);
  background: var(--green-soft);
  padding: 4px 8px;
  border-radius: 8px;
  flex: none;
}

.faq-q-title {
  font-size: 15.5px;
  font-weight: 750;
  flex: 1;
  line-height: 1.4;
  color: var(--green-deep);
}

.faq-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, color 0.3s ease;
}

.faq-chevron {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-icon-wrap {
  background: var(--green);
  color: #ffffff;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-answer-inner {
  padding: 0 24px 22px 64px;
  color: var(--dark);
  font-size: 14.5px;
  line-height: 1.7;
}

.faq-answer-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 14px;
  background: var(--green-soft);
  color: var(--green-deep);
  font-size: 12.5px;
  font-weight: 650;
  border-radius: 8px;
  border-left: 3px solid var(--green);
}

/* Black Theme Compatibility */
[data-theme="black"] .faq-section {
  background: #fafafa;
}

[data-theme="black"] .faq-pill-btn.active {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

[data-theme="black"] .faq-pill-btn:hover {
  border-color: #111111;
  color: #111111;
}

[data-theme="black"] .faq-support-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="black"] .faq-support-btn.phone {
  background: #f4f4f5;
  color: #111111;
}

[data-theme="black"] .faq-support-btn.phone:hover {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

[data-theme="black"] .faq-item:hover,
[data-theme="black"] .faq-item.active {
  border-color: #111111;
}

[data-theme="black"] .faq-item.active .faq-icon-wrap {
  background: #111111;
  color: #ffffff;
}

[data-theme="black"] .faq-q-number {
  background: #f4f4f5;
  color: #111111;
}

[data-theme="black"] .faq-answer-tag {
  background: #f4f4f5;
  color: #111111;
  border-left-color: #111111;
}

@media (max-width: 960px) {
  .faq-grid-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .faq-support-card {
    position: static;
  }

  .faq-answer-inner {
    padding-left: 24px;
  }
}

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

  .faq-question {
    padding: 16px 18px;
    gap: 12px;
  }

  .faq-q-title {
    font-size: 14.5px;
  }

  .faq-answer-inner {
    padding: 0 18px 18px 18px;
  }

  .faq-category-pills {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 8px;
    flex-wrap: nowrap;
  }

  .faq-pill-btn {
    flex: none;
  }
}

@media(max-width:650px) {
  .topbar .container {
    justify-content: center;
    text-align: center
  }

  .topbar .container span:last-child {
    display: none
  }

  .brand img {
    width: 175px
  }

  .nav-inner {
    height: 72px
  }

  .navlinks {
    top: 72px
  }

  .hero {
    padding: 25px 0 20px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero-desc {
    font-size: 14.5px;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-primary-btn,
  .hero-secondary-btn,
  .hero-whatsapp-btn {
    width: 100%;
    justify-content: center;
  }

  .hero-ambiance-badge {
    width: 95px;
    height: 95px;
    bottom: -10px;
    right: -5px;
  }

  .hero-trust-row {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .hero-image-frame {
    max-width: 300px;
    height: 350px;
    border-radius: 150px 150px 24px 24px;
  }

  .floating-badge {
    padding: 7px 11px;
    border-radius: 14px;
  }

  .floating-badge strong {
    font-size: 12px;
  }

  .floating-badge span {
    font-size: 10px;
  }

  .badge-top-left {
    top: 15px;
    left: -8px;
  }

  .badge-top-right {
    top: 30px;
    right: -8px;
  }

  .badge-bottom-left {
    bottom: 15px;
    left: -5px;
  }

  .hero-nav-arrow {
    display: none;
  }

  .hero-slider-dots {
    gap: 8px;
    margin-top: 18px;
  }

  .hero-dot {
    padding: 6px 12px;
    font-size: 11px;
  }

  .hero-stats-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
    padding: 16px;
  }

  .stat-divider {
    display: none;
  }

  .featured-services-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .featured-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .featured-card {
    padding: 8px 8px 12px 8px;
    border-radius: 16px;
  }

  .featured-card-img {
    height: 110px;
    border-radius: 12px;
    margin-bottom: 8px;
  }

  .featured-card-title {
    font-size: 13.5px;
  }

  .featured-card-desc {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .services-catalog-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-card-media {
    height: 190px;
  }

  .services-trust-banner {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .testimonial-slide {
    flex: 0 0 100%;
    margin-right: 0;
  }

  .testimonials-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .testimonials-slider-controls {
    align-self: flex-end;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
  }

  .lightbox-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px
  }

  .section {
    padding: 60px 0
  }

  .section-head {
    display: block
  }

  .section-head h2 {
    padding-bottom: 20px;
  }

  .section-head .outline-btn {
    display: inline-block;
    margin-top: 15px
  }

  .review-grid {
    grid-template-columns: 1fr
  }

  .contact-grid {
    grid-template-columns: 1fr
  }

  .offer-inner {
    grid-template-columns: 1fr;
    text-align: center
  }

  .offer-badge {
    margin: auto
  }

  .offer-inner .btn {
    grid-column: auto;
    margin: auto
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .booking-form-box {
    padding: 24px 18px
  }

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

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

  .footer-inner {
    flex-direction: column;
    text-align: center
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center
  }
}

/* ==========================================================================
       Inner Page Banner & Breadcrumbs
       ========================================================================== */
.page-hero-banner {
  position: relative;
  background: radial-gradient(circle at 80% 25%, #def7ea 0%, #f4fbf7 42%, #ffffff 82%), repeating-radial-gradient(circle at 20% 80%, rgba(0, 150, 63, 0.015) 0, rgba(0, 150, 63, 0.015) 1px, transparent 1px, transparent 20px);
  padding: 60px 0 50px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-align: center;
}

[data-theme="black"] .page-hero-banner {
  background: radial-gradient(circle at 80% 25%, #f1f2f4 0%, #f9fafb 42%, #ffffff 82%), repeating-radial-gradient(circle at 20% 80%, rgba(0, 0, 0, 0.015) 0, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 20px);
  border-bottom-color: #e5e7eb;
}

.page-hero-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.page-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.85);
  padding: 5px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.page-breadcrumbs a {
  color: var(--green);
  transition: color 0.2s;
}

.page-breadcrumbs a:hover {
  text-decoration: underline;
}

.page-hero-title {
  font-size: clamp(32px, 5vw, 48px);
  color: var(--green-deep);
  font-family: Poppins, sans-serif;
  margin-bottom: 14px;
  line-height: 1.15;
}

[data-theme="black"] .page-hero-title {
  color: #111827;
}

.page-hero-subtitle {
  font-size: 16px;
  color: #fff;
  line-height: 1.7;
}

/* Full Gallery Showcase Page Styles */
.gallery-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 36px;
}

.gallery-card-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 25px rgba(0, 70, 35, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.35s ease;
  cursor: pointer;
}

.gallery-card-frame:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 90, 45, 0.12);
  border-color: var(--green);
}

.gallery-card-image-wrap {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: #f0f7f2;
}

.gallery-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-card-frame:hover .gallery-card-image-wrap img {
  transform: scale(1.08);
}

.gallery-card-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  color: var(--green-deep);
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="black"] .gallery-card-tag {
  background: rgba(17, 24, 39, 0.9);
  color: #ffffff;
}

.gallery-card-zoom-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 17px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gallery-card-frame:hover .gallery-card-zoom-btn {
  opacity: 1;
  transform: scale(1);
}

.gallery-card-details {
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #ffffff;
}

.gallery-card-details h3 {
  font-size: 16.5px;
  color: var(--green-deep);
  margin-bottom: 3px;
  font-family: "Poppins";
  font-weight: 750;
}

[data-theme="black"] .gallery-card-details h3 {
  color: #111827;
}

.gallery-card-details p {
  font-size: 13px;
  color: var(--dark);
  line-height: 1.4;
}

.gallery-card-book-action {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--green-soft);
  border-radius: 999px;
  transition: all 0.2s ease;
}

.gallery-card-frame:hover .gallery-card-book-action {
  background: var(--green);
  color: #ffffff;
}

/* Transformation Showcase Banner (Redesigned) */
.transformation-banner {
  background: linear-gradient(135deg, #063c22 0%, #032514 55%, #021a0e 100%);
  color: #ffffff;
  border-radius: 28px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(2, 26, 14, 0.35);
  padding: 50px 48px;
  margin: 60px 0;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 36px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.transformation-banner::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(0, 150, 63, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

[data-theme="black"] .transformation-banner {
  background: linear-gradient(135deg, #181818 0%, #080808 100%);
  border: 1.5px solid #282828;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.transformation-kicker-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.transformation-content h2 {
  font-family: Poppins, sans-serif;
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.2;
  margin: 0 0 14px 0;
}

.transformation-content h2 .gold-accent {
  background: linear-gradient(135deg, #ffe066 0%, #d4a017 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.transformation-content p {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 560px;
}

.transformation-cta-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.transformation-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #ffffff !important;
  font-weight: 750;
  font-size: 14.5px;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
  transition: all 0.25s ease;
}

.transformation-action-btn:hover {
  background: #1eb956;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
}

.transformation-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.transformation-call-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Right Column Stat Box */
.transformation-stat-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 30px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.stat-icon-sparkle {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(255, 215, 0, 0.4));
}

.stat-number {
  font-family: Poppins, sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  margin: 4px 0 0 0;
  letter-spacing: -0.5px;
}

.stat-title {
  font-size: 15.5px;
  font-weight: 750;
  color: #ffffff;
  margin: 0;
}

.stat-subtitle {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.stat-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #ffd700;
  margin-top: 4px;
}

@media (max-width: 860px) {
  .transformation-banner {
    grid-template-columns: 1fr;
    padding: 36px 24px;
    gap: 28px;
  }
}

/* ==========================================================================
   Gallery Page Additional Sections (Standards, Transformations, Rate Peek)
   ========================================================================== */

/* 1. Standards Pillars Grid */
.gallery-standards-section {
  padding: 60px 0;
  background: #f8fbf9;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.gallery-section-head {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 40px;
}

.gallery-section-head .kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-soft);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 150, 63, 0.2);
}

.gallery-section-head h2 {
  font-family: Poppins, sans-serif;
  font-size: clamp(26px, 3.2vw, 36px);
  color: var(--green-deep);
  margin-bottom: 10px;
  line-height: 1.25;
}

.gallery-section-head p {
  color: var(--dark);
  font-size: 14.5px;
  line-height: 1.6;
}

.standards-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 992px) {
  .standards-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .standards-cards-grid {
    grid-template-columns: 1fr;
  }
}

.standard-card {
  background: #ffffff;
  border: 1.5px solid #dcefe3;
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: 0 6px 20px rgba(0, 70, 35, 0.04);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.standard-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 90, 45, 0.1);
  border-color: var(--green);
}

.standard-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
}

.standard-card-title {
  font-family: Poppins, sans-serif;
  font-size: 16.5px;
  font-weight: 750;
  color: var(--green-deep);
  margin: 0;
}

.standard-card-desc {
  font-size: 13.5px;
  color: var(--dark);
  margin: 0;
  line-height: 1.55;
}

/* 2. Transformations Highlights */
.transformations-section {
  padding: 70px 0;
}

.transformation-cards-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

@media (max-width: 900px) {
  .transformation-cards-3col {
    grid-template-columns: 1fr;
  }
}

.transformation-box {
  background: #ffffff;
  border: 1.5px solid #e4ede7;
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: 0 8px 26px rgba(0, 60, 30, 0.04);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.transformation-box:hover {
  border-color: var(--green);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 90, 45, 0.1);
}

.transformation-box-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  align-self: flex-start;
}

.transformation-box-title {
  font-family: Poppins, sans-serif;
  font-size: 18.5px;
  font-weight: 750;
  color: var(--green-deep);
  margin: 0 0 8px 0;
}

.transformation-box-desc {
  font-size: 13.5px;
  color: var(--dark);
  line-height: 1.6;
  margin: 0 0 18px 0;
}

.transformation-box-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transformation-box-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}

.transformation-box-perks li span.icon {
  color: var(--green);
  font-weight: 800;
}

.transformation-box-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 18px;
  background: #f4fbf7;
  color: var(--green-deep);
  border: 1px solid #d4ece0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.25s ease;
}

.transformation-box-action:hover {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
}

/* 3. Pricing Peek Cards */
.gallery-pricing-peek {
  background: linear-gradient(135deg, #f3faf5 0%, #e8f7ee 100%);
  border: 1.5px solid #d4ede0;
  border-radius: 24px;
  padding: 40px;
  margin: 60px 0;
}

.pricing-peek-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 30px 0;
}

@media (max-width: 992px) {
  .pricing-peek-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .pricing-peek-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-peek-card {
  background: #ffffff;
  border: 1px solid #d8ede1;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
}

.pricing-peek-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 10px 24px rgba(0, 90, 45, 0.08);
}

.pricing-peek-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.pricing-peek-name {
  font-weight: 750;
  font-size: 15px;
  color: var(--green-deep);
  margin-bottom: 6px;
}

.pricing-peek-price {
  font-family: Poppins, sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--green);
}

.pricing-peek-sub {
  font-size: 11.5px;
  color: var(--dark);
  margin-top: 3px;
}

.pricing-peek-bottom {
  text-align: center;
}

.pricing-peek-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 750;
  padding: 12px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 150, 63, 0.3);
  transition: all 0.25s ease;
}

.pricing-peek-btn:hover {
  background: var(--green-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 150, 63, 0.4);
}

/* 4. Client Reviews Section in Gallery */
.gallery-reviews-section {
  padding: 60px 0 30px;
}

.gallery-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 860px) {
  .gallery-reviews-grid {
    grid-template-columns: 1fr;
  }
}

.gallery-review-card {
  background: #ffffff;
  border: 1.5px solid #dcefe3;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0, 70, 35, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gallery-review-stars {
  color: #f59e0b;
  font-size: 15px;
  margin-bottom: 12px;
}

.gallery-review-text {
  font-size: 14px;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 16px;
  font-style: italic;
}

.gallery-review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #f0f6f2;
  padding-top: 14px;
}

.gallery-review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex: none;
}

.gallery-review-meta strong {
  display: block;
  font-size: 13.5px;
  color: var(--green-deep);
}

.gallery-review-meta span {
  font-size: 11.5px;
  color: var(--dark);
}

/* Contact Page Specific Enhancements */
.contact-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-bottom: 45px;
}

.contact-feature-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 6px 20px rgba(0, 60, 30, 0.03);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.25s ease;
}

.contact-feature-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 80, 40, 0.08);
}

.contact-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
}

.contact-feature-info h4 {
  font-size: 16px;
  color: var(--green-deep);
  margin-bottom: 5px;
}

[data-theme="black"] .contact-feature-info h4 {
  color: #111827;
}

.contact-feature-info p,
.contact-feature-info a {
  font-size: 13.5px;
  color: var(--dark);
  line-height: 1.5;
}

.contact-feature-info a:hover {
  color: var(--green);
  text-decoration: underline;
}

.contact-status-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #def7ea;
  color: #0d6e30;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 6px;
}

.contact-form-side-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 12px;
  font-weight: 750;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

@media (max-width: 850px) {
  .transformation-banner {
    grid-template-columns: 1fr;
    padding: 30px 24px;
  }
}

/* ==========================================================================
       Floating WhatsApp Quick Action Button
       ========================================================================== */
.floating-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #25d366;
  color: #ffffff;
  padding: 11px 20px 11px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45), 0 4px 10px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  font-family: "Poppins";
  font-size: 14px;
  font-weight: 750;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid #ffffff;
}

.floating-whatsapp:hover {
  background: #20ba5a;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 38px rgba(37, 211, 102, 0.6), 0 6px 14px rgba(0, 0, 0, 0.15);
  color: #ffffff;
}

.floating-whatsapp-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: #25d366;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.floating-whatsapp-icon-wrap svg {
  width: 20px;
  height: 20px;
  fill: #25d366;
}

.floating-whatsapp-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.floating-whatsapp-text strong {
  font-size: 13.5px;
  letter-spacing: 0.2px;
  color: #ffffff;
}

.floating-whatsapp-text small {
  font-size: 10.5px;
  opacity: 0.92;
  font-weight: 500;
  color: #ffffff;
}

.floating-whatsapp-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid #25d366;
  opacity: 0;
  animation: whatsappPulse 2.2s infinite;
  pointer-events: none;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  70% {
    transform: scale(1.15);
    opacity: 0;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

/* ==========================================================================
       Back to Top Floating Button
       ========================================================================== */
.back-to-top {
  position: fixed;
  bottom: 92px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--green-deep);
  border: 2px solid #e0f2e6;
  box-shadow: 0 8px 24px rgba(0, 70, 35, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.85);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
  outline: none;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.25s ease;
}

.back-to-top:hover {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 12px 30px rgba(0, 150, 63, 0.38), 0 4px 10px rgba(0, 0, 0, 0.12);
}

.back-to-top:hover svg {
  transform: translateY(-2px);
}

.back-to-top:active {
  transform: translateY(0) scale(0.95);
}

/* Black Theme Variant for Back to Top */
[data-theme="black"] .back-to-top {
  background: #181818;
  color: #ffffff;
  border: 1.5px solid #333333;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

[data-theme="black"] .back-to-top:hover {
  background: #000000;
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 255, 255, 0.15);
}

@media (max-width: 600px) {
  .floating-whatsapp {
    bottom: 20px;
    right: 20px;
    padding: 8px;
    border-radius: 50%;
  }

  .floating-whatsapp-text {
    display: none;
  }

  .floating-whatsapp-icon-wrap {
    width: 38px;
    height: 38px;
  }

  .floating-whatsapp-icon-wrap svg {
    width: 22px;
    height: 22px;
  }

  .back-to-top {
    bottom: 76px;
    right: 20px;
    width: 40px;
    height: 40px;
  }

  .back-to-top svg {
    width: 18px;
    height: 18px;
  }
}

/* ==========================================================================
       Price Chart / Salon Rate Card Section
       ========================================================================== */
.pricing-section {
  content: "";
  /* background: var(--bg-soft); */
  background: url(../img/salon.jpg) center/cover no-repeat;
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

#pricing::before {
  background: #000000a6;
}

.pricing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 20%, rgba(0, 150, 63, 0.035) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(0, 70, 35, 0.035) 0%, transparent 50%);
  pointer-events: none;
}

.pricing-head {
  color: #fff;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 9;
}

.pricing-head h2 {
  font-family: Poppins, sans-serif;
  font-size: 36px;
  color: var(--white);
  margin: 10px 0 12px;
}


[data-theme="black"] .pricing-head h2 {
  color: #ffffff;
}

.pricing-subtext {
  color: var(--white);
  font-size: 15px;
  line-height: 1.6;
}

[data-theme="black"] .pricing-subtext {
  color: #a0a0a0;
}

/* Category Filter Pills */
.pricing-tabs-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 38px;
  z-index: 9;
  position: relative;
}

.pricing-tab-btn {
  background: #ffffff;
  border: 1.5px solid var(--line);
  color: var(--green-dark);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 60, 30, 0.03);
}

.pricing-tab-btn:hover {
  border-color: var(--green);
  color: var(--green);
  transform: translateY(-2px);
}

.pricing-tab-btn.active {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  box-shadow: 0 8px 22px rgba(0, 150, 63, 0.28);
}

[data-theme="black"] .pricing-tab-btn {
  background: #141414;
  border-color: #282828;
  color: #d0d0d0;
}

[data-theme="black"] .pricing-tab-btn:hover {
  border-color: #ffffff;
  color: #ffffff;
}

[data-theme="black"] .pricing-tab-btn.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.18);
}

/* Pricing Grid Panels */
.pricing-panel {
  display: none;
  animation: fadeInPricing 0.35s ease forwards;
}

.pricing-panel.active {
  display: block;
}

@keyframes fadeInPricing {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

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

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

/* Individual Price Menu Card */
.pricing-item-card {
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 8px 25px rgba(0, 60, 30, 0.04);
  position: relative;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pricing-item-card:hover {
  border-color: var(--green);
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0, 90, 45, 0.10);
}

[data-theme="black"] .pricing-item-card {
  background: #121212;
  border-color: #242424;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

[data-theme="black"] .pricing-item-card:hover {
  border-color: #ffffff;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7);
}

.pricing-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pricing-item-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pricing-item-title {
  font-family: Poppins, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--green-deep);
  margin: 0;
}

[data-theme="black"] .pricing-item-title {
  color: #ffffff;
}

.pricing-badge {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pricing-badge.popular {
  background: #fff4e5;
  color: #b76e00;
  border: 1px solid #ffd591;
}

.pricing-badge.signature {
  background: var(--mint);
  color: var(--green-dark);
  border: 1px solid #b7e3c5;
}

.pricing-badge.special {
  background: #f0f5ff;
  color: #1d39c4;
  border: 1px solid #adc6ff;
}

[data-theme="black"] .pricing-badge.popular {
  background: #2b1d0c;
  color: #ffc069;
  border-color: #593b14;
}

[data-theme="black"] .pricing-badge.signature {
  background: #1a2e22;
  color: #95de64;
  border-color: #274935;
}

[data-theme="black"] .pricing-badge.special {
  background: #131c38;
  color: #85a5ff;
  border-color: #1d2c54;
}

.pricing-item-dots {
  flex: 1;
  border-bottom: 1.5px dotted #c8e0d1;
  margin: 0 10px;
  min-width: 20px;
}

[data-theme="black"] .pricing-item-dots {
  border-bottom-color: #333333;
}

.pricing-item-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.pricing-item-price {
  font-size: 20px;
  font-weight: 850;
  color: var(--green);
  line-height: 1;
}

[data-theme="black"] .pricing-item-price {
  color: #ffffff;
}

.pricing-original-price {
  font-size: 12px;
  color: var(--dark);
  text-decoration: line-through;
  margin-top: 3px;
}

.pricing-item-desc {
  color: var(--dark);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 6px 0 14px;
}

[data-theme="black"] .pricing-item-desc {
  color: #999999;
}

.pricing-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  margin-top: auto;
}

[data-theme="black"] .pricing-item-footer {
  border-top-color: #222222;
}

.pricing-meta-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pricing-chip {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ink);
  background: var(--mint);
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

[data-theme="black"] .pricing-chip {
  background: #1e1e1e;
  color: #cccccc;
}

.pricing-book-action {
  font-size: 12.5px;
  font-weight: 750;
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mint);
}

.pricing-book-action:hover {
  background: var(--green);
  color: #ffffff;
  transform: translateX(2px);
}

[data-theme="black"] .pricing-book-action {
  background: #202020;
  color: #ffffff;
}

[data-theme="black"] .pricing-book-action:hover {
  background: #ffffff;
  color: #000000;
}

/* Pricing Bottom Callout Banner */
.pricing-combo-banner {
  background: linear-gradient(135deg, #024623 0%, #00963f 60%, #086b36 100%);
  color: #ffffff;
  border-radius: 24px;
  padding: 36px 42px;
  margin-top: 48px;
  box-shadow: 0 18px 45px rgba(0, 150, 63, 0.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  overflow: hidden;
}

[data-theme="black"] .pricing-combo-banner {
  background: linear-gradient(135deg, #181818 0%, #0a0a0a 60%, #000000 100%);
  border: 1px solid #2a2a2a;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
}

.pricing-combo-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.pricing-combo-content h3 {
  font-family: Poppins, sans-serif;
  font-size: 26px;
  margin-bottom: 6px;
  color: #ffffff;
}

.pricing-combo-content p {
  font-size: 14px;
  opacity: 0.92;
  margin: 0;
  max-width: 620px;
  line-height: 1.5;
}

.pricing-combo-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.pricing-combo-btn {
  background: #ffffff;
  color: var(--green-deep);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

.pricing-combo-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  background: #f6fff9;
}

[data-theme="black"] .pricing-combo-btn {
  background: #ffffff;
  color: #000000;
}

[data-theme="black"] .pricing-combo-btn:hover {
  background: #e6e6e6;
}

.pricing-combo-btn.whatsapp {
  background: #25d366;
  color: #ffffff;
}

.pricing-combo-btn.whatsapp:hover {
  background: #1eb956;
}

@media (max-width: 860px) {
  .pricing-combo-banner {
    flex-direction: column;
    text-align: center;
    padding: 30px 24px;
  }

  .pricing-combo-content p {
    margin-bottom: 20px;
  }

  .pricing-combo-actions {
    flex-direction: column;
    width: 100%;
  }

  .pricing-combo-btn {
    width: 100%;
    justify-content: center;
  }
}

.counter {
  content: "";
  background: url(../img/salon.jpg) center/cover no-repeat;
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background-attachment: fixed;
}

.counter::before {
  background: #000000a3;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: "";
}

.counter .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
       Trusted Destination for Beauty & Grooming Section
       ========================================================================== */
.trusted-destination-section {
  background: radial-gradient(circle at 85% 15%, #1c2028 0%, #13161c 65%, #0d0f13 100%);
  color: #ffffff;
  padding: 85px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #20242d;
  border-bottom: 1px solid #20242d;
}

.trusted-watermark-scissors {
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 220px;
  height: 220px;
  opacity: 0.10;
  pointer-events: none;
  z-index: 1;
}

.trusted-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 36px;
  margin-bottom: 45px;
  position: relative;
  z-index: 2;
}

.trusted-title-col {
  flex: 1 1 50%;
}

.trusted-title {
  font-family: Poppins, sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.22;
  margin: 0;
  letter-spacing: -0.5px;
}

.trusted-accent {
  color: var(--green);
  display: block;
}

.trusted-desc-col {
  flex: 1 1 50%;
}

.trusted-intro-text {
  font-size: 15.5px;
  color: #b5beca;
  line-height: 1.7;
  margin: 0;
}

/* Main Grid: Left Features + Right Image */
.trusted-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

.trusted-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.trusted-feature-card {
  background: #0f1217;
  border: 1.5px solid #232731;
  border-radius: 20px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.25s ease, box-shadow 0.25s ease;
}

.trusted-feature-card:hover {
  transform: translateY(-5px);
  border-color: var(--green);
  box-shadow: 0 16px 35px rgba(245, 184, 35, 0.15), 0 8px 20px rgba(0, 0, 0, 0.5);
}

.trusted-feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(0, 150, 63, 0.15);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
  border: 1px solid rgba(245, 184, 35, 0.25);
  flex-shrink: 0;
}

.trusted-feature-icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.trusted-feature-title {
  font-family: Poppins, sans-serif;
  font-size: 17.5px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  margin: 0 0 8px;
}

.trusted-feature-desc {
  font-size: 13.5px;
  color: #9da7b7;
  line-height: 1.55;
  margin: 0;
}

/* Right Media Card */
.trusted-media-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid #232731;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  min-height: 400px;
  background: #0f1217;
}

.trusted-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.trusted-media-card:hover .trusted-media-img {
  transform: scale(1.03);
}

.trusted-media-badge {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: rgba(15, 18, 23, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 184, 35, 0.4);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 750;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.trusted-media-badge span.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 8px #25d366;
}

@media (max-width: 992px) {
  .trusted-header-row {
    flex-direction: column;
    gap: 18px;
  }

  .trusted-main-grid {
    grid-template-columns: 1fr;
  }

  .trusted-media-card {
    min-height: 320px;
    max-height: 420px;
  }
}

@media (max-width: 600px) {
  .trusted-title {
    font-size: 29px;
  }

  .trusted-features-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .trusted-feature-card {
    padding: 22px 18px;
  }
}

.section-head p {
  font-family: "Poppins", sans-serif;
  margin-bottom: 15px;
}

.section-head h2 {
  padding-bottom: 15px;
}


/* ==========================================================================
   Bootstrap Spacing Utilities (Margin & Padding)
   Scale: 0 (0), 1 (0.25rem), 2 (0.5rem), 3 (1rem), 4 (1.5rem), 5 (3rem), auto
   Supports Bootstrap 5 (s/e) and Bootstrap 4 (l/r) directional syntax
   ========================================================================== */

/* --- Base Margin Utilities --- */
.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0,
.ml-0 {
  margin-left: 0 !important;
}

.ms-1,
.ml-1 {
  margin-left: 0.25rem !important;
}

.ms-2,
.ml-2 {
  margin-left: 0.5rem !important;
}

.ms-3,
.ml-3 {
  margin-left: 1rem !important;
}

.ms-4,
.ml-4 {
  margin-left: 1.5rem !important;
}

.ms-5,
.ml-5 {
  margin-left: 3rem !important;
}

.ms-auto,
.ml-auto {
  margin-left: auto !important;
}

.me-0,
.mr-0 {
  margin-right: 0 !important;
}

.me-1,
.mr-1 {
  margin-right: 0.25rem !important;
}

.me-2,
.mr-2 {
  margin-right: 0.5rem !important;
}

.me-3,
.mr-3 {
  margin-right: 1rem !important;
}

.me-4,
.mr-4 {
  margin-right: 1.5rem !important;
}

.me-5,
.mr-5 {
  margin-right: 3rem !important;
}

.me-auto,
.mr-auto {
  margin-right: auto !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx-1 {
  margin-left: 0.25rem !important;
  margin-right: 0.25rem !important;
}

.mx-2 {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

.mx-3 {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
}

.mx-4 {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
}

.mx-5 {
  margin-left: 3rem !important;
  margin-right: 3rem !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* --- Negative Margins --- */
.m-n1 {
  margin: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n1 {
  margin-top: -0.25rem !important;
}

.mt-n2 {
  margin-top: -0.5rem !important;
}

.mt-n3 {
  margin-top: -1rem !important;
}

.mt-n4 {
  margin-top: -1.5rem !important;
}

.mt-n5 {
  margin-top: -3rem !important;
}

.mb-n1 {
  margin-bottom: -0.25rem !important;
}

.mb-n2 {
  margin-bottom: -0.5rem !important;
}

.mb-n3 {
  margin-bottom: -1rem !important;
}

.mb-n4 {
  margin-bottom: -1.5rem !important;
}

.mb-n5 {
  margin-bottom: -3rem !important;
}

.ms-n1,
.ml-n1 {
  margin-left: -0.25rem !important;
}

.ms-n2,
.ml-n2 {
  margin-left: -0.5rem !important;
}

.ms-n3,
.ml-n3 {
  margin-left: -1rem !important;
}

.ms-n4,
.ml-n4 {
  margin-left: -1.5rem !important;
}

.ms-n5,
.ml-n5 {
  margin-left: -3rem !important;
}

.me-n1,
.mr-n1 {
  margin-right: -0.25rem !important;
}

.me-n2,
.mr-n2 {
  margin-right: -0.5rem !important;
}

.me-n3,
.mr-n3 {
  margin-right: -1rem !important;
}

.me-n4,
.mr-n4 {
  margin-right: -1.5rem !important;
}

.me-n5,
.mr-n5 {
  margin-right: -3rem !important;
}

.mx-n1 {
  margin-left: -0.25rem !important;
  margin-right: -0.25rem !important;
}

.mx-n2 {
  margin-left: -0.5rem !important;
  margin-right: -0.5rem !important;
}

.mx-n3 {
  margin-left: -1rem !important;
  margin-right: -1rem !important;
}

.mx-n4 {
  margin-left: -1.5rem !important;
  margin-right: -1.5rem !important;
}

.mx-n5 {
  margin-left: -3rem !important;
  margin-right: -3rem !important;
}

.my-n1 {
  margin-top: -0.25rem !important;
  margin-bottom: -0.25rem !important;
}

.my-n2 {
  margin-top: -0.5rem !important;
  margin-bottom: -0.5rem !important;
}

.my-n3 {
  margin-top: -1rem !important;
  margin-bottom: -1rem !important;
}

.my-n4 {
  margin-top: -1.5rem !important;
  margin-bottom: -1.5rem !important;
}

.my-n5 {
  margin-top: -3rem !important;
  margin-bottom: -3rem !important;
}

/* --- Base Padding Utilities --- */
.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0,
.pl-0 {
  padding-left: 0 !important;
}

.ps-1,
.pl-1 {
  padding-left: 0.25rem !important;
}

.ps-2,
.pl-2 {
  padding-left: 0.5rem !important;
}

.ps-3,
.pl-3 {
  padding-left: 1rem !important;
}

.ps-4,
.pl-4 {
  padding-left: 1.5rem !important;
}

.ps-5,
.pl-5 {
  padding-left: 3rem !important;
}

.pe-0,
.pr-0 {
  padding-right: 0 !important;
}

.pe-1,
.pr-1 {
  padding-right: 0.25rem !important;
}

.pe-2,
.pr-2 {
  padding-right: 0.5rem !important;
}

.pe-3,
.pr-3 {
  padding-right: 1rem !important;
}

.pe-4,
.pr-4 {
  padding-right: 1.5rem !important;
}

.pe-5,
.pr-5 {
  padding-right: 3rem !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.px-1 {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.px-2 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.px-3 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.px-4 {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.px-5 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* --- Responsive Spacing: SM (>= 576px) --- */
@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-0 {
    margin-top: 0 !important;
  }

  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mt-sm-3 {
    margin-top: 1rem !important;
  }

  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mt-sm-5 {
    margin-top: 3rem !important;
  }

  .mt-sm-auto {
    margin-top: auto !important;
  }

  .mb-sm-0 {
    margin-bottom: 0 !important;
  }

  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }

  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }

  .mb-sm-auto {
    margin-bottom: auto !important;
  }

  .ms-sm-0,
  .ml-sm-0 {
    margin-left: 0 !important;
  }

  .ms-sm-1,
  .ml-sm-1 {
    margin-left: 0.25rem !important;
  }

  .ms-sm-2,
  .ml-sm-2 {
    margin-left: 0.5rem !important;
  }

  .ms-sm-3,
  .ml-sm-3 {
    margin-left: 1rem !important;
  }

  .ms-sm-4,
  .ml-sm-4 {
    margin-left: 1.5rem !important;
  }

  .ms-sm-5,
  .ml-sm-5 {
    margin-left: 3rem !important;
  }

  .ms-sm-auto,
  .ml-sm-auto {
    margin-left: auto !important;
  }

  .me-sm-0,
  .mr-sm-0 {
    margin-right: 0 !important;
  }

  .me-sm-1,
  .mr-sm-1 {
    margin-right: 0.25rem !important;
  }

  .me-sm-2,
  .mr-sm-2 {
    margin-right: 0.5rem !important;
  }

  .me-sm-3,
  .mr-sm-3 {
    margin-right: 1rem !important;
  }

  .me-sm-4,
  .mr-sm-4 {
    margin-right: 1.5rem !important;
  }

  .me-sm-5,
  .mr-sm-5 {
    margin-right: 3rem !important;
  }

  .me-sm-auto,
  .mr-sm-auto {
    margin-right: auto !important;
  }

  .mx-sm-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mx-sm-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
  }

  .mx-sm-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  .mx-sm-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  .mx-sm-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }

  .mx-sm-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
  }

  .mx-sm-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .pt-sm-0 {
    padding-top: 0 !important;
  }

  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pt-sm-3 {
    padding-top: 1rem !important;
  }

  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pt-sm-5 {
    padding-top: 3rem !important;
  }

  .pb-sm-0 {
    padding-bottom: 0 !important;
  }

  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }

  .ps-sm-0,
  .pl-sm-0 {
    padding-left: 0 !important;
  }

  .ps-sm-1,
  .pl-sm-1 {
    padding-left: 0.25rem !important;
  }

  .ps-sm-2,
  .pl-sm-2 {
    padding-left: 0.5rem !important;
  }

  .ps-sm-3,
  .pl-sm-3 {
    padding-left: 1rem !important;
  }

  .ps-sm-4,
  .pl-sm-4 {
    padding-left: 1.5rem !important;
  }

  .ps-sm-5,
  .pl-sm-5 {
    padding-left: 3rem !important;
  }

  .pe-sm-0,
  .pr-sm-0 {
    padding-right: 0 !important;
  }

  .pe-sm-1,
  .pr-sm-1 {
    padding-right: 0.25rem !important;
  }

  .pe-sm-2,
  .pr-sm-2 {
    padding-right: 0.5rem !important;
  }

  .pe-sm-3,
  .pr-sm-3 {
    padding-right: 1rem !important;
  }

  .pe-sm-4,
  .pr-sm-4 {
    padding-right: 1.5rem !important;
  }

  .pe-sm-5,
  .pr-sm-5 {
    padding-right: 3rem !important;
  }

  .px-sm-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .px-sm-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  .px-sm-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .px-sm-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .px-sm-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .px-sm-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* --- Responsive Spacing: MD (>= 768px) --- */
@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-0 {
    margin-top: 0 !important;
  }

  .mt-md-1 {
    margin-top: 0.25rem !important;
  }

  .mt-md-2 {
    margin-top: 0.5rem !important;
  }

  .mt-md-3 {
    margin-top: 1rem !important;
  }

  .mt-md-4 {
    margin-top: 1.5rem !important;
  }

  .mt-md-5 {
    margin-top: 3rem !important;
  }

  .mt-md-auto {
    margin-top: auto !important;
  }

  .mb-md-0 {
    margin-bottom: 0 !important;
  }

  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-md-3 {
    margin-bottom: 1rem !important;
  }

  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-md-5 {
    margin-bottom: 3rem !important;
  }

  .mb-md-auto {
    margin-bottom: auto !important;
  }

  .ms-md-0,
  .ml-md-0 {
    margin-left: 0 !important;
  }

  .ms-md-1,
  .ml-md-1 {
    margin-left: 0.25rem !important;
  }

  .ms-md-2,
  .ml-md-2 {
    margin-left: 0.5rem !important;
  }

  .ms-md-3,
  .ml-md-3 {
    margin-left: 1rem !important;
  }

  .ms-md-4,
  .ml-md-4 {
    margin-left: 1.5rem !important;
  }

  .ms-md-5,
  .ml-md-5 {
    margin-left: 3rem !important;
  }

  .ms-md-auto,
  .ml-md-auto {
    margin-left: auto !important;
  }

  .me-md-0,
  .mr-md-0 {
    margin-right: 0 !important;
  }

  .me-md-1,
  .mr-md-1 {
    margin-right: 0.25rem !important;
  }

  .me-md-2,
  .mr-md-2 {
    margin-right: 0.5rem !important;
  }

  .me-md-3,
  .mr-md-3 {
    margin-right: 1rem !important;
  }

  .me-md-4,
  .mr-md-4 {
    margin-right: 1.5rem !important;
  }

  .me-md-5,
  .mr-md-5 {
    margin-right: 3rem !important;
  }

  .me-md-auto,
  .mr-md-auto {
    margin-right: auto !important;
  }

  .mx-md-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mx-md-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
  }

  .mx-md-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  .mx-md-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  .mx-md-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }

  .mx-md-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
  }

  .mx-md-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .pt-md-0 {
    padding-top: 0 !important;
  }

  .pt-md-1 {
    padding-top: 0.25rem !important;
  }

  .pt-md-2 {
    padding-top: 0.5rem !important;
  }

  .pt-md-3 {
    padding-top: 1rem !important;
  }

  .pt-md-4 {
    padding-top: 1.5rem !important;
  }

  .pt-md-5 {
    padding-top: 3rem !important;
  }

  .pb-md-0 {
    padding-bottom: 0 !important;
  }

  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-md-3 {
    padding-bottom: 1rem !important;
  }

  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-md-5 {
    padding-bottom: 3rem !important;
  }

  .ps-md-0,
  .pl-md-0 {
    padding-left: 0 !important;
  }

  .ps-md-1,
  .pl-md-1 {
    padding-left: 0.25rem !important;
  }

  .ps-md-2,
  .pl-md-2 {
    padding-left: 0.5rem !important;
  }

  .ps-md-3,
  .pl-md-3 {
    padding-left: 1rem !important;
  }

  .ps-md-4,
  .pl-md-4 {
    padding-left: 1.5rem !important;
  }

  .ps-md-5,
  .pl-md-5 {
    padding-left: 3rem !important;
  }

  .pe-md-0,
  .pr-md-0 {
    padding-right: 0 !important;
  }

  .pe-md-1,
  .pr-md-1 {
    padding-right: 0.25rem !important;
  }

  .pe-md-2,
  .pr-md-2 {
    padding-right: 0.5rem !important;
  }

  .pe-md-3,
  .pr-md-3 {
    padding-right: 1rem !important;
  }

  .pe-md-4,
  .pr-md-4 {
    padding-right: 1.5rem !important;
  }

  .pe-md-5,
  .pr-md-5 {
    padding-right: 3rem !important;
  }

  .px-md-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .px-md-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  .px-md-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .px-md-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .px-md-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .px-md-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* --- Responsive Spacing: LG (>= 992px) --- */
@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-0 {
    margin-top: 0 !important;
  }

  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mt-lg-3 {
    margin-top: 1rem !important;
  }

  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mt-lg-5 {
    margin-top: 3rem !important;
  }

  .mt-lg-auto {
    margin-top: auto !important;
  }

  .mb-lg-0 {
    margin-bottom: 0 !important;
  }

  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }

  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }

  .mb-lg-auto {
    margin-bottom: auto !important;
  }

  .ms-lg-0,
  .ml-lg-0 {
    margin-left: 0 !important;
  }

  .ms-lg-1,
  .ml-lg-1 {
    margin-left: 0.25rem !important;
  }

  .ms-lg-2,
  .ml-lg-2 {
    margin-left: 0.5rem !important;
  }

  .ms-lg-3,
  .ml-lg-3 {
    margin-left: 1rem !important;
  }

  .ms-lg-4,
  .ml-lg-4 {
    margin-left: 1.5rem !important;
  }

  .ms-lg-5,
  .ml-lg-5 {
    margin-left: 3rem !important;
  }

  .ms-lg-auto,
  .ml-lg-auto {
    margin-left: auto !important;
  }

  .me-lg-0,
  .mr-lg-0 {
    margin-right: 0 !important;
  }

  .me-lg-1,
  .mr-lg-1 {
    margin-right: 0.25rem !important;
  }

  .me-lg-2,
  .mr-lg-2 {
    margin-right: 0.5rem !important;
  }

  .me-lg-3,
  .mr-lg-3 {
    margin-right: 1rem !important;
  }

  .me-lg-4,
  .mr-lg-4 {
    margin-right: 1.5rem !important;
  }

  .me-lg-5,
  .mr-lg-5 {
    margin-right: 3rem !important;
  }

  .me-lg-auto,
  .mr-lg-auto {
    margin-right: auto !important;
  }

  .mx-lg-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mx-lg-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
  }

  .mx-lg-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  .mx-lg-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  .mx-lg-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }

  .mx-lg-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
  }

  .mx-lg-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .pt-lg-0 {
    padding-top: 0 !important;
  }

  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pt-lg-3 {
    padding-top: 1rem !important;
  }

  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pt-lg-5 {
    padding-top: 3rem !important;
  }

  .pb-lg-0 {
    padding-bottom: 0 !important;
  }

  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }

  .ps-lg-0,
  .pl-lg-0 {
    padding-left: 0 !important;
  }

  .ps-lg-1,
  .pl-lg-1 {
    padding-left: 0.25rem !important;
  }

  .ps-lg-2,
  .pl-lg-2 {
    padding-left: 0.5rem !important;
  }

  .ps-lg-3,
  .pl-lg-3 {
    padding-left: 1rem !important;
  }

  .ps-lg-4,
  .pl-lg-4 {
    padding-left: 1.5rem !important;
  }

  .ps-lg-5,
  .pl-lg-5 {
    padding-left: 3rem !important;
  }

  .pe-lg-0,
  .pr-lg-0 {
    padding-right: 0 !important;
  }

  .pe-lg-1,
  .pr-lg-1 {
    padding-right: 0.25rem !important;
  }

  .pe-lg-2,
  .pr-lg-2 {
    padding-right: 0.5rem !important;
  }

  .pe-lg-3,
  .pr-lg-3 {
    padding-right: 1rem !important;
  }

  .pe-lg-4,
  .pr-lg-4 {
    padding-right: 1.5rem !important;
  }

  .pe-lg-5,
  .pr-lg-5 {
    padding-right: 3rem !important;
  }

  .px-lg-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .px-lg-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  .px-lg-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .px-lg-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .px-lg-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .px-lg-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* --- Responsive Spacing: XL (>= 1200px) --- */
@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-0 {
    margin-top: 0 !important;
  }

  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mt-xl-3 {
    margin-top: 1rem !important;
  }

  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mt-xl-5 {
    margin-top: 3rem !important;
  }

  .mt-xl-auto {
    margin-top: auto !important;
  }

  .mb-xl-0 {
    margin-bottom: 0 !important;
  }

  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }

  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }

  .mb-xl-auto {
    margin-bottom: auto !important;
  }

  .ms-xl-0,
  .ml-xl-0 {
    margin-left: 0 !important;
  }

  .ms-xl-1,
  .ml-xl-1 {
    margin-left: 0.25rem !important;
  }

  .ms-xl-2,
  .ml-xl-2 {
    margin-left: 0.5rem !important;
  }

  .ms-xl-3,
  .ml-xl-3 {
    margin-left: 1rem !important;
  }

  .ms-xl-4,
  .ml-xl-4 {
    margin-left: 1.5rem !important;
  }

  .ms-xl-5,
  .ml-xl-5 {
    margin-left: 3rem !important;
  }

  .ms-xl-auto,
  .ml-xl-auto {
    margin-left: auto !important;
  }

  .me-xl-0,
  .mr-xl-0 {
    margin-right: 0 !important;
  }

  .me-xl-1,
  .mr-xl-1 {
    margin-right: 0.25rem !important;
  }

  .me-xl-2,
  .mr-xl-2 {
    margin-right: 0.5rem !important;
  }

  .me-xl-3,
  .mr-xl-3 {
    margin-right: 1rem !important;
  }

  .me-xl-4,
  .mr-xl-4 {
    margin-right: 1.5rem !important;
  }

  .me-xl-5,
  .mr-xl-5 {
    margin-right: 3rem !important;
  }

  .me-xl-auto,
  .mr-xl-auto {
    margin-right: auto !important;
  }

  .mx-xl-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .mx-xl-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
  }

  .mx-xl-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
  }

  .mx-xl-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  .mx-xl-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
  }

  .mx-xl-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
  }

  .mx-xl-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }

  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .pt-xl-0 {
    padding-top: 0 !important;
  }

  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pt-xl-3 {
    padding-top: 1rem !important;
  }

  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pt-xl-5 {
    padding-top: 3rem !important;
  }

  .pb-xl-0 {
    padding-bottom: 0 !important;
  }

  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }

  .ps-xl-0,
  .pl-xl-0 {
    padding-left: 0 !important;
  }

  .ps-xl-1,
  .pl-xl-1 {
    padding-left: 0.25rem !important;
  }

  .ps-xl-2,
  .pl-xl-2 {
    padding-left: 0.5rem !important;
  }

  .ps-xl-3,
  .pl-xl-3 {
    padding-left: 1rem !important;
  }

  .ps-xl-4,
  .pl-xl-4 {
    padding-left: 1.5rem !important;
  }

  .ps-xl-5,
  .pl-xl-5 {
    padding-left: 3rem !important;
  }

  .pe-xl-0,
  .pr-xl-0 {
    padding-right: 0 !important;
  }

  .pe-xl-1,
  .pr-xl-1 {
    padding-right: 0.25rem !important;
  }

  .pe-xl-2,
  .pr-xl-2 {
    padding-right: 0.5rem !important;
  }

  .pe-xl-3,
  .pr-xl-3 {
    padding-right: 1rem !important;
  }

  .pe-xl-4,
  .pr-xl-4 {
    padding-right: 1.5rem !important;
  }

  .pe-xl-5,
  .pr-xl-5 {
    padding-right: 3rem !important;
  }

  .px-xl-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .px-xl-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }

  .px-xl-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .px-xl-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .px-xl-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .px-xl-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* --- Base Display Utilities --- */
.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

/* --- Responsive Display: SM (>= 576px) --- */
@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-grid {
    display: grid !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}

/* --- Responsive Display: MD (>= 768px) --- */
@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-grid {
    display: grid !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-inline-flex {
    display: inline-flex !important;
  }
}

/* --- Responsive Display: LG (>= 992px) --- */
@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-grid {
    display: grid !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}

/* --- Responsive Display: XL (>= 1200px) --- */
@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-grid {
    display: grid !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}

/* --- Responsive Display: XXL (>= 1400px) --- */
@media (min-width: 1400px) {
  .d-xxl-none {
    display: none !important;
  }

  .d-xxl-inline {
    display: inline !important;
  }

  .d-xxl-inline-block {
    display: inline-block !important;
  }

  .d-xxl-block {
    display: block !important;
  }

  .d-xxl-grid {
    display: grid !important;
  }

  .d-xxl-table {
    display: table !important;
  }

  .d-xxl-table-row {
    display: table-row !important;
  }

  .d-xxl-table-cell {
    display: table-cell !important;
  }

  .d-xxl-flex {
    display: flex !important;
  }

  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
}

/* --- Print Display Utilities --- */
@media print {
  .d-print-none {
    display: none !important;
  }

  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-grid {
    display: grid !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: flex !important;
  }

  .d-print-inline-flex {
    display: inline-flex !important;
  }
}

/* ==========================================================================
   Bootstrap Grid System (Row, Columns & Gutters)
   Includes: .row, .col, .col-1 through .col-12, .row-cols-*, gutters (.g-*, .gx-*, .gy-*),
   and responsive breakpoints (sm, md, lg, xl, xxl)
   ========================================================================== */

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row>* {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* --- Base Columns --- */
.col {
  flex: 1 0 0%;
}

.row-cols-auto>* {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1>* {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2>* {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3>* {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-4>* {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5>* {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6>* {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

/* --- Gutters --- */
.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

/* --- Row Flex Alignment & Justification --- */
.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

/* --- Responsive Grid: SM (>= 576px) --- */
@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }

  .row-cols-sm-auto>* {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-sm-1>* {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-sm-2>* {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-sm-3>* {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .row-cols-sm-4>* {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-sm-5>* {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-sm-6>* {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }

  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }

  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }

  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }

  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }

  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}

/* --- Responsive Grid: MD (>= 768px) --- */
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }

  .row-cols-md-auto>* {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-md-1>* {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-md-2>* {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-md-3>* {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .row-cols-md-4>* {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-md-5>* {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-md-6>* {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }

  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }

  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }

  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }

  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }

  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}

/* --- Responsive Grid: LG (>= 992px) --- */
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }

  .row-cols-lg-auto>* {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-lg-1>* {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-lg-2>* {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-lg-3>* {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .row-cols-lg-4>* {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-lg-5>* {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-lg-6>* {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }

  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }

  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }

  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }

  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }

  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}

/* --- Responsive Grid: XL (>= 1200px) --- */
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }

  .row-cols-xl-auto>* {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xl-1>* {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xl-2>* {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xl-3>* {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .row-cols-xl-4>* {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xl-5>* {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xl-6>* {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }

  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }

  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }

  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }

  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }

  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}

/* --- Responsive Grid: XXL (>= 1400px) --- */
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }

  .row-cols-xxl-auto>* {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xxl-1>* {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xxl-2>* {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xxl-3>* {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .row-cols-xxl-4>* {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xxl-5>* {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xxl-6>* {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }

  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }

  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }

  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }

  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }

  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}

.page-hero-banner h1 {
  color: #fff;
  font-size: 40px;
}

.page-hero-banner::after {
  content: "";
  background: #000000b8;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.gallery-banner {
  background: url(../img/salon.jpg) no-repeat;
  background-size: cover;
}

/* ==========================================================================
   Redesigned Contact Page Styles (Modern Luxury)
   ========================================================================== */

/* Hero Banner */
.contact-hero-banner {
  background: linear-gradient(135deg, rgba(4, 46, 25, 0.88) 0%, rgba(2, 28, 15, 0.94) 55%, rgba(1, 15, 8, 0.97) 100%), url('../img/salon.jpg') center/cover no-repeat;
  position: relative;
  padding: 95px 0 80px;
  overflow: hidden;
  color: #ffffff;
  border-bottom: 1px solid rgba(0, 150, 63, 0.3);
}

.contact-hero-banner::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -10%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 180, 75, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

.contact-hero-banner::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

[data-theme="black"] .contact-hero-banner {
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.92) 0%, rgba(8, 8, 8, 0.97) 100%), url('../img/salon.jpg') center/cover no-repeat;
  border-bottom: 1px solid #282828;
}

.contact-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.contact-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.contact-breadcrumbs a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s;
}

.contact-breadcrumbs a:hover {
  color: #ffd700;
}

.contact-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ffd700;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.contact-hero-title {
  font-family: Poppins, sans-serif;
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 850;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.contact-hero-title .gold-accent {
  background: linear-gradient(135deg, #ffe066 0%, #d4a017 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.contact-hero-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto 30px;
}

.contact-hero-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 650;
  color: #ffffff;
  transition: all 0.25s ease;
}

.contact-hero-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffd700;
  transform: translateY(-2px);
}

/* 4 Quick Contact Cards */
.contact-cards-section {
  padding: 40px 0 20px;
  position: relative;
  z-index: 5;
  margin-top: -30px;
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1100px) {
  .contact-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
    margin-top: 0;
  }

  .contact-cards-section {
    margin-top: 0;
    padding-top: 25px;
  }
}

.contact-quick-card {
  background: #ffffff;
  border: 1.5px solid #dcefe3;
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: 0 10px 30px rgba(0, 70, 35, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.contact-quick-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #00963f, #07552d);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-quick-card:hover {
  transform: translateY(-5px);
  border-color: var(--green);
  box-shadow: 0 16px 40px rgba(0, 90, 45, 0.12);
}

.contact-quick-card:hover::before {
  opacity: 1;
}

.contact-quick-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.contact-quick-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex: none;
}

.contact-quick-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.contact-quick-badge.live {
  background: #def7ea;
  color: #0d6e30;
}

.contact-quick-badge.whatsapp {
  background: #e8f9ee;
  color: #1a9e4b;
}

.contact-quick-badge.location {
  background: #fef3c7;
  color: #92400e;
}

.contact-quick-badge.hours {
  background: #e0f2fe;
  color: #0369a1;
}

.contact-quick-title {
  font-family: Poppins, sans-serif;
  font-size: 17px;
  font-weight: 750;
  color: var(--green-deep);
  margin: 0 0 6px 0;
}

.contact-quick-desc {
  font-size: 13.5px;
  color: var(--dark);
  line-height: 1.55;
  margin: 0;
}

.contact-quick-desc strong {
  color: var(--ink);
}

.contact-quick-desc a {
  color: var(--green-deep);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s;
}

.contact-quick-desc a:hover {
  color: var(--green);
  text-decoration: underline;
}

.contact-quick-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 16px;
  background: #f4fbf7;
  color: var(--green-deep);
  border: 1px solid #d4ece0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-top: 8px;
}

.contact-quick-action-link:hover {
  background: var(--green);
  color: #ffffff;
  border-color: var(--green);
  transform: translateY(-1px);
}

/* Main Booking & Location Section */
.contact-main-section {
  padding: 50px 0 70px;
}

.contact-main-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 36px;
  align-items: flex-start;
}

@media (max-width: 980px) {
  .contact-main-layout {
    grid-template-columns: 1fr;
  }
}

/* Left: Booking Form Container */
.contact-booking-box {
  background: #ffffff;
  border: 1.5px solid #dcefe3;
  border-radius: 26px;
  padding: 38px 36px;
  box-shadow: 0 14px 45px rgba(0, 70, 35, 0.06);
  position: relative;
}

[data-theme="black"] .contact-booking-box {
  border-color: #282828;
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.12);
}

.booking-box-header {
  margin-bottom: 26px;
  border-bottom: 1px solid #eef5f1;
  padding-bottom: 20px;
}

.booking-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green-dark);
  background: var(--green-soft);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
  border: 1px solid rgba(0, 150, 63, 0.2);
}

.booking-box-header h2 {
  font-family: Poppins, sans-serif;
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 800;
  color: var(--green-deep);
  margin: 0 0 8px 0;
  line-height: 1.25;
}

.booking-box-header p {
  color: var(--dark);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.booking-form-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.booking-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .booking-form-row {
    grid-template-columns: 1fr;
  }

  .contact-booking-box {
    padding: 26px 20px;
  }
}

.booking-field-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.booking-field-group label {
  font-size: 13px;
  font-weight: 750;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  gap: 4px;
}

.booking-field-group label .req {
  color: #dc2626;
}

.booking-field-group input,
.booking-field-group select,
.booking-field-group textarea {
  width: 100%;
  padding: 13px 16px;
  background: #fafdff;
  border: 1.5px solid #d3e7dc;
  border-radius: 12px;
  font-family: "Poppins";
  font-size: 14px;
  color: var(--ink);
  transition: all 0.25s ease;
  outline: none;
}

.booking-field-group input:focus,
.booking-field-group select:focus,
.booking-field-group textarea:focus {
  background: #ffffff;
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(0, 150, 63, 0.12);
}

.booking-field-group textarea {
  resize: vertical;
  min-height: 90px;
}

.booking-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 28px;
  background: linear-gradient(135deg, #00963f 0%, #007a33 100%);
  color: #ffffff !important;
  font-family: Poppins, sans-serif;
  font-size: 15.5px;
  font-weight: 750;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 150, 63, 0.35);
  transition: all 0.3s ease;
  margin-top: 6px;
}

.booking-submit-btn:hover {
  background: linear-gradient(135deg, #007a33 0%, #05552a 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 150, 63, 0.5);
}

.booking-whatsapp-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0;
  color: var(--dark);
  font-size: 12.5px;
  font-weight: 650;
}

.booking-whatsapp-divider::before,
.booking-whatsapp-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #e4ece7;
}

.booking-whatsapp-divider span {
  padding: 0 14px;
}

.booking-whatsapp-direct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  background: #eafaf1;
  color: #0b7835 !important;
  border: 1.5px solid #25d366;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.25s ease;
}

.booking-whatsapp-direct-btn:hover {
  background: #25d366;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.booking-trust-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dark);
  margin-top: 14px;
  text-align: center;
}

/* Right: Location & Map Panel */
.contact-location-panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-map-card {
  background: #ffffff;
  border: 1.5px solid #dcefe3;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0, 70, 35, 0.05);
}

.contact-map-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fbfdfc;
  border-bottom: 1px solid #e8f3ec;
}

.contact-map-title h3 {
  font-family: Poppins, sans-serif;
  font-size: 16.5px;
  font-weight: 750;
  color: var(--green-deep);
  margin: 0 0 4px 0;
}

.contact-map-title p {
  font-size: 12.5px;
  color: var(--dark);
  margin: 0;
}

.contact-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-soft);
  color: var(--green-dark);
  border: 1px solid rgba(0, 150, 63, 0.3);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.2s;
  flex: none;
}

.contact-map-btn:hover {
  background: var(--green);
  color: #ffffff;
}

.contact-map-frame-wrap {
  width: 100%;
  height: 310px;
  position: relative;
}

.contact-map-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Location Highlight Cards */
.location-feature-card {
  background: #ffffff;
  border: 1.5px solid #dcefe3;
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 0 6px 20px rgba(0, 70, 35, 0.04);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.25s ease;
}

.location-feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 12px 28px rgba(0, 80, 40, 0.09);
}

.location-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex: none;
}

.location-card-content h4 {
  font-family: Poppins, sans-serif;
  font-size: 15.5px;
  font-weight: 750;
  color: var(--green-deep);
  margin: 0 0 4px 0;
}

.location-card-content p {
  font-size: 13.5px;
  color: var(--dark);
  line-height: 1.55;
  margin: 0;
}

/* Section 3: Salon Amenities & Perks */
.contact-amenities-section {
  padding: 60px 0;
  background: #f8fbf9;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-amenities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 992px) {
  .contact-amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .contact-amenities-grid {
    grid-template-columns: 1fr;
  }
}

.contact-amenity-card {
  background: #ffffff;
  border: 1.5px solid #dcefe3;
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: 0 6px 20px rgba(0, 70, 35, 0.03);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.3s ease;
}

.contact-amenity-card:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 14px 32px rgba(0, 90, 45, 0.1);
}

.amenity-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--green-soft);
  display: grid;
  place-items: center;
  font-size: 24px;
  flex: none;
}

.amenity-card-title {
  font-family: Poppins, sans-serif;
  font-size: 16.5px;
  font-weight: 750;
  color: var(--green-deep);
  margin: 0;
}

.amenity-card-desc {
  font-size: 13.5px;
  color: var(--dark);
  margin: 0;
  line-height: 1.6;
}

/* Section 4: Urgent Help Strip */
.contact-urgent-banner {
  background: linear-gradient(135deg, #063c22 0%, #032514 60%, #021a0e 100%);
  border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 50px rgba(2, 26, 14, 0.35);
  padding: 40px 44px;
  margin: 60px 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  color: #ffffff;
}

.urgent-banner-text h3 {
  font-family: Poppins, sans-serif;
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.urgent-banner-text p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  margin: 0;
}

.urgent-banner-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.gmb img {
  width: 150px;
  height: auto;
}

.btn {
  margin-bottom: 10px;
}

.badge-bottom-left {
  display: none;
}

.pricing-footer-note {
  font-size: 14px;
}