/* 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 ================= */

/* ================= END HBOT MEDICAL OVERVIEW STYLES ================= */

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

/* ===================================== */
/* HBOT INTRO STORY SECTION STYLING START */
/* ===================================== */

.hbot-story {
  padding: 10px 20px;
  background: linear-gradient(135deg, #FFF9F2 0%,#FFF9F2);
  text-align: center;
}

/* ===== Container ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Section Heading ===== */
.section-title {
  font-size: 40px;
  font-weight: 700;
  color: #B89663;
  margin-bottom: 5px;
}

.section-tagline {
  font-size: 20px;
  color: black;
  margin-bottom: 5px;
}

/* ===== Grid Layout ===== */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}

/* ===== Content Blocks ===== */
.story-block {
  background: #ffffff;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  text-align: left;
  transition: all 0.3s ease;
}

.story-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.story-block h3 {
  font-size: 18px;
  color: #0d2c54;
  margin-bottom: 10px;
}

.story-block p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* ===== Highlight Card ===== */
.story-block.highlight {
  border-left: 5px solid #C6A87D;
}

/* ===== Center Image ===== */
.story-image img {
  width: 100%;
  max-width: 420px;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.1);
}

/* ===================================== */
/* RESPONSIVE STYLING START */
/* ===================================== */

@media (max-width: 992px) {

  .story-grid {
    grid-template-columns: 1fr;
  }

  .story-image {
    order: -1; /* Image upar aayega mobile me */
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 28px;
  }

  .section-tagline {
    font-size: 16px;
  }

  .story-block {
    padding: 20px;
  }

}

/* ===================================== */
/* HBOT INTRO STORY SECTION STYLING END */
/* ===================================== */



/* ===================================== */
/* HBOT PROCESS SECTION START */
/* ===================================== */

.hbot-process {
  padding: 100px 20px;
  background: #f8fbff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.process-title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #B89663;
  margin-bottom: 70px;
}

/* Layout */

.process-wrapper {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 40px;
  align-items: start;
}

/* Left Side */

.process-step {
  margin-bottom: 40px;
}

.process-step h3 {
  font-size: 18px;
  color: #B89663;
  margin-bottom: 10px;
}

.process-step p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

/* Center Line */

.process-line {
  width: 3px;
  background: linear-gradient(to bottom, #B89663, #B89663);
  height: 100%;
  margin: 0 auto;
  border-radius: 2px;
}

/* Right Side Benefits */

.process-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.benefit-card {
  background: #ffffff;
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  font-weight: 500;
  color:#B89663;
  box-shadow: 0 12px 30px rgba(0,0,0,0.05);
  transition: 0.3s ease;
}

.benefit-card:hover {
  transform: translateX(6px);
}

.benefit-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
/* Footer */

.process-footer {
  margin-top: 60px;
  text-align: center;
}

.process-footer p {
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
  color: #555;
}

/* Responsive */

@media (max-width: 992px) {

  .process-wrapper {
    grid-template-columns: 1fr;
  }

  .process-line {
    display: none;
  }

  .process-title {
    font-size: 26px;
  }

}







/* ==============================
   HBOT PROCESS SECTION images
============================== */

.hbot-process {
  padding: 10px 20px;
  background: linear-gradient(to bottom, #f5f1ea, #ffffff);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Heading */

.section-title {
  font-size: 36px;
  font-weight: 600;
  color: #B87945;
  text-align: center;
  margin-bottom: 15px;
}

.section-desc {
  text-align: center;
  color: #6d5c4f;
  max-width: 750px;
  margin: 0 auto 5px auto;
  font-size: 16px;
  line-height: 1.7;
}

/* ==============================
   GRID LAYOUT
============================== */

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 per row */
  gap: 10px;
  justify-items: center;
}

/* ==============================
   IMAGE STYLE (MEDIUM SIZE)
============================== */

.process-item img {
  width: 100%;
  max-width: 340px;      /* 🔥 controlled size */
  height: 220px;         /* 🔥 uniform height */
  object-fit: cover;     /* crop properly */
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

/* Hover Effect */

.process-item img:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 992px) {

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

  .section-title {
    font-size: 28px;
  }
}

@media (max-width: 600px) {

  .process-grid {
    grid-template-columns: 1fr;
  }

  .process-item img {
    max-width: 100%;
    height: auto;
  }
}




/* ===================================== */
/* CONDITIONS IMAGE SECTION START */
/* ===================================== */

.hbot-conditions-img {
  padding: 10px 20px;
  background: #FFF9F2;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.conditions-title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #B89663;
  margin-bottom: 20px;
}

.conditions-intro {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 60px auto;
  font-size: 16px;
  color: #555;
}

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

.condition-card {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.05);
  transition: 0.3s ease;
}

.condition-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

/* Image styling */

.condition-card img {
  width: 100%;
  height: 220px; /* Mid-size */
  object-fit: cover;
}

/* Text content */

.card-content {
  padding: 22px;
}

.card-content h3 {
  font-size: 18px;
  color: #B89663;
  margin-bottom: 10px;
}

.card-content p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* Responsive */

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

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

  .condition-card img {
    height: 200px;
  }

  .conditions-title {
    font-size: 26px;
  }
}













/* ================= FAQ================= */





.hbot-faq {
  padding: 80px 20px;
  background: #f9f6f1;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.faq-title {
  text-align: center;
  font-size: 36px;
  color: #3e2f24;
  margin-bottom: 50px;
}

.faq-item {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 25px;
  font-size: 18px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  color: #4a3a2e;
  transition: 0.3s;
}

.faq-question:hover {
  background: #efe8df;
}

.faq-answer {
  display: none;
  padding: 20px 25px;
  background: #ffffff;
  font-size: 15px;
  color: #6b5b4e;
  line-height: 1.7;
}

.faq-answer ul {
  padding-left: 20px;
}

.faq-answer li {
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .faq-title {
    font-size: 26px;
  }
}








/* ================= 3 ATA HBOT CHAMBER STYLES ================= */

/* ================= END 3 ATA HBOT CHAMBER STYLES ================= */

/* ================= SQUARE HBOT CHAMBER STYLES ================= */

/* ================= 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 ================= */

/* ================= END WHAT IS HBOT SECTION STYLES ================= */


/* ================= BEST HBOT CHAMBER STYLES ================= */

/* ================= 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 */