/* assets/css/style.css */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}



/* --------------------------------------------
   TYPOGRAPHY SYSTEM (GLOBAL)
-------------------------------------------- */

/* Base font setup */
html {
  font-size: 62.5%; /* 1rem = 10px (easy scaling) */
  scroll-behavior: smooth;
}

body {
  font-family: var(--bs-font-sans-serif);
  color: #222;
  background-color: #F6EBDD;
  line-height: 1.6;
  font-size: 1.6rem; /* = 16px */
}

/* Headings - consistent margin and color */



a {
  color: inherit;           
  text-decoration: none;     
  transition: color 0.3s ease, opacity 0.3s ease;
}


/* --------------------------------------------
   RESPONSIVE TYPOGRAPHY
-------------------------------------------- */
/* @media (max-width: 768px) {
  h1, .h1 { font-size: 2.6rem; }
  h2, .h2 { font-size: 2.2rem; }
  h3, .h3 { font-size: 2rem; }
  h4, .h4 { font-size: 1.8rem; }
  h5, .h5 { font-size: 1.6rem; }
  h6, .h6 { font-size: 1.5rem; }
  p, .p   { font-size: 1.5rem; }

 
i, .ii {
    font-weight: 600;
  color: #ffffff;
  margin-bottom: 1.2rem;
  line-height: 1.3;
  font-size: 1.4rem;
}
} */



/* --------------------------------------------
   Hero Section Start 
   #######################################
   #######################################
-------------------------------------------- */

















/* --------------------------------------------
   Hero Section end 
   #######################################
   #######################################
-------------------------------------------- */
















/* --------------------------------------------
   Announcement Bar Styling
-------------------------------------------- */
.announcement-bar {
  background-color: #2B2B2B;
  /* color: #f8b4a2; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 8px 5%;
  flex-wrap: wrap;
}

.announcement-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #F9EEDF;
  flex: 1 1 50%;
}

/* .announcement-left i {
  margin-right: 5px;
  color: #f8b4a2;
} */

.divider {
  color: rgba(255,255,255,0.4);
}

.announcement-right {
  flex: 1 1 50%;
  text-align: right;
  color: #F9EEDF;
}

.announcement-right marquee {
  font-weight: 600;
  color: #F9EEDF;
}

/* --------------------------------------------
   Marquee Text Gradient Shine Animation
-------------------------------------------- */
/* --------------------------------------------
   Marquee Text Shimmer (Fixed Version)
-------------------------------------------- */
.announcement-right {
  overflow: hidden;
  position: relative;
}

.announcement-right marquee span {
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5),
               0 0 10px rgba(255, 255, 255, 0.3);
  animation: shimmerGlow 2.5s ease-in-out infinite;
}

/* Shimmer animation keyframes */
@keyframes shimmerGlow {
  0% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4),
                 0 0 10px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.7),
                 0 0 20px rgba(255, 255, 255, 0.5);
  }
  100% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.4),
                 0 0 10px rgba(255, 255, 255, 0.3);
  }
}







/* --------------------------------------------
   Responsive (Mobile)
-------------------------------------------- */
@media (max-width: 768px) {
  .announcement-bar {
    flex-direction: column;
    text-align: center;
    padding: 10px;
  }

  .announcement-left {
    justify-content: center;
    margin-bottom: 6px;
  }

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






/* --------------------------------------------
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-------------------------------------------- */




/* --------------------------------------------
   HEADER / NAVIGATION (with PNG icons)
-------------------------------------------- */

/* Header Container */
.site-header {
  position: sticky;
  top: 0;
  /* z-index: 1000; */
   z-index: 997;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 20px;
}

/* Logo */
.logo img {
  height: 80px;
  width: auto;
  display: block;
}

/* Navigation */
.nav-menu {
  flex: 1 1 auto;
  margin-left: 30px;
}

.menu-list {
  list-style: none;
  display: flex;
  gap: 26px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.menu-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2B2B2B;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 500;
  padding: 8px 6px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* PNG Menu Icons */
.menu-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
  transition: opacity 0.3s ease;
}

.nav-link:hover .menu-icon {
  opacity: 0.8;
}

/* Hover effect */
.nav-link:hover,
.nav-link:focus {
  color: #C07A3A;
  background: rgba(88, 103, 138, 0.08);
}

/* CTA & Hamburger */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-cta {
  background: #004aad;
  color: #fff;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease;
}

.btn-cta:hover {
  background: #00308c;
}

/* Hamburger Button */
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #C07A3A;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  cursor: pointer;
  padding: 6px;
  
}

.hamburger-box {
  display: inline-block;
  width: 26px;
  height: 18px;
  position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  background-color: #333;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.3s ease;
}

.hamburger-inner { top: 8px; }
.hamburger-inner::before { content: ""; top: -6px; }
.hamburger-inner::after  { content: ""; top: 6px; }


/* --------------------------------------------
   DESKTOP MEGA MENU (STYLE)
-------------------------------------------- */

/* --------------------------------------------
   TWACHA STYLE FULL-WIDTH MEGA MENU
-------------------------------------------- */

.has-dropdown {
  /* position: relative; */
   position: static !important; /* parent ko static kar diya */
}

