/*------------------------------------------------------------------
[Table of contents]

1. Import libraries
2. Custom properties
3. General Styles
4. Typography
5. Header and Navbar
6. Buttons and Links
7. Utilities
8. Sections
9. Swiper
10.Boxes and Cards
11.Footer
12.Accordion
13.Error 404
14.Responsive Layouts

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

/* ---------------------------- */
/* Import libraries             */
/* ---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('vendor/bootstrap.min.css');

/* ---------------------------- */
/* Custom properties            */
/* ---------------------------- */
html,
body {
  overflow-x: hidden;
  width: 100%;
}

:root {
  --primary-color: #1747A6;
  --secondary-color: #F291A3;
  --text-color: #191919;
  --text-color-2: #7A7A7A;
  --accent-color: #3B67BF;
  --accent-color-2: #F2BBC5;
  --accent-color-3: #FBEAED;
  --font-1: "Nunito", sans-serif;
  --font-2: "Source Sans 3", sans-serif;
}

/* ---------------------------- */
/* General Styles               */
/* ---------------------------- */
body {
  font-family: var(--font-2);
  color: var(--text-color);
  background-color: #FFFFFF;
}

.bg-primary-color {
  background-color: var(--primary-color);
}

.bg-primary-color-2 {
  background-color: var(--accent-color);
}

.bg-secondary-color {
  background-color: var(--secondary-color);
}

.bg-secondary-color-2 {
  background-color: var(--accent-color-2);
}

.bg-accent-color {
  background-color: var(--accent-color-2);
}

.bg-accent-color-2 {
  background-color: var(--accent-color-3);
}

