/* ===================================================
   STICKY MOBILE FOOTER NAVIGATION BAR
   Dr. Sayanta Thakur - Diabetology Clinic
   =================================================== */

/* Hidden on desktop and tablet landscape */
.mobile-sticky-bar {
  display: none;
}

/* Hide when modal or bottom sheet is open */
body.modal-open .mobile-sticky-bar,
html.modal-open .mobile-sticky-bar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 992px) {
  /* Prevent footer content or copyright text from being obscured by sticky bar */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-sticky-bar {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99990 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border-top: 1px solid rgba(226, 232, 240, 0.92) !important;
    box-shadow: 0 -4px 22px rgba(15, 23, 42, 0.09) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .mobile-sticky-inner {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    height: 64px !important;
    max-width: 540px !important;
    margin: 0 auto !important;
    padding: 0 6px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .mob-nav-item {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-width: 0 !important;
    text-decoration: none !important;
    color: #64748b !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    position: relative !important;
    padding: 4px 2px !important;
    transition: color 0.2s ease, transform 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  .mob-nav-item:active {
    transform: scale(0.94) !important;
  }

  .mob-nav-icon {
    font-size: 1.18rem !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2px !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
  }

  .mob-nav-label {
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    display: block !important;
  }

  /* Active Indicator */
  .mob-nav-item.active {
    color: #800000 !important;
  }
  .mob-nav-item.active .mob-nav-icon {
    color: #800000 !important;
    transform: translateY(-1px) !important;
  }
  .mob-nav-item.active .mob-nav-label {
    font-weight: 700 !important;
    color: #800000 !important;
  }
  .mob-nav-item.active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 28px !important;
    height: 3px !important;
    background: #800000 !important;
    border-radius: 0 0 3px 3px !important;
  }

  /* Call Item Styling */
  .mob-nav-item.mob-call:hover,
  .mob-nav-item.mob-call:active {
    color: #0284c7 !important;
  }

  /* WhatsApp Item Styling */
  .mob-nav-item.mob-whatsapp {
    color: #128c7e !important;
  }
  .mob-nav-item.mob-whatsapp .mob-nav-icon {
    color: #25D366 !important;
    font-size: 1.32rem !important;
  }
  .mob-nav-item.mob-whatsapp:hover,
  .mob-nav-item.mob-whatsapp:active {
    color: #075e54 !important;
  }

  /* Elevated Center "Book Now" CTA */
  .mob-nav-item.mob-cta {
    position: relative !important;
    overflow: visible !important;
  }
  .mob-cta-disc {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1e293b 0%, #293548 45%, #9a3412 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.22rem !important;
    box-shadow: 0 5px 16px rgba(154, 52, 18, 0.44) !important;
    margin-top: -16px !important;
    margin-bottom: 2px !important;
    border: 3px solid #ffffff !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
    box-sizing: border-box !important;
  }
  .mob-nav-item.mob-cta:active .mob-cta-disc {
    transform: scale(0.92) !important;
  }
  .mob-nav-item.mob-cta .mob-nav-label {
    color: #1e293b !important;
    font-weight: 600 !important;
  }
  .mob-nav-item.mob-cta.active .mob-cta-disc {
    background: linear-gradient(135deg, #800000 0%, #a83818 100%) !important;
    box-shadow: 0 5px 18px rgba(128, 0, 0, 0.52) !important;
  }
  .mob-nav-item.mob-cta.active .mob-nav-label {
    color: #800000 !important;
    font-weight: 700 !important;
  }
  .mob-nav-item.mob-cta.active::before {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .mob-nav-label {
    font-size: 0.60rem !important;
  }
  .mob-nav-icon {
    font-size: 1.05rem !important;
    height: 20px !important;
  }
  .mob-cta-disc {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.10rem !important;
    margin-top: -14px !important;
  }
}

/* ===================================================
   MOBILE HEADER & BRAND LOGO SINGLE-LINE ENFORCEMENT
   Guarantees "Dr. Sayanta Thakur" stays on a single line
   =================================================== */
.logo-name,
.footer-logo-title,
.footer-logo-name,
.doctor-name-title {
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  .logo-block {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
  .logo-icon {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }
  .logo-text {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .logo-name {
    white-space: nowrap !important;
    font-size: clamp(0.92rem, 3.9vw, 1.12rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    display: block !important;
  }
  .logo-sub {
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    display: block !important;
    letter-spacing: 0.01em;
  }
  .logo-sub-qual {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .logo-name {
    font-size: clamp(0.85rem, 3.6vw, 0.98rem) !important;
  }
  .logo-sub {
    max-width: none !important;
    font-size: 0.63rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .logo-sub-qual {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .logo-name {
    font-size: 0.82rem !important;
  }
  .logo-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.95rem !important;
  }
  .logo-sub {
    max-width: none !important;
    font-size: 0.58rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .logo-sub-qual {
    display: none !important;
  }
}

/* ==========================================================================
   APP-WIDE UNIVERSAL TYPOGRAPHY SYSTEM (SAME AS "ABOUT DR. SAYANTA THAKUR" SECTION)
   Dr. Sayanta Thakur Clinic - All Pages & Sections Unified Typography
   Strictly adheres to the text size scale of the "ABOUT DR. SAYANTA THAKUR" section:
   - Eyebrows & Badges: 0.72rem, Poppins 700, letter-spacing: 0.06em
   - Section Titles: clamp(0.95rem, 1.85vw, 1.55rem), Poppins 700, line-height: 1.25
   - Subtitles, Bio & Paragraphs: 0.96rem, line-height: 1.68
   - Doctor Name Highlight: 1.25rem, Playfair Display 700
   - Card / Feature Titles (Subheads): 1rem, Poppins 600, line-height: 1.35
   - Card Descriptions & Bullet Body: 0.90rem, line-height: 1.62
   - Degree Badges & Pills: 0.80rem, font-weight: 700
   - Action Buttons: 0.95rem, Poppins 600
   - Action Links: 0.88rem, Poppins 600
   ========================================================================== */

/* Universal Desktop Scale matching "About Dr. Sayanta Thakur" Section */
.section-title,
h2.section-title,
.service-section-heading,
.stories-section-title,
.how-it-works-section .section-title,
#testimonials-section .stories-section-title,
#blog-preview-section .section-title,
.faq-helpdesk-section .section-title,
.about-section-title,
.about-preview-text .section-title,
.article-body-content h2,
.profile-bio h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(0.95rem, 1.85vw, 1.55rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  color: #0f172a;
}

.page-hero-title,
.banner-title,
.article-main-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(0.95rem, 1.85vw, 1.55rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.cta-band-text h2 {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(0.95rem, 1.85vw, 1.55rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.section-subtitle,
.service-section-subhead,
.article-lead-subtitle,
.stories-section-desc,
.form-subtitle,
.article-body-content,
.article-body-content p,
.hero-body,
.profile-subtitle,
.faq-section-subtitle {
  font-size: 0.96rem !important;
  line-height: 1.68 !important;
  color: #475569 !important;
}

.about-doctor-bio,
.profile-bio p {
  font-size: 0.85rem !important;
  line-height: 1.62 !important;
  color: #475569 !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  box-sizing: border-box !important;
}

.cta-band-text p {
  font-size: 0.96rem !important;
  line-height: 1.68 !important;
  color: #ffffff !important;
  opacity: 0.95;
}

.banner-subtitle {
  font-size: 0.96rem !important;
  line-height: 1.68 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

.eyebrow,
.about-eyebrow-pill,
.service-top-eyebrow-pill,
.header-badge,
.article-tag-badge,
.faq-header-tag,
.faq-cta-tag {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.doctor-name-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}

.doctor-degree-badge {
  font-size: 0.80rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.about-feature-title,
.credential-role-title,
.service-card-title,
.service-module-title,
.module-title,
.service-module-card h3,
.step-title,
.blog-title,
.info-main-title,
.info-panel-heading,
.booking-form-card h3,
.booking-info-panel h3,
.quick-contact-card h3,
.contact-card-title,
.faq-question-text,
.faq-progress-title,
.consult-mode-title,
.edu-card-title,
.award-title,
.award-card-title,
.affiliation-name,
.clinic-card-title,
.hospital-card-title,
.service-detail-title,
.sidebar-card h4,
.related-article-title,
.article-body-content h3,
.article-body-content h4,
.clinical-callout-box h4,
.takeaways-card h4,
.timeline-degree {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.96rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.service-tab-btn.active,
.service-tab-btn.active:hover,
.service-tab-btn.active:focus {
  color: #ffffff !important;
  background-color: #7f1d1d !important;
  border-color: #7f1d1d !important;
}

.about-feature-desc,
.credential-inst-sub,
.about-designation-sub,
.service-card-desc,
.service-module-desc,
.service-module-card p,
.module-bullet-item,
.step-desc,
.blog-excerpt,
.info-sub-title,
.info-item-text,
.contact-card-text,
.faq-answer-text,
.consult-mode-desc,
.edu-card-sub,
.award-body-text,
.award-card-sub,
.affiliation-city,
.clinic-card-sub,
.hospital-card-sub,
.checklist-items,
.story-quote-body,
.article-body-content li,
.clinical-callout-box p,
.takeaway-list li,
.timeline-inst {
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  color: #64748b !important;
}

.timeline-year {
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-white,
.btn-outline-white,
.btn-submit,
.btn-contact-submit,
.btn-hero-primary,
.btn-hero-secondary,
.faq-cta-btn,
#about-preview-btn {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
}

.filter-pill.active {
  background: linear-gradient(135deg, #1e293b 0%, #293548 40%, #9a3412 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 41, 59, 0.25) !important;
}
.filter-pill.active:hover {
  background: linear-gradient(135deg, #1e293b 0%, #293548 40%, #9a3412 100%) !important;
  color: #ffffff !important;
}

.service-card-link,
.btn-view-details,
.blog-link,
.module-more-btn,
.read-more-link {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
}

.service-card-badge,
.blog-tag,
.step-number,
.story-tag,
.interactive-panel-tag,
.affiliation-role,
.award-year,
.timings-req-pill {
  font-size: 0.72rem !important;
}

.breadcrumbs {
  font-size: 0.85rem !important;
}

/* ==========================================================================
   HARMONIZED MOBILE TYPOGRAPHY SYSTEM (SAME AS "ABOUT DR. SAYANTA THAKUR" SECTION)
   Applies consistent responsive scales across all pages (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 1. Section Titles / Primary Section Headings matching .about-section-title */
  .section-title,
  h2.section-title,
  .about-section-title,
  .about-preview-text .section-title,
  .article-body-content h2,
  #services-preview-section .section-title,
  .service-section-heading,
  .stories-section-title,
  .how-it-works-section .section-title,
  #testimonials-section .stories-section-title,
  #blog-preview-section .section-title,
  .faq-helpdesk-section .section-title,
  .booking-form-card h3,
  .booking-info-panel h3,
  .profile-bio h2,
  .quick-contact-card h3 {
    font-size: clamp(0.70rem, 3.8vw, 1.15rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.65rem !important;
  }

  /* Page Top Hero Headings */
  .hero-title,
  .page-hero-title,
  .banner-title,
  .article-main-title,
  #services-hero .page-hero-title,
  #appointment-hero .page-hero-title {
    font-size: clamp(1.15rem, 4.6vw, 1.38rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 10px !important;
  }

  .page-hero {
    padding: 24px 0 18px 0 !important;
    min-height: auto !important;
    height: auto !important;
  }

  .breadcrumbs {
    font-size: 0.76rem !important;
    gap: 6px !important;
  }

  /* 2. Eyebrows, Badges & Pills matching .about-eyebrow-pill */
  .eyebrow,
  .about-eyebrow-pill,
  .service-top-eyebrow-pill,
  .header-badge,
  .article-tag-badge,
  .faq-header-tag,
  .faq-cta-tag,
  .faq-progress-badge,
  .service-card-badge,
  .blog-tag,
  .step-number,
  .story-tag,
  .interactive-panel-tag,
  .affiliation-role,
  .award-year,
  .timings-req-pill {
    font-size: 0.68rem !important;
    letter-spacing: 0.04em !important;
  }

  /* Responsive pills with longer text to prevent cutoff/overflow on mobile */
  .stories-rating-pill {
    font-size: clamp(0.56rem, 2.7vw, 0.68rem) !important;
    letter-spacing: 0.02em !important;
    padding: 5px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .stories-rating-pill .desktop-rating-label {
    display: none !important;
  }
  .stories-rating-pill .mobile-rating-label {
    display: inline !important;
    white-space: nowrap !important;
  }

  .hero-top-pill {
    font-size: clamp(0.54rem, 2.6vw, 0.66rem) !important;
    letter-spacing: 0.02em !important;
    padding: 5px 12px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .hero-top-pill .hero-pill-desktop {
    display: none !important;
  }
  .hero-top-pill .hero-pill-mobile {
    display: inline !important;
    white-space: nowrap !important;
  }

  .about-designation-pill {
    font-size: clamp(0.56rem, 2.7vw, 0.66rem) !important;
    letter-spacing: 0.02em !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .doctor-degree-badge {
    font-size: 0.76rem !important;
  }

  /* 3. Doctor Name Title */
  .doctor-name-title {
    font-size: 1.10rem !important;
    line-height: 1.22 !important;
  }

  /* 4. Subtitles & Bio / Lead Paragraphs */
  .section-subtitle,
  .service-section-subhead,
  .banner-subtitle,
  .article-lead-subtitle,
  .stories-section-desc,
  .form-subtitle,
  .article-body-content,
  .article-body-content p,
  .hero-body,
  .profile-subtitle,
  .faq-section-subtitle {
    font-size: 0.91rem !important;
    line-height: 1.62 !important;
    margin-bottom: 1.15rem !important;
  }

  .about-doctor-bio,
  .profile-bio p {
    font-size: 0.81rem !important;
    line-height: 1.56 !important;
    margin-bottom: 12px !important;
  }

  .about-preview-grid,
  .doctor-profile-grid {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* 5. Card & Feature Titles matching .about-feature-title */
  .about-feature-title,
  .credential-role-title,
  .service-card-title,
  .service-module-title,
  .module-title,
  .service-module-card h3,
  .step-title,
  .blog-title,
  .info-main-title,
  .info-panel-heading,
  .faq-question-text,
  .faq-progress-title,
  .ai-assistant-title,
  .consult-mode-title,
  .edu-card-title,
  .award-title,
  .award-card-title,
  .affiliation-name,
  .clinic-card-title,
  .hospital-card-title,
  .contact-card-title,
  .service-detail-title,
  .sidebar-card h4,
  .related-article-title,
  .article-body-content h3,
  .article-body-content h4,
  .clinical-callout-box h4,
  .takeaways-card h4,
  .timeline-degree {
    font-size: 0.86rem !important;
    line-height: 1.32 !important;
    font-weight: 600 !important;
  }

  /* 6. Secondary Details, Excerpts, Card Descriptions matching .about-feature-desc */
  .about-feature-desc,
  .credential-inst-sub,
  .about-designation-sub,
  .service-card-desc,
  .service-module-desc,
  .service-module-card p,
  .module-bullet-item,
  .step-desc,
  .blog-excerpt,
  .info-sub-title,
  .info-item-text,
  .contact-card-text,
  .faq-answer-text,
  .ai-assistant-subtitle,
  .consult-mode-desc,
  .edu-card-sub,
  .award-body-text,
  .award-card-sub,
  .affiliation-city,
  .clinic-card-sub,
  .hospital-card-sub,
  .checklist-items,
  .hero-timings-card .timings-main,
  .hero-timings-card .timings-text,
  .hero-timings-card .timings-hours,
  .hero-timings-card .timings-label,
  .story-quote-body,
  .article-body-content li,
  .clinical-callout-box p,
  .takeaway-list li,
  .timeline-inst {
    font-size: 0.76rem !important;
    line-height: 1.42 !important;
  }

  .timeline-year {
    font-size: 0.70rem !important;
    line-height: 1.35 !important;
    color: #94a3b8 !important;
  }

  /* 7. Patient Name & Metadata */
  .story-patient-name {
    font-size: 0.82rem !important;
  }
  .blog-reading-time {
    font-size: 0.65rem !important;
  }

  /* 8. Buttons & Action Links matching #about-preview-btn */
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-white,
  .btn-outline-white,
  .btn-submit,
  .btn-contact-submit,
  .btn-hero-primary,
  .btn-hero-secondary,
  .faq-cta-btn,
  #about-preview-btn {
    font-size: 0.88rem !important;
    padding: 10px 20px !important;
  }

  .service-card-link,
  .btn-view-details,
  .blog-link,
  .module-more-btn {
    font-size: 0.82rem !important;
  }

  /* 9. Form Controls & Labels */
  .form-group label {
    font-size: 0.82rem !important;
  }
  .form-control,
  .service-search-input,
  .search-input {
    font-size: 16px !important; /* Prevents auto zoom in iOS Safari */
  }

  /* 10. Footer Elements */
  .footer-logo-title {
    font-size: 1.10rem !important;
  }
  .footer-logo-sub {
    font-size: 0.76rem !important;
  }
  .footer-tagline {
    font-size: 0.80rem !important;
  }
  .footer-col h4 {
    font-size: 0.88rem !important;
  }
  .footer-links a,
  .footer-contact-item {
    font-size: 0.80rem !important;
  }
  .footer-bottom {
    font-size: 0.76rem !important;
    padding: 14px 0 12px 0 !important;
  }

  /* 11. Appointment CTA Band Mobile (<= 768px) */
  .cta-band {
    padding: 44px 0 40px 0 !important;
    overflow: hidden !important;
  }
  .cta-band-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0 !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .cta-band-text {
    text-align: center !important;
    width: 100% !important;
    max-width: 500px !important;
  }
  .cta-band-text h2 {
    font-size: clamp(1.12rem, 5vw, 1.45rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
    text-align: center !important;
  }
  .cta-band-text p {
    font-size: clamp(0.84rem, 3.4vw, 0.94rem) !important;
    line-height: 1.52 !important;
    color: rgba(255, 255, 255, 0.94) !important;
    margin: 0 auto 20px auto !important;
    max-width: 320px !important;
    text-align: center !important;
  }
  .cta-band-btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .cta-band-btns .btn,
  #cta-btn-online {
    width: 100% !important;
    max-width: 310px !important;
    min-height: 48px !important;
    padding: 12px 22px !important;
    font-size: 0.90rem !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #ffffff !important;
    color: #800000 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  .cta-band-btns .btn:active,
  #cta-btn-online:active {
    transform: scale(0.97) !important;
  }
}

@media (max-width: 480px) {
  .section-title,
  h2.section-title,
  .about-section-title,
  .about-preview-text .section-title,
  #services-preview-section .section-title,
  .service-section-heading,
  .stories-section-title,
  .how-it-works-section .section-title,
  #testimonials-section .stories-section-title,
  #blog-preview-section .section-title,
  .faq-helpdesk-section .section-title,
  .article-body-content h2,
  .booking-form-card h3,
  .booking-info-panel h3,
  .profile-bio h2,
  .quick-contact-card h3 {
    font-size: clamp(0.70rem, 3.8vw, 1.15rem) !important;
  }

  .hero-title,
  .page-hero-title,
  .banner-title,
  .article-main-title {
    font-size: clamp(1.15rem, 4.6vw, 1.38rem) !important;
  }

  .section-subtitle,
  .service-section-subhead,
  .banner-subtitle,
  .article-lead-subtitle,
  .stories-section-desc,
  .form-subtitle,
  .article-body-content,
  .article-body-content p,
  .hero-body,
  .profile-subtitle,
  .faq-section-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.58 !important;
    margin-bottom: 1.05rem !important;
  }

  .about-doctor-bio,
  .profile-bio p {
    font-size: clamp(0.75rem, 2.7vw, 0.79rem) !important;
    line-height: 1.54 !important;
    margin-bottom: 11px !important;
  }

  .about-preview-grid,
  .doctor-profile-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .eyebrow,
  .about-eyebrow-pill,
  .service-top-eyebrow-pill,
  .header-badge,
  .article-tag-badge {
    font-size: 0.68rem !important;
    padding: 6px 14px !important;
    letter-spacing: 0.04em !important;
  }
}

@media (max-width: 360px) {
  .hero-title,
  .page-hero-title,
  .banner-title,
  .article-main-title {
    font-size: clamp(1.10rem, 4.4vw, 1.30rem) !important;
  }
  .section-title,
  h2.section-title,
  .about-section-title,
  .about-preview-text .section-title,
  .article-body-content h2,
  .service-section-heading,
  .stories-section-title,
  .booking-form-card h3,
  .booking-info-panel h3,
  .profile-bio h2,
  .quick-contact-card h3 {
    font-size: clamp(0.68rem, 3.5vw, 1.05rem) !important;
  }
  .section-subtitle,
  .article-body-content,
  .article-body-content p,
  .hero-body {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
  }
  .about-doctor-bio,
  .profile-bio p {
    font-size: 0.73rem !important;
    line-height: 1.5 !important;
  }
  .about-preview-grid,
  .doctor-profile-grid {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
  .about-feature-title,
  .service-card-title,
  .service-module-title,
  .module-title,
  .step-title,
  .blog-title,
  .award-title,
  .affiliation-name,
  .article-body-content h3,
  .article-body-content h4 {
    font-size: 0.84rem !important;
  }
  .about-feature-desc,
  .service-card-desc,
  .service-module-desc,
  .module-bullet-item,
  .step-desc,
  .blog-excerpt,
  .award-body-text,
  .article-body-content li {
    font-size: 0.74rem !important;
  }
  .eyebrow,
  .about-eyebrow-pill,
  .service-top-eyebrow-pill {
    font-size: 0.62rem !important;
    padding: 5px 10px !important;
    letter-spacing: 0.02em !important;
  }
  .btn,
  #about-preview-btn {
    font-size: 0.84rem !important;
    padding: 9px 16px !important;
  }

  /* Appointment CTA Band Compact Mobile (<= 480px) */
  .cta-band {
    padding: 38px 0 34px 0 !important;
  }
  .cta-band-text h2 {
    font-size: clamp(1.05rem, 5.2vw, 1.30rem) !important;
    margin-bottom: 6px !important;
  }
  .cta-band-text p {
    font-size: 0.85rem !important;
    margin-bottom: 18px !important;
    max-width: 290px !important;
  }
  .cta-band-btns .btn,
  #cta-btn-online {
    max-width: 100% !important;
    font-size: 0.88rem !important;
    padding: 12px 18px !important;
  }
}

/* ==========================================================================
   EXPERT DIABETOLOGIST FLOATING BADGE - COMPACT SIZE & LEFT ALIGNMENT
   ========================================================================== */
.about-expert-badge {
  font-size: 0.58rem !important;
  line-height: 1 !important;
  padding: 4px 10px !important;
  left: -20px !important;
  bottom: 38px !important;
  gap: 4px !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  letter-spacing: 0.04em !important;
}
.about-expert-badge i {
  font-size: 0.62rem !important;
}

@media (max-width: 768px) {
  .about-expert-badge {
    font-size: 0.52rem !important;
    padding: 3.5px 8px !important;
    left: -16px !important;
    bottom: 30px !important;
    gap: 3.5px !important;
  }
  .about-expert-badge i {
    font-size: 0.56rem !important;
  }
}

@media (max-width: 480px) {
  .about-expert-badge {
    font-size: 0.48rem !important;
    padding: 3px 7px !important;
    left: -12px !important;
    bottom: 26px !important;
    gap: 3px !important;
  }
  .about-expert-badge i {
    font-size: 0.50rem !important;
  }
}

@media (max-width: 360px) {
  .about-expert-badge {
    font-size: 0.44rem !important;
    padding: 2.5px 6px !important;
    left: -8px !important;
    bottom: 22px !important;
    gap: 2.5px !important;
  }
  .about-expert-badge i {
    font-size: 0.46rem !important;
  }
}

/* AI Assistant Header text color */
.ai-assistant-header,
.ai-assistant-header .ai-assistant-title,
.ai-assistant-card .ai-assistant-title,
.ai-assistant-title,
.ai-assistant-header .ai-assistant-subtitle,
.ai-assistant-card .ai-assistant-subtitle,
.ai-assistant-subtitle,
.ai-assistant-header .ai-clear-chat-btn {
  color: #ffffff !important;
}

/* Eliminate excessive gap on mobile footer */
@media (max-width: 992px) {
  .site-footer {
    padding-bottom: 0 !important;
  }
  .footer-bottom {
    padding-top: 14px !important;
    padding-bottom: 12px !important;
  }
}

/* Mobile-Friendly FAQ Diagnostic Support CTA Banner (Screenshot_191) */
.faq-cta-heading {
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  white-space: nowrap !important;
}

.faq-cta-line {
  display: inline !important;
  white-space: nowrap !important;
}

@media (max-width: 992px) {
  .faq-cta-banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 22px 14px !important;
    gap: 16px !important;
    border-radius: 18px !important;
    background: #111827 !important;
    background-image: 
      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    margin-top: 22px !important;
  }
  
  .faq-cta-banner > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .faq-cta-tag {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #fb923c !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    display: inline-block !important;
  }

  .faq-cta-heading {
    font-family: 'Poppins', sans-serif !important;
    font-size: clamp(0.68rem, 2.7vw, 0.94rem) !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-align: center !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .faq-cta-line {
    display: inline !important;
    white-space: nowrap !important;
  }

  .faq-cta-btn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 24px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #1e293b 0%, #293548 40%, #9a3412 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(30, 41, 59, 0.25) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  .faq-cta-btn:hover {
    background: linear-gradient(135deg, #253346 0%, #334155 40%, #b43a18 100%) !important;
    box-shadow: 0 12px 28px rgba(30, 41, 59, 0.35) !important;
    color: #ffffff !important;
  }
}

/* ==========================================================================
   HERO DOCTOR FLOATING BADGES & METRIC CARDS - MOBILE ONLY COMPACT SCALING
   Decreases floating element size and adjusts positions neatly around the doctor portrait
   ========================================================================== */
@media (max-width: 768px) {
  .hero-stage {
    width: 100% !important;
    max-width: 360px !important;
    height: 395px !important;
    margin: 0 auto !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .contour-ring-outer {
    width: 340px !important;
    height: 340px !important;
  }

  .contour-ring-inner {
    width: 290px !important;
    height: 290px !important;
  }

  .doctor-spotlight {
    width: 270px !important;
    height: 270px !important;
  }

  .doctor-portrait-frame {
    width: 270px !important;
    height: 365px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Compact Floating Pills (Expert Diabetologist & Geriatric Health) */
  .hero-float-pill {
    padding: 5px 11px !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    gap: 5px !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    z-index: 4 !important;
  }

  .pill-red-dot,
  .dot-amber {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* Top-Left Pill: Expert Diabetologist (positioned in open space above shoulder) */
  .badge-fellow,
  #badge-fellow-diabetes {
    top: 5% !important;
    left: -2px !important;
    right: auto !important;
  }

  /* Bottom-Right Pill: Geriatric Health (positioned at bottom-right corner) */
  .badge-geriatric,
  #badge-geriatric-health {
    bottom: 8% !important;
    right: -2px !important;
    left: auto !important;
  }

  /* Compact Floating Metric Cards (Pulse 72 BPM & A1C Goal) */
  .hero-metric-card {
    padding: 6px 11px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(241, 245, 249, 0.9) !important;
    background: #ffffff !important;
    width: auto !important;
    max-width: fit-content !important;
    z-index: 4 !important;
  }

  .metric-icon-box {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 7px !important;
    font-size: 0.80rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .metric-info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0px !important;
  }

  .metric-tag {
    font-size: 0.48rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    color: #64748b !important;
    margin-bottom: 1px !important;
  }

  .metric-val {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
  }

  .metric-status {
    font-size: 0.52rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }

  /* Top-Right Card: Pulse (positioned to clear the doctor's chest and stethoscope) */
  .metric-pulse-card,
  #card-pulse-metric {
    top: 17% !important;
    right: -2px !important;
    left: auto !important;
  }

  /* Bottom-Left Card: A1C Goal (positioned along waist edge without covering coat) */
  .metric-a1c-card,
  #card-a1c-metric {
    bottom: 7% !important;
    left: -2px !important;
    right: auto !important;
  }

  /* Gentle subtle breathing animations on mobile to prevent excessive drift */
  @keyframes floatBadge1 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
  }
  @keyframes floatBadge2 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
  }
  @keyframes floatCard1 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
  }
  @keyframes floatCard2 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
  }
}

/* Extra Compact Scaling for Small Mobile Screens (<= 380px) */
@media (max-width: 380px) {
  .hero-stage {
    max-width: 325px !important;
    height: 350px !important;
  }

  .doctor-portrait-frame {
    width: 235px !important;
    height: 325px !important;
  }

  .contour-ring-outer {
    width: 300px !important;
    height: 300px !important;
  }

  .contour-ring-inner {
    width: 255px !important;
    height: 255px !important;
  }

  .doctor-spotlight {
    width: 235px !important;
    height: 235px !important;
  }

  .hero-float-pill {
    font-size: 0.52rem !important;
    padding: 4px 9px !important;
  }

  .hero-metric-card {
    padding: 5px 9px !important;
    gap: 6px !important;
  }

  .metric-icon-box {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    font-size: 0.70rem !important;
  }

  .metric-val {
    font-size: 0.74rem !important;
  }

  .metric-tag {
    font-size: 0.44rem !important;
  }

  .metric-status {
    font-size: 0.46rem !important;
  }

  .badge-fellow,
  #badge-fellow-diabetes {
    top: 4% !important;
    left: -2px !important;
  }

  .metric-pulse-card,
  #card-pulse-metric {
    top: 17% !important;
    right: -2px !important;
  }

  .metric-a1c-card,
  #card-a1c-metric {
    bottom: 6% !important;
    left: -2px !important;
  }

  .badge-geriatric,
  #badge-geriatric-health {
    bottom: 8% !important;
    right: -2px !important;
  }
}

/* ==========================================================================
   Evidence-Based Card Compact Sizing & Floating Animation
   ========================================================================== */
.evidence-based-card,
#evidence-based-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 8px 16px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  border: 1px solid #ede8e1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  animation: floatEvidence 3.8s ease-in-out infinite !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform;
}

.evidence-based-card:hover,
#evidence-based-card:hover {
  animation-play-state: paused !important;
  transform: translateY(-7px) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}

.evidence-icon-box {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: #4a1d17 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
}

.evidence-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.evidence-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.evidence-sub {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
}

@keyframes floatEvidence {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(0px);
  }
}

@media (max-width: 768px) {
  .evidence-based-card,
  #evidence-based-card {
    width: auto !important;
    max-width: fit-content !important;
    margin: 0 auto !important;
    padding: 7px 14px !important;
  }
}