/* show menu on hover */
.has-dropdown:hover > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Main mega menu container */
.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  /* width: 100%; */
  right: 0;
  /* width: 500%; */
  width: 100vw;
  margin-left: calc(50% - 50vw); /* center align hack */
  background: #ffffff;
  border-top: 2px solid #C07A3A;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 999;
}

/* Inner container grid */
.mega-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  /* padding: 35px 6%; */
   padding: 35px 1%; 
}

/* Column headings */
.mega-column h4 {
  color: #C07A3A;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #d3d7e0;
  padding-bottom: 6px;
}

/* List style */
.mega-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-column ul li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}

/* Custom circular bullet */
.mega-column ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: #C07A3A;
  border: 2px solid #d3d7e0;
  border-radius: 50%;
}

/* Links inside */
.mega-column ul li a {
  text-decoration: none;
  color: #1b1b1b;
  font-size: 1.45rem;
  line-height: 1.6;
  transition: color 0.2s ease;
}

.mega-column ul li a:hover {
  color: #C07A3A;
}

/* responsive hide on mobile */
@media (max-width: 992px) {
  .mega-menu {
    display: none !important;
  }
   /* hide desktop nav menu on mobile */
  .nav-menu {
    display: none !important;
  }

  /* optional: reduce logo size */
  .logo img {
    height: 60px;
  }
}


/* HAMBURGER SHOULD SHOW ONLY ON MOBILE */
@media (min-width: 993px) {
  #site-hamburger {
    display: none !important;
  }
}



/* --------------------------------------------
 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-------------------------------------------- */



/* --------------------------------------------
   MOBILE SLIDE-IN MENU (Part C)
-------------------------------------------- */
/* overlay background when menu open */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 998;
}

/* slide menu container */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 10px rgba(0,0,0,0.1);
  transition: right 0.35s ease;
  z-index: 999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* header area inside menu */
.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.mobile-logo img {
  height: 50px;
  width: auto;
}

.mobile-close {
  font-size: 2.5rem;
  border: none;
  background: none;
  cursor: pointer;
  color: #333;
}

/* list styling */
.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 15px 0;
}

.mobile-menu-list li {
  border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-list a,
.mobile-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  font-size: 1.6rem;
  color: #222;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.mobile-menu-list a:hover,
.mobile-dropdown-toggle:hover {
  background: rgba(88,103,138,0.08);
}

/* submenu */
.mobile-submenu {
  display: none;
  flex-direction: column;
  background: #fafafa;
}

.mobile-submenu li a {
  padding-left: 40px;
  font-size: 1.5rem;
}

/* toggle states */
.mobile-dropdown.open > .mobile-submenu {
  display: flex;
}

.mobile-dropdown.open .mobile-dropdown-toggle span {
  transform: rotate(45deg);
}

/* active body state */
body.mobile-menu-open .mobile-menu {
  right: 0;
}

body.mobile-menu-open .mobile-overlay {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------
   3rd LEVEL SUBMENU (MOBILE)
-------------------------------------------- */
.mobile-sub-submenu {
  display: none;
  flex-direction: column;
  background: #f2f2f2;
}

.mobile-sub-submenu li a {
  padding-left: 55px;
  font-size: 1.45rem;
}

/* when open */
.mobile-subdropdown.open > .mobile-sub-submenu {
  display: flex;
}

.mobile-subdropdown.open .mobile-subdropdown-toggle span {
  transform: rotate(45deg);
}


/* --------------------------------------------
   MOBILE MENU ICON FIX
-------------------------------------------- */

/* icons beside text */
.mobile-menu-list img {
  /* width: 22px; */
   width: 50px;       /* icon width */
  /* height: 22px; */
  height: 50px;      /* icon height */
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
  margin-right: 10px; /* space between icon and text */
  vertical-align: middle;
  filter: brightness(0.7); /* subtle tone for harmony */
  transition: filter 0.2s ease;
}

/* hover or active state */
.mobile-menu-list a:hover img {
  filter: brightness(1);
}



/* --------------------------------------------
   MOBILE MENU SUBMENU IMPROVED STYLING
   (Same look as desktop bullet list)
-------------------------------------------- */

/* 2nd-level submenu (Face Treatments > Acne etc.) */
.mobile-submenu {
  background: #fafafa;
  padding: 5px 0;
  border-left: 3px solid #004aad10;
}

/* 3rd-level submenu (Acne > Cystic Acne etc.) */
.mobile-sub-submenu {
  background: #fff;
  padding: 8px 0 8px 0;
  border-left: 3px solid #004aad20;
}

/* Common list item styling */
.mobile-submenu li,
.mobile-sub-submenu li {
  position: relative;
  list-style: none;
  padding: 8px 0 8px 35px;
  border-bottom: 1px solid #f1f1f1;
}

/* Bullet dot (same as desktop) */
.mobile-submenu li::before,
.mobile-sub-submenu li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 14px;
  width: 8px;
  height: 8px;
  background: #C07A3A;
  border: 2px solid #d3d7e0;
  border-radius: 50%;
}

/* Link text */
.mobile-submenu li a,
.mobile-sub-submenu li a {
  display: block;
  color: #1b1b1b;
  font-size: 1.5rem;
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.2s ease, background 0.2s ease;
}

/* Hover effect */
.mobile-submenu li a:hover,
.mobile-sub-submenu li a:hover {
  color: #C07A3A;
  background: rgba(0, 74, 173, 0.05);
}

/* Heading button styles (Acne, Acne Scar etc.) */
.mobile-subdropdown-toggle {
  background: #f0f0f0;
  font-weight: 600;
  color: #C07A3A;
  border: none;
  padding: 12px 20px;
  width: 100%;
  text-align: left;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-subdropdown-toggle span {
  font-size: 2rem;
  transition: transform 0.2s ease;
}

.mobile-subdropdown.open .mobile-subdropdown-toggle span {
  transform: rotate(45deg);
}

/* Sub-submenu animation */
.mobile-subdropdown.open > .mobile-sub-submenu {
  display: flex;
  flex-direction: column;
}



/* hide desktop nav */
@media (min-width: 993px) {
  .mobile-menu,
  .mobile-overlay {
    display: none;
  }
}




/* --------------------------------------------
   PART D — ANIMATION + OVERLAY POLISH
-------------------------------------------- */

/* Overlay blur */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);        /* soft blur */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
  z-index: 998;
}