.bg-gradient-primary {
  background: linear-gradient(to bottom, var(--primary-color), #518ef8);
}

/* .offcanvas-body {
  background-color: #000 !important;
} */

.offcanvas-header {
  background-color: #000 !important;
}

/* .bg-gradient-secondary {
  background: linear-gradient(45deg, #8BACEE, #F7D3DA);
} */

.bg-gradient-secondary {
  background: linear-gradient(135deg,
      #fdafbd 0%,
      #fde2e7 50%,
      #fff1f4 100%);
}


.text-primary-color {
  color: #fc0001;
}

/* .text-primary-color {
  color: var(--primary-color);
} */

.text-black-color-2 {
  color: var(--text-color);
}

.text-secondary-color-2 {
  color: var(--secondary-color);
}

.text-muted-color {
  color: var(--text-color-2);
}

.accent-primary-color {
  color: var(--accent-color);
}

.accent-secondary-color {
  color: var(--accent-color-2);
}

.accent-tertiary-color {
  color: var(--accent-color-3);
}

.font-1 {
  font-family: var(--font-1);
}

.font-2 {
  font-family: var(--font-2);
}

.section {
  padding: 6em 2em 6em 2em;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.b-container {
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
}

/* ---------------------------- */
/* Typography                   */
/* ---------------------------- */
h1 {
  font-size: 72px;
}

h2 {
  font-size: 48px;
}

h3 {
  font-size: 32px;
}

h4 {
  font-size: 26px;
}

h5 {
  font-size: 22px;
}

h6 {
  font-size: 20px;
}

button,
a {
  font-size: 18px;
  font-family: var(--font-1);
}

ul {
  list-style: none;
}

p,
li {
  font-size: 18px;
}

img {
  object-fit: cover;
}

/* ---------------------------- */
/* Header and Navbar            */
/* ---------------------------- */
.top-bar {
  background-color: #e65107;
  /* background-color: #fc0001; */

  /* padding-block: 1.2rem; */
  /* min-height: 80px; */
}

.social-box {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.social-box a {
  background-color: #fff;
  /* background-color: var(--secondary-color); */
  text-align: center;
  vertical-align: middle;
  transition: all 0.3s ease-in-out;
}

.social-box a:hover {
  background-color: var(--accent-color-2);
  /* transform: scale(1.1); */
}

.logo-box img {
  max-height: 63px;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.nav-link {
  font-size: 1.15rem;
  color: #fff;
  /* color: var(--text-color); */
  font-weight: 600;
  padding-block: 1.85rem;
  padding-inline: 1.50rem;
}

.nav-link:hover {
  color: #e65100 !important;
}

.nav-link.active {
  /* color: var(--primary-color) !important; */
  color: #fdafbd !important;

}

/* Mobile Navbar Link Color */
@media (max-width: 991px) {
  .nav-link {
    color: #000 !important;
  }
}

.dropdown-menu {
  border: 0;
  border-radius: 0 0 25px 25px;
  padding: 15px 0px;
  width: 220px;
  -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
}

.dropdown-item {
  color: var(--text-color);
  font-size: 1.15rem;
  padding: 15px;
  font-weight: 600;
  padding-block: 0.75rem;
  padding-inline: 0.75rem;
}

.dropdown-item:hover {
  color: var(--accent-color) !important;
  background-color: transparent;
}

.dropdown-item:focus {
  color: var(--accent-color) !important;
}

.dropdown-item.active {
  color: var(--primary-color) !important;
  background-color: transparent;
}

/* ---------------------------- */
/* Buttons and Links            */
/* ---------------------------- */
.btn-quotes {
  width: 250px;
  background: linear-gradient(135deg, #e65100, #ff8f00);
  /* background-color: var(--text-color); */
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  border: none;
  transition: all 0.3s ease;
}

.btn-quotes:hover {
  background: linear-gradient(135deg, #e60000, #c40000);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(252, 0, 1, 0.45);
  color: #FFFFFF;
  border: none;
}

.btn-primary-solid {
  background: linear-gradient(135deg, #c40000, #ff4444);
  color: #FFFFFF;
  font-size: 1.15rem;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  border: none;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.btn-primary-solid:hover {
  background-color: var(--accent-color);
  color: #FFFFFF;
  border: none;
  transform: scale(1.1);
}

.btn-secondary-solid {
  background-color: var(--secondary-color);
  color: #FFFFFF;
  font-size: 1.15rem;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  border: none;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.btn-secondary-solid:hover {
  background-color: var(--accent-color-2);
  color: #FFFFFF;
  border: none;
  transform: scale(1.1);
}

.btn-secondary-solid-2 {
  background-color: var(--secondary-color);
  color: #FFFFFF;
  font-size: 1.15rem;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  border: none;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.btn-secondary-solid-2:hover {
  background-color: var(--primary-color);
  color: #FFFFFF;
  border: none;
  transform: scale(1.1);
}

.links-primary {
  font-family: var(--font-2);
  color: var(--text-color);
  font-size: 18px;
  text-decoration: none;
}

.links-primary:hover {
  color: var(--primary-color);
  text-decoration: none;
}

.links-secondary {
  font-family: var(--font-2);
  color: #FFFFFF;
  font-size: 18px;
  text-decoration: none;
}

.links-secondary:hover {
  color: var(--secondary-color);
  text-decoration: none;
}

.badge-primary-color {
  background-color: var(--primary-color);
  color: #FFFFFF;
  font-size: 18px;
  padding: 8px 16px;
  border-radius: 30px;
  font-weight: 600;
}

.badge-primary-color:hover {
  background-color: var(--accent-color);
  color: #FFFFFF;
}

/* ---------------------------- */
/* Utilities                    */
/* ---------------------------- */
.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.video-box {
  width: 100%;
  max-width: 960px;
  height: auto;
}

.video-overlay .ratio {
  width: 100%;
  height: auto;
}

.video-overlay iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.img-container {
  width: 100%;
  max-width: 100%;
  max-width: 1000px;
}

.ratio-wrapper-429 {
  position: relative;
  aspect-ratio: 3 / 4;
  /* default: portrait */
  overflow: hidden;
}

.img-circle {
  width: 275px;
  height: 275px;
}

.ratio-wrapper-419 {
  position: relative;
  aspect-ratio: 3 / 4;
  /* default: portrait */
  overflow: hidden;
}

.bg-overlay-secondary {
  background: linear-gradient(45deg, rgba(59, 103, 191, 0.9), rgba(247, 211, 218, 0.8));
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.transition-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.transition-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.scale-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scale-hover:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.bg-secondary-gradient {
  background: linear-gradient(to right, white 0%, white 50%, #F8DAE0 50%, #F7D9DF 100%);
}

.breadcrumb {
  font-size: 22px;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: white !important;
}

.breadcrumb-item a:hover,
.breadcrumb-item.active {
  color: white !important;
}

.list-unstyled {
  padding-left: 0;
  margin-bottom: 0;
}

/* ---------------------------- */
/* Sections                     */
/* ---------------------------- */
.banner-section {
  position: relative;
  overflow: hidden;
  padding: 50px 75px 0 75px;
  color: white;
}

.hero-section {
  background-image: url('../image/homebanner.png');
  background-size: cover;
  background-position: center;
  padding-bottom: 80px;
}

.hero-section {
  position: relative;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.45) 40%,
      rgba(0, 0, 0, 0.25) 100%);
  z-index: 0;
}

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


@media (max-width: 768px) {

  .hero-section {
    background-position: center bottom !important;
    background-size: cover !important;
    padding-top: 100px !important;
    padding-bottom: 60px !important;
    text-align: center !important;
  }

  .hero-section h1 {
    font-size: 36px !important;
    line-height: 1.25 !important;
  }

  .hero-section h1 span {
    font-size: 32px !important;
  }

  .hero-section p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .hero-section hr {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hide floating badges on mobile */
  .badge-cta {
    display: none !important;
  }
}

/* ---------------------------- */
/* Swiper                       */
/* ---------------------------- */
.swiper-container-outer {
  position: relative;
  overflow: hidden;
}

.swiper {
  padding: 30px 0;
}

.swiper-slide {
  height: auto;
}

/* ---------------------------- */
/* Boxes and Cards              */
/* ---------------------------- */
.step-box {
  position: relative;
  margin-bottom: 3rem;
}

.step-box h1 {
  position: absolute;
  font-family: var(--font-1);
  font-weight: 900;
  opacity: 0.85;
  top: -50px;
  left: 13%;
  transform: translateX(-50%);
  z-index: 0;

  background: linear-gradient(180deg, #ff7f00 0%, #dda121 55%, #ff7a7a 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* .step-box h1 {
  position: absolute;
  font-family: var(--font-1);
  font-weight: 900;
  opacity: 0.8;
  top: -50px;
  left: 13%;
  transform: translateX(-50%);
  z-index: 0;
  background:
    -webkit-linear-gradient(var(--primary-color), #9abbfd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} */

.step-box h3 {
  position: relative;
  font-family: var(--font-1);
  font-weight: 700;
  margin: 25px 0 20px 0;
  z-index: 1;
}

.step-box p {
  position: relative;
  z-index: 1;
}

.feedback-card {
  background: #fff;
  border: var(--primary-color) 2px solid;
  border-radius: 30px;
  padding: 35px;
}

.quotes-section {
  padding: 6em 2em 6em 2em;
  position: relative;
  overflow: hidden;
}

.quotes-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75%;
  background-image: url('../image/men-and-women-sitting-in-a-circle-during-group-the-2024-10-21-08-45-31-utc.jpg');
  background-size: cover;
  background-position: center center;
  opacity: 0.8;
  z-index: -1;
  /* place behind of content */
}

.quotes-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(58, 95, 169, 0.9), rgba(244, 197, 206, 0.8));
  opacity: 0.9;
  z-index: 1;
  /* place in-front of content */
}

.quotes-section>.container {
  position: relative;
  /* Force container in-front of background */
  z-index: 2;
}

.quotes-section>.card {
  margin-top: 30px;
  /* Space from heading */
}

.news-card {
  border: 2px solid var(--primary-color);
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}

.news-card .card-title {
  font-family: var(--font-1);
  font-weight: 800;
  text-decoration: none;
}

.news-card .card-title:hover {
  font-family: var(--font-1);
  font-weight: 800;
  /* font-size: 22px; */
  text-decoration: none;
  color: var(--primary-color);
}

/* ---------------------------- */
/* Footer                       */
/* ---------------------------- */
.footer {
  position: relative;
  overflow: hidden;
  color: white;
}

.footer-background {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../image/multiethnic-women-with-tattoo-and-coffee-to-go-hol-2024-11-08-08-18-58-utc.jpg');
  background-size: cover;
  background-position: center center;
  z-index: -1;
}

.footer-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));
  /* background: linear-gradient(to bottom, rgba(23, 71, 166, 0.9), rgba(59, 103, 191, 0.9)); */
  z-index: 1;
  /* place in-front of content */
}

.footer-logo>img {
  max-height: 140px;
}

/* ---------------------------- */
/* Accordion                    */
/* ---------------------------- */
.accordion .accordion-item {
  border: none;
  margin-bottom: 1rem;
  border-radius: 1.5rem;
  overflow: hidden;
  background-color: transparent;
}

.accordion .accordion-button {
  font-size: large;
  font-weight: 700;
  color: #fff;
  background-color: var(--accent-color);
  /* Default blue */
  border-radius: 1.5rem;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: none;
}

.accordion .accordion-button.collapsed {
  background-color: var(--accent-color);
  /* Blue for collapsed */
  color: #fff;
}

.accordion .accordion-button:not(.collapsed) {
  background-color: var(--accent-color-2);
  /* Pink for expanded */
  color: #000;
}

.accordion .accordion-button:focus {
  box-shadow: none;
}

.accordion i {
  font-size: 1.2rem;
}

.accordion .accordion-collapse {
  margin-top: 0.5rem;
  /* Gap between header and body */
}

.accordion .accordion-body {
  font-size: large;
  background-color: #F5F5F5;
  padding: 1.5rem;
  border-radius: 1rem;
  /* margin-top: 0.5rem; */
  color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* ---------------------------- */
/* Error 404                    */
/* ---------------------------- */
.error-code {
  font-size: 18rem;
  font-weight: 900;
  line-height: 1;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.error-code span:nth-child(2) {
  background: linear-gradient(180deg, var(--primary-color), #FFC2B3);
  color: white;
  padding: 20px 0;
  border-radius: 1.5rem;
}

/* ---------------------------- */
/* Responsive Layouts           */
/* ---------------------------- */
@media only screen and (max-width: 1199.98px) {
  .ratio-wrapper-429 {
    aspect-ratio: 3 / 2;
  }

  .ratio-wrapper-419 {
    aspect-ratio: 1 / 1;
  }

  .step-box h1 {
    left: 17%;
  }
}

@media only screen and (max-width: 991.98px) {

  /* ---------------------------- */
  /* Typography                   */
  /* ---------------------------- */
  h1 {
    font-size: 56px;
  }

  h2 {
    font-size: 40px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 20px;
  }

  h6 {
    font-size: 18px;
  }

  button,
  a {
    font-size: 17px;
  }

  p {
    font-size: 16px;
  }

  /* ---------------------------- */
  /* Header and Navbar            */
  /* ---------------------------- */
  /* padding: 4em 2em 4em 2em; */
  .section {
    padding: 4em 1em;
  }

  .top-bar {
    display: none;
  }

  .logo-box img {
    max-height: 86px;
  }

  .logo-drawer img {
    max-height: 60px;
  }

  .nav-link {
    font-size: 1rem;
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
  }

  .nav-link.active,
  .nav-link:hover,
  .nav-link:focus {
    color: #fff !important;
  }

  .nav-link.active,
  .nav-link:hover,
  .nav-link:focus {
    color: var(--primary-color) !important;
  }

  .navbar-nav .nav-link {
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
  }

  .dropdown-menu {
    border-radius: 0;
    width: 100%;
    padding: 5px 0px 5px 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .dropdown-item {
    font-size: 1rem;
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
  }

  .btn-quotes {
    display: none;
  }

  .img-circle {
    width: 275px;
    height: 275px;
  }

  .step-box h1 {
    left: 5%;
  }

  .feedback-slide {
    width: 33.333%;
    /* 3 slides per-row for desktop */
  }

  .bg-secondary-gradient {
    background: linear-gradient(to top, white 0%, white 62%, #F8DAE0 62%, #F7D9DF 100%);
  }

  .quotes-section {
    position: relative;
    /* Force container in-front of background */
    overflow: hidden;
    padding: 0;
  }

  .quotes-section>.container {
    position: relative;
    /* Force container in-front of background */
    z-index: 2;
    padding: 0;
  }

  .quotes-section>.card {
    margin-top: 70px;
  }

  .img-container {
    width: 90%;
  }

  .ratio-wrapper-429 {
    aspect-ratio: 16 / 9;
  }

  .img-circle {
    width: 300px;
    height: 300px;
  }

  .footer-logo {
    text-align: center;
    padding: 0 4rem;
  }

  .footer-logo>img {
    max-height: 85px;
  }

  .error-code {
    font-size: 15rem;
  }
}

@media only screen and (max-width: 767.98px) {
  .btn-play {
    width: 80%;
  }

  .badge-cta {
    display: none;
  }

  .bg-secondary-gradient {
    background: linear-gradient(to top, white 0%, white 61%, #F8DAE0 61%, #F7D9DF 100%);
  }

  .img-container {
    width: 85%;
  }

  .ratio-wrapper-429 {
    aspect-ratio: 1 / 1;
  }

  .img-circle {
    width: 300px;
    height: 300px;
  }

  .step-box h1 {
    left: 6%;
  }

  .footer-logo>img {
    max-height: 65px;
  }
}

@media only screen and (max-width:576.98px) {
  .ratio-wrapper-429 {
    aspect-ratio: 3 / 4;
  }

  .img-circle {
    width: 185px;
    height: 185px;
  }

  .step-box h1 {
    left: 8%;
  }

  .error-code {
    font-size: 10rem;
  }
}


/* ======== NEW CSS ======== */

/* Achievement Section */
.clinic-achievement-section {
  background: linear-gradient(135deg,
      #e8f5ee,
      #d4edda,
      #b7dfc4);
}

/* Image Wrapper */
.clinic-achievement-image img {
  max-height: 420px;
  object-fit: cover;
  border-radius: 20px !important;
  box-shadow: 0 15px 40px rgba(26, 92, 42, 0.18);
  /* added: green-tinted shadow, on-brand */
  border: 4px solid #ffffff;

}

/* Badge */
.clinic-achievement-badge {
  display: inline-block;
  padding: 6px 14px;
  background-color: #ea5a00;
  /* was: bright red → now: brand dark green (EDWARD logo color) */
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* Title */
.clinic-achievement-title {
  font-weight: 800;
  color: #111111;
  margin-bottom: 16px;
}

/* Text */
.clinic-achievement-text {
  font-size: 1.05rem;
  color: #1a1a1a;
  margin-bottom: 12px;
}

/* Location */
.clinic-achievement-location {
  font-size: 1rem;
  font-weight: 600;
  color: #1a5c2a;
  /* was: dark red → now: brand dark green */
}

.clinic-achievement-location i {
  margin-right: 6px;
  color: #e65100;

}


/* ===============================
   Hero Intro Section – Ayurvedic Theme
================================= */

:root {
  --primary-green: #1f6b3a;
  --green-dark: #154d2a;
  --green-light: #7cc576;
  --green-bg: #f5fbf7;
  --green-mid: #e8f5ee;
  --primary-red: #c62828;
  --text-dark: #1a1a1a;
  --text-muted: #4a5568;
  --white: #ffffff;
}

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

body {
  font-family: 'Noto Sans Devanagari', sans-serif;
  background: var(--green-bg);
}

/* =====================
       HERO SECTION
    ===================== */
.clinic-hero-intro {
  background: linear-gradient(160deg, #ffffff 0%, #f5fbf7 45%, #e8f5ee 100%);
  padding: 60px 15px;
  overflow: hidden;
}

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

/* =====================
       MOBILE: stacked (default)
    ===================== */
.clinic-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.clinic-hero-icon img {
  width: 55px;
  margin-bottom: 18px;
}

.clinic-hero-tagline {
  color: var(--primary-green);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.6;
}

.clinic-hero-highlight {
  color: #e65107;
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 22px;
}

.clinic-hero-description {
  color: var(--text-dark);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 35px;
}

.clinic-hero-doctor img {
  /* max-width: 280px; */
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 15px 40px rgba(31, 107, 58, 0.2);
  margin-bottom: 20px;
  border: 6px solid #ffffff;
}

.clinic-hero-doctor-info h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--primary-green);
  margin-bottom: 4px;
}

.clinic-hero-doctor-info p {
  color: var(--primary-red);
  font-weight: 600;
  font-size: 0.95rem;
}

/* =====================
       DESKTOP: Two-column layout
    ===================== */
@media (min-width: 992px) {

  .clinic-hero-intro {
    padding: 80px 40px;
    position: relative;
  }

  /* Decorative background circle */
  .clinic-hero-intro::before {
    content: '';
    position: absolute;
    right: -120px;
    top: -120px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 197, 118, 0.12) 0%, transparent 70%);
    pointer-events: none;
  }

  .clinic-hero-intro::after {
    content: '';
    position: absolute;
    left: -80px;
    bottom: -80px;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 107, 58, 0.08) 0%, transparent 70%);
    pointer-events: none;
  }

  /* Two-column grid */
  .clinic-hero-content {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: auto;
    grid-template-areas:
      "text  doctor";
    align-items: center;
    gap: 60px;
    text-align: left;
  }

  /* Left column: all text */
  .clinic-hero-left {
    grid-area: text;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Right column: doctor card */
  .clinic-hero-right {
    grid-area: doctor;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  /* ---- Icon ---- */
  .clinic-hero-icon img {
    width: 60px;
    margin-bottom: 20px;
  }

  /* ---- Tagline: bolder & bigger on desktop ---- */
  .clinic-hero-tagline {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-green);
    line-height: 1.65;
    margin-bottom: 16px;
    border-left: 4px solid var(--green-light);
    padding-left: 16px;
  }

  /* ---- Heading ---- */
  .clinic-hero-highlight {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 28px;
    position: relative;
  }

  .clinic-hero-highlight::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--green-light), var(--primary-green));
    border-radius: 2px;
    margin-top: 16px;
  }

  /* ---- Description ---- */
  .clinic-hero-description {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 0;
  }

  /* ---- Doctor card on desktop ---- */
  .clinic-hero-right .doctor-card {
    background: var(--white);
    border-radius: 24px;
    padding: 36px 30px 30px;
    box-shadow:
      0 20px 60px rgba(31, 107, 58, 0.15),
      0 4px 16px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    border-top: 5px solid var(--primary-green);
  }

  /* Green badge top-right */
  .doctor-card::before {
    content: '✦ MD Ayurveda';
    position: absolute;
    top: -14px;
    right: 20px;
    background: var(--primary-green);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
  }

  .clinic-hero-doctor img {
    /* max-width: 260px;
    width: 85%; */
    border-radius: 50%;
    border: 6px solid var(--green-bg);
    box-shadow: 0 12px 35px rgba(31, 107, 58, 0.2);
    margin-bottom: 22px;
  }

  .clinic-hero-doctor-info {
    text-align: center;
  }

  .clinic-hero-doctor-info h3 {
    font-size: 1.5rem;
    margin-bottom: 6px;
  }

  .clinic-hero-doctor-info p {
    font-size: 0.92rem;
    letter-spacing: 0.5px;
  }

  /* Stats row inside card */
  .doctor-stats {
    display: flex;
    gap: 20px;
    margin-top: 24px;
    border-top: 1px solid #e8f5ee;
    padding-top: 20px;
    width: 100%;
    justify-content: center;
  }

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

  .stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-green);
    display: block;
  }

  .stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .stat-divider {
    width: 1px;
    background: #d1e8d9;
    align-self: stretch;
  }

  /* Trust badge below card */
  .trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    background: rgba(124, 197, 118, 0.12);
    border: 1px solid rgba(31, 107, 58, 0.2);
    border-radius: 40px;
    padding: 8px 18px;
    font-size: 0.82rem;
    color: var(--primary-green);
    font-weight: 600;
  }

  .trust-badge span.dot {
    width: 8px;
    height: 8px;
    background: var(--green-light);
    border-radius: 50%;
    display: inline-block;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {

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

    50% {
      opacity: 0.5;
      transform: scale(0.8);
    }
  }
}

/* Fade-in animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

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

.clinic-hero-left>* {
  animation: fadeUp 0.6s ease both;
}

.clinic-hero-left>*:nth-child(1) {
  animation-delay: 0.1s;
}

.clinic-hero-left>*:nth-child(2) {
  animation-delay: 0.22s;
}

.clinic-hero-left>*:nth-child(3) {
  animation-delay: 0.34s;
}

.clinic-hero-left>*:nth-child(4) {
  animation-delay: 0.46s;
}

.clinic-hero-right {
  animation: fadeUp 0.7s ease 0.3s both;
}

/* ===============================
   About Us – Premium Colorful Ayurvedic Design
================================= */

:root {
  --primary-green: #1f6b3a;
  --green-light: #7cc576;
  --green-soft: #e8f5ee;

  --saffron: #ff8f00;
  --saffron-dark: #e65100;

  --ayurveda-gold: #d4af37;
  --natural-bg: #f5fbf7;

  --text-dark: #2a2a2a;
}

/* ===============================
   Section Background (Rich & Layered)
================================= */
.about-ayurveda-premium {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  background:
    /* Saffron glow (brand accent) */
    radial-gradient(circle at 85% 20%, rgba(255, 143, 0, 0.25) 0%, transparent 40%),

    /* Herbal light glow */
    radial-gradient(circle at 15% 70%, rgba(124, 197, 118, 0.35) 0%, transparent 45%),

    /* Deep herbal depth */
    radial-gradient(circle at 50% 40%, rgba(31, 107, 58, 0.15) 0%, transparent 60%),

    /* Main rich gradient base (no white) */
    linear-gradient(180deg,
      #f0f8f3 0%,
      #e3f3ea 25%,
      #d2eadf 50%,
      #c0e2d3 75%,
      #aed9c7 100%);
}

/* Decorative Leaves */
.ayurveda-leaf-decoration {
  position: absolute;
  width: 300px;
  height: 300px;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%231f6b3a' d='M100,10 Q150,50 140,100 Q130,150 100,180 Q70,150 60,100 Q50,50 100,10 Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.ayurveda-leaf-decoration.left {
  top: 10%;
  left: -50px;
  transform: rotate(-20deg);
}

.ayurveda-leaf-decoration.right {
  bottom: 10%;
  right: -50px;
  transform: rotate(160deg);
}

/* ===============================
   Heading
================================= */
.about-heading-ayurveda h6 {
  letter-spacing: 3px;
  color: var(--saffron);
  font-weight: 800;
  font-size: 25px;
}

.about-heading-ayurveda h2 {
  font-size: 42px;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1.3;
}

/* Gradient highlight for main line */
.about-heading-ayurveda h2 span {
  display: block;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--primary-green), var(--saffron));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Divider */
.ayurveda-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}

.ayurveda-divider span {
  width: 90px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-green), var(--saffron));
}

.ayurveda-divider i {
  font-size: 24px;
  color: var(--saffron);
}

/* ===============================
   Image Frame
================================= */
.ayurveda-image-frame {
  position: relative;
  padding: 20px;
}

.main-image-container {
  border-radius: 25px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(31, 107, 58, 0.18);
}

.about-main-img {
  width: 100%;
  transition: transform 0.5s ease;
}

.main-image-container:hover .about-main-img {
  transform: scale(1.05);
}

/* Decorative Corners */
.ayurveda-corner {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid var(--ayurveda-gold);
}

.ayurveda-corner.top-left {
  top: -10px;
  left: -10px;
  border-right: none;
  border-bottom: none;
}

.ayurveda-corner.top-right {
  top: -10px;
  right: -10px;
  border-left: none;
  border-bottom: none;
}

.ayurveda-corner.bottom-left {
  bottom: -10px;
  left: -10px;
  border-right: none;
  border-top: none;
}

.ayurveda-corner.bottom-right {
  bottom: -10px;
  right: -10px;
  border-left: none;
  border-top: none;
}

/* ===============================
   Mini Gallery
================================= */
.mini-gallery {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  justify-content: center;
}

.mini-img {
  background: #fff;
  padding: 15px 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(31, 107, 58, 0.10);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.mini-img:hover {
  transform: translateY(-6px);
  border-color: var(--saffron);
  box-shadow: 0 18px 40px rgba(255, 143, 0, 0.18);
}

.mini-img i {
  font-size: 28px;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mini-img span {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}

/* ===============================
   Content Text
================================= */
.about-content-natural h3 {
  font-size: 30px;
  font-weight: 900;
  color: var(--text-dark);
  padding-bottom: 12px;
  position: relative;
}

.about-content-natural h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-green), var(--saffron));
}

.about-content-natural p {
  font-size: 17px;
  line-height: 1.8;
  color: #555;
}

/* Highlight Box */
.intro-highlight {
  background: linear-gradient(90deg, rgba(31, 107, 58, 0.06), rgba(255, 143, 0, 0.06));
  padding: 20px;
  border-left: 4px solid var(--saffron);
  border-radius: 10px;
  font-size: 18px;
}

/* ===============================
   Trust Badges
================================= */
.trust-badges-herbal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 35px;
}

.trust-badge {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  display: flex;
  gap: 15px;
  box-shadow: 0 10px 30px rgba(31, 107, 58, 0.10);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.trust-badge:hover {
  border-color: var(--saffron);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(255, 143, 0, 0.18);
}

.badge-icon {
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--saffron);
}

.badge-icon i {
  font-size: 24px;
  background: linear-gradient(135deg, var(--saffron), var(--saffron-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-text strong {
  font-size: 15px;
  font-weight: 700;
}

.badge-text span {
  font-size: 13px;
  color: #777;
}

/* ===============================
   Detailed Treatment Box
================================= */
.detailed-treatment-info {
  background:
    linear-gradient(135deg, #ffffff, #f8fdf9),
    radial-gradient(circle at top right, rgba(255, 143, 0, 0.08), transparent);

  padding: 45px 40px;
  border-radius: 25px;
  box-shadow: 0 25px 60px rgba(31, 107, 58, 0.12);
  border: 3px solid var(--saffron);
  margin-top: 40px;
}

.detailed-treatment-info p {
  font-size: 17px;
  line-height: 1.9;
  color: #444;
}

.detailed-treatment-info strong {
  color: var(--saffron);
}

/* Mission Ayurveda Box */
.mission-ayurveda-box {
  background: linear-gradient(135deg, #fff, var(--ayurveda-cream));
  padding: 50px 40px;
  border-radius: 25px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ayurveda-gold);
}

.mission-icon-circle {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--primary-red), var(--primary-red-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: 0 15px 35px rgba(195, 0, 0, 0.3);
  border: 5px solid rgba(255, 255, 255, 0.5);
}

.mission-icon-circle i {
  font-size: 48px;
  color: #fff;
}

.mission-ayurveda-box h4 {
  font-size: 32px;
  font-weight: 800;
  color: var(--ayurveda-green);
  margin-bottom: 20px;
}

.mission-ayurveda-box p {
  font-size: 17px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 15px;
}

.ayurveda-pattern-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      rgba(212, 175, 55, 0.03) 10px,
      rgba(212, 175, 55, 0.03) 20px);
  pointer-events: none;
}

/* Expertise Section - Ayurveda */
.expertise-ayurveda-section {
  padding: 60px 0;
}

.expertise-header {
  position: relative;
}

.herbal-icon-row {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 20px;
}

.herbal-icon-row i {
  font-size: 32px;
  color: var(--ayurveda-gold);
  opacity: 0.7;
}

.expertise-header h4 {
  font-size: 38px;
  font-weight: 900;
  color: #2a2a2a;
  margin-bottom: 10px;
}

.expertise-header .subtitle {
  font-size: 18px;
  color: var(--ayurveda-earth);
  font-weight: 600;
}

/* Expertise Cards - Completely New */
.expertise-card-ayurveda {
  background: #fff;
  padding: 40px 30px;
  border-radius: 20px;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--ayurveda-cream);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.expertise-card-ayurveda:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(195, 0, 0, 0.15);
  border-color: var(--ayurveda-gold);
}

.card-herbal-bg {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent);
  border-radius: 50%;
  transition: all 0.4s ease;
}

.expertise-card-ayurveda:hover .card-herbal-bg {
  transform: scale(1.5);
  opacity: 0.5;
}

.expertise-icon-wrapper {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--ayurveda-cream), #fff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  /* border: 3px solid var(--ayurveda-gold); */
  border: 2px solid rgba(212, 175, 55, 0.6);

  transition: all 0.3s ease;
}

.expertise-card-ayurveda:hover .expertise-icon-wrapper {
  background: linear-gradient(135deg, var(--primary-red), var(--primary-red-light));
  border-color: var(--primary-red);
  transform: rotate(360deg);
}

.expertise-icon-wrapper i {
  font-size: 36px;
  color: var(--primary-red);
  transition: all 0.3s ease;
}

.expertise-card-ayurveda:hover .expertise-icon-wrapper i {
  color: #fff;
}

.expertise-card-ayurveda h6 {
  font-size: 19px;
  font-weight: 800;
  color: #2a2a2a;
  margin-bottom: 15px;
  line-height: 1.4;
}

.expertise-card-ayurveda p {
  font-size: 15px;
  line-height: 1.7;
  color: #666;
  margin-bottom: 20px;
}

.herbal-accent-line {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-red), var(--ayurveda-gold));
  border-radius: 2px;
  transition: all 0.3s ease;
}

.expertise-card-ayurveda:hover .herbal-accent-line {
  width: 100%;
}

/* Treatment Goal - Herbal */
.treatment-goal-herbal {
  background: linear-gradient(135deg, #fff, var(--natural-bg));
  padding: 45px 40px;
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border-left: 6px solid var(--primary-red);
}

.treatment-goal-herbal h4 {
  font-size: 30px;
  font-weight: 800;
  color: var(--ayurveda-green);
  margin-bottom: 20px;
}

.treatment-goal-herbal p {
  font-size: 17px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 0;
}

.ayurveda-balance-icon {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, var(--ayurveda-cream), #fff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 4px solid var(--ayurveda-gold);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
  animation: balanceRotate 20s linear infinite;
}

.ayurveda-balance-icon i {
  font-size: 64px;
  color: var(--primary-red);
}

@keyframes balanceRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* CTA Ayurveda */
.cta-ayurveda {
  margin-top: 60px;
  padding: 60px 20px;
  position: relative;
}

.cta-herbal-frame {
  background: linear-gradient(135deg, #0d3318, #1a5c2a, #2e7d32);
  /* was: dark red → red gradient → now: very dark green → brand dark green → mid green
     mirrors the brochure's deep green sidebar flowing to lighter green */
  padding: 60px 40px;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(26, 92, 42, 0.35);
  /* was: green shadow (kept intent) → now: brand green */
}

.cta-herbal-frame::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(249, 168, 37, 0.08), transparent);
  /* was: white glow → now: gold glow (brand stars) */
  animation: ctaGlow 10s linear infinite;
}

@keyframes ctaGlow {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }
}

