/* ==========================================================================
   THE VAIDYAR — GLOBAL DESIGN SYSTEM & TOKENS
   Single Source of Truth for Typography, Colors, Buttons, Inputs, & Radii
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. Typography
     ------------------------------------------------------------------------ */
  --font-family-base: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ------------------------------------------------------------------------
     2. Color Palette (From Brand Sheet Specs)
     ------------------------------------------------------------------------ */
  /* Primary Colors */
  --color-primary: #1EB542;
  --color-primary-dark: #169136;
  --color-primary-light: #E8F8EC;

  /* Secondary Colors */
  --color-secondary: #105157;
  --color-secondary-dark: #08393D;
  --color-secondary-light: #DDF3F5;

  /* Neutral & Background Colors */
  --color-white: #FFFFFF;
  --color-bg: #F8FAF9;
  --color-border: #E4E8E7;
  --color-divider: #E4E8E7;

  /* Text Colors */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5F6B66;
  --color-text-muted: #8D9993;
  --color-text-white: #FFFFFF;
  --color-dark-section-text: #e4f8f9;

  /* Contextual / Alert Status Colors */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #0EA5E9;

  /* ------------------------------------------------------------------------
     3. Border Radii & Spacing Utilities
     ------------------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 50px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 30px rgba(15, 76, 58, 0.12);
}

/* --------------------------------------------------------------------------
   GLOBAL RESET & TYPOGRAPHY SCALES
   -------------------------------------------------------------------------- */
body,
html {
  font-family: var(--font-family-base) !important;
  color: var(--color-text-primary);
  background-color: var(--color-bg) !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1,
.h1-title {
  /* font-family: var(--font-family-base) !important;
  font-size: 2.986rem !important; */
  /* ~48px / 35.83px */
  /* line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  color: var(--color-text-primary); */
}

h2,
.h2-title {
  font-family: var(--font-family-base) !important;
  /* font-size: 2.488rem !important; */
  /* ~40px / 29.86px */
  /* line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em; */
  color: var(--color-text-primary);
}

h3,
.h3-title {
  font-family: var(--font-family-base) !important;
  /* font-size: 2.074rem !important; */
  /* ~33px / 24.88px */
  /* line-height: 1.25 !important;
  font-weight: 700 !important; */
  color: var(--color-text-primary);
}

h4,
.h4-title {
  /* font-family: var(--font-family-base) !important;
  font-size: 1.728rem !important; */
  /* ~28px / 20.74px */
  /* line-height: 1.3 !important;
  font-weight: 600 !important; */
  color: var(--color-text-primary);
}

h5,
.h5-title {
  font-family: var(--font-family-base) !important;
  /* font-size: 1.440rem !important; */
  /* ~23px / 17.28px */
  /* line-height: 1.35 !important;
  font-weight: 600 !important; */
  color: var(--color-text-primary);
}

p,
.body-text {
  font-family: var(--font-family-base) !important;
  /* font-size: 1.200rem !important; */
  /* ~19px / 14.40px */
  /* line-height: 1.6 !important; */
  color: var(--color-text-secondary);
}

.login-modern-input,
.signup-modern-input {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

.text-small,
small {
  /* font-size: 1.000rem !important; */
  /* ~16px / 12px */
  /* line-height: 1.4 !important; */
}

.text-muted-custom {
  color: var(--color-text-muted) !important;
}

/* --------------------------------------------------------------------------
   REUSABLE BUTTON COMPONENTS (Pill & Rounded Shapes)
   -------------------------------------------------------------------------- */
.btn-primary-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 185px !important;
  height: 51px !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  border: none !important;
  text-decoration: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(30, 181, 66, 0.2);
  white-space: nowrap;
  box-sizing: border-box !important;
}

.btn-primary-pill:hover {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30, 181, 66, 0.3);
}

.btn-dark-primary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-primary-dark);
  color: var(--color-text-white) !important;
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  text-decoration: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-dark-primary-pill:hover {
  background-color: var(--color-secondary);
  transform: translateY(-2px);
}

.btn-secondary-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-secondary);
  color: var(--color-text-white) !important;
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  text-decoration: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-secondary-pill:hover {
  background-color: var(--color-secondary-dark);
  transform: translateY(-2px);
}

.btn-outline-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: transparent;
  color: var(--color-text-primary) !important;
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  text-decoration: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-outline-pill:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-text-white) !important;
  /* background-color: var(--color-primary) !important; */
  transform: translateY(-2px);
}

.btn-doc-cta {
  background-color: #E8F8F5 !important;
  color: #0F4C3A !important;
  border-radius: 50px !important;
  font-family: var(--font-family-base) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  border: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
  display: inline-block;
  text-decoration: none !important;
  box-shadow: none !important;
}

.btn-doc-cta:hover {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3) !important;
}

.btn-danger-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-error);
  color: var(--color-text-white) !important;
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  transition: all 0.25s ease;
  cursor: pointer;
}

.slider-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  outline: none;
}

.slider-arrow-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.slider-arrow-btn:focus,
.slider-arrow-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   HEADER & NAVBAR COMPONENT STYLES (Fixed Sticky at Top - Spec: 88px total height)
   -------------------------------------------------------------------------- */
.vaidyar-navbar {
  position: sticky !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 88px !important;
  min-height: 88px !important;
  z-index: 1050 !important;
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--color-divider) !important;
  padding: 18px 0 !important;
  display: flex !important;
  align-items: center !important;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important; */
  box-sizing: border-box !important;
}