/* Slide-in menu animation */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
  border-radius: 8px 0 0 8px;
  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 999;
  overflow-y: auto;
}

/* When menu open */
body.mobile-menu-open .mobile-menu {
  right: 0;
}

body.mobile-menu-open .mobile-overlay {
  opacity: 1;
  visibility: visible;
}

/* Disable body scroll when menu open */
body.mobile-menu-open {
  overflow: hidden;
}

/* Height expand animation for submenus */
.mobile-submenu,
.mobile-sub-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.mobile-dropdown.open > .mobile-submenu {
  max-height: 1000px; /* enough for content */
}

.mobile-subdropdown.open > .mobile-sub-submenu {
  max-height: 800px;
}



/* hero section and form section start */


/* ===============================
   ROOT VARIABLES (GLOBAL CONTROL)
================================= */
:root {
  --color-bg: #faf7f2;
  --color-primary: #c6a87d;
  --color-primary-dark: #b89663;
  --color-text: #2e2a25;
  --color-muted: #6f6a63;
  --color-white: #ffffff;
  --color-border: #e6dfd3;

  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 22px;
  --fs-body: 16px;
  --fs-small: 14px;

  --radius: 16px;
  --radius-sm: 10px;

  --container-width: 1200px;
}

/* ===============================
   RESET & BASE
================================= */
/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: 1.6;
}

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

/* ===============================
   CONTAINER
================================= */

.hero-container {
  max-width: var(--container-width);
  margin: auto;
  padding: 0 20px;
}

/* ===============================
   HEADER
================================= */
/* .site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.site-header  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo img {
  height: 42px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
} */