.cta-leaves-decoration {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='rgba(255,255,255,0.1)' d='M50,10 Q70,30 65,50 Q60,70 50,85 Q40,70 35,50 Q30,30 50,10 Z'/%3E%3C/svg%3E");
  background-size: contain;
  opacity: 0.5;
}

.cta-quote {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  line-height: 1.5;
}

/* CTA Button: white card → saffron/red on hover (brand "DR." orange + ribbon red) */
.btn-ayurveda-primary {
  background: linear-gradient(135deg, #ffffff, #fff8e1);
  /* was: white → pinkish → now: white → soft gold tint (brand stars warmth) */
  color: #1a5c2a;
  /* was: red text → now: brand dark green text on white */
  padding: 18px 45px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 50px;
  border: none;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.20);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.btn-ayurveda-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(230, 81, 0, 0.40);
  background: linear-gradient(135deg, #e65100, #c62828);
  /* was: red tones → now: saffron → brand red (DR. + ribbon) */
  color: #ffffff;
}

/* Responsive Design */
@media (max-width: 992px) {
  .about-heading-ayurveda h2 {
    font-size: 34px;
  }

  .about-content-natural {
    padding-left: 0;
    margin-top: 40px;
  }

  .nature-icon-badge {
    position: static;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .trust-badges-herbal {
    grid-template-columns: 1fr;
  }

  .detailed-treatment-info {
    padding: 35px 30px;
  }
}

@media (max-width: 768px) {
  .about-ayurveda-premium {
    padding: 60px 0;
  }

  .ayurveda-symbol {
    font-size: 36px;
  }

  .about-heading-ayurveda h2 {
    font-size: 28px;
  }

  .experience-badge-herbal {
    right: 15px;
    bottom: 15px;
  }

  .herbal-circle {
    min-width: 90px;
    min-height: 90px;
    padding: 15px 20px;
  }

  .herbal-circle strong {
    font-size: 28px;
  }

  .herbal-circle span {
    font-size: 11px;
  }

  .mini-gallery {
    flex-wrap: wrap;
  }

  .about-content-natural h3 {
    font-size: 26px;
    text-align: center;
  }

  .expertise-header h4 {
    font-size: 30px;
  }

  .mission-ayurveda-box,
  .treatment-goal-herbal,
  .cta-herbal-frame {
    padding: 30px 20px;
  }

  .detailed-treatment-info {
    padding: 30px 25px;
  }

  .detailed-treatment-info p {
    font-size: 16px;
  }

  .cta-quote {
    font-size: 20px;
  }

  .ayurveda-balance-icon {
    width: 100px;
    height: 100px;
  }

  .ayurveda-balance-icon i {
    font-size: 48px;
  }
}

@media (max-width: 576px) {
  .mini-gallery {
    gap: 10px;
  }

  .mini-img {
    padding: 12px 15px;
  }

  .mini-img i {
    font-size: 22px;
  }

  .mini-img span {
    font-size: 11px;
  }

  .detailed-treatment-info {
    padding: 25px 20px;
  }

  .detailed-treatment-info p {
    font-size: 15px;
    line-height: 1.8;
  }
}

/* =========================
   Consultation CTA Section
========================= */

.cta-consult-ayurveda {
  position: relative;
  padding: 90px 0;
  background-image: url('../image/bg2.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Overlay: deep green (left) → saffron-tinted (right) — mirrors brochure's green sidebar + white body */
.cta-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(26, 92, 42, 0.92),
      rgba(46, 125, 50, 0.80) 40%,
      rgba(230, 81, 0, 0.78));
  z-index: 1;
}

.cta-consult-ayurveda .b-container {
  position: relative;
  z-index: 2;
}

/* Left Content */
/* Badge: gold stars feel from brochure */
.cta-badge {
  display: inline-block;
  background: #f9a825;
  /* brand gold */
  color: #1a5c2a;
  /* brand green dark */
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  margin-bottom: 15px;
  letter-spacing: 0.4px;
}

.cta-title {
  font-size: 42px;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 20px;
  color: #ffffff;
}

/* Highlighted words in saffron (mirrors "DR." orange in logo) */
.cta-title span {
  color: #ffcc80;
  /* soft saffron/gold tint on dark green bg */
}

.cta-desc {
  font-size: 18px;
  line-height: 1.7;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.92);
}

.cta-points {
  list-style: none;
  padding: 0;
  margin-top: 25px;
}

.cta-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  margin-bottom: 10px;
  color: #ffffff;
}