.vaidyar-navbar-container {
  width: min(1220px, calc(100% - 32px)) !important;
  max-width: 1220px !important;
  height: 52px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.vaidyar-logo-col {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.vaidyar-logo {
  display: inline-flex;
  align-items: center;
  width: 193px;
  height: 52px;
  text-decoration: none !important;
}

.vaidyar-logo-img {
  width: 193px !important;
  height: 85px !important;
  object-fit: contain !important;
}

.vaidyar-nav-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vaidyar-nav-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;
  width: 396px;
  height: 21px;
}

.vaidyar-nav-link {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 0 !important;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.vaidyar-nav-link:hover,
.vaidyar-nav-link.active {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.vaidyar-cta-col {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   HERO SECTION STYLES (Figma Specifications)
   -------------------------------------------------------------------------- */
.hero-section-wrap {
  background-color: var(--color-bg) !important;
  padding-top: 60px !important;
  padding-bottom: 80px !important;
  width: 100%;
  overflow: hidden;
}

.hero-container {
  width: min(1220px, calc(100% - 32px)) !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 47px !important;
  box-sizing: border-box !important;
}

/* Left Column Specs: Width 631px, Height 374px, Gap 24px */
.hero-left-content {
  width: 631px !important;
  max-width: 631px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

/* Hero Heading Specs: Width 631px, Height 150px, Font DM Sans 500 Medium, Size 48px, Line-height 50px */
.hero-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(30px, 4vw, 48px) !important;
  font-weight: 500 !important;
  line-height: clamp(36px, 4.2vw, 50px) !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 631px !important;
}

/* Hero Description Specs: Width 591px, Height 81px, Font DM Sans 400 Regular, Size 24px, Line-height 27px */
.hero-desc {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(16px, 2vw, 24px) !important;
  font-weight: 400 !important;
  line-height: clamp(22px, 2.3vw, 27px) !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 591px !important;
}

/* Hero Buttons Container Specs: Width 472px, Height 51px, Gap 18px */
.hero-btn-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100%;
  max-width: 472px;
}

.hero-btn-primary {
  width: 224px !important;
  height: 51px !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-family: 'DM Sans' !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 100% !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.hero-btn-primary:hover {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
}

.hero-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 230px !important;
  height: 51px !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  border: 1px solid var(--color-border) !important;
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  font-family: 'DM Sans' !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 100% !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.hero-btn-outline:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background-color: #FFFFFF !important;
}

/* Patients Treated Section Specs: Width 309px, Height 36px, Gap 10px */
.hero-patients-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100%;
  max-width: 309px;
  height: 36px;
}

.hero-patients-avatars {
  display: flex;
  align-items: center;
  width: 88px;
  height: 36px;
}

.hero-patient-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.5px solid #FFFFFF !important;
  margin-right: -12px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.hero-patient-avatar:last-child {
  margin-right: 0;
}

.hero-patients-text {
  font-family: 'DM Sans' !important;
  font-size: clamp(16px, 1.8vw, 20px) !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  white-space: nowrap;
}

/* Right Doctor Card Specs: Width 542px, Height 603px, Border-radius 46px */
.hero-right-content {
  width: 542px !important;
  max-width: 542px !important;
  height: 603px !important;
  flex-shrink: 0;
}

.hero-doctor-card {
  width: 542px !important;
  height: 603px !important;
  border-radius: 46px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
}

.hero-doc-main-img {
  width: 542px !important;
  height: 603px !important;
  object-fit: cover !important;
  border-radius: 46px !important;
  transition: opacity 0.35s ease;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   FLOATING DOCTOR BADGE COMPONENT (302px x 201px Spec & Layered Translucent Back Card)
   -------------------------------------------------------------------------- */
.floating-doctor-badge {
  position: absolute !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 302px !important;
  height: 201px !important;
  z-index: 10 !important;
  cursor: pointer;
  display: flex !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Back/Rear Translucent Decorative Layer: Width 258px, Height 83px, Border-radius 22px */
.floating-doctor-back-card {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 258px !important;
  height: 83px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease !important;
}

/* Main Doctor Details Front Card Specs: Width 302px, Height 188px, Border-radius 22px, Padding 16px 22px */
.floating-doctor-details-card {
  position: relative !important;
  z-index: 2 !important;
  width: 302px !important;
  height: 188px !important;
  background: #FFFFFF !important;
  padding: 16px 22px !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

/* Hover Interaction Effects for Floating Doctor Badge & Components */
.floating-doctor-badge:hover .floating-doctor-details-card,
.hero-doctor-card:hover .floating-doctor-details-card {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.16) !important;
  border-color: rgba(30, 181, 66, 0.25) !important;
}

.floating-doctor-badge:hover .floating-doctor-back-card,
.hero-doctor-card:hover .floating-doctor-back-card {
  transform: translateX(-50%) translateY(-10px) scale(1.03) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

/* Inner Container Specs: Width 258px, Height 156px */
.floating-doctor-content {
  width: 258px !important;
  height: 156px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

.floating-doctor-info {
  display: flex;
  flex-direction: column;
}

.floating-doctor-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
}

.floating-doctor-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.floating-doctor-name {
  font-family: 'DM Sans' !important;
  font-size: clamp(16px, 1.8vw, 20px) !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  color: var(--color-text-primary) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.floating-doctor-arrow-btn {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 50% !important;
  border: 1px solid #E4E8E7 !important;
  background: #FFFFFF !important;
  color: #333333 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  padding: 0 !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
}

/* .floating-doctor-badge:hover .floating-doctor-arrow-btn,
.hero-doctor-card:hover .floating-doctor-arrow-btn, */
.floating-doctor-arrow-btn:hover {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary) !important;
  transform: scale(1.1) !important;
}

.floating-doctor-description {
  font-family: 'DM Sans' !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  color: var(--color-text-secondary) !important;
  margin: 8px 0 0 0 !important;
  width: 258px !important;
  height: 54px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

.floating-doctor-actions {
  margin-top: 4px;
}

.floating-doctor-cta {
  width: 164px !important;
  height: 30px !important;
  padding: 6px 20px !important;
  border-radius: 50px !important;
  background-color: var(--color-secondary-light) !important;
  color: var(--color-secondary) !important;
  font-family: 'DM Sans' !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 100% !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

/* .floating-doctor-badge:hover .floating-doctor-cta, */
/* .hero-doctor-card:hover .floating-doctor-cta, */
.floating-doctor-cta:hover {
  background-color: var(--color-secondary) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS (Fluid Layout Transitions)
   -------------------------------------------------------------------------- */

/* Fluid 2-Column Layout Scaling (750px to 1199.98px) */
@media (min-width: 860px) and (max-width: 1199.98px) {
  .hero-container {
    gap: clamp(20px, 3.5vw, 40px) !important;
    align-items: center !important;
  }

  .hero-left-content {
    flex: 1 1 52% !important;
    width: auto !important;
    max-width: 580px !important;
  }

  .hero-right-content,
  .hero-doctor-card {
    flex: 0 1 45% !important;
    width: auto !important;
    max-width: 480px !important;
    height: auto !important;
  }

  .hero-doc-main-img {
    width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    object-fit: cover !important;
  }
}

/* Vertical Column Stacking Below 750px Threshold */
@media (max-width: 859.98px) {
  .hero-section-wrap {
    padding-top: 40px !important;
    padding-bottom: 50px !important;
  }

  .hero-container {
    flex-direction: column !important;
    gap: 36px !important;
    align-items: stretch !important;
  }

  .hero-left-content {
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
  }

  .hero-title {
    font-size: clamp(28px, 6vw, 38px) !important;
    line-height: 1.2 !important;
  }

  .hero-desc {
    font-size: clamp(16px, 3.5vw, 20px) !important;
    line-height: 1.35 !important;
  }

  .hero-right-content,
  .hero-doctor-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .hero-doc-main-img {
    width: 100% !important;
    height: clamp(300px, 75vw, 480px) !important;
    border-radius: 28px !important;
    object-fit: cover !important;
  }
}

/* Mobile Button Stacking and Content Scaling Below 500px */
@media (max-width: 500px) {
  .hero-btn-wrap {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hero-btn-primary,
  .hero-btn-outline {
    width: 100% !important;
    height: 48px !important;
    justify-content: center !important;
  }

  .hero-title {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }

  .hero-desc {
    font-size: clamp(14px, 4vw, 17px) !important;
  }

  .hero-doc-main-img {
    height: clamp(260px, 75vw, 380px) !important;
    border-radius: 24px !important;
  }

  .floating-doctor-badge {
    bottom: 12px !important;
    right: 12px !important;
    width: min(302px, calc(100vw - 40px)) !important;
    height: auto !important;
  }

  .floating-doctor-details-card {
    width: 100% !important;
    padding: 12px 14px !important;
    height: auto !important;
  }

  .floating-doctor-content {
    width: 100% !important;
    height: auto !important;
    gap: 6px !important;
  }

  .floating-doctor-description {
    width: 100% !important;
    height: auto !important;
    -webkit-line-clamp: 2 !important;
    font-size: 13px !important;
    line-height: 16px !important;
  }

  .floating-doctor-back-card {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   REUSABLE FORM INPUT CONTROLS
   -------------------------------------------------------------------------- */
.custom-input,
select.custom-input,
textarea.custom-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-family-base);
  font-size: 1rem;
  color: var(--color-text-primary);
  background-color: var(--color-white);
  transition: all 0.2s ease;
  outline: none;
}

.custom-input:focus,
select.custom-input:focus,
textarea.custom-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.custom-input.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* --------------------------------------------------------------------------
   CARD & SECTION CONTAINERS
   -------------------------------------------------------------------------- */
.vaidyar-card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.vaidyar-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.dept-card {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  border: 1px solid var(--color-border);
  position: relative;
  transition: all 0.35s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dept-card .dept-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-text-primary);
  transition: color 0.3s ease;
}

.dept-card .dept-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 24px;
  transition: color 0.3s ease;
}

.dept-card .dept-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.dept-card:hover,
.dept-card.active {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-secondary) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 76, 58, 0.25);
}

.dept-card:hover .dept-title,
.dept-card.active .dept-title {
  color: var(--color-white) !important;
}

.dept-card:hover .dept-desc,
.dept-card.active .dept-desc {
  color: rgba(255, 255, 255, 0.85) !important;
}

.dept-card:hover .dept-action-icon,
.dept-card.active .dept-action-icon {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.cant-find-banner {
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  border: 1px solid var(--color-border);
}

.cta-bottom-banner {
  background-color: var(--color-white);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  padding: 60px 40px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(15, 76, 58, 0.08);
}

.vaidyar-footer {
  background-color: var(--color-secondary);
  color: var(--color-white);
  /* padding: 80px 0 30px; */
}

.vaidyar-footer a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.vaidyar-footer a:hover {
  color: var(--color-primary-light) !important;
}

/* --------------------------------------------------------------------------
   TRUSTED & RECOGNIZED BY SECTION (Figma Specs: 1240px x 305px, 978px Text)
   -------------------------------------------------------------------------- */
.trusted-section-wrap {
  background-color: var(--color-bg) !important;
  padding: 48px 0 !important;
  width: 100%;
  overflow: hidden;
}

.trusted-container {
  width: min(1240px, calc(100% - 32px)) !important;
  max-width: 1240px !important;
  min-height: 305px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

/* Recognition Statement Box Specs: Width 978px, Height 141px */
.trusted-statement-box {
  width: 100% !important;
  max-width: 978px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.trusted-statement-text {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(24px, 3.2vw, 36px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  text-align: center !important;
}

.trusted-text-secondary {
  color: var(--color-text-secondary) !important;
  font-weight: 400 !important;
}

/* Organization / Startup Logo Banner Specs: Width 1440px, Height 148px */
.trusted-banner-wrap {
  width: 100% !important;
  max-width: 1440px !important;
  height: 148px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.trusted-logos-track {
  display: flex !important;
  align-items: center !important;
  gap: 60px !important;
  width: max-content !important;
  animation: marqueeScroll 25s linear infinite !important;
}

.trusted-logos-track:hover {
  animation-play-state: paused !important;
}

.trusted-logo-img {
  flex-shrink: 0 !important;
  height: 71px !important;
  /* max-height: 48px !important; */
  width: auto !important;
  object-fit: contain !important;
  opacity: 0.95;
  transition: opacity 0.3s ease;
}

.trusted-logo-img:hover {
  opacity: 1;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Responsive Rules for Tablet and Mobile */
@media (max-width: 991.98px) {
  .trusted-container {
    min-height: auto !important;
    gap: 24px !important;
  }

  .trusted-banner-wrap {
    height: 110px !important;
  }

  .trusted-logo-img {
    height: 40px !important;
    max-height: 40px !important;
  }

  .trusted-logos-track {
    gap: 45px !important;
  }
}

@media (max-width: 575.98px) {
  .trusted-section-wrap {
    padding: 36px 0 !important;
  }

  .trusted-banner-wrap {
    height: 90px !important;
  }

  .trusted-logo-img {
    height: 34px !important;
    max-height: 34px !important;
  }

  .trusted-logos-track {
    gap: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   HOW IT WORKS SECTION (Figma Specs: 1220px Container, 48px Heading, 4 Cards)
   -------------------------------------------------------------------------- */
.how-it-works-section-wrap {
  background-color: var(--color-bg) !important;
  padding: 60px 0 !important;
  width: 100%;
  overflow: hidden;
}

.how-it-works-container {
  width: min(1220px, calc(100% - 32px)) !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(32px, 5vw, 64px) !important;
  box-sizing: border-box !important;
}

/* Header Specs: Heading Width 631px, Height 50px, Font DM Sans 500 Size 48px */
.how-it-works-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 679px !important;
  margin: 0 auto !important;
}

.how-it-works-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 50px !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 0 12px 0 !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 631px !important;
}

.how-it-works-desc {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(17px, 2vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 27px !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 679px !important;
}

/* Grid Specs: Width 1194px, Height 187px, Gap 12px */
.how-it-works-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 1194px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Individual Card Specs: Width 289px, Height 187px, Padding 26px, Border Radius 30px */
.how-it-works-card {
  background-color: #ECECEC !important;
  border-radius: 30px !important;
  padding: 26px !important;
  min-height: 187px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  border: none !important;
}

.how-it-works-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06) !important;
}

/* Icon Badge Specs: Width 42px, Height 42px, Border Radius 24px (50%) */
.step-icon-badge {
  width: 42px !important;
  height: 42px !important;
  border-radius: 24px !important;
  background-color: var(--color-secondary-dark, #08393D) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  flex-shrink: 0 !important;
}

.step-icon-badge svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #FFFFFF !important;
}

/* Card Title Specs: Height 27px, Font DM Sans 500 Size 20px, Line Height 27px */
.how-it-works-card-title {
  font-family: 'DM Sans' !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 27px !important;
  color: var(--color-text-primary) !important;
  margin: 0 0 8px 0 !important;
  text-align: left !important;
}

/* Card Description Specs: Height 48px, Font DM Sans 400 Size 14px, Line Height 1.14 (16px) */
.how-it-works-card-desc {
  font-family: 'DM Sans' !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.14 !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  text-align: left !important;
  max-width: 237px !important;
}

/* Responsive Breakpoints */
@media (min-width: 750px) and (max-width: 1199.98px) {
  .how-it-works-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .how-it-works-card {
    min-height: auto !important;
  }
}

@media (max-width: 749.98px) {
  .how-it-works-section-wrap {
    padding: 40px 0 !important;
  }

  .how-it-works-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .how-it-works-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px !important;
  }

  .how-it-works-card-desc {
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   AUTHENTIC KERALA AYURVEDA SECTION (Figma Specs: 1167px Container, 502px Image)
   -------------------------------------------------------------------------- */
.authentic-kerala-section-wrap {
  background-color: var(--color-bg) !important;
  padding: 60px 0 !important;
  width: 100%;
  overflow: hidden;
}

.authentic-kerala-container {
  width: min(1167px, calc(100% - 32px)) !important;
  max-width: 1167px !important;
  min-height: 464px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 74px !important;
  box-sizing: border-box !important;
}

/* Left Image Column Specs: Width 502px, Height 464px, Border Radius 26px, Border 8px solid #FFFFFF */
.authentic-kerala-img-col {
  width: 502px !important;
  max-width: 502px !important;
  height: 464px !important;
  flex-shrink: 0 !important;
}

.authentic-kerala-img-card {
  width: 502px !important;
  height: 464px !important;
  border-radius: 26px !important;
  border: 8px solid #FFFFFF !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

.authentic-kerala-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 18px !important;
}

/* Right Content Column Specs: Width 591px, Height 307px, Gap 24px */
.authentic-kerala-content-col {
  width: 591px !important;
  max-width: 591px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

.authentic-kerala-text-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Heading Specs: Width 571px, Font DM Sans 500 Size 42px, Line Height 50px */
.authentic-kerala-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 500 !important;
  line-height: clamp(34px, 4vw, 50px) !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 571px !important;
}

/* Description Specs: Width 591px, Font DM Sans 400 Size 24px, Line Height 130% */
.authentic-kerala-desc {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(16px, 2vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 591px !important;
}

/* CTA Button Specs: Width 248px, Height 51px, Border Radius 50px, Background var(--color-secondary) */
.authentic-kerala-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 248px !important;
  height: 51px !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  background-color: var(--color-secondary) !important;
  color: #FFFFFF !important;
  font-family: 'DM Sans' !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 100% !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
}

.authentic-kerala-btn:hover {
  background-color: var(--color-secondary-dark) !important;
  color: #FFFFFF !important;
}

/* Responsive Rules for Tablet & Mobile */
@media (min-width: 750px) and (max-width: 1199.98px) {
  .authentic-kerala-container {
    flex-direction: row !important;
    gap: clamp(24px, 4vw, 50px) !important;
    align-items: center !important;
    min-height: auto !important;
  }

  .authentic-kerala-img-col,
  .authentic-kerala-img-card {
    flex: 0 1 45% !important;
    width: auto !important;
    max-width: 480px !important;
    height: clamp(340px, 40vw, 450px) !important;
  }

  .authentic-kerala-content-col {
    flex: 1 1 50% !important;
    width: auto !important;
    max-width: 580px !important;
  }
}

@media (max-width: 749.98px) {
  .authentic-kerala-container {
    flex-direction: column !important;
    gap: 36px !important;
    align-items: stretch !important;
    min-height: auto !important;
  }

  .authentic-kerala-img-col,
  .authentic-kerala-img-card {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(280px, 65vw, 400px) !important;
  }

  .authentic-kerala-content-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  .authentic-kerala-section-wrap {
    padding: 40px 0 !important;
  }

  .authentic-kerala-img-col,
  .authentic-kerala-img-card {
    height: clamp(240px, 65vw, 320px) !important;
    border-width: 6px !important;
  }

  .authentic-kerala-btn {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   AYURVEDIC TREATMENTS SECTION (Figma Specs: 1220px Container, 826px Height)
   -------------------------------------------------------------------------- */
.treatments-section-wrap {
  background-color: var(--color-bg) !important;
  /* padding: 60px 0 !important; */
  width: 100%;
  overflow: hidden;
}

.treatments-container {
  width: min(1220px, calc(100% - 32px)) !important;
  max-width: 1220px !important;
  min-height: 826px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 42px !important;
  box-sizing: border-box !important;
  align-items: center;
}

/* Header Row Specs: Width 1220px, Height auto, Space-Between */
.treatments-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 30px !important;
  width: 100% !important;
  max-width: 1220px !important;
}

/* Heading Column Specs */
.treatments-heading-col {
  flex: 1 1 50% !important;
  width: auto !important;
  max-width: 590px !important;
  height: auto !important;
}

.treatments-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

/* Description Column Specs */
.treatments-desc-col {
  flex: 1 1 48% !important;
  width: auto !important;
  max-width: 579px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 22px !important;
}

.treatments-desc {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(16px, 1.8vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  opacity: 1 !important;
  margin: 0 !important;
}

/* Arrow Controls Specs: Width 138px, Height 64px, Gap 10px */
.treatments-arrows-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 138px !important;
  height: 64px !important;
}

.treatments-arrow-btn {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 32px !important;
  border: 1px solid var(--color-border) !important;
  background-color: #FFFFFF !important;
  color: var(--color-text-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.treatments-arrow-btn:hover {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary) !important;
}

.treatments-arrow-btn:focus,
.treatments-arrow-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Treatments Slider Outer & Track Specs: Width 1220px, Height 611px, Gap 42px */
.treatments-slider-outer {
  overflow: hidden !important;
  width: 1220px !important;
  max-width: 100% !important;
  /* height: 611px !important; */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 42px !important;
  opacity: 1 !important;
}

.treatments-slider-inner {
  width: 1220px !important;
  max-width: 100% !important;
  /* height: 518px !important; */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  gap: 25px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  padding-bottom: 6px !important;
  opacity: 1 !important;
}

.treatments-slider-inner::-webkit-scrollbar {
  display: none !important;
}

/* Individual Card Specs: Width 390px, Height 518px, Gap 17px */
.treatment-card-item {
  flex: 0 0 390px !important;
  width: 390px !important;
  min-width: 390px !important;
  height: 518px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 17px !important;
  opacity: 1 !important;
  background-color: transparent !important;
  border: none !important;
  transition: transform 0.3s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.treatment-card-img-link {
  display: block !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  width: 390px !important;
  height: 440px !important;
  gap: 10px !important;
  opacity: 1 !important;
}

.treatment-card-img {
  width: 390px !important;
  height: 440px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 30px !important;
  opacity: 1 !important;
  transition: transform 0.45s ease !important;
}

.treatment-card-item:hover .treatment-card-img {
  transform: scale(1.04) !important;
}

/* Card Body & Typography Specs: Width 367px, Height 61px, Gap 10px */
.treatment-card-body {
  padding: 0 4px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 367px !important;
  max-width: 100% !important;
  height: 61px !important;
  opacity: 1 !important;
}

.treatment-card-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  opacity: 1 !important;
  width: 268px !important;
  max-width: 100% !important;
  height: 29px !important;
  margin: 0 !important;
  transition: color 0.2s ease !important;
}

.treatment-card-item:hover .treatment-card-title {
  color: var(--color-primary) !important;
}

.treatment-card-sub-wrapper {
  width: 90px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  opacity: 1 !important;
}

.treatment-card-sub {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  opacity: 1 !important;
  width: 90px !important;
  height: 22px !important;
  margin: 0 !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

/* View All Treatments Bottom CTA Button Specs: Width 251px, Height 51px, Border Radius 50px */
.treatments-bottom-cta-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 251px !important;
  height: 51px !important;
  gap: 18px !important;
  opacity: 1 !important;
}

.treatments-bottom-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 251px !important;
  height: 51px !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  border: 1px solid #E4E8E7 !important;
  background-color: #FFFFFF !important;
  color: var(--color-secondary) !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 100% !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.treatments-bottom-btn-text {
  width: 187px !important;
  height: 23px !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: var(--color-secondary, #105157) !important;
  opacity: 1 !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.treatments-bottom-btn:hover {
  background-color: var(--color-secondary, #105157) !important;
  color: #FFFFFF !important;
  border-color: var(--color-secondary, #105157) !important;
}

.treatments-bottom-btn:hover .treatments-bottom-btn-text {
  color: #FFFFFF !important;
}

/* Responsive Rules for Tablet & Mobile */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .treatments-header-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: clamp(20px, 3vw, 40px) !important;
  }

  .treatments-heading-col {
    flex: 1 1 50% !important;
    max-width: 540px !important;
    width: auto !important;
  }

  .treatments-desc-col {
    flex: 1 1 48% !important;
    max-width: 520px !important;
    width: auto !important;
    height: auto !important;
  }

  .treatments-desc {
    font-size: 20px !important;
  }

  .treatment-card-item {
    flex: 0 0 340px !important;
    width: 340px !important;
    min-width: 340px !important;
    height: 460px !important;
  }
}

@media (max-width: 991.98px) {
  .treatments-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .treatments-heading-col,
  .treatments-desc-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: auto !important;
  }

  .treatments-desc {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    font-size: clamp(16px, 2.4vw, 20px) !important;
  }

  .treatments-arrows-wrap {
    margin-top: 4px !important;
  }

  .treatment-card-item {
    flex: 0 0 320px !important;
    width: 320px !important;
    min-width: 320px !important;
    height: 440px !important;
  }

  .treatment-card-img-link,
  .treatment-card-img {
    width: 320px !important;
    height: 360px !important;
  }
}

@media (max-width: 575.98px) {
  .treatments-section-wrap {
    padding: 40px 0 !important;
  }

  .treatments-arrows-wrap {
    width: 110px !important;
    height: 48px !important;
  }

  .treatments-arrow-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 18px !important;
  }

  .treatment-card-item {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    min-width: calc(100vw - 48px) !important;
    height: 410px !important;
  }

  .treatment-card-img-link,
  .treatment-card-img {
    width: 100% !important;
    height: 330px !important;
    border-radius: 24px !important;
  }

  .treatments-bottom-btn {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   SPECIALIZED TREATMENTS SECTION (Figma Specs: 1220px Container, 1053px Height)
   -------------------------------------------------------------------------- */
.specialized-section-wrap {
  background-color: var(--color-bg) !important;
  padding: 60px 0 !important;
  width: 100%;
  overflow: hidden;
}

.specialized-container {
  width: min(1220px, calc(100% - 32px)) !important;
  max-width: 1220px !important;
  min-height: 1053px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 42px !important;
  box-sizing: border-box !important;
}

/* Row 1: Header Row Specs: Width 1220px, Height 145px, Space-Between */
.specialized-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 30px !important;
  width: 100% !important;
  max-width: 1220px !important;
}

.specialized-heading-col {
  width: 590px !important;
  max-width: 590px !important;
  min-height: 116px !important;
}

.specialized-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  max-width: 590px !important;
}

.specialized-desc-col {
  width: 579px !important;
  max-width: 579px !important;
  min-height: 145px !important;
}

.specialized-desc {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(17px, 2vw, 24px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  max-width: 567px !important;
}

/* Row 2: Grid Specs: Width 1220px, Min-Height 660px, Gap 28px */
.specialized-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 1220px !important;
  box-sizing: border-box !important;
}

/* Individual Card Specs: Width 387px (fluid column), Height 316px, Radius 30px, Padding 26px, BG #ECECEC */
.specialized-card {
  background-color: #ECECEC !important;
  border-radius: 30px !important;
  padding: 26px !important;
  min-height: 316px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  border: none !important;
  outline: none !important;
}

.specialized-card:hover {
  background-color: var(--color-secondary-dark, #08393D) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(8, 57, 61, 0.18) !important;
}

/* Card Top Specs: Width 334px (100%), Height 36px, Space-Between */
.specialized-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  height: 36px !important;
}

.specialized-card-title {
  font-family: 'DM Sans' !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 27px !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  max-width: 260px !important;
  transition: color 0.3s ease !important;
}

.specialized-card:hover .specialized-card-title {
  color: #FFFFFF !important;
}

/* Arrow Circle Specs: Width 36px, Height 36px, Radius 24px (50%), BG #FFFFFF */
.specialized-card-arrow {
  width: 36px !important;
  height: 36px !important;
  border-radius: 24px !important;
  background-color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

.specialized-card-arrow svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--color-secondary-dark, #08393D) !important;
  transition: stroke 0.3s ease !important;
}

/* Card Bottom Specs: Width 334px (100%), Height 116px, Gap 10px */
.specialized-card-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Divider Specs: Height 0, Border 0.3px solid var(--color-text-secondary) */
.specialized-card-divider {
  width: 100% !important;
  height: 0 !important;
  border-top: 0.3px solid var(--color-text-secondary, #5F6B66) !important;
  transition: border-color 0.3s ease !important;
}

.specialized-card:hover .specialized-card-divider {
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}

/* Description Specs: Height 54px, Font DM Sans 400 Size 16px, Line Height 114% */
.specialized-card-desc {
  font-family: 'DM Sans' !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.14 !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  min-height: 54px !important;
  transition: color 0.3s ease !important;
}

.specialized-card:hover .specialized-card-desc {
  color: var(--color-dark-section-text, #e4f8f9) !important;
}

/* Icon Badge Specs: Width 42px, Height 42px, Radius 24px, BG var(--color-secondary) */
.specialized-card-icon-badge {
  width: 42px !important;
  height: 42px !important;
  border-radius: 24px !important;
  background-color: var(--color-secondary, #105157) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  transition: background-color 0.3s ease !important;
}

.specialized-card-icon {
  width: 25px !important;
  height: 25px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
}

.specialized-card:hover .specialized-card-icon-badge {
  background-color: var(--color-primary, #1EB542) !important;
}

/* Row 3: Consultation CTA Specs: Width 952px, Height 164px, Gap 14px, Padding 0 20px */
.specialized-cta-wrap {
  width: min(952px, 100%) !important;
  max-width: 952px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.specialized-cta-text-box {
  width: min(912px, 100%) !important;
  max-width: 912px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  text-align: center !important;
}

.specialized-cta-heading {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(26px, 3.5vw, 38px) !important;
  font-weight: 600 !important;
  line-height: clamp(34px, 4vw, 60px) !important;
  letter-spacing: 0 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  text-align: center !important;
  width: 100% !important;
}

.specialized-cta-sub-wrap {
  width: min(540px, 100%) !important;
  max-width: 540px !important;
}

.specialized-cta-sub {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(16px, 2vw, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  text-align: center !important;
}

.specialized-cta-btn-wrap {
  width: 255px !important;
  height: 57px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* CTA Button Specs: Width 255px, Height 57px, Radius 30px, BG var(--color-primary), Text 22px 600 DM Sans */
.specialized-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  width: 255px !important;
  height: 57px !important;
  padding: 14px 30px !important;
  border-radius: 30px !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-family: 'DM Sans' !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 100% !important;
  text-transform: capitalize !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  outline: none !important;
}

.specialized-cta-btn:hover {
  background-color: var(--color-primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(30, 181, 66, 0.3) !important;
}

/* Responsive Rules for Tablet & Mobile */
@media (min-width: 750px) and (max-width: 1199.98px) {
  .specialized-header-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: clamp(20px, 3vw, 40px) !important;
  }

  .specialized-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .specialized-card {
    min-height: auto !important;
  }
}

@media (max-width: 749.98px) {
  .specialized-section-wrap {
    padding: 40px 0 !important;
  }

  .specialized-header-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .specialized-heading-col,
  .specialized-desc-col {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
  }

  .specialized-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .specialized-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px !important;
  }

  .specialized-cta-btn-wrap,
  .specialized-cta-btn {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   HAPPY CLIENTS / TESTIMONIALS SECTION (Figma Specs: 1220px Container, 374px Height)
   -------------------------------------------------------------------------- */
.reviews-section-wrap {
  background-color: var(--color-bg) !important;
  padding: 60px 0 !important;
  width: 100%;
  overflow: hidden;
}

.reviews-container {
  width: min(1220px, calc(100% - 32px)) !important;
  max-width: 1220px !important;
  min-height: 374px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 42px !important;
  box-sizing: border-box !important;
}

/* Row 1: Header Row Specs: Width 1220px, Height 161px, Space-Between */
.reviews-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1220px !important;
}

/* Heading Area Specs: Width 402px, Height 161px, Gap 24px */
.reviews-heading-area {
  width: 402px !important;
  max-width: 402px !important;
  height: 161px !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

/* Quote Icon Specs: Width 42px, Height 34px, Color var(--color-secondary) */
.reviews-quote-icon {
  color: var(--color-secondary, #105157) !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.reviews-quote-icon svg {
  width: 42px !important;
  height: 34px !important;
  fill: currentColor !important;
}

/* Heading Specs: Width 280px, Height 116px, DM Sans 500 Size 48px, Line Height 120% */
.reviews-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  width: 280px !important;
  max-width: 100% !important;
}

/* Arrow Navigation Specs: Width 138px, Height 64px, Gap 10px */
.reviews-arrows-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 138px !important;
  height: 64px !important;
}

.reviews-arrow-btn {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 32px !important;
  border: 1px solid #E4E8E7 !important;
  background-color: #FFFFFF !important;
  color: var(--color-text-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.reviews-arrow-btn:hover {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary) !important;
}

.reviews-arrow-btn:focus,
.reviews-arrow-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Row 2: Review Slider Outer & Inner Track Specs: Height 171px */
.reviews-slider-outer {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 1220px !important;
}

.reviews-slider-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 40px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  padding-bottom: 6px !important;
}

.reviews-slider-inner::-webkit-scrollbar {
  display: none !important;
}

/* Slide Item Specs: Width 1220px max, Height 171px */
.testimonial-slide-item {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  min-height: 171px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 40px !important;
  box-sizing: border-box !important;
}

/* Client Profile Left Column Specs: Width 266px, Height 83px, Gap 26px */
.reviews-client-profile {
  width: 266px !important;
  max-width: 266px !important;
  height: 83px !important;
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  flex-shrink: 0 !important;
}

/* Avatar Specs: Width 83px, Height 83px, Border Radius 10px */
.testimonial-avatar {
  width: 83px !important;
  height: 83px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.reviews-client-name-box {
  width: 157px !important;
  max-width: 157px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* Client Name Specs: Font DM Sans 500 Size 26px, Line Height 120% */
.testimonial-user-name {
  font-family: 'DM Sans' !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Client Location Specs: Font DM Sans 400 Size 20px, Line Height 120% */
.testimonial-user-location {
  font-family: 'DM Sans' !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

/* Review Content Right Column Specs: Width 584px, Height 171px, Gap 6px */
.reviews-client-comment-box {
  width: 584px !important;
  max-width: 584px !important;
  min-height: 171px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Review Text Specs: Width 584px, Height 136px, DM Sans 500 Size 28px, Line Height 120% */
.testimonial-quote-text {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  max-width: 584px !important;
}

/* Read Full Story Specs: Width 584px, Height 29px, DM Sans 600 Size 24px, Line Height 120% */
.testimonial-read-link {
  font-family: 'DM Sans' !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--color-secondary-dark, #08393D) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: color 0.2s ease !important;
}

.testimonial-read-link:hover {
  color: var(--color-primary) !important;
}

/* Responsive Rules for Tablet & Mobile */
@media (min-width: 750px) and (max-width: 1199.98px) {
  .reviews-header-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 20px !important;
  }

  .testimonial-slide-item {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: clamp(20px, 4vw, 40px) !important;
  }

  .reviews-client-profile {
    flex: 0 1 45% !important;
    max-width: 480px !important;
  }

  .reviews-client-comment-box {
    flex: 1 1 50% !important;
    max-width: 584px !important;
  }
}

@media (max-width: 749.98px) {
  .reviews-header-row {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .testimonial-slide-item {
    flex-direction: column !important;
    gap: 24px !important;
    min-height: auto !important;
  }

  .reviews-client-profile,
  .reviews-client-comment-box {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575.98px) {
  .reviews-section-wrap {
    padding: 40px 0 !important;
  }

  .reviews-heading-area {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .reviews-arrows-wrap {
    width: 110px !important;
    height: 48px !important;
  }

  .reviews-arrow-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .testimonial-avatar {
    width: 68px !important;
    height: 68px !important;
  }

  .testimonial-user-name {
    font-size: 22px !important;
  }

  .testimonial-user-location {
    font-size: 16px !important;
  }

  .testimonial-read-link {
    font-size: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   AYURVEDA BLOGS SECTION (Figma Specs: 1220px Container, 690px Height)
   -------------------------------------------------------------------------- */
.blogs-section-wrap {
  background-color: var(--color-bg) !important;
  padding: 60px 0 !important;
  width: 100%;
  overflow: hidden;
}

.blogs-container {
  width: min(1220px, calc(100% - 32px)) !important;
  max-width: 1220px !important;
  min-height: 690px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 42px !important;
  box-sizing: border-box !important;
}

/* Top Row Header Specs: Width 1220px, Height auto, Space-Between */
.blogs-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  width: 100% !important;
  max-width: 1220px !important;
  min-height: auto !important;
  gap: 20px !important;
}

/* Heading Section Specs: Width auto, Max 600px */
.blogs-heading-area {
  width: auto !important;
  max-width: 600px !important;
  flex: 1 1 auto !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 5px !important;
}

/* Small "Blogs" Text: Width 60px, Height 29px, DM Sans 500 Size 24px, Line Height 120% */
.blogs-label {
  font-family: 'DM Sans' !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0% !important;
  color: var(--color-primary, #1EB542) !important;
  margin: 0 !important;
  width: 60px !important;
}

/* Main Heading: Width 504px, Height 116px, DM Sans 500 Size 48px, Line Height 120% */
.blogs-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  width: 504px !important;
  max-width: 100% !important;
}

/* Arrow Navigation Specs: Width 138px, Height 64px, Gap 10px */
.blogs-arrows-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 138px !important;
  height: 64px !important;
}

.blogs-arrow-btn {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 32px !important;
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-text-white) !important;
  color: var(--color-text-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
}

.blogs-arrow-btn:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-text-white) !important;
  border-color: var(--color-primary) !important;
}

.blogs-arrow-btn:focus,
.blogs-arrow-btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Bottom Row: Specs Width 1220px, Height 498px, Gap 42px */
.blogs-bottom-wrap {
  width: 100% !important;
  max-width: 1220px !important;
  min-height: 498px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 42px !important;
}

.blogs-slider-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  width: 1220px !important;
  max-width: 100% !important;
  /* height: 405px !important; */
  gap: 25px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  padding-bottom: 6px !important;
  opacity: 1 !important;
  padding-top: 4px;
}

.blogs-slider-inner::-webkit-scrollbar {
  display: none !important;
}

/* Each Card Specs: Width 390px, Height 405px, Gap 17px */
.blog-card-item {
  flex: 0 0 390px !important;
  width: 390px !important;
  min-width: 390px !important;
  height: 405px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 17px !important;
  opacity: 1 !important;
  text-decoration: none !important;
  color: inherit !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease !important;
  cursor: pointer !important;
}

.blog-card-item:hover {
  transform: translateY(-4px) !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* Image Specs: Container 390x298px, Image 390x298px, Radius 30px */
.blog-card-img-link {
  width: 390px !important;
  height: 298px !important;
  gap: 10px !important;
  display: block !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
}

.blog-card-img {
  width: 390px !important;
  height: 298px !important;
  object-fit: cover !important;
  border-radius: 30px !important;
  opacity: 1 !important;
  transition: transform 0.4s ease !important;
}

.blog-card-item:hover .blog-card-img {
  transform: scale(1.04) !important;
}

/* Blog Text Area Specs: Width 367px, Height 90px, Gap 10px */
.blog-card-body {
  width: 367px !important;
  max-width: 100% !important;
  height: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 10px !important;
  opacity: 1 !important;
}

/* Blog Title Specs: Width 266px, Height 58px, DM Sans 500 Size 24px, Line Height 120% */
.blog-card-title {
  width: 266px !important;
  height: 58px !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  transition: color 0.25s ease !important;
}

.blog-card-item:hover .blog-card-title,
.blog-card-title a:hover {
  color: var(--color-primary) !important;
}

.blog-card-title a {
  color: var(--color-text-primary) !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

/* Metadata Specs: Width 327px, Height 22px, Gap 16px */
.blog-card-meta {
  width: 327px !important;
  height: 22px !important;
  gap: 16px !important;
  font-family: 'DM Sans' !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  max-width: 100% !important;
  opacity: 1 !important;
}

.blog-card-meta-time {
  width: 171px !important;
  height: 22px !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

.blog-card-meta-date {
  width: 140px !important;
  height: 22px !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}



/* Bottom Button Specs: Container 199x51px, Button 199x51px, Radius 50px */
.blogs-btn-wrap {
  width: 199px !important;
  height: 51px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.blogs-bottom-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 199px !important;
  height: 51px !important;
  gap: 10px !important;
  border-radius: 50px !important;
  border: 1px solid var(--color-border) !important;
  padding: 14px 32px !important;
  background-color: transparent !important;
  color: var(--color-secondary) !important;
  font-family: 'DM Sans' !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.blogs-bottom-btn:hover {
  background-color: var(--color-secondary-dark) !important;
  color: var(--color-text-white) !important;
  border-color: var(--color-secondary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(16, 81, 87, 0.2) !important;
}

/* Responsive Rules for Tablet & Mobile */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .blogs-header-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: clamp(20px, 3vw, 40px) !important;
    min-height: auto !important;
  }

  .blogs-heading-area {
    flex: 1 1 auto !important;
    max-width: 580px !important;
    min-height: auto !important;
  }

  .blog-card-item {
    flex: 0 0 340px !important;
    width: 340px !important;
    min-width: 340px !important;
    height: 400px !important;
  }
}

@media (max-width: 991.98px) {
  .blogs-header-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 20px !important;
    min-height: auto !important;
  }

  .blogs-heading-area {
    width: auto !important;
    max-width: calc(100% - 150px) !important;
    flex: 1 1 auto !important;
    min-height: auto !important;
  }

  .blogs-title {
    font-size: clamp(24px, 3.5vw, 36px) !important;
  }

  .blogs-arrows-wrap {
    flex-shrink: 0 !important;
  }

  .blog-card-item {
    flex: 0 0 320px !important;
    width: 320px !important;
    min-width: 320px !important;
    height: 380px !important;
  }

  .blog-card-img-link,
  .blog-card-img {
    width: 320px !important;
    height: 240px !important;
  }
}

@media (max-width: 575.98px) {
  .blogs-section-wrap {
    padding: 40px 0 !important;
  }

  .blogs-arrows-wrap {
    width: 110px !important;
    height: 48px !important;
  }

  .blogs-arrow-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .blog-card-item {
    flex: 0 0 calc(100vw - 48px) !important;
    width: calc(100vw - 48px) !important;
    min-width: calc(100vw - 48px) !important;
    height: 360px !important;
  }

  .blog-card-img-link,
  .blog-card-img {
    width: 100% !important;
    height: 230px !important;
    border-radius: 24px !important;
  }

  .blogs-bottom-btn {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   PARTNER & CLIENTS BANNER MARQUEE SECTION (Rewritten from oc-clients)
   -------------------------------------------------------------------------- */
.clients-section-wrap {
  width: 100% !important;
  background-color: var(--color-bg, #F8FAF9) !important;
  padding: 0 0 54px 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  /* border-top: 1px solid rgba(0, 0, 0, 0.04) !important; */
}

.clients-banner-wrap {
  width: 100% !important;
  max-width: 1440px !important;
  height: 148px !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  background-color: var(--color-white) !important;
}

.clients-logos-track {
  height: 71px !important;
  opacity: 0.75;
  gap: 62px !important;
  animation: marqueeScroll 28s linear infinite !important;
  transition: opacity 0.3s ease !important;
}

.clients-logos-track:hover {
  opacity: 1 !important;
}

.trusted-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.25s ease !important;
}

.trusted-logo-link:hover {
  transform: scale(1.06) !important;
}

div.trusted-logo-link {
  cursor: default !important;
}

div.trusted-logo-link:hover {
  transform: none !important;
}

.trusted-logo-img.client-logo-img {
  height: 71px !important;
  max-height: 71px !important;
  width: auto !important;
  object-fit: contain !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.trusted-logo-link:hover .trusted-logo-img.client-logo-img,
.trusted-logo-img.client-logo-img:hover {
  opacity: 1 !important;
}

@media (max-width: 991.98px) {
  .clients-section-wrap {
    padding: 0 0 42px 0 !important;
  }

  .clients-banner-wrap {
    height: 110px !important;
  }

  .clients-logos-track {
    height: 48px !important;
    gap: 45px !important;
  }

  .trusted-logo-img.client-logo-img {
    height: 48px !important;
    max-height: 48px !important;
  }
}

@media (max-width: 575.98px) {
  .clients-section-wrap {
    padding: 0 0 32px 0 !important;
  }

  .clients-banner-wrap {
    height: 90px !important;
  }

  .clients-logos-track {
    height: 36px !important;
    gap: 32px !important;
  }

  .trusted-logo-img.client-logo-img {
    height: 36px !important;
    max-height: 36px !important;
  }
}

/* --------------------------------------------------------------------------
   MEET OUR AYURVEDIC EXPERTS / DOCTORS SECTION (Exact User & Figma Specs)
   -------------------------------------------------------------------------- */
.content-wrap {
  width: 100% !important;
  height: auto !important;
  gap: 80px !important;
  opacity: 1 !important;
  background-color: var(--color-bg) !important;
}

.doctors-modern-section {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  gap: 64px !important;
  opacity: 1 !important;
  /* padding: 70px 0 80px 0 !important; */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.doctors-modern-section .container {
  width: 1220px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 64px !important;
  box-sizing: border-box !important;
}

.doctors-modern-header {
  width: 679px !important;
  max-width: 100% !important;
  height: 162px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  opacity: 1 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.doctors-modern-title {
  width: 434px !important;
  max-width: 100% !important;
  height: 100px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 48px !important;
  line-height: 50px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

.doctors-modern-subtitle {
  width: 679px !important;
  max-width: 100% !important;
  height: 54px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 27px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

#doctors-grid-container,
.doctors-grid-container {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 1220px !important;
  max-width: 100% !important;
  /* min-height: 1886px !important; */
  height: auto !important;
  gap: 25px !important;
  opacity: 1 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}

.doctors-modern-card {
  flex: 0 0 390px !important;
  width: 390px !important;
  max-width: 390px !important;
  height: 590px !important;
  /* min-height: 590px !important; */
  gap: 17px !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease !important;
}

.doctors-modern-card-photo {
  position: relative !important;
  width: 390px !important;
  max-width: 100% !important;
  height: 440px !important;
  opacity: 1 !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background-color: var(--color-white) !important;
  box-sizing: border-box !important;
}

.doctors-modern-card-photo img,
.doctors-modern-card-img {
  width: 390px !important;
  max-width: 100% !important;
  height: 440px !important;
  opacity: 1 !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 30px !important;
  display: block !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.doctors-modern-card:hover .doctors-modern-card-photo img,
.doctors-modern-card:hover .doctors-modern-card-img {
  transform: scale(1.04) !important;
}

.doctors-modern-card-badge {
  position: absolute !important;
  top: 30px !important;
  right: 30px !important;
  width: 54px !important;
  height: 54px !important;
  gap: 10px !important;
  opacity: 1 !important;
  border-radius: 42px !important;
  background-color: var(--color-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  z-index: 2 !important;
  transition: transform 0.3s ease, background-color 0.3s ease !important;
}

.doctors-modern-card-badge svg {
  width: 23.68px !important;
  height: 24.36px !important;
  opacity: 1 !important;
  stroke: var(--color-secondary-dark) !important;
  color: var(--color-secondary-dark) !important;
  stroke-width: 2.2 !important;
  transition: transform 0.3s ease, stroke 0.3s ease !important;
}

.doctors-modern-card:hover .doctors-modern-card-badge {
  transform: translateY(-2px) !important;
  background-color: var(--color-primary) !important;
}

.doctors-modern-card:hover .doctors-modern-card-badge svg {
  stroke: var(--color-text-white) !important;
  color: var(--color-text-white) !important;
}

.doctors-modern-card-info {
  width: 390px !important;
  max-width: 100% !important;
  height: 114px !important;
  gap: 8px !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.doctors-modern-card-nameinfo {
  width: 389px !important;
  max-width: 100% !important;
  height: 55px !important;
  gap: 4px !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.doctors-modern-specialty {
  width: 191px !important;
  max-width: 100% !important;
  height: 22px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-primary-dark) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.doctors-modern-name {
  width: 389px !important;
  max-width: 100% !important;
  height: 29px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
  transition: color 0.25s ease !important;
}

.doctors-modern-card:hover .doctors-modern-name {
  color: var(--color-primary) !important;
}

.doctors-modern-desc {
  width: 332px !important;
  max-width: 100% !important;
  height: 51px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  color: var(--color-text-secondary) !important;
  margin: 0 auto !important;
}

/* Doctors Carousel Section Slider Height Overrides */
#section-doctors-carousel .treatments-slider-outer {
  height: auto !important;
  /* min-height: 610px !important; */
}

#section-doctors-carousel .treatments-slider-inner {
  height: auto !important;
  /* min-height: 600px !important; */
  justify-content: flex-start !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

#section-doctors-carousel .treatments-slider-inner .doctors-modern-card {
  flex: 0 0 390px !important;
  width: 390px !important;
  max-width: 390px !important;
}

/* Responsive Rules for Doctor Section */
@media (min-width: 750px) and (max-width: 1199.98px) {

  .doctors-modern-section,
  #doctors-grid-container,
  .doctors-grid-container {
    width: 100% !important;
    min-height: auto !important;
  }

  .doctors-grid-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: clamp(16px, 2.5vw, 25px) !important;
    width: 100% !important;
  }

  .doctors-modern-card {
    flex: 0 1 calc(50% - 13px) !important;
    width: calc(50% - 13px) !important;
    max-width: 580px !important;
    height: auto !important;
  }

  .doctors-modern-card-photo,
  .doctors-modern-card-photo img,
  .doctors-modern-card-img {
    width: 100% !important;
    height: clamp(320px, 40vw, 440px) !important;
    border-radius: clamp(20px, 2.5vw, 30px) !important;
  }

  .doctors-modern-card-info,
  .doctors-modern-card-nameinfo,
  .doctors-modern-name,
  .doctors-modern-desc {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .doctors-modern-name {
    font-size: clamp(20px, 2.2vw, 24px) !important;
  }

  .doctors-modern-desc {
    font-size: clamp(13px, 1.4vw, 15px) !important;
  }
}

@media (max-width: 749.98px) {
  .doctors-modern-section .container {
    gap: 36px !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .doctors-modern-header {
    width: 100% !important;
    height: auto !important;
    gap: 14px !important;
  }

  .doctors-modern-title {
    width: 100% !important;
    height: auto !important;
    font-size: clamp(28px, 6vw, 38px) !important;
    line-height: 1.15 !important;
  }

  .doctors-modern-subtitle {
    width: 100% !important;
    height: auto !important;
    font-size: clamp(15px, 3.5vw, 19px) !important;
    line-height: 1.35 !important;
  }

  .doctors-grid-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .doctors-modern-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .doctors-modern-card-photo,
  .doctors-modern-card-photo img,
  .doctors-modern-card-img {
    width: 100% !important;
    height: clamp(280px, 80vw, 420px) !important;
    border-radius: 24px !important;
  }

  .doctors-modern-card-info,
  .doctors-modern-card-nameinfo,
  .doctors-modern-name,
  .doctors-modern-desc {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .doctors-modern-name {
    font-size: clamp(20px, 4.5vw, 24px) !important;
  }

  .doctors-modern-desc {
    font-size: clamp(13px, 3.2vw, 15px) !important;
  }
}

/* --------------------------------------------------------------------------
   DOCTOR PROFILE PAGE STYLES (Exact User & Figma Specs)
   -------------------------------------------------------------------------- */
.doc-profile-modern-section {
  background-color: var(--color-bg) !important;
  padding: 60px 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.container-profile-modern-section {
  /* width: min(1151px, calc(100% - 32px)) !important;
  max-width: 1151px !important; */
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.doc-profile-modern-grid {
  width: 100% !important;
  max-width: 1151px !important;
  height: auto !important;
  gap: clamp(24px, 3.5vw, 42px) !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

.doc-profile-modern-photo-col {
  flex: 0 1 580px !important;
  width: 100% !important;
  max-width: 580px !important;
  height: auto !important;
  aspect-ratio: 580 / 653 !important;
  opacity: 1 !important;
  border-radius: 30px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.doc-profile-modern-photo-col img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  opacity: 1 !important;
  border-radius: 30px !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
}

.doc-profile-modern-info-col {
  /* flex: 1 1 529px !important; */
  width: 100% !important;
  max-width: 529px !important;
  height: auto !important;
  gap: 30px !important;
  opacity: 1 !important;
  /* padding-top: 40px !important;
  padding-bottom: 40px !important; */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.doc-profile-modern-cn {
  width: 529px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 153px !important;
  gap: 14px !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.doc-profile-modern-category {
  /* width: 254px !important; */
  max-width: 100% !important;
  /* height: 29px !important; */
  height: auto !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-primary-dark, #0D3330) !important;
  margin: 0 !important;
}

.doc-profile-modern-name {
  width: 529px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 110px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 46px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

.doc-profile-modern-short {
  width: 529px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 78px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

.doc-profile-modern-btn-primary-pill {
  width: auto !important;
  max-width: 100% !important;
  height: 52px !important;
  gap: 10px !important;
  opacity: 1 !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  background-color: var(--color-secondary-dark, #0D3330) !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.doc-profile-modern-btn-primary-pill:hover {
  background-color: var(--color-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(13, 51, 48, 0.25) !important;
}

.doc-profile-modern-btn-primary-pill div,
.doc-profile-btn-icon {
  width: 24px !important;
  height: 24px !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.doc-profile-modern-btn-primary-pill div i,
.doc-profile-btn-icon svg {
  width: 20px !important;
  height: 20px !important;
  opacity: 1 !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

.doc-profile-modern-btn-primary-pill span {
  width: auto !important;
  height: 23px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: #FFFFFF !important;
  display: inline-block !important;
}

.doc-profile-modern-bio {
  width: 529px !important;
  max-width: 100% !important;
  height: auto !important;
  /* min-height: 572px !important; */
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 140% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
}

.doc-profile-modern-bio p {
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 140% !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 20px !important;
}

/* Responsive Media Queries for Doctor Profile */
@media (min-width: 750px) and (max-width: 1199.98px) {
  .container-profile-modern-section {
    width: 100% !important;
    padding: 0 20px !important;
  }

  .doc-profile-modern-grid {
    width: 100% !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(24px, 4vw, 42px) !important;
    min-height: auto !important;
  }

  .doc-profile-modern-photo-col,
  .doc-profile-modern-photo-col img {
    flex: 0 1 48% !important;
    /* width: auto !important; */
    max-width: 580px !important;
    height: clamp(400px, 48vw, 653px) !important;
  }

  .doc-profile-modern-info-col {
    flex: 1 1 48% !important;
    width: auto !important;
    max-width: 529px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }

  .doc-profile-modern-cn,
  .doc-profile-modern-name,
  .doc-profile-modern-short,
  .doc-profile-modern-btn-primary-pill,
  .doc-profile-modern-bio {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 749.98px) {
  .container-profile-modern-section {
    width: 100% !important;
    padding: 0 16px !important;
  }

  .doc-profile-modern-grid {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 32px !important;
    min-height: auto !important;
  }

  .doc-profile-modern-photo-col,
  .doc-profile-modern-photo-col img {
    width: 100% !important;
    max-width: 100% !important;
    /* height: clamp(280px, 70vw, 420px) !important; */
    border-radius: 24px !important;
  }

  .doc-profile-modern-info-col {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 20px !important;
    min-height: auto !important;
    gap: 24px !important;
  }

  .doc-profile-modern-cn,
  .doc-profile-modern-name,
  .doc-profile-modern-short,
  .doc-profile-modern-btn-primary-pill,
  .doc-profile-modern-bio {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
  }

  .doc-profile-modern-category {
    font-size: clamp(18px, 4vw, 22px) !important;
  }

  .doc-profile-modern-name {
    font-size: clamp(26px, 6vw, 36px) !important;
    line-height: 1.2 !important;
  }

  .doc-profile-modern-short {
    font-size: clamp(16px, 3.5vw, 20px) !important;
    line-height: 1.35 !important;
  }

  .doc-profile-modern-bio,
  .doc-profile-modern-bio p {
    font-size: clamp(15px, 3.2vw, 18px) !important;
    line-height: 1.45 !important;
  }

  .doc-profile-modern-btn-primary-pill {
    height: 50px !important;
    padding: 12px 24px !important;
  }
}

/* --------------------------------------------------------------------------
   FINAL CTA SECTION (Exact Design Specs: 1440px x 485px)
   -------------------------------------------------------------------------- */
.final-cta-section {
  width: 1440px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  margin: 0 auto !important;
  gap: 10px !important;
  opacity: 1 !important;
  padding: 64px 24px !important;
  border-radius: 50px !important;
  background-color: #FFFFFF !important;
  border: 16px solid var(--color-secondary-dark) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.final-cta-section .container {
  width: 1314px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  gap: 24px !important;
  opacity: 1 !important;
  padding-right: 20px !important;
  padding-left: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.final-cta-heading {
  width: 100% !important;
  max-width: 912px !important;
  height: auto !important;
  min-height: auto !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 600 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.25 !important;
  letter-spacing: 0px !important;
  text-align: center !important;
  color: var(--color-secondary-dark) !important;
  margin: 0 auto !important;
}

.final-cta-desc {
  width: 958px !important;
  max-width: 100% !important;
  height: auto !important;
  gap: 10px !important;
  opacity: 1 !important;
  margin: 0 auto !important;
}

.final-cta-desc p {
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 130% !important;
  letter-spacing: 0px !important;
  text-align: center !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

.final-cta-btn-wrapper {
  width: 333px !important;
  max-width: 100% !important;
  height: auto !important;
  gap: 2px !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

.final-cta-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  outline: none !important;
}

.final-cta-btn-pill {
  width: 275px !important;
  height: 57px !important;
  gap: 20px !important;
  opacity: 1 !important;
  padding: 14px 30px !important;
  border-radius: 30px !important;
  background-color: var(--color-primary) !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px var(--color-border) !important;

}

.final-cta-btn__text {
  width: 215px !important;
  height: 29px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  text-transform: capitalize !important;
  color: var(--color-text-white) !important;
  display: inline-block !important;
  text-align: center !important;
}

.final-cta-btn__circle {
  width: 56px !important;
  height: 56px !important;
  gap: 20px !important;
  opacity: 1 !important;
  border-radius: 30px !important;
  padding: 14px !important;
  background-color: var(--color-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(30, 181, 66, 0.2) !important;
}

.final-cta-btn__circle svg {
  width: 20px !important;
  height: 18px !important;
  opacity: 1 !important;
  stroke: var(--color-text-white) !important;
  transition: transform 0.25s ease !important;
}

/* Hover Animation matching Header Get Started button */
.final-cta-btn:hover .final-cta-btn-pill,
.final-cta-btn:hover .final-cta-btn__circle {
  background-color: var(--color-primary-dark) !important;
  color: var(--color-text-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(30, 181, 66, 0.3) !important;
}

.final-cta-btn:hover .final-cta-btn__circle svg {
  transform: translateX(4px) !important;
}

.final-cta-btn:active .final-cta-btn-pill,
.final-cta-btn:active .final-cta-btn__circle {
  transform: translateY(0px) !important;
  box-shadow: 0 2px 8px rgba(30, 181, 66, 0.2) !important;
}

.final-cta-trust-list {
  width: 1274px !important;
  max-width: 100% !important;
  height: 34px !important;
  gap: 24px !important;
  opacity: 1 !important;
  padding-top: 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto !important;
}

.final-cta-trust-list-box {
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  opacity: 1 !important;
  color: var(--color-text-muted) !important;
}

.final-cta-trust-item {
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  opacity: 1 !important;
}

.final-cta-trust-item-logo {
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.final-cta-trust-item-text {
  height: 18px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  letter-spacing: 0px !important;
  text-align: center !important;
  color: var(--color-text-secondary) !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   FOOTER SECTION (Exact Design Specs: 1440px Width, 864px Height)
   -------------------------------------------------------------------------- */
.vaidyar-footer {
  width: 100% !important;
  /* max-width: 1440px !important; */
  /* min-height: 864px !important; */
  margin: 0 auto !important;
  color: var(--color-text-white) !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  background-color: var(--color-secondary-dark) !important;
}

.vaidyar-footer-inner {
  width: 100% !important;
  /* max-width: 1440px !important; */
  height: 379px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  padding: 80px 94px !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
}

/* Left Brand Text & Copyright Column */
.vaidyar-footer-inner-text {
  width: 392px !important;
  height: 245px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 34px !important;
  opacity: 1 !important;
}

.vaidyar-footer-inner-text-brand {
  width: 392px !important;
  height: 193px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  opacity: 1 !important;
}

.footer-logo-link {
  width: 283px !important;
  height: 71px !important;
  display: block !important;
  opacity: 1 !important;
}

.footer-logo {
  width: auto !important;
  max-width: 283px !important;
  /* height: 71px !important; */
  filter: brightness(0) invert(1) !important;
  display: block !important;
}

.footer-desc {
  width: 392px !important;
  max-width: 100% !important;
  height: 108px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  opacity: 1 !important;
}

.footer-desc p {
  width: 392px !important;
  max-width: 100% !important;
  height: 108px !important;
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 27px !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.footer-bottom-inner {
  width: 392px !important;
  max-width: 100% !important;
  height: 18px !important;
  opacity: 1 !important;
}

.footer-copyright {
  width: 330px !important;
  max-width: 100% !important;
  height: 18px !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: 0px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  opacity: 1 !important;
}

/* Right Column Links Wrapper */
.vaidyar-footer-inner-links {
  width: 660px !important;
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 40px !important;
  opacity: 1 !important;
}

.footer-col.footer-col--links {
  width: auto !important;
  min-width: 140px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  opacity: 1 !important;
}

.footer-col.footer-col--links .footer-col-title {
  width: 100% !important;
  height: auto !important;
  padding-bottom: 8px !important;
  opacity: 1 !important;
}

.footer-col-title-text {
  width: 100% !important;
  height: auto !important;
  font-family: 'DM Sans' !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 20px !important;
  letter-spacing: 0.14px !important;
  color: var(--color-text-white) !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.footer-links-list {
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.footer-links-list a {
  height: auto !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  letter-spacing: 0px !important;
  color: var(--color-text-secondary) !important;
  text-decoration: none !important;
  display: inline-block !important;
  opacity: 1 !important;
  transition: color 0.2s ease !important;
  white-space: nowrap !important;
}

.footer-links-list a:hover {
  color: var(--color-text-white) !important;
}

/* Contact Column */
.footer-col.footer-col--contact {
  width: 216px !important;
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  opacity: 1 !important;
}

.footer-col.footer-col--contact .footer-col-title {
  width: 100% !important;
  height: auto !important;
  padding-bottom: 8px !important;
  opacity: 1 !important;
}

.footer-col.footer-col--contact .footer-col-title-text {
  width: 100% !important;
  height: auto !important;
  font-family: 'DM Sans' !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  line-height: 20px !important;
  letter-spacing: 0.14px !important;
  color: var(--color-text-white) !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.footer-contact-info {
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
}

.footer-contact-info p,
.footer-contact-info a {
  width: 100% !important;
  height: auto !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  letter-spacing: 0px !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.footer-social-icons {
  width: 216px !important;
  height: 40px !important;
  padding-top: 8px !important;
  opacity: 1 !important;
}

.footer-social-icons>div {
  width: 216px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  opacity: 1 !important;
}

.footer-social-icons a {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9999px !important;
  background-color: #FFFFFF1A !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.footer-social-icons a:hover {
  background-color: var(--color-primary) !important;
}

.footer-social-icons a div {
  width: 11.67px !important;
  height: 11.67px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
}

.footer-social-icons a div i {
  width: 11.67px !important;
  height: 11.67px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: var(--color-text-white) !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Responsive Media Queries for Tablet and Mobile */
@media (max-width: 1199.98px) {
  .vaidyar-footer-inner {
    padding: 60px 40px !important;
    height: auto !important;
  }

  .vaidyar-footer-inner-links {
    gap: 40px !important;
  }
}

@media (max-width: 1045px) {
  .vaidyar-footer {
    height: auto !important;
    min-height: auto !important;
  }

  .vaidyar-footer-inner {
    flex-direction: column !important;
    height: auto !important;
    gap: 48px !important;
    padding: 60px 30px !important;
  }

  .vaidyar-footer-inner-text,
  .vaidyar-footer-inner-text-brand,
  .footer-desc,
  .footer-desc p,
  .vaidyar-footer-inner-links {
    width: 100% !important;
    height: auto !important;
  }

  .footer-desc p {
    font-size: 18px !important;
    line-height: 1.5 !important;
    height: auto !important;
  }

  .vaidyar-footer-inner-links {
    flex-wrap: wrap !important;
    gap: 36px !important;
    height: auto !important;
  }
}

@media (max-width: 575.98px) {
  .vaidyar-footer-inner {
    padding: 40px 20px !important;
    gap: 36px !important;
  }

  .footer-col.footer-col--links,
  .footer-col.footer-col--contact {
    width: 100% !important;
    height: auto !important;
  }

  .footer-logo-link,
  .footer-logo {
    width: 220px !important;
    height: auto !important;
  }
}

/* --------------------------------------------------------------------------
   ONLINE CONSULTATION / SERVICES PAGE STYLES (Dedicated Independent CSS)
   -------------------------------------------------------------------------- */
.online-consultation-section-wrap {
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  background-color: var(--color-bg) !important;
}

.online-consultation-section {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 70px 0 80px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.online-consultation-container {
  width: 1220px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 64px !important;
  box-sizing: border-box !important;
}

.online-consultation-header {
  width: 679px !important;
  max-width: 100% !important;
  min-height: 162px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  opacity: 1 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.online-consultation-title {
  width: 434px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 48px !important;
  line-height: 50px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

.online-consultation-description {
  width: 679px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 54px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 27px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  color: var(--color-text-secondary) !important;
  margin: 0 !important;
}

.online-consultation-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 1220px !important;
  max-width: 100% !important;
  height: auto !important;
  gap: 25px !important;
  opacity: 1 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
}

.online-consultation-card {
  flex: 0 0 390px !important;
  width: 390px !important;
  max-width: 390px !important;
  height: auto !important;
  min-height: 510px !important;
  gap: 17px !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease !important;
}

.online-consultation-card:hover {
  transform: translateY(-4px) !important;
}

.online-consultation-card-image {
  width: 390px !important;
  max-width: 100% !important;
  height: 440px !important;
  opacity: 1 !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: var(--color-white) !important;
  box-sizing: border-box !important;
}

.online-consultation-card-img {
  width: 390px !important;
  max-width: 100% !important;
  height: 440px !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  border-radius: 30px !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.online-consultation-card:hover .online-consultation-card-img {
  transform: scale(1.03) !important;
}

.online-consultation-card-badge {
  width: 54px !important;
  height: 54px !important;
  position: absolute !important;
  top: 30px !important;
  right: 30px !important;
  gap: 10px !important;
  opacity: 1 !important;
  border-radius: 42px !important;
  background-color: var(--color-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  transition: background-color 0.3s ease, transform 0.3s ease !important;
}

.online-consultation-card:hover .online-consultation-card-badge {
  background-color: var(--color-secondary-dark) !important;
  transform: rotate(45deg) !important;
}

.online-consultation-card-badge svg {
  width: 23.68px !important;
  height: 24.36px !important;
  opacity: 1 !important;
  stroke: var(--color-secondary-dark) !important;
  color: var(--color-secondary-dark) !important;
  stroke-width: 2.2 !important;
  transition: transform 0.3s ease, stroke 0.3s ease !important;
}

.online-consultation-card:hover .online-consultation-card-badge svg {
  stroke: var(--color-white) !important;
  color: var(--color-white) !important;
}

.online-consultation-card-content {
  width: 390px !important;
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

.online-consultation-card-title {
  width: 100% !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 0 2px 0 !important;
}

.online-consultation-card-meta {
  width: 100% !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: #16A34A !important;
  margin: 0 !important;
}

/* Responsive Rules for Online Consultation Page */
@media (max-width: 1199.98px) {

  .online-consultation-section,
  .online-consultation-container,
  .online-consultation-grid {
    width: 100% !important;
  }

  .online-consultation-grid {
    justify-content: center !important;
    gap: 24px !important;
    padding: 0 16px !important;
  }

  .online-consultation-card {
    flex: 0 0 calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    max-width: 100% !important;
  }

  .online-consultation-card-image,
  .online-consultation-card-img {
    width: 100% !important;
    height: 380px !important;
  }

  .online-consultation-card-content {
    width: 100% !important;
  }
}

@media (max-width: 767.98px) {
  .online-consultation-header {
    width: 100% !important;
    padding: 0 16px !important;
  }

  .online-consultation-title {
    width: 100% !important;
    font-size: clamp(28px, 6vw, 36px) !important;
    line-height: 1.2 !important;
  }

  .online-consultation-description {
    width: 100% !important;
    font-size: clamp(16px, 3.5vw, 20px) !important;
    line-height: 1.35 !important;
  }

  .online-consultation-grid {
    flex-direction: column !important;
    align-items: center !important;
    gap: 32px !important;
  }

  .online-consultation-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 420px !important;
  }

  .online-consultation-card-image,
  .online-consultation-card-img {
    height: clamp(300px, 85vw, 420px) !important;
    border-radius: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   DEPARTMENT DETAIL PAGE STYLES (Dedicated Independent CSS)
   -------------------------------------------------------------------------- */
.dept-detail-wrap {
  width: 1151px !important;
  max-width: 100% !important;
  height: auto !important;
  /* min-height: 653px !important; */
  gap: 42px !important;
  opacity: 1 !important;
  display: flex !important;
  /* flex-wrap: wrap !important; */
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.dept-detail-photo {
  width: 580px !important;
  max-width: 100% !important;
  height: 653px !important;
  opacity: 1 !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

.dept-detail-img {
  width: 580px !important;
  max-width: 100% !important;
  height: 653px !important;
  opacity: 1 !important;
  border-radius: 30px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.dept-detail-col {
  width: 529px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 528px !important;
  gap: 30px !important;
  opacity: 1 !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.dept-detail-info {
  width: 529px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 98px !important;
  gap: 14px !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.dept-detail-title {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 55px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 46px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

.dept-detail-modern-n {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 29px !important;
  gap: 16px !important;
  opacity: 1 !important;
}

.dept-detail-modern-name {
  width: auto !important;
  max-width: 100% !important;
  height: 29px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-primary-dark) !important;
  margin: 0 !important;
}

.dept-detail-desc {
  width: 529px !important;
  max-width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

.dept-detail-buttons {
  width: 529px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 120px !important;
  gap: 16px !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 10px !important;
}

.dept-detail-btn-contact-pill {
  width: 529px !important;
  max-width: 100% !important;
  height: 52px !important;
  gap: 10px !important;
  opacity: 1 !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  border: 1px solid #E4E8E7 !important;
  background-color: var(--color-white, #FFFFFF) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}

.dept-detail-btn-contact-pill:hover {
  background-color: #F4F8F7 !important;
  border-color: var(--color-secondary-dark, #0D3330) !important;
  transform: translateY(-2px) !important;
}

.dept-detail-btn-contact-pill span {
  width: auto !important;
  height: 23px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: var(--color-secondary-dark, #0D3330) !important;
}

.dept-detail-btn-schedule-pill {
  width: 529px !important;
  max-width: 100% !important;
  height: 52px !important;
  gap: 10px !important;
  opacity: 1 !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  border: none !important;
  background-color: var(--color-secondary-dark, #0D3330) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.dept-detail-btn-schedule-pill:hover {
  background-color: var(--color-primary, #104C46) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(13, 51, 48, 0.25) !important;
}

.dept-detail-btn-schedule-pill span {
  width: auto !important;
  height: 23px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: #FFFFFF !important;
}

.dept-detail-btn-icon {
  width: 24px !important;
  height: 24px !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dept-detail-btn-contact-pill .dept-detail-btn-icon svg {
  stroke: var(--color-secondary-dark, #0D3330) !important;
  color: var(--color-secondary-dark, #0D3330) !important;
}

.dept-detail-btn-schedule-pill .dept-detail-btn-icon svg {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Responsive Styles for Department Detail Page */
@media (max-width: 1199.98px) {
  .dept-detail-wrap {
    width: 100% !important;
    gap: 30px !important;
    justify-content: center !important;
  }

  .dept-detail-photo,
  .dept-detail-img {
    width: 100% !important;
    max-width: 580px !important;
    height: 480px !important;
  }

  .dept-detail-col,
  .dept-detail-info,
  .dept-detail-desc,
  .dept-detail-buttons,
  .dept-detail-btn-contact-pill,
  .dept-detail-btn-schedule-pill {
    width: 100% !important;
  }

  .dept-detail-col {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    min-height: auto !important;
  }
}

@media (max-width: 767.98px) {

  .dept-detail-photo,
  .dept-detail-img {
    height: clamp(300px, 80vw, 420px) !important;
    border-radius: 24px !important;
  }

  .dept-detail-title {
    font-size: clamp(28px, 6vw, 36px) !important;
    line-height: 1.2 !important;
  }

  .dept-detail-desc {
    font-size: clamp(16px, 3.5vw, 20px) !important;
    line-height: 1.35 !important;
  }

  .dept-detail-btn-contact-pill,
  .dept-detail-btn-schedule-pill {
    padding: 12px 20px !important;
  }
}

@media (max-width: 575.98px) {
  .dept-detail-wrap {
    padding: 0 12px !important;
  }

  .dept-detail-photo,
  .dept-detail-img {
    height: 320px !important;
    border-radius: 20px !important;
  }

  .dept-detail-title {
    font-size: clamp(24px, 5.5vw, 32px) !important;
    line-height: 1.25 !important;
  }

  .dept-detail-modern-name {
    font-size: 18px !important;
  }

  .dept-detail-desc {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  .dept-detail-btn-contact-pill,
  .dept-detail-btn-schedule-pill {
    width: 100% !important;
    height: 48px !important;
    padding: 10px 20px !important;
  }

  .online-consultation-section {
    padding: 40px 0 60px 0 !important;
  }

  .online-consultation-title {
    font-size: clamp(26px, 6vw, 34px) !important;
    line-height: 1.2 !important;
  }

  .online-consultation-description {
    font-size: clamp(15px, 3.5vw, 18px) !important;
    line-height: 1.35 !important;
  }

  .online-consultation-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
  }

  .online-consultation-card-image,
  .online-consultation-card-img {
    height: 320px !important;
    border-radius: 20px !important;
  }

  .online-consultation-card-title {
    font-size: 20px !important;
  }

  .online-consultation-card-meta {
    font-size: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   RESPONSIVE ENHANCEMENTS (Mobile Navbar, Final CTA <757px, Global 500px Stacking)
   -------------------------------------------------------------------------- */

/* 1. Mobile Navbar Styles (<991px & <500px) */
@media (max-width: 991.98px) {
  .vaidyar-navbar {
    height: auto !important;
    min-height: 72px !important;
    padding: 12px 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .vaidyar-navbar-container {
    height: auto !important;
    min-height: 48px !important;
    width: 100% !important;
    padding: 0 16px !important;
  }

  .vaidyar-logo-img {
    width: 150px !important;
    height: 52px !important;
  }

  /* Mobile Trigger Icon Toggle */
  .vaidyar-mobile-trigger.is-open .icon-line-menu:before,
  .vaidyar-mobile-trigger[aria-expanded="true"] .icon-line-menu:before {
    content: "\ea11" !important;
    /* icon-line-cross */
  }

  /* Search Bar Visibility: Hide mobile search inside menu above 768px, show at <=768px */
  @media (min-width: 768.02px) {
    .vaidyar-mobile-search-form {
      display: none !important;
    }
  }

  @media (max-width: 768px) {
    .vaidyar-header-search-form {
      display: none !important;
    }

    .vaidyar-mobile-search-form {
      display: block !important;
      width: 100% !important;
    }
  }

  .vaidyar-mobile-collapse {
    display: none !important;
    width: 100% !important;
    background-color: #FFFFFF !important;
    border-top: 1px solid var(--color-border) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    margin-top: 10px !important;
  }

  @media (max-width: 991.98px) {
    .vaidyar-mobile-collapse.show {
      display: block !important;
    }
  }

  .vaidyar-mobile-menu-inner {
    padding: 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .vaidyar-mobile-nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .vaidyar-mobile-nav-link {
    font-family: 'DM Sans' !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--color-text-primary) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 12px 18px !important;
    border-radius: var(--radius-sm, 8px) !important;
    background-color: var(--color-bg, #F8FAF9) !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .vaidyar-mobile-nav-link:hover,
  .vaidyar-mobile-nav-link.active {
    background-color: var(--color-primary-light, #E8F8EC) !important;
    color: var(--color-primary-dark, #169136) !important;
    font-weight: 600 !important;
  }

  .vaidyar-mobile-cta-wrap {
    width: 100% !important;
    margin-top: 4px !important;
  }

  .vaidyar-mobile-cta-wrap .btn-primary-pill {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
  }
}

@media (max-width: 500px) {
  .vaidyar-navbar-container {
    padding: 0 12px !important;
  }

  .vaidyar-logo-img {
    width: 130px !important;
    height: 46px !important;
  }

  .vaidyar-cta-col .btn-primary-pill {
    display: none !important;
  }
}

/* 2. Final CTA Section Responsive Overrides (<=991.98px & <=575.98px) */
@media (max-width: 991.98px) {
  .final-cta-section {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 44px 20px !important;
    border-width: 8px !important;
    border-radius: 32px !important;
  }

  .final-cta-section .container {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    gap: 20px !important;
  }

  .final-cta-heading {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    font-size: clamp(26px, 4.5vw, 38px) !important;
    line-height: 1.25 !important;
  }

  .final-cta-desc,
  .final-cta-desc p {
    width: 100% !important;
    height: auto !important;
    font-size: clamp(14px, 2.2vw, 18px) !important;
    line-height: 1.45 !important;
  }

  .final-cta-btn-wrapper {
    width: 100% !important;
    max-width: 333px !important;
    height: auto !important;
  }

  .final-cta-trust-list {
    width: 100% !important;
    height: auto !important;
    flex-wrap: wrap !important;
  }

  .final-cta-trust-list-box {
    flex-wrap: wrap !important;
    justify-content: center !important;
    height: auto !important;
    gap: 16px !important;
  }
}

@media (max-width: 575.98px) {
  .final-cta-section {
    padding: 28px 12px !important;
    border-width: 6px !important;
    border-radius: 24px !important;
  }

  .final-cta-heading {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.3 !important;
  }

  .final-cta-desc,
  .final-cta-desc p {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.45 !important;
  }

  .final-cta-btn-wrapper {
    width: 100% !important;
    max-width: 290px !important;
  }

  .final-cta-btn-pill {
    width: clamp(180px, 65vw, 230px) !important;
    height: 48px !important;
    padding: 10px 16px !important;
  }

  .final-cta-btn__text {
    width: auto !important;
    height: auto !important;
    font-size: 15px !important;
  }

  .final-cta-btn__circle {
    width: 48px !important;
    height: 48px !important;
    padding: 10px !important;
  }
}

/* 3. Global Column Stacking & Overflow Prevention below 500px */
@media (max-width: 500px) {

  .container,
  .hero-container,
  .trusted-container,
  .how-it-works-grid,
  .authentic-kerala-container,
  .treatments-container,
  .specialized-cards-grid,
  .reviews-header-row,
  .doctors-grid-container,
  .online-consultation-grid,
  .dept-detail-wrap,
  .doc-profile-modern-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  .how-it-works-card,
  .specialized-card,
  .blog-card-item,
  .doctors-modern-card,
  .online-consultation-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  img,
  svg {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   BLOG INDEX PAGE MODERN STYLING (.blog-index-modern)
   ========================================================================== */

.blog-index-modern {
  font-family: 'DM Sans' !important;
  color: var(--color-text-primary, #1A1A1A) !important;
  width: 100% !important;
  max-width: 1220px !important;
  margin: 0 auto 80px auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 64px !important;
  opacity: 1 !important;
  padding: 40px 20px 0 20px !important;
  box-sizing: border-box !important;
  background: var(--color-bg);
}

.blog-index-intro {
  width: 810px !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 22px !important;
  opacity: 1 !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.blog-index-intro-title {
  width: 612px !important;
  max-width: 100% !important;
  height: 50px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 48px !important;
  line-height: 50px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 auto !important;
}

.blog-index-intro-sub {
  width: 810px !important;
  max-width: 100% !important;
  height: 54px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 27px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  color: var(--color-text-secondary, #64748B) !important;
  margin: 0 auto !important;
}

.blog-featured-card {
  width: 1225px !important;
  max-width: 100% !important;
  height: 468px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 42px !important;
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.blog-featured-img-link {
  width: 654px !important;
  height: 468px !important;
  display: block !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.blog-featured-img-wrap {
  width: 654px !important;
  height: 468px !important;
  object-fit: cover !important;
  border-radius: 30px !important;
  opacity: 1 !important;
  display: block !important;
}

.blog-featured-content {
  width: 529px !important;
  max-width: 100% !important;
  height: 468px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

.blog-featured-content-text {
  width: 529px !important;
  max-width: 100% !important;
  height: 302px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 26px !important;
  opacity: 1 !important;
}

.blog-featured-content-title {
  width: 529px !important;
  max-width: 100% !important;
  height: 146px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  opacity: 1 !important;
}

.blog-featured-date {
  /* width: 113px !important; */
  height: 22px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary) !important;
}

.blog-featured-title,
.blog-featured-title a {
  width: 529px !important;
  max-width: 100% !important;
  /* height: 130px !important; */
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 46px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 !important;
  text-decoration: none !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
}

.blog-featured-excerpt {
  width: 529px !important;
  max-width: 100% !important;
  height: 130px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
}

.blog-featured-content-btn {
  width: 529px !important;
  max-width: 100% !important;
  height: 51px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  opacity: 1 !important;
}

.blog-featured-btn-link {
  width: 100% !important;
  height: 51px !important;
  text-decoration: none !important;
  display: block !important;
}

.blog-featured-content-btn button {
  width: 529px !important;
  max-width: 100% !important;
  height: 51px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  background-color: var(--color-secondary) !important;
  border: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

.blog-featured-content-btn button:hover,
.blog-featured-btn-link:hover button {
  background-color: var(--color-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(30, 181, 66, 0.3) !important;
}

.blog-featured-content-btn button:active,
.blog-featured-btn-link:active button {
  transform: translateY(0) !important;
  box-shadow: 0 4px 10px rgba(30, 181, 66, 0.2) !important;
}

.blog-featured-content-btn button span {
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  color: #FFFFFF !important;
  transition: color 0.3s ease !important;
}

.blog-latest-main-section {
  /* width: 1220px !important; */
  max-width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  opacity: 1 !important;
}

.blog-latest-section {
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  opacity: 1 !important;
}

.blog-section-title {
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 48px !important;
  line-height: 120% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primary) !important;
  margin: 0 !important;
}

.blog-category-filters {
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  opacity: 1 !important;
}

.blog-category-pill {
  width: auto !important;
  height: 45px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  opacity: 1 !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  border: 1px solid var(--color-border) !important;
  background-color: transparent !important;
  font-family: 'DM Sans' !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  text-transform: capitalize !important;
  color: var(--color-text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.blog-category-pill.active,
.blog-category-pill:hover {
  background-color: var(--color-primary, #1EB542) !important;
  border-color: var(--color-primary, #1EB542) !important;
  color: #FFFFFF !important;
}

/* Blog Card Grid (Exact Home Page Card Design) */
.blog-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  /* margin-bottom: 60px !important; */
}

.blog-card-grid .blog-card-item {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 405px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 17px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
  transition: transform 0.3s ease !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
}

.blog-card-grid .blog-card-item.d-none,
.blog-card-item-wrap.d-none {
  display: none !important;
}

.blog-card-grid .blog-card-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: none !important;
  border: none !important;
}

.blog-card-grid .blog-card-img-link {
  width: 100% !important;
  height: 298px !important;
  display: block !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background-color: #F0F4F2 !important;
}

.blog-card-grid .blog-card-img {
  width: 100% !important;
  height: 298px !important;
  object-fit: cover !important;
  border-radius: 30px !important;
  transition: transform 0.4s ease !important;
  display: block !important;
}

.blog-card-grid .blog-card-item:hover .blog-card-img {
  transform: scale(1.04) !important;
}

.blog-card-grid .blog-card-body {
  width: 100% !important;
  height: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 !important;
}

.blog-card-grid {
  width: 100% !important;
  height: auto !important;
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 120% !important;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 !important;
  overflow: hidden !important;
  /* display: -webkit-box !important; */
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  transition: color 0.25s ease !important;
}

.blog-card-grid .blog-card-item:hover .blog-card-title {
  color: var(--color-primary, #1EB542) !important;
}

.blog-card-grid .blog-card-meta {
  width: 100% !important;
  height: 22px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 22px !important;
  color: var(--color-text-body, #64748B) !important;
  margin: 0 !important;
}

.blog-card-grid .blog-card-meta-time,
.blog-card-grid .blog-card-meta-date {
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 22px !important;
  color: var(--color-text-body, #64748B) !important;
}

/* ==========================================================================
   BLOG SEARCH BAR (Matching Design Mockup)
   ========================================================================== */
.blog-search-bar-wrap {
  width: 535px;
  ;
  height: 50px;
  border-radius: 35px;
  /* border: 1px solid var(--color-border); */
  background: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 8px 34px;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-search-bar-wrap:focus-within {
  border-color: #16A34A;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.blog-search-icon {
  flex-shrink: 0;
  color: #94A3B8;
}

.blog-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-family: 'DM Sans';
  font-size: 14.5px;
  color: #1A1A1A;
  width: 139px;
  height: 20px;
  font-family: Plus Jakarta Sans;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;

}

.blog-search-input::placeholder {
  color: #94A3B8;
}

/* ==========================================================================
   BLOG NEWSLETTER SECTION (Stay Connected With Ayurveda)
   ========================================================================== */
.blog-newsletter-section {
  width: 100%;
  max-width: 1220px;
  height: auto;
  opacity: 1;
  border-radius: 30px;
  padding: 48px 112px;
  background: #EAF7ED;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-sizing: border-box;
}

.blog-newsletter-section-content {
  width: 100%;
  max-width: 672px;
  height: auto;
  min-height: 233.59px;
  gap: 10px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.blog-newsletter-badge {
  width: 44px;
  height: 44px;
  opacity: 1;
  border-radius: 9999px;
  padding: 10px;
  background: #FFFFFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-bottom: 0;
}

.blog-newsletter-section-textbox {
  width: 100%;
  max-width: 640px;
  height: auto;
  gap: 14px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.blog-newsletter-section-heading {
  width: 100%;
  max-width: 640px;
  height: auto;
  gap: 4px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.blog-newsletter-title {
  font-family: 'DM Sans' !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 32px !important;
  line-height: 38.4px !important;
  letter-spacing: 0px !important;
  text-align: center !important;
  vertical-align: middle;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 !important;
}

.blog-newsletter-sub {
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 130% !important;
  letter-spacing: 0px !important;
  text-align: center !important;
  vertical-align: middle;
  color: var(--color-text-secondary, #5F6B66) !important;
  margin: 0 !important;
}

.blog-newsletter-form {
  width: 100%;
  max-width: 512px;
  height: auto;
  min-height: 53.59px;
  gap: 8px;
  opacity: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-sizing: border-box;
}

.blog-newsletter-input {
  width: 370px !important;
  max-width: 100% !important;
  height: 53.59px !important;
  opacity: 1;
  border-radius: 12px !important;
  padding: 16px 20px 16.59px 20px !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05) !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0px !important;
  vertical-align: middle;
  color: var(--color-text-primary, #1A1A1A) !important;
  box-sizing: border-box !important;
  outline: none !important;
}

.blog-newsletter-input:focus {
  border-color: var(--color-primary, #16A34A) !important;
}

.blog-newsletter-btn {
  width: 134px !important;
  height: 48px !important;
  opacity: 1;
  border-radius: 12px !important;
  border: none !important;
  padding: 14px 32px !important;
  background: var(--color-primary, #16A34A) !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05) !important;
  font-family: 'DM Sans' !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 19.6px !important;
  letter-spacing: 0.14px !important;
  text-align: center !important;
  vertical-align: middle;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
}

.blog-newsletter-btn:hover {
  background: #15803D !important;
  transform: translateY(-1px);
}

.blog-newsletter-result {
  margin-top: 10px;
  font-family: 'DM Sans';
  font-size: 14px;
  font-weight: 500;
  color: #166534;
}

.blog-newsletter-disclaimer {
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 16.8px !important;
  letter-spacing: 0px !important;
  text-align: center !important;
  vertical-align: middle;
  color: var(--color-text-muted, #94A3B8) !important;
  margin: 0 !important;
}

/* ==========================================================================
   BLOG VIDEO SECTION (Watch & Learn)
   ========================================================================== */
.blog-watch-learn-section {
  width: 100%;
  height: auto;
  gap: 24px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.blog-watch-learn-header {
  width: 100%;
  min-height: 58px;
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  opacity: 1;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.blog-watch-learn-title {
  font-family: 'DM Sans';
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 32px !important;
  line-height: 38.4px !important;
  letter-spacing: 0% !important;
  color: var(--color-text-primaryA) !important;
  margin: 0 !important;
}

.blog-watch-learn-desc {
  font-family: 'DM Sans';
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 16px !important;
  line-height: 130% !important;
  letter-spacing: 0% !important;
  color: var(--color-text-secondary, #5F6B66) !important;
  max-width: 520px !important;
  margin: 0 !important;
}

.blog-video-grid {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  opacity: 1;
  padding-top: 8px;
  box-sizing: border-box;
}

.blog-video-card {
  width: auto;
  height: auto;
  opacity: 1;
  border-radius: 16px;
  box-shadow: 0px 4px 20px 0px #17383A0A;
  background: #FFFFFF;
  overflow: hidden;
  border: 1px solid #E8EDEA;
  text-decoration: none !important;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.blog-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 10px 25px 0px rgba(23, 56, 58, 0.1);
}

.blog-video-thumb-wrap {
  width: 100%;
  height: 192px;
  position: relative;
  overflow: hidden;
  background: #F0F4F2;
  opacity: 1;
  box-sizing: border-box;
}

.blog-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: transform 0.4s ease;
}

.blog-video-card:hover .blog-video-thumb {
  transform: scale(1.04);
}

.blog-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  opacity: 1;
  border-radius: 9999px;
  background: #FFFFFF;
  box-shadow: 0px 4px 6px -4px #0000001A, 0px 10px 15px -3px #0000001A;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: transform 0.2s ease;
}

.blog-video-card:hover .blog-video-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
}

.blog-video-play-btn svg {
  width: 11.92px;
  height: 15.17px;
  opacity: 1;
  display: block;
}

.blog-video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: auto;
  height: 21px;
  opacity: 1;
  border-radius: 4px;
  padding: 2px 8px;
  background: #000000B2;
  font-family: 'Plus Jakarta Sans', 'DM Sans' !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 12px !important;
  line-height: 16.8px !important;
  letter-spacing: 0px !important;
  vertical-align: middle;
  color: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  box-sizing: border-box;
}

.blog-video-content {
  width: 100%;
  height: auto;
  gap: 9.69px;
  opacity: 1;
  padding: 26px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.blog-video-category {
  font-family: 'DM Sans' !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 14px !important;
  line-height: 16.8px !important;
  letter-spacing: 0px !important;
  vertical-align: middle;
  color: var(--color-primary-dark, #105157) !important;
  margin: 0 !important;
}

.blog-video-heading {
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-size: 24px !important;
  line-height: 31.2px !important;
  letter-spacing: 0px !important;
  vertical-align: middle;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 !important;
  transition: color 0.2s ease;
}

.blog-video-card:hover .blog-video-heading {
  color: var(--color-primary-dark, #105157) !important;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .blog-featured-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }

  .blog-featured-img-wrap img {
    height: 280px;
  }

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

@media (max-width: 576px) {
  .blog-index-modern {
    padding: 24px 0 40px 0;
  }

  .blog-index-container {
    padding: 0 16px;
  }

  .blog-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

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

  .blog-featured-img-wrap img {
    height: 220px;
    border-radius: 12px;
  }

  .blog-featured-btn {
    width: 100%;
    text-align: center;
  }
}

/* Standardized Go To Top Button Styling */
.backToTop,
.js-backToTop {
  display: none !important;
}

#gotoTop {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  z-index: 9999 !important;
  width: 48px !important;
  height: 48px !important;
  background-color: var(--color-primary, #1EB542) !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(30, 181, 66, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  opacity: 0;
}

#gotoTop.show {
  display: flex !important;
  opacity: 1 !important;
}

#gotoTop:hover {
  background-color: var(--color-secondary, #105157) !important;
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 8px 24px rgba(16, 81, 87, 0.4) !important;
}

#gotoTop svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   PRICING & PACKAGES SECTION (Figma Specs: Two-Tier Cards Container)
   -------------------------------------------------------------------------- */
.pricing-packages-section {
  width: 1220px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: 'DM Sans';
}

.pricing-header-wrap {
  text-align: center;
  width: 100%;
  max-width: 810px;
  margin: 0 auto 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 1;
}

.pricing-header-title {
  font-family: 'DM Sans' !important;
  font-weight: 500 !important;
  font-size: 48px !important;
  line-height: 50px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 !important;
}

.pricing-header-subtitle {
  width: 100% !important;
  max-width: 810px !important;
  opacity: 1 !important;
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 27px !important;
  letter-spacing: 0% !important;
  text-align: center !important;
  color: var(--color-text-secondary, #5F6B66) !important;
  margin: 0 auto !important;
}

.pricing-free-notice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 18px;
  background: #E8F8EC;
  color: #166534;
  border: 1px solid #BBF7D0;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
}

.pricing-cards-container {
  width: 842px;
  max-width: 100%;
  height: 569px;
  background-color: #ECECEC;
  border-radius: 36px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
  box-sizing: border-box;
  margin: 0 auto;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 395px;
  min-height: 537px;
  height: auto;
  gap: 32px;
  opacity: 1;
  border-radius: 28px;
  box-sizing: border-box;
  padding: 28px;
  text-align: left !important;
}

/* Card 1: Starter Automation */
.pricing-card-starter {
  background: transparent;
  justify-content: center;
}

.pricing-card-starter .pricing-card-content {
  justify-content: center;
}

.pricing-card-starter .pricing-card-action {
  margin-top: 0;
}

/* Card 2: Growth Automation (Highlighted White Card) */
.pricing-card-highlighted {
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.pricing-card-highlighted .pricing-card-content {
  justify-content: space-between;
}

.pricing-card-highlighted .pricing-card-action {
  margin-top: auto;
}

.pricing-card-content {
  width: 100%;
  max-width: 337px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  opacity: 1;
}

.pricing-card-content-stater-text {
  width: 100%;
  max-width: 337px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  opacity: 1;
}

.pricing-card-header {
  width: 100%;
  max-width: 337px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  opacity: 1;
}

.pricing-card-title {
  font-family: 'DM Sans' !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 20px !important;
  line-height: 100% !important;
  letter-spacing: -0.45px !important;
  vertical-align: middle;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 !important;
}

.pricing-card-price-wrap {
  width: 224px;
  max-width: 100%;
  height: auto;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  opacity: 1;
}

.pricing-card-price {
  font-family: 'DM Sans' !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 42px !important;
  line-height: 100% !important;
  letter-spacing: 0px !important;
  vertical-align: middle;
  display: flex;
  align-items: baseline;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 !important;
}

.pricing-currency {
  font-family: 'DM Sans' !important;
  font-weight: 700 !important;
  font-size: 42px !important;
  line-height: 100% !important;
  letter-spacing: 0px !important;
}

.pricing-period {
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 100% !important;
  letter-spacing: 0px !important;
  vertical-align: middle;
  color: var(--color-text-secondary, #5F6B66) !important;
  margin-left: 2px;
}

.pricing-card-tenure {
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 100% !important;
  letter-spacing: 0px !important;
  vertical-align: middle;
  color: var(--color-text-secondary, #5F6B66) !important;
}

.pricing-card-divider {
  width: 100%;
  max-width: 337px;
  height: 1px;
  border: none;
  border-top: 1px solid var(--color-border, #E4E8E7);
  margin: 0;
  opacity: 1;
}

.pricing-features-wrap {
  width: 100%;
  max-width: 337px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
  opacity: 1;
}

.pricing-features-label {
  font-family: 'DM Sans' !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 16px !important;
  letter-spacing: 0px !important;
  vertical-align: middle;
  color: var(--color-text-primary, #1A1A1A) !important;
  margin: 0 !important;
}

.pricing-features-list {
  width: 100%;
  max-width: 337px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  opacity: 1;
}

.pricing-feature-item {
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  opacity: 1;
}

.pricing-feature-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  margin-top: 2px;
  opacity: 1;
  flex-shrink: 0;
}

.pricing-feature-icon polyline {
  stroke: #105157;
  stroke-width: 2.2;
}

.pricing-feature-text {
  font-family: 'DM Sans' !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: 0px !important;
  vertical-align: middle;
  color: var(--color-text-secondary, #5F6B66) !important;
  margin: 0;
}

.pricing-card-action {
  width: 100%;
  max-width: 337px;
  height: 48px;
  box-sizing: border-box;
  opacity: 1;
}

.pricing-card-btn {
  width: 100% !important;
  max-width: 337px !important;
  height: 48px !important;
  border-radius: 9999px !important;
  padding: 16px !important;
  background: var(--color-secondary, #105157) !important;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1) !important;
  font-family: 'DM Sans' !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 16px !important;
  letter-spacing: 0px !important;
  text-align: center !important;
  vertical-align: middle;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  cursor: pointer !important;
}

.pricing-card-btn:hover {
  background-color: #0c3e43 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.pricing-card-btn:active {
  transform: translateY(0);
}

@media (max-width: 860px) {
  .pricing-packages-section {
    width: 100% !important;
    height: auto !important;
  }

  .pricing-header-wrap {
    width: 100% !important;
    height: auto !important;
  }

  .pricing-header-title {
    font-size: 32px !important;
    line-height: 38px !important;
  }

  .pricing-header-subtitle {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .pricing-cards-container {
    width: 100% !important;
    height: auto !important;
    flex-direction: column;
    padding: 16px;
    border-radius: 28px;
    gap: 16px;
  }

  .pricing-card {
    width: 100% !important;
    height: auto !important;
    padding: 24px 20px;
  }

  .pricing-card-highlighted {
    border-radius: 20px;
  }
}

/* ==========================================================================
   Shop Common Product Card & Grid System
   Single Source of Truth for all Shop / Marketplace product cards
   ========================================================================== */
.cat-products-grid,
.common-products-grid {
  width: 100% !important;
  max-width: 1220px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
}

.cat-product-card-item,
.common-product-card {
  width: 100% !important;
  max-width: 387px !important;
  height: 100% !important;
  min-height: 495px !important;
  background: #ECECEC !important;
  border-radius: 30px !important;
  padding: 26px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  justify-content: space-between !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, opacity 0.25s ease !important;
  opacity: 1;
}

.cat-product-card-item.is-hidden,
.common-product-card.is-hidden {
  display: none !important;
}

.cat-product-card-item:hover,
.common-product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08) !important;
}

.cat-product-card-img-wrap,
.common-product-card-img-wrap {
  width: 100% !important;
  max-width: 335px !important;
  height: 305px !important;
  min-height: 305px !important;
  max-height: 305px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: transparent !important;
}

.cat-product-img-link,
.common-product-img-link {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.cat-product-card-img,
.common-product-card-img {
  max-height: 285px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.08)) !important;
  transition: transform 0.35s ease !important;
}

.cat-product-card-item:hover .cat-product-card-img,
.common-product-card:hover .common-product-card-img {
  transform: scale(1.04) !important;
}

.cat-product-card-details,
.common-product-card-details {
  width: 100% !important;
  max-width: 335px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
  margin-top: auto !important;
}

.cat-product-card-details-text,
.common-product-card-details-text {
  width: calc(100% - 54px) !important;
  max-width: 232px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.cat-product-category-name,
.common-product-category-name {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 20px !important;
  height: 20px !important;
  letter-spacing: 0 !important;
  color: var(--color-text-secondary, #5A6564) !important;
  text-transform: capitalize !important;
  display: block !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cat-product-card-title,
.common-product-card-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 27px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  letter-spacing: 0 !important;
  color: var(--color-text-primary, #172322) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.cat-product-card-title a,
.common-product-card-title a {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: color 0.15s ease !important;
}

.cat-product-card-title a:hover,
.common-product-card-title a:hover {
  color: var(--color-primary, #1EB542) !important;
}

.cat-product-price,
.common-product-price {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 28px !important;
  height: 28px !important;
  letter-spacing: 0 !important;
  color: var(--color-text-primary, #172322) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.cat-product-card-bottom,
.common-product-card-bottom {
  width: 42px !important;
  height: 42px !important;
  border-radius: 24px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin-bottom: 2px !important;
}

.cat-product-cart-btn,
.common-product-cart-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 24px !important;
  background-color: #0E423E !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(14, 66, 62, 0.2) !important;
  flex-shrink: 0 !important;
  border: none !important;
}

.cat-product-cart-btn:hover,
.common-product-cart-btn:hover {
  background-color: var(--color-primary, #1EB542) !important;
  transform: scale(1.08) !important;
  color: #FFFFFF !important;
}

/* Responsive Grid & Cards */
@media (max-width: 1200px) {

  .cat-products-grid,
  .common-products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

@media (max-width: 880px) {

  .cat-products-grid,
  .common-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575.98px) {

  .cat-products-grid,
  .common-products-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .cat-product-card-img-wrap,
  .common-product-card-img-wrap {
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
  }
}