/* ===============================
   BUTTONS
================================= */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-outline {
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===============================
   HERO SECTION
================================= */
.hero {
  padding: 25px 0;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

/* ===============================
   HERO LEFT
================================= */
.hero-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1eadf;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: var(--fs-small);
  font-weight: 600;
  width: fit-content;
}

.badge i {
  color: var(--color-primary-dark);
}

.hero-left h1 {
  font-size: var(--fs-h1);
  line-height: 1.2;
}

.hero-left .highlight {
  color: var(--color-primary-dark);
}

.hero-desc {
  font-size: 18px;
  color: var(--color-muted);
  max-width: 520px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.stars i {
  color: var(--color-primary-dark);
}

.rating-value {
  font-weight: 700;
  color: var(--color-text);
}

.divider {
  opacity: 0.4;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-points {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.point {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.point i {
  color: var(--color-primary-dark);
}

/* ===============================
   HERO RIGHT – FORM CARD
================================= */
.hero-right {
  display: flex;
  justify-content: center;
}

.lead-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* ===============================
   FORM ELEMENTS
================================= */
.form-badge {
  display: inline-block;
  background: #f1eadf;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

.lead-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 6px;
}

.form-subtext {
  font-size: var(--fs-small);
  color: var(--color-muted);
  margin-bottom: 20px;
}

.lead-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-group input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: var(--fs-body);
}

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.captcha-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captcha-question {
  font-weight: 600;
}

.form-submit {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
}

/* ===============================
   POPUP FORM (MODAL)
================================= */
/* ===============================
   POPUP FORM (MODAL) – CORRECT
================================= */
.form-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.form-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Popup card */
.form-popup {
  position: relative;
  animation: popupScale 0.3s ease;
}


/* Close Button */
.popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1eadf;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.popup-close i {
  font-size: 18px;
  color: var(--color-primary-dark);
}

/* Popup animation */
@keyframes popupScale {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}






/* ===============================
   INLINE FORM ERRORS
================================= */
.form-group {
  position: relative;
}

.error-text {
  font-size: 13px;
  color: #d93025;
  margin-top: 4px;
  display: block;
}

.input-error {
  border-color: #d93025 !important;
}



















/* ===============================
   RESPONSIVE
================================= */
@media (max-width: 992px) {
  :root {
    --fs-h1: 34px;
  }

  .hero-container {
    grid-template-columns: 1fr;
  }

  .hero-right {
    margin-top: 30px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .lead-card {
    padding: 24px;
  }
}





/* hbot gallery */

.hbot-gallery {
  background: #fbf4ec; /* HBOT beige theme */
  padding: 1px 0;
}

.hbot-gallery-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 22px;
}

.hbot-gallery-title {
  text-align: center;
  font-size: 34px;
  color: #7a4a1e;
  margin-bottom: 45px;
}

.hbot-gallery-title span {
  color: #b8743b;
}

/* COLLAGE GRID */
.hbot-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 180px);
  gap: 16px;
}

/* COMMON IMAGE STYLE */
.gallery-item {
  overflow: hidden;
  border-radius: 16px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

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

/* COLLAGE POSITIONS */
.item-1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.item-2 { grid-column: 3 / 5; grid-row: 1 / 2; }
.item-3 { grid-column: 3 / 4; grid-row: 2 / 3; }
.item-4 { grid-column: 4 / 5; grid-row: 2 / 3; }
.item-5 { grid-column: 1 / 2; grid-row: 3 / 4; }
.item-6 { grid-column: 2 / 3; grid-row: 3 / 4; }
.item-7 { grid-column: 3 / 5; grid-row: 3 / 4; }

/* MOBILE */
@media (max-width: 900px) {
  .hbot-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .gallery-item {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 200px;
  }

  .hbot-gallery-title {
    font-size: 26px;
  }
}



/* ================= HBOT INTRO SECTION STYLES ================= */
/* ================= HBOT MEDICAL OVERVIEW STYLES ================= */
.hbot-overview {
  background: #F6ECDC;
  padding: 10px 0;
}

.hbot-overview-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 22px;
}

.hbot-overview-content h2 {
  font-size: 30px;
  line-height: 1.45;
  color: #B87945;
  margin-bottom: 20px;
}

.hbot-overview-content h2 span {
  color: #2A1E16;
  font-weight: 600;
}

.hbot-overview-content p {
  font-size: 15.5px;
  line-height: 1.75;
  color: #3E2F25;
  margin-bottom: 18px;
}

.hbot-overview-content .lead-text {
  font-size: 16.5px;
  font-weight: 500;
  color: #3E2F25;
}

/* MEDICAL NOTE BOX */
.medical-note {
 background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 20px 22px;
  margin-top: 28px;
  border-radius: 6px;
}

.medical-note h3 {
  font-size: 17px;
  color: #2A1E16;
  margin-bottom: 8px;
}

.medical-note p {
  margin: 0;
  font-size: 15px;
  color: #3E2F25;
}

/* MOBILE */
@media (max-width: 768px) {
  .hbot-overview {
    padding: 10px 0;
  }

  .hbot-overview-content h2 {
    font-size: 24px;
  }

  .hbot-overview-content p,
  .hbot-overview-content .lead-text {
    font-size: 15px;
  }
}
/* ================= END HBOT MEDICAL OVERVIEW STYLES ================= */

/* ================= END HBOT INTRO SECTION STYLES ================= */


/* ================= 3 ATA HBOT CHAMBER STYLES ================= */
.hbot-3ata {
  background: #FFF9F2;
  padding: 20px 0;
}

.hbot-3ata-container {
  max-width: 1150px;
  margin: auto;
  padding: 0 22px;
}

/* HEADER */
.hbot-3ata-header h2 {
  font-size: 28px;
  color: #B87945;
  margin-bottom: 14px;
}

.hbot-3ata-header .lead-text {
  font-size: 16px;
  line-height: 1.7;
  color:#3E2F25;
  max-width: 820px;
}

/* GRID */
.hbot-3ata-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 42px 0 36px;
}

/* CARD */
.ata-card {
  background: #EEDDC7;
  border: 1px solid #e6eef4;
  border-radius: 12px;
  padding: 26px 20px;
  text-align: center;
}

.ata-card img {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
}

.ata-card h3 {
  font-size: 15.5px;
  color: #2A1E16;
  margin-bottom: 8px;
}

.ata-card p {
  font-size: 14.5px;
  color: #3E2F25;
  line-height: 1.6;
}

/* MEDICAL NOTE */
.ata-medical-note {
  background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 18px 22px;
  font-size: 15px;
  color: #3E2F25;
  border-radius: 6px;
  max-width: 900px;
}

/* MOBILE */
@media (max-width: 1024px) {
  .hbot-3ata-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hbot-3ata {
    padding: 20px 0;
  }

  .hbot-3ata-grid {
    grid-template-columns: 1fr;
  }

  .hbot-3ata-header h2 {
    font-size: 24px;
  }
}
/* ================= END 3 ATA HBOT CHAMBER STYLES ================= */

/* ================= SQUARE HBOT CHAMBER STYLES ================= */
.square-hbot {
  background: #F6ECDC;
  padding: 20px 0;
}

.square-hbot-container {
  max-width: 1150px;
  margin: auto;
  padding: 0 22px;
}

/* HEADER */
.square-hbot-head h2 {
  font-size: 28px;
 color: #B87945;
  margin-bottom: 12px;
}

.square-hbot-head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3E2F25;
  max-width: 850px;
}

/* RAIL LAYOUT */
.square-hbot-rail {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  margin-top: 48px;
}

/* LEFT INFO PANEL */
.square-hbot-info {
  background: #EEDDC7;
  border: 1px solid #e6eef4;
  border-radius: 14px;
  padding: 26px 24px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #eef4f8;
}

.info-row:last-child {
  border-bottom: none;
}

.info-row .label {
  font-size: 14px;
  color: #3E2F25;
}

.info-row .value {
  font-size: 14.5px;
  color: #3E2F25;
  font-weight: 600;
}