/* Icons: lime green — matches brochure's bottom lime bar */
.cta-points i {
  color: #aed581;
  /* brand lime green, lighter for icon on dark bg */
  font-size: 20px;
}

/* Call Card */
.call-card-ayurveda {
  background: #ffffff;
  border-radius: 25px;
  padding: 45px 35px;
  box-shadow:
    0 25px 60px rgba(26, 92, 42, 0.30),
    /* green shadow instead of red */
    0 4px 16px rgba(0, 0, 0, 0.10);
  text-align: center;
  border-top: 5px solid #1a5c2a;
  /* dark green top accent like brochure sidebar */
}

.call-card-ayurveda h3 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #1a5c2a;
  /* brand green dark */
}

.call-card-ayurveda p {
  color: #555;
  font-size: 16px;
  margin-bottom: 30px;
}

/* Call Button: saffron-to-red gradient (mirrors "DR." orange + ribbon red from brochure) */
/* .btn-call-now {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #e65100, #c62828);
  color: #fff;
  padding: 18px;
  border-radius: 60px;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 15px 35px rgba(198, 40, 40, 0.35);
  margin-bottom: 15px;
  transition: box-shadow 0.3s, transform 0.2s;
}

.btn-call-now:hover {
  box-shadow: 0 18px 40px rgba(198, 40, 40, 0.50);
  transform: translateY(-2px);
} */

/* Call Now Button – Premium Ayurvedic Green */
/* Call Now Button – Premium Ayurvedic Orange */
.btn-call-now {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;

  /* Premium Orange Gradient */
  background: linear-gradient(135deg, #e65100, #ff8f00);

  color: #ffffff;
  padding: 18px;
  border-radius: 60px;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;

  box-shadow: 0 15px 35px rgba(230, 81, 0, 0.35);
  margin-bottom: 15px;

  transition: all 0.3s ease;
}

/* Hover Effect */
.btn-call-now:hover {
  background: linear-gradient(135deg, #d84315, #ff6f00);
  transform: translateY(-3px);
  box-shadow: 0 22px 45px rgba(230, 81, 0, 0.45);
  color: #ffffff;
}

.btn-call-now i {
  font-size: 26px;
}

.btn-call-now span {
  font-size: 16px;
  font-weight: 600;
}

/* WhatsApp — kept brand green instead of generic WhatsApp green to stay on-brand */
.btn-whatsapp {
  display: block;
  background: linear-gradient(135deg, #2e7d32, #7cb342);
  /* mid green → lime green */
  color: #fff;
  padding: 14px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 25px;
  transition: opacity 0.2s;
}

.btn-whatsapp:hover {
  opacity: 0.9;
}

.btn-whatsapp i {
  margin-right: 6px;
}

/* Clinic Info */
.clinic-info {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: #444;
  text-align: left;
}

/* Location icon: brand green dark */
.clinic-info i {
  font-size: 22px;
  color: #1a5c2a;
  /* brand green dark */
  margin-top: 3px;
}

/* Responsive */
@media (max-width: 768px) {
  .cta-title {
    font-size: 30px;
  }

  .call-card-ayurveda {
    padding: 30px 22px;
  }
}

/* ===============================
   Services Section - Ayurvedic Professional Design
================================= */

:root {
  --service-primary-red: #c62828;
  /* was: #c30000 → brand ribbon red */
  --service-red-light: #e65100;
  /* was: #ff4444 → brand saffron (warmer, on-brand) */
  --service-green: #1a5c2a;
  /* was: #2d5016 → brand dark green (EDWARD) */
  --service-green-mid: #2e7d32;
  /* new: medium green for accents */
  --service-green-lime: #7cb342;
  /* new: lime green (brochure bottom bar) */
  --service-gold: #f9a825;
  /* was: #d4af37 → brand gold (stars above logo) */
  --service-cream: #f5fbf7;
  /* was: warm cream → soft green-white (brochure body) */
  --service-earth: #2e7d32;
  /* was: brown earth → replaced with mid green */
  --service-bg-light: #e8f5ee;
  /* was: warm beige → soft green wash */
}

/* Main Section */
.ayurveda-services-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #ffffff, var(--service-cream), #ffffff);
  /* was: warm cream tones → now: soft green-white matching brochure body */
  position: relative;
  overflow: hidden;
}

.ayurveda-services-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(249, 168, 37, 0.04) 0%, transparent 50%),
    /* gold glow – brand stars */
    radial-gradient(circle at 80% 70%, rgba(26, 92, 42, 0.04) 0%, transparent 50%);
  /* green glow – brand sidebar */
  pointer-events: none;
}