.info-row.highlight {
  background: #e9d2b2;
  padding: 14px;
  border-radius: 8px;
  border: none;
}

/* RIGHT BENEFITS */
.square-hbot-benefits h3 {
  font-size: 20px;
  color: #2A1E16;
  margin-bottom: 18px;
}

.square-hbot-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.square-hbot-benefits li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  font-size: 15px;
  color: #3E2F25;
}

.square-hbot-benefits img {
  width: 36px;
  height: 36px;
}

/* MOBILE */
@media (max-width: 900px) {
  .square-hbot-rail {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .square-hbot {
    padding: 20px 0;
  }

  .square-hbot-head h2 {
    font-size: 24px;
  }
}
/* ================= END SQUARE HBOT CHAMBER STYLES ================= */


/* ================= HBOT COMPARISON STYLES ================= */
/* ================= HBOT COMPARISON STYLES ================= */
.hbot-compare {
  padding: 20px 0;
  background: #FFF9F2;
}

.hbot-compare-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 22px;
}

.hbot-compare h2 {
  font-size: 28px;
  color: #B87945;
  margin-bottom: 32px;
}

/* DESKTOP TABLE */
.desktop-only {
  display: block;
}

.comparison-table {
  border: 1px solid #e6eef4;
  border-radius: 12px;
  overflow: hidden;
}

.compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid #eef4f8;
}

.compare-row.header {
  background: #e9d2b2;
  font-weight: 600;
}

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

.cell.feature {
  font-weight: 500;
}

.cell.capsule {
  color: #8a3a3a;
}

.cell.square {
  color: #1f6b3b;
  font-weight: 600;
}

/* MOBILE CARDS */
.mobile-only {
  display: none;
}

.feature-card {
  border: 1px solid #e6eef4;
  border-radius: 10px;
  padding: 18px 16px;
  margin-bottom: 14px;
  background: #EEDDC7;
}

.feature-card h3 {
  font-size: 15.5px;
  color: #2A1E16;
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 14.5px;
  margin: 4px 0;
}

/* NOTE */
.comparison-note {
  margin-top: 26px;
   background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 18px 22px;
  font-size: 15px;
  border-radius: 6px;
}

/* RESPONSIVE SWITCH */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .hbot-compare {
    padding: 20px 0;
  }

  .hbot-compare h2 {
    font-size: 24px;
  }
}
/* ================= END HBOT COMPARISON STYLES ================= */

/* ================= END HBOT COMPARISON STYLES ================= */




/* ================= WHAT IS HBOT SECTION STYLES ================= */
.hbot-what {
  background: #F6ECDC;
  padding: 20px 0;
}

.hbot-what-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 22px;
}

.hbot-what h2 {
  font-size: 28px;
 color: #B87945;
  margin-bottom: 18px;
}

.hbot-what .lead-text {
  font-size: 16px;
  line-height: 1.75;
  color: #3E2F25;
  margin-bottom: 16px;
}

.hbot-what p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3E2F25;
  margin-bottom: 18px;
}

/* BENEFITS GRID */
.hbot-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 32px 0;
}