/* Section Header */
.services-header-wrapper {
  text-align: center;
  margin-bottom: 70px;
  position: relative;
  z-index: 2;
}

.herbal-decoration-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.leaf-element {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--service-gold), transparent);
  /* gold line – brand stars color, unchanged intent */
  position: relative;
}

.leaf-element::before {
  content: '🌿';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  opacity: 0.7;
}

.leaf-element.left::before {
  content: '🌿';
}

.leaf-element.right::before {
  content: '🌿';
  transform: translate(-50%, -50%) scaleX(-1);
}

.om-symbol {
  font-size: 42px;
  opacity: 0.8;
  filter: grayscale(0.2) sepia(0.3);
}

.services-subtitle {
  font-size: 25px;
  letter-spacing: 3px;
  color: var(--service-green);
  /* was: dark olive green → now: brand dark green (EDWARD) */
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.services-main-title {
  font-size: 46px;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 20px;
}

.title-highlight {
  color: var(--service-green);
  /* was: red → now: brand dark green – "EDWARD" logo color as headline accent */
  display: inline-block;
  font-size: 38px;
}

.services-intro-text {
  font-size: 18px;
  color: #444;
  font-weight: 600;
  margin-top: 15px;
  margin-bottom: 25px;
}

.title-divider-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

.title-divider-line span {
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--service-gold), transparent);
  /* brand gold – stars */
}

.title-divider-line i {
  font-size: 26px;
  color: var(--service-gold);
  /* brand gold */
}

/* Services Grid */
.ayurveda-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 35px;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

/* Service Card */
.ayurveda-service-card {
  position: relative;
  height: 100%;
}

.service-card-inner {
  background: #ffffff;
  border-radius: 25px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 15px 40px rgba(26, 92, 42, 0.09);
  /* was: neutral black → now: green-tinted shadow */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  display: flex;
  flex-direction: column;
}

.ayurveda-service-card:hover .service-card-inner {
  transform: translateY(-12px);
  box-shadow: 0 25px 60px rgba(26, 92, 42, 0.20);
  /* was: red shadow → now: brand green shadow */
  border-color: var(--service-gold);
  /* gold border on hover – brand stars color, unchanged */
}

/* Image Section */
.service-image-wrapper {
  position: relative;
  height: 260px;
  overflow: hidden;
}

.service-treatment-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}


/* =====================================
   SEO English Subtitle (Bold & Bigger)
===================================== */
.seo-highlight {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #1a5c2a;
  /* was: var(--service-primary-red) → now: brand dark green (EDWARD) */
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* Slightly increase Hindi title spacing */
.service-treatment-name {
  margin-bottom: 2px;
}

/* =====================================
   Call Button for All Service Cards
===================================== */
/* Service Call Button – Premium Ayurvedic Orange */
.service-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Premium Orange Gradient */
  background: linear-gradient(135deg, #e65100, #ff8f00);

  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 50px;
  text-decoration: none;
  margin-top: 15px;

  box-shadow: 0 8px 20px rgba(230, 81, 0, 0.35);
  transition: all 0.3s ease;
}

/* Hover Effect */
.service-call-btn:hover {
  background: linear-gradient(135deg, #d84315, #ff6f00);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(230, 81, 0, 0.45);
  color: #ffffff;
}

.service-call-btn i {
  font-size: 16px;
}



/* =====================================
   Ensure Button Stays at Bottom
===================================== */
.service-content-area {
  display: flex;
  flex-direction: column;
}

.service-call-btn {
  margin-top: auto;
}

/* =====================================
   Mobile Optimization
===================================== */
@media (max-width: 768px) {
  .seo-highlight {
    font-size: 16px;
  }

  .service-call-btn {
    font-size: 14px;
    padding: 10px 16px;
  }
}

.ayurveda-service-card:hover .service-treatment-img {
  transform: scale(1.1);
}

.image-overlay-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(45, 80, 22, 0) 0%,
      rgba(45, 80, 22, 0.2) 100%);
  transition: opacity 0.4s ease;
}

.ayurveda-service-card:hover .image-overlay-gradient {
  opacity: 0.7;
}

/* Icon Badge */
.service-icon-badge {
  position: absolute;
  bottom: -30px;
  left: 30px;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--service-primary-red), var(--service-red-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(195, 0, 0, 0.4);
  border: 4px solid #ffffff;
  z-index: 10;
  transition: all 0.3s ease;
}

.ayurveda-service-card:hover .service-icon-badge {
  transform: rotate(360deg) scale(1.1);
  box-shadow: 0 15px 40px rgba(195, 0, 0, 0.5);
}

.service-icon-badge i {
  font-size: 32px;
  color: #ffffff;
}

/* Content Area */
.service-content-area {
  padding: 50px 30px 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(180deg, #ffffff, var(--service-cream));
}

.service-title-row {
  margin-bottom: 15px;
}

.service-treatment-name {
  font-size: 26px;
  font-weight: 900;
  color: #2a2a2a;
  margin-bottom: 5px;
  line-height: 1.3;
}

.english-subtitle {
  font-size: 20px;
  color: #494949;
  font-weight: 600;
  font-style: italic;
}

.service-note {
  font-size: 14px;
  color: #666;
  font-weight: 600;
  text-align: center;
  margin: 10px 0 5px;
}

/* Herbal Separator */
.herbal-separator-line {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--service-primary-red), var(--service-gold));
  border-radius: 2px;
  margin: 20px 0;
  transition: width 0.3s ease;
}

.ayurveda-service-card:hover .herbal-separator-line {
  width: 120px;
}

/* Description */
.service-description {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 25px;
  flex: 1;
}

/* Features List */
.service-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.service-features-list li {
  font-size: 15px;
  color: #444;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.service-features-list i {
  font-size: 18px;
  color: var(--service-green);
  flex-shrink: 0;
}

/* Card Bottom Decoration */
.card-bottom-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--service-primary-red), var(--service-gold), var(--service-primary-red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.ayurveda-service-card:hover .card-bottom-decoration {
  transform: scaleX(1);
}

/* Bottom CTA Section */
.services-bottom-cta {
  background: linear-gradient(135deg, #2b0000, #8b0000, #c30000);

  padding: 50px 40px;
  border-radius: 25px;
  box-shadow: 0 20px 50px rgba(45, 80, 22, 0.3);
  position: relative;
  overflow: hidden;
}

.services-bottom-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  animation: ctaGlowEffect 10s linear infinite;
}

/* ================================
   PREMIUM SERVICE CTA
================================ */

.ayurveda-service-cta {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #7a0000, #c30000);
  box-shadow: 0 30px 70px rgba(195, 0, 0, 0.35);
  min-height: 420px;
}

/* IMAGE SIDE */
.cta-image-side {
  position: relative;
  background-image: url('../image/clinic.jpeg');
  /* use calm image */
  /* background-size: contain; */
  background-size: cover;
  background-position: center;
}

/* .cta-image-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.55));
} */

/* CONTENT SIDE */
.cta-content-side {
  padding: 60px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* small label */
.cta-eyebrow {
  font-size: 30px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 15px;
  font-weight: 700;
}

/* title */
.cta-title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 20px;
}

.cta-title span {
  color: #ffe8b0;
}

/* description */
.cta-description {
  font-size: 17px;
  line-height: 1.8;
  opacity: 0.95;
  margin-bottom: 35px;
  max-width: 420px;
}

/* actions */
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* button */
.cta-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  background: #ffffff;
  color: #c30000;
  font-size: 17px;
  font-weight: 800;
  border-radius: 50px;
  text-decoration: none;
  width: fit-content;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease;
}

.cta-call-btn i {
  font-size: 20px;
}

.cta-call-btn:hover {
  background: #ffe5e5;
  transform: translateY(-3px);
}

/* trust text */
.cta-trust {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 10px;
}

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

@media (max-width: 992px) {
  .ayurveda-service-cta {
    grid-column: span 1;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .cta-image-side {
    min-height: 440px;
  }

  .cta-content-side {
    padding: 45px 35px;
    text-align: center;
    align-items: center;
  }

  .cta-description {
    max-width: none;
  }

  .cta-call-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .cta-title {
    font-size: 28px;
  }

  .cta-description {
    font-size: 15px;
  }

  .cta-content-side {
    padding: 35px 25px;
  }
}




@keyframes ctaGlowEffect {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }
}