.benefit-item {
  background:#EEDDC7;
  border: 1px solid #e6eef4;
  border-radius: 10px;
  padding: 20px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.benefit-item img {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.benefit-item p {
  margin: 0;
  font-size: 14.5px;
  color: #3E2F25;
}

/* MEDICAL STATEMENT */
.medical-statement {
  background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 18px 20px;
  font-size: 14.8px;
  color: #3E2F25;
  border-radius: 6px;
}

/* MOBILE */
@media (max-width: 768px) {
  .hbot-what {
    padding: 20px 0;
  }

  .hbot-benefits-grid {
    grid-template-columns: 1fr;
  }

  .hbot-what h2 {
    font-size: 24px;
  }
}
/* ================= END WHAT IS HBOT SECTION STYLES ================= */


/* ================= BEST HBOT CHAMBER STYLES ================= */
.best-hbot {
  background: #FFF9F2;
  padding: 20px 0;
}

.best-hbot-container {
  max-width: 1000px;
  margin: auto;
  padding: 0 22px;
}

/* HEADER */
.best-hbot-header h2 {
  font-size: 28px;
  color: #B87945;
  margin-bottom: 14px;
}

.best-hbot-header p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3E2F25;
  max-width: 850px;
}

/* CHECKLIST */
.best-hbot-checklist {
  margin: 36px 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.check-item {
  background: #EEDDC7;
  border: 1px solid #e6eef4;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 15px;
  color: #3E2F25;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* NOTE */
.best-hbot-note {
   background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 18px 22px;
  font-size: 15px;
  color: #3E2F25;
  border-radius: 6px;
  max-width: 900px;
}

/* MOBILE */
@media (max-width: 768px) {
  .best-hbot {
    padding: 20px 0;
  }

  .best-hbot-header h2 {
    font-size: 24px;
  }

  .best-hbot-checklist {
    grid-template-columns: 1fr;
  }
}
/* ================= END BEST HBOT CHAMBER STYLES ================= */


/* ================= HBOT TREATMENT PROCESS STYLES ================= */
.hbot-process {
  background: #F6ECDC;
  padding: 20px 0;
}

.hbot-process-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 22px;
}

/* HEADER */
.hbot-process-header h2 {
  font-size: 28px;
  color: #B87945;
  margin-bottom: 14px;
}

.hbot-process-header p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3E2F25;
  max-width: 850px;
}

/* STEPS */
.process-steps {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.process-step {
  background: #EEDDC7;
  border: 1px solid #e6eef4;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.step-icon {
  font-size: 28px;
  line-height: 1;
}

.step-content h3 {
  font-size: 16.5px;
  color:#2A1E16;
  margin-bottom: 6px;
}

.step-content p {
  font-size: 14.8px;
  line-height: 1.6;
  color: #3E2F25;
}

/* NOTE */
.process-note {
  margin-top: 36px;
   background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 18px 22px;
  font-size: 15px;
  color: #3E2F25;
  border-radius: 6px;
  max-width: 900px;
}

/* MOBILE */
@media (max-width: 768px) {
  .hbot-process {
    padding: 20px 0;
  }

  .hbot-process-header h2 {
    font-size: 24px;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }
}
/* ================= END HBOT TREATMENT PROCESS STYLES ================= */


/* ================= HBOT COST SECTION STYLES ================= */
.hbot-cost {
  background: #FFF9F2;
  padding: 20px 0;
}

.hbot-cost-container {
  max-width: 1000px;
  margin: auto;
  padding: 0 22px;
}

/* HEADER */
.hbot-cost-header h2 {
  font-size: 28px;
  color: #B87945;
  margin-bottom: 12px;
}

.hbot-cost-header p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3E2F25;
  max-width: 820px;
}

/* QUESTIONS */
.cost-questions {
  margin: 30px 0 36px;
  padding-left: 6px;
}

.question-item {
  font-size: 15px;
  color: #3E2F25;
  margin-bottom: 8px;
}

/* COST FACTORS BOX */
.cost-factors-box {
  background: #EEDDC7;
  border: 1px solid #e6eef4;
  border-radius: 14px;
  padding: 26px 24px;
}

.cost-factors-box h3 {
  font-size: 18px;
  color: #2A1E16;
  margin-bottom: 14px;
}

.cost-factors {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cost-factors li {
  font-size: 15px;
  color:#3E2F25;
  margin-bottom: 10px;
}

/* MEDICAL NOTE */
.cost-medical-note {
  margin-top: 34px;
   background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 18px 22px;
  font-size: 15px;
  color: #3E2F25;
  border-radius: 6px;
  max-width: 900px;
}

/* MOBILE */
@media (max-width: 768px) {
  .hbot-cost {
    padding: 20px 0;
  }

  .hbot-cost-header h2 {
    font-size: 24px;
  }
}
/* ================= END HBOT COST SECTION STYLES ================= */


/* ================= HBOT MEDICAL SUPERVISION STYLES ================= */
.hbot-supervision {
 background: #F6ECDC;
  padding: 20px 0;
}

.hbot-supervision-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 22px;
}

/* HEADER */
.hbot-supervision-header h2 {
  font-size: 28px;
  color: #B87945;
  margin-bottom: 12px;
}

.hbot-supervision-header p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3E2F25;
  max-width: 850px;
}

/* PILLARS GRID */
.supervision-pillars {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.pillar {
  background: #EEDDC7;
  border: 1px solid #e6eef4;
  border-radius: 14px;
  padding: 26px 22px;
}

.pillar-icon {
  font-size: 26px;
  display: block;
  margin-bottom: 12px;
}

.pillar h3 {
  font-size: 16px;
  color: #2A1E16;
  margin-bottom: 8px;
}

.pillar p {
  font-size: 14.8px;
  line-height: 1.6;
  color: #3E2F25;
}

/* NOTE */
.supervision-note {
  margin-top: 36px;
  background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 18px 22px;
  font-size: 15px;
  color: #3E2F25;
  border-radius: 6px;
  max-width: 900px;
}

/* MOBILE */
@media (max-width: 1024px) {
  .supervision-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hbot-supervision {
    padding: 20px 0;
  }

  .hbot-supervision-header h2 {
    font-size: 24px;
  }

  .supervision-pillars {
    grid-template-columns: 1fr;
  }
}
/* ================= END HBOT MEDICAL SUPERVISION STYLES ================= */




/* ================= DERMATRICO DIFFERENTIATOR STYLES ================= */
.hbot-standout {
  background: #FFF9F2;
  padding: 20px 0;
}

.hbot-standout-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

/* IMAGE */
.standout-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
}

/* CONTENT */
.standout-content h2 {
  font-size: 30px;
  color: #B87945;
  margin-bottom: 16px;
}

.standout-content .intro-text {
  font-size: 15.8px;
  line-height: 1.7;
  color: #3E2F25;
  margin-bottom: 22px;
}