.cta-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.cta-icon-circle {
  width: 90px;
  height: 90px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.cta-icon-circle i {
  font-size: 40px;
  color: #ffffff;
}

.cta-text-content {
  flex: 1;
  color: #ffffff;
}

.cta-text-content h4 {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 8px;
  color: #ffffff;
}

.cta-text-content p {
  font-size: 16px;
  margin: 0;
  opacity: 0.95;
}

.cta-consult-btn {
  background: linear-gradient(135deg, #ffffff, #ffe5e5);
  color: #c30000;
  padding: 18px 40px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.cta-consult-btn:hover {
  background: linear-gradient(135deg, var(--service-red-light), var(--service-primary-red));
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
  color: #ffffff;
}

.cta-consult-btn i {
  transition: transform 0.3s ease;
}

.cta-consult-btn:hover i {
  transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .ayurveda-services-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }
}

@media (max-width: 992px) {
  .ayurveda-services-section {
    padding: 80px 0;
  }

  .services-main-title {
    font-size: 38px;
  }

  .ayurveda-services-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
  }

  .cta-content-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .cta-text-content h4 {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .ayurveda-services-section {
    padding: 60px 0;
  }

  .om-symbol {
    font-size: 36px;
  }

  .services-main-title {
    font-size: 32px;
  }

  .services-intro-text {
    font-size: 16px;
  }

  .ayurveda-services-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .service-image-wrapper {
    height: 220px;
  }

  .service-icon-badge {
    width: 60px;
    height: 60px;
    left: 25px;
    bottom: -25px;
  }

  .service-icon-badge i {
    font-size: 28px;
  }

  .service-content-area {
    padding: 45px 25px 25px;
  }

  .service-treatment-name {
    font-size: 24px;
  }

  .service-description {
    font-size: 15px;
  }

  .services-bottom-cta {
    padding: 40px 25px;
  }

  .cta-icon-circle {
    width: 80px;
    height: 80px;
  }

  .cta-icon-circle i {
    font-size: 36px;
  }

  .cta-text-content h4 {
    font-size: 22px;
  }

  .cta-text-content p {
    font-size: 15px;
  }

  .cta-consult-btn {
    padding: 16px 35px;
    font-size: 16px;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .services-header-wrapper {
    margin-bottom: 50px;
  }

  .herbal-decoration-top {
    gap: 15px;
  }

  .leaf-element {
    width: 40px;
  }

  .services-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .services-main-title {
    font-size: 28px;
  }

  .title-divider-line span {
    width: 60px;
  }

  .service-image-wrapper {
    height: 200px;
  }

  .service-icon-badge {
    width: 55px;
    height: 55px;
    left: 20px;
    bottom: -22px;
  }

  .service-icon-badge i {
    font-size: 24px;
  }

  .service-treatment-name {
    font-size: 22px;
  }

  .english-subtitle {
    font-size: 13px;
  }

  .service-description {
    font-size: 14px;
  }

  .service-features-list li {
    font-size: 14px;
  }

  .cta-consult-btn {
    padding: 14px 30px;
    font-size: 15px;
  }
}

/* Animation for cards on scroll (optional) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

.ayurveda-service-card {
  animation: fadeInUp 0.6s ease-out;
}

/* Stagger animation delay for cards */
.ayurveda-service-card:nth-child(1) {
  animation-delay: 0.1s;
}

.ayurveda-service-card:nth-child(2) {
  animation-delay: 0.2s;
}

.ayurveda-service-card:nth-child(3) {
  animation-delay: 0.3s;
}

.ayurveda-service-card:nth-child(4) {
  animation-delay: 0.4s;
}

.ayurveda-service-card:nth-child(5) {
  animation-delay: 0.5s;
}

.ayurveda-service-card:nth-child(6) {
  animation-delay: 0.6s;
}

.ayurveda-service-card:nth-child(7) {
  animation-delay: 0.7s;
}

/* ===============================
   Features Section - Ayurvedic Design
================================= */

:root {
  --feature-red: #c30000;
  --feature-red-dark: #a00000;
  --feature-green: #2d5016;
  --feature-gold: #d4af37;
  --feature-cream: #fef9f3;
}

/* Main Section */
.ayurveda-features-showcase {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff, var(--feature-cream));
  position: relative;
  overflow: hidden;
}

.ayurveda-features-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(195, 0, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* Features Grid */
.features-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  position: relative;
  z-index: 2;
}

/* Feature Card */
.feature-card-ayurveda {
  position: relative;
  height: 100%;
}

.feature-inner-content {
  background: linear-gradient(135deg, var(--feature-red), var(--feature-red-dark));
  padding: 35px 30px;
  border-radius: 25px;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(195, 0, 0, 0.25);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.feature-card-ayurveda:hover .feature-inner-content {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(195, 0, 0, 0.35);
  background: linear-gradient(135deg, var(--feature-red-dark), var(--feature-red));
}

/* Background Pattern */
.feature-inner-content::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent);
  pointer-events: none;
}

/* Icon Circle */
.feature-icon-circle {
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
}

.icon-holder {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.feature-card-ayurveda:hover .icon-holder {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: rotate(360deg) scale(1.1);
}

.icon-holder i {
  font-size: 32px;
  color: #ffffff;
}

/* Text Area */
.feature-text-area {
  position: relative;
  z-index: 2;
}

.feature-title-hindi {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.4;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.feature-description {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

/* Corner Accents */
.card-corner-accent {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(212, 175, 55, 0.5);
  z-index: 1;
  transition: all 0.3s ease;
}

.card-corner-accent.top-left {
  top: 15px;
  left: 15px;
  border-right: none;
  border-bottom: none;
  border-radius: 8px 0 0 0;
}

.card-corner-accent.bottom-right {
  bottom: 15px;
  right: 15px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 8px 0;
}

.feature-card-ayurveda:hover .card-corner-accent {
  border-color: var(--feature-gold);
  opacity: 1;
}

.feature-card-ayurveda:hover .card-corner-accent.top-left {
  top: 10px;
  left: 10px;
}

.feature-card-ayurveda:hover .card-corner-accent.bottom-right {
  bottom: 10px;
  right: 10px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .features-grid-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media (max-width: 768px) {
  .ayurveda-features-showcase {
    padding: 60px 0;
  }

  .features-grid-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-inner-content {
    padding: 30px 25px;
  }

  .icon-holder {
    width: 65px;
    height: 65px;
  }

  .icon-holder i {
    font-size: 28px;
  }

  .feature-title-hindi {
    font-size: 20px;
    margin-bottom: 18px;
  }

  .feature-description {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .ayurveda-features-showcase {
    padding: 50px 0;
  }

  .feature-inner-content {
    padding: 28px 22px;
    border-radius: 20px;
  }

  .icon-holder {
    width: 60px;
    height: 60px;
  }

  .icon-holder i {
    font-size: 26px;
  }

  .feature-title-hindi {
    font-size: 19px;
    margin-bottom: 16px;
  }

  .feature-description {
    font-size: 14px;
    line-height: 1.6;
  }

  .card-corner-accent {
    width: 25px;
    height: 25px;
  }

  .card-corner-accent.top-left {
    top: 12px;
    left: 12px;
  }

  .card-corner-accent.bottom-right {
    bottom: 12px;
    right: 12px;
  }
}

/* Animation on scroll (optional) */
@keyframes featureFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.feature-card-ayurveda {
  animation: featureFadeIn 0.6s ease-out;
}

/* Stagger animation */
.feature-card-ayurveda:nth-child(1) {
  animation-delay: 0.1s;
}

.feature-card-ayurveda:nth-child(2) {
  animation-delay: 0.2s;
}

.feature-card-ayurveda:nth-child(3) {
  animation-delay: 0.3s;
}

.feature-card-ayurveda:nth-child(4) {
  animation-delay: 0.4s;
}






/* ===============================
   HERO AWARD SECTION (FINAL)
   =============================== */

.hero-award-section {
  position: relative;
  min-height: 100vh;
  background-image: url('../image/top-banner.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
}

/* Mobile / Phone Styles */
@media only screen and (max-width: 768px) {
  .hero-award-section {
    /* min-height: 70vh; */
    /* Keeps your 70vh height preference */
    background-image: url('../image/phone-banner.jpeg');
    background-size: contain !important;
    /* Switches to the phone image */
  }
}


/* Overlay – lighter & premium */
.hero-award-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(120, 0, 0, 0.85) 0%,
      rgba(160, 0, 0, 0.55) 30%,
      rgba(160, 0, 0, 0.35) 55%,
      rgba(0, 0, 0, 0.15) 100%);
  z-index: 1;
}

/* Content Wrapper */
.hero-award-content {
  position: relative;
  z-index: 2;
  padding: 60px 20px 0;
  max-width: 900px;
  width: 100%;
}

/* Headings */
.hero-award-title {
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 15px;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.hero-award-stars {
  margin: 12px 0;
}

.hero-award-stars img {
  max-width: 220px;
}

/* Year Highlight */
.hero-award-year {
  font-size: 32px;
  font-weight: 900;
  color: #ffc507;
  margin: 10px 0;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

/* Subtitle */
.hero-award-subtitle {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #ffffff;
  margin-top: 10px;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

/* ===============================
   DESKTOP ADJUSTMENTS
   =============================== */

@media (min-width: 992px) {
  .hero-award-section {
    align-items: center;
    background-position: center center;
  }

  .hero-award-content {
    padding: 120px 20px;
  }

  .hero-award-title {
    font-size: 52px;
  }

  .hero-award-year {
    font-size: 44px;
  }

  .hero-award-subtitle {
    font-size: 24px;
  }

  .hero-award-stars img {
    max-width: 260px;
  }
}

/* ===============================
   MOBILE OPTIMIZATION
   =============================== */

@media (max-width: 576px) {
  .hero-award-content {
    padding-top: 50px;

  }

  .hero-award-title {
    font-size: 28px;
  }

  .hero-award-year {
    font-size: 26px;
  }

  .hero-award-subtitle {
    font-size: 18px;
  }

  .hero-award-stars img {
    max-width: 200px;
  }
}













/* ===============================
   WHY CHOOSE US – Bold & Colorful Ayurvedic Design
================================= */

.why-ayurveda-revamp {
  background:
    radial-gradient(circle at 20% 30%, rgba(124, 197, 118, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 143, 0, 0.10) 0%, transparent 40%),
    linear-gradient(180deg, #e8f5ee 0%, #f5fbf7 40%, #edf8f1 70%, #e3f3ea 100%);
  padding: 90px 0;
  position: relative;
}

/* Heading */
.why-head h2 {
  font-size: 40px;
  font-weight: 900;
  color: #1a1a1a;
}

.why-head h2 span {
  display: block;
  background: linear-gradient(90deg, #1f6b3a, #7cc576);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.why-tag {
  color: #ff8f00;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 25px;
  margin-bottom: 8px;
}

.section-underline {
  width: 90px;
  height: 4px;
  background: linear-gradient(90deg, #1f6b3a, #ff8f00);
  margin: 18px auto;
  border-radius: 4px;
}

.section-underline.small {
  margin: 12px 0;
}

.why-head p {
  max-width: 850px;
  margin: auto;
  font-size: 17px;
  color: #333;
  font-weight: 600;
}

/* Trust Cards Grid */
.why-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  margin: 60px 0;
}

/* Trust Card */
.why-trust-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(31, 107, 58, 0.10);
  border-top: 4px solid #7cc576;
  transition: all 0.3s ease;
}

.why-trust-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(31, 107, 58, 0.18);
}

/* Colorful Icons */
.why-trust-card i {
  font-size: 42px;
  background: linear-gradient(135deg, #ff8f00, #e65100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 15px;
}

/* Card Text */
.why-trust-card h5 {
  font-weight: 800;
  color: #1f6b3a;
  margin-bottom: 10px;
}

.why-trust-card p {
  font-weight: 600;
  color: #444;
}

/* Vajikaran Section */
.vajikaran-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 70px 0;
}

.vajikaran-content h3 {
  color: #1f6b3a;
  font-weight: 900;
}

.vajikaran-content ul {
  list-style: none;
  padding: 0;
}

.vajikaran-content li {
  margin-bottom: 10px;
  font-weight: 700;
  color: #2b2b2b;
}

.vajikaran-content li::before {
  content: "✦ ";
  color: #ff8f00;
}

/* Image */
.vajikaran-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(31, 107, 58, 0.18);
  border: 4px solid #e8f5ee;
}

/* Features */
.vajikaran-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 25px;
}

.vaj-feature {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(31, 107, 58, 0.09);
  border-left: 4px solid #1f6b3a;
  transition: all 0.3s ease;
}

.vaj-feature:hover {
  transform: translateY(-5px);
}

/* Feature Icons */
.vaj-feature i {
  font-size: 28px;
  background: linear-gradient(135deg, #ff8f00, #e65100);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 8px;
}

/* Feature Text */
.vaj-feature p {
  font-weight: 600;
  color: #333;
}

/* CTA */
.why-cta {
  text-align: center;
  margin-top: 70px;
}

/* Premium Orange Button */
.why-btn {
  display: inline-block;
  background: linear-gradient(135deg, #e65100, #ff8f00);
  color: #ffffff;
  padding: 16px 40px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(230, 81, 0, 0.30);
  transition: all 0.3s ease;
}

.why-btn:hover {
  background: linear-gradient(135deg, #d84315, #ff6f00);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(230, 81, 0, 0.45);
  color: #ffffff;
}

/* Mobile */
@media (max-width: 768px) {
  .vajikaran-box {
    grid-template-columns: 1fr;
  }

  .why-head h2 {
    font-size: 30px;
  }
}