/* CHECKLIST */
.standout-points {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.standout-points li {
  font-size: 15.5px;
  color: #3E2F25;
  margin-bottom: 10px;
}

/* NOTE */
.standout-note {
  background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 18px 22px;
  font-size: 15px;
  color: #3E2F25;
  border-radius: 6px;
  max-width: 600px;
}

/* MOBILE */
@media (max-width: 900px) {
  .hbot-standout {
    padding: 20px 0;
  }

  .hbot-standout-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .standout-content h2 {
    font-size: 24px;
  }
}
/* ================= END DERMATRICO DIFFERENTIATOR STYLES ================= */

/* ================= HBOT FAQ SECTION STYLES ================= */
.hbot-faq {
 background: #F6ECDC;
  padding: 20px 0;
}

.hbot-faq-container {
  max-width: 900px;
  margin: auto;
  padding: 0 22px;
}

.hbot-faq h2 {
  font-size: 28px;
  color: #B87945;
  margin-bottom: 36px;
}

/* FAQ ITEM */
.faq-item {
  border-bottom: 1px solid #e6eef4;
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.faq-item h3 {
  font-size: 17px;
  color: #2A1E16;
  margin-bottom: 8px;
}

.faq-item p {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3E2F25;
  margin: 0;
}

/* MOBILE */
@media (max-width: 768px) {
  .hbot-faq {
    padding: 20px 0;
  }

  .hbot-faq h2 {
    font-size: 24px;
  }

  .faq-item h3 {
    font-size: 16px;
  }
}
/* ================= END HBOT FAQ SECTION STYLES ================= */


/* ================= DOCTOR AUTHORITY STYLES ================= */
.hbot-doctor {
  background: #FFF9F2
;
  padding: 20px 0;
}

.hbot-doctor-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 22px;
}

/* CARD */
.doctor-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items: center;
}

/* IMAGE */
.doctor-image img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* CONTENT */
.doctor-info h2 {
  font-size: 28px;
  color: #B87945;
  margin-bottom: 14px;
}

.doctor-intro {
  font-size: 15.8px;
  line-height: 1.7;
  color: #3E2F25;
  margin-bottom: 20px;
}

/* POINTS */
.doctor-points {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.doctor-points li {
  font-size: 15px;
  color: #3E2F25;
  margin-bottom: 10px;
}

/* NOTE */
.doctor-note {
   background: linear-gradient(180deg, #F6ECDC, #fcf5ea);
  border-left: 4px solid #2A1E16;
  padding: 18px 22px;
  font-size: 15px;
  color: #3E2F25;
  border-radius: 6px;
  max-width: 700px;
}

/* MOBILE */
@media (max-width: 900px) {
  .hbot-doctor {
    padding: 20px 0;
  }

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

  .doctor-info h2 {
    font-size: 24px;
  }
}
/* ================= END DOCTOR AUTHORITY STYLES ================= */

/* REACH US SECTION – HBOT THEME */
.reach-section {
  background: #FBF1E6;
  padding: 60px 20px;
}

.reach-container {
  max-width: 1100px;
  margin: auto;
  background: #ffffff;
  border-radius: 18px;
  padding: 45px 40px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.06);
}

/* TITLE */
.reach-container h2 {
  color: #8C5A2B;
  font-size: 26px;
  margin-bottom: 10px;
  text-align: center;
}

.reach-sub {
  text-align: center;
  color: #6F5A46;
  font-size: 15px;
  margin-bottom: 35px;
}

/* STEPS */
.reach-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 35px;
}

.reach-card {
  background: #FFF8F1;
  border: 1px solid #E6D6C6;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.step-icon {
  font-size: 22px;
  color: #C8894E;
}

.reach-card p {
  margin: 0;
  font-size: 14.5px;
  color: #6F5A46;
  line-height: 1.6;
}

.reach-card strong {
  color: #8C5A2B;
}

/* MAP */
.reach-map iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* MOBILE */
@media (max-width: 768px) {
  .reach-container {
    padding: 30px 22px;
  }

  .reach-container h2 {
    font-size: 22px;
  }
}




/* REACH US SECTION – HBOT THEME */




/* Mobile Menu Footer Satar */
/* *************************************************************************************************** */
                                        /* mobile menu start */
/* *************************************************************************************************** */

/* Show only on mobile */
/* Hide on desktop by default */
.mobile-menus {
  display: none;
}

@media only screen and (max-width: 768px) {
  .mobile-menus {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:#6f6a63;
    display: flex;
    justify-content: space-around;
    /* padding: 2px 0; */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    z-index: 1000;
    border-top:2px solid #CBA938;
  }

  .mobile-menus .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 12px;
    text-decoration: none;
  }

  .mobile-menus .menu-item i {
    font-size: 30px;
    margin-bottom: 1px;
    font-weight: 500;
  }

  .call-icon {
    color: #F8E8D8; /* Bright green */
  }

  .whatsapp-icon {
    color: #25D366; /* WhatsApp green */


  }

  @keyframes ring {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg);
  color:rgb(0, 255, 0);
  font-size:large;
  }
  50% { transform: rotate(-15deg); 
  color:white;
font-size:larger}
  75% { transform: rotate(10deg); 
  color:green;}
  100% { transform: rotate(0deg); }
}

.call-icon {
  color: #F8E8D8; /* Ya aapka preferred color */
  animation: ring 1.5s infinite;
}
  
}


.whatsapp-icon {
  position: relative;
  color: #25D366;
  font-size: 24px;
}

/* Ripple Animation Circle */
.whatsapp-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(37, 211, 102, 0.3);
  transform: translate(-50%, -50%) scale(1);
  animation: ripple 1.5s infinite ease-out;
  z-index: -1; /* Send it behind the icon */
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}







/* Mobile Footer Menu Endt */




/* =========================
   DESKTOP FIXED APPOINTMENT BUTTON
========================== */
.side-appointment-btn {
  position: fixed;
  right: -10px;
  top: 45%;
  transform: translateY(-50%);
  background: #5b4542;
  color: #f6e7d2;
  padding: 14px 18px;
  border-radius: 16px 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  z-index: 999;
  transition: 0.3s;
}

.side-appointment-btn i {
  font-size: 22px;
}

.side-appointment-btn span {
  line-height: 1.2;
}

/* Hover effect */
.side-appointment-btn:hover {
  right: 0;
  background: var(--color-primary-dark);
}

/* ❌ MOBILE HIDE */
@media (max-width: 992px) {
  .side-appointment-btn {
    display: none;
  }
}




/* =========================
   DESKTOP WHATSAPP (FIXED)
========================== */
.desktop-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 28px;
  width: 56px;
  height: 56px;
  background: #25d366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  z-index: 999;
  transition: transform 0.25s ease;
}

.desktop-whatsapp:hover {
  transform: scale(1.08);
}

/* ❌ MOBILE HIDE */
@media (max-width: 992px) {
  .desktop-whatsapp {
    display: none;
  }
}























/* BANNER IMAGE  LEFT SIDE*/


.dual-slider {
  width: 460px;   
  overflow: hidden;
  border-radius: 15px;
}

.dual-track {
  display: flex;
  width: max-content;
  animation: slide 15s infinite linear;
}

.dual-slide {
  min-width: 210px;
  padding: 2px;
}

.dual-slide img {
  width: 100%;
  /*height: 140px;*/
  height: 200px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  object-fit: cover;
}


@keyframes slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}



@media(max-width:768px){

  .dual-slider{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .dual-track{
    width:100%;
  }

  .dual-slide{
    min-width:50%;
    box-sizing:border-box;
  }

  .dual-slide img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
  }

}



/* BANNER IMAGE LEFT SIDE END */






/* before and after section start */
.dt-ba-section {
       margin: auto;
    padding: 20px 20px;
    background: #F6EBDD;
    max-width: 1200px;
  }

  .dt-ba-title {
    text-align: center;
    font-size: 32px;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .dt-ba-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

  .dt-ba-card {
    background: #fff;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.08);
    transition: 0.3s ease;
  }

  .dt-ba-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 20px rgba(0,0,0,0.12);
  }

  .dt-ba-card img {
    width: 100%;
    border-radius: 10px;
    display: block;
  }

  .dt-ba-caption {
    text-align: center;
    padding-top: 10px;
    font-size: 18px;
    color: #555;
  }

  /* MOBILE VIEW */
 @media(max-width: 768px) {
  .dt-ba-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 images in one row */
    gap: 15px;
  }

  .dt-ba-title {
    font-size: 22px;
  }

  .dt-ba-card {
    padding: 8px; /* thoda compact look */
  }

  .dt-ba-caption {
    font-size: 15px;
  }
}





/* before and after section end */






/* ================= VIDEO TESTIMONIALS ================= */

.video-testimonials{
  padding:40px 15px;
  background:#fff;
  text-align:center;
}

.video-testimonials h2{
  font-size:32px;
  margin-bottom:30px;
}

.video-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
    /* grid-template-columns:repeat(4, 1fr); */
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.video-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  /* height:420px; */
  height:550px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.video-card video{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

/* Play Button */
.play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:60px;
  height:60px;
  background:var(--beige);
  border-radius:50%;
  z-index:2;
}

.play-btn::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-40%, -50%);
  border-style:solid;
  border-width:12px 0 12px 18px;
  border-color:transparent transparent transparent #fff;
}

/* Call Button */
.video-call-btn{
  display:inline-block;
  margin-top:30px;
  padding:14px 28px;
  background:var(--beige);
  color:#fff;
  font-size:18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
}

/* ================= VIDEO POPUP ================= */
/* ================= VIDEO POPUP FIX ================= */

.video-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
  padding:15px;
}

/* 👇 HEIGHT CONTROL HERE */
.video-popup-inner{
  position:relative;
  width:100%;
  max-width:420px;

  /* IMPORTANT */
  max-height:80vh;              /* 👈 screen se bahar nahi jayega */
  background:#000;
  border-radius:14px;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* 👇 VIDEO WILL FIT INSIDE */
.video-popup-inner video{
  width:100%;
  height:auto;
  max-height:80vh;
  object-fit:contain;
}

/* ✅ CLOSE BUTTON — ALWAYS VISIBLE */
.video-close-btn{
  position:absolute;
  top:8px;
  right:8px;

  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:#fff;
  color:#000;

  font-size:20px;
  font-weight:bold;
  cursor:pointer;

  z-index:999;
}

/* MOBILE EXTRA SAFETY */
@media(max-width:768px){
  .video-popup-inner{
    max-height:75vh;
  }
}


/* nichay wala code ta use karo jab ek view mai 2 view video or grid mai show karna ho */

/* MOBILE */
/* @media(max-width:768px){
  .video-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .video-card{
    height:300px;
  }
} */



/* above wala code ta use karo jab ek view mai 2 view video or grid mai show karna ho */


/* nichay wala code ta use karo jab mobile mai scroable banna ho */

@media (max-width: 768px) {

  .video-grid {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
  }

  .video-grid::-webkit-scrollbar {
    display: none;
  }

  .video-card {
    flex: 0 0 85%;   /* 85% = second video half visible */
    height: 400px;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
  }

  .video-card video,
  .video-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

}


/* uppar wala code ta use karo jab mobile mai scroable banna ho */