/*
Theme Name: Savvy Custom Theme
Theme URI: https://example.com/
Author: Raman
Author URI: https://example.com/
Description: Lightweight custom theme for blogs & simple sites.
Version: 1.0
Text Domain: savvy-custom-theme
*/

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



body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: #222;

  /* full-page soft blue gradient, same vibe as hero */
  background: radial-gradient(circle at top left, #c9e6ff 0%, #dff0ff 35%, #f5fbff 100%);
}


a {
  color: #c5161d; /* red */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.site-header {
  background: #0b1a33; /* dark blue */
  color: #fff;
  padding: 1rem 0;
}

.container {
  width: min(1100px, 100% - 2rem);
  margin: 0 auto;
}

.site-title a {
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
}

.site-description {
  font-size: 0.9rem;
  opacity: 0.8;
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.main-nav a {
  color: #fff;
  font-size: 0.95rem;
}

.site-main {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  padding: 2rem 0;
}

@media (max-width: 800px) {
  .site-main {
    grid-template-columns: 1fr;
  }
}

.post-card {
  background: #fff;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
}

.post-card h2 a {
  color: #0b1a33;
}

.entry-meta {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.entry-content {
  margin-top: 0.75rem;
}

.site-footer {
  background: #0b1a33;
  color: #fff;
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.9rem;
  margin-top: 2rem;
}

.widget {
  background: #fff;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.widget-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #0b1a33;
}

/* ===== Medsers Homepage Custom Styles ===== */

.hero {
  border-left: 4px solid #0ea5e9;
}

.hero-main h1 {
  margin-top: 0;
  font-size: 2rem;
}

.hero-subtitle {
  font-size: 1rem;
  margin-top: 0.25rem;
  max-width: 650px;
}

.hero-actions {
  margin: 1rem 0;
}

.btn-primary,
.btn-outline {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary {
  background: #16a34a;
  color: #fff;
  border: none;
}

.btn-primary:hover {
  text-decoration: none;
  background: #15803d;
}

.btn-outline {
  border: 1px solid #0b1a33;
  color: #0b1a33;
  background: transparent;
}

.btn-outline:hover {
  text-decoration: none;
  background: #0b1a33;
  color: #fff;
}

.hero-note {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.4rem;
}

.hero-bullets {
  list-style: none;
  padding-left: 0;
  margin-top: 0.75rem;
}

.hero-bullets li {
  margin-bottom: 0.2rem;
}

/* Sections */

.section h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.section p {
  margin-top: 0;
}

/* Steps (How it works) */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.step-card {
  background: #f3f4f6;
  border-radius: 0.75rem;
  padding: 1rem;
}

.step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1a33;
  color: white;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Features grid */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.feature-card {
  background: #f3f4f6;
  border-radius: 0.75rem;
  padding: 1rem;
}

/* Trust section */

.trust-grid {
  display: grid;
  grid-template-columns: 2fr 1.4fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

.trust-list {
  padding-left: 1.2rem;
  margin: 0;
}

.trust-highlight {
  background: #eff6ff;
  border-radius: 0.75rem;
  padding: 1rem;
}

.trust-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1d4ed8;
  margin-bottom: 0.3rem;
}

/* Latest posts */

.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.latest-card {
  background: #f3f4f6;
  border-radius: 0.75rem;
  padding: 1rem;
}

.latest-title {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.latest-meta {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.4rem;
}

/* FAQ */

.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.faq-item h3 {
  margin-top: 0;
  font-size: 1rem;
}

/* Responsive adjustments */

@media (max-width: 900px) {
  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .latest-grid {
    grid-template-columns: 1fr 1fr;
  }
  .faq-list {
    grid-template-columns: 1fr;
  }
}

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

/* ===== Full-width React-style hero ===== */

.hero-full {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  background: linear-gradient(180deg, #eff4ff 0%, #ffffff 100%);
  padding: 3.5rem 0;
  margin-bottom: 2rem;
  border: none;
}

.hero-container {
  width: min(1250px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 3rem;
  align-items: center;
}

/* slider + hero-main from before, keep or tweak */

.home-slider {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 2rem;
  background: #ffffff;
  border-radius: 1.2rem;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.home-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.45s ease;
}

.home-slider .slide.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

.slider-dots {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.slider-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
}

.slider-dots .dot.active {
  background: #3b82f6;
}

/* hero text side */

.hero-main h1 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  color: #0b1220;
}

.hero-main p {
  font-size: 1rem;
  color: #4b5563;
}

/* responsive */

@media (max-width: 950px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}
/* ===== Medsers Hero Slider ===== */

.hero {
  border-left: 4px solid #0ea5e9;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 1.5rem;
  align-items: center;
}

.home-slider {
  position: relative;
  overflow: hidden;
  min-height: 190px;
}

.home-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  padding-right: 1rem;
}

.home-slider .slide.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

.home-slider h2 {
  margin-top: 0;
  font-size: 1.3rem;
}

.home-slider p {
  margin-bottom: 0.5rem;
  color: #4b5563;
}

.slider-dots {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.slider-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: #d1d5db;
  padding: 0;
  cursor: pointer;
}

.slider-dots .dot.active {
  background: #0b1a33;
}

/* Make hero vertical on small screens */
@media (max-width: 800px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }
  .home-slider {
    min-height: 160px;
  }
}


/* ===== Full-width React-style hero ===== */

.hero-full {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  background: linear-gradient(180deg, #eff4ff 0%, #ffffff 100%);
  padding: 3.5rem 0;
  margin-bottom: 2rem;
  border: none;
}

.hero-container {
  width: min(1250px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 3rem;
  align-items: center;
}

/* slider + hero-main from before, keep or tweak */

.home-slider {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 2rem;
  background: #ffffff;
  border-radius: 1.2rem;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.home-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.45s ease;
}

.home-slider .slide.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

.slider-dots {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.slider-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
}

.slider-dots .dot.active {
  background: #3b82f6;
}

/* hero text side */

.hero-main h1 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  color: #0b1220;
}

.hero-main p {
  font-size: 1rem;
  color: #4b5563;
}

/* responsive */

@media (max-width: 950px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}

/* ===== Full-width React-style hero ===== */

.hero-full {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  background: linear-gradient(180deg, #eff4ff 0%, #ffffff 100%);
  padding: 3.5rem 0;
  margin-bottom: 2rem;
  border: none;
}

.hero-container {
  width: min(1250px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 3rem;
  align-items: center;
}

/* slider + hero-main from before, keep or tweak */

.home-slider {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 2rem;
  background: #ffffff;
  border-radius: 1.2rem;
  border-left: 4px solid #3b82f6;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.home-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.45s ease;
}

.home-slider .slide.active {
  opacity: 1;
  transform: translateY(0);
  position: relative;
}

.slider-dots {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.slider-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
}

.slider-dots .dot.active {
  background: #3b82f6;
}

/* hero text side */

.hero-main h1 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0;
  color: #0b1220;
}

.hero-main p {
  font-size: 1rem;
  color: #4b5563;
}

/* responsive */

@media (max-width: 950px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}


/* === FULL-WIDTH LAYOUT ONLY ON HOME PAGE === */

body.home .container {
  /* header uses .container – make it full width on home */
  width: 100%;
  max-width: 100%;
  margin: 0;
}

body.home .site-main {
  /* break site-main out of the old centered box */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  display: block;
  padding: 0 0 3rem 0;
  /*background: radial-gradient(circle at top, #eff6ff 0%, #ffffff 55%);*/
}

/* inner content wrapper on front page */
body.home .content-area {
  width: min(1250px, 92vw);
  margin: 0 auto;
}


/* === Reactish blue section styling (home only) === */

body.home .post-card.section {
  background: #ffffff;
  border-radius: 1.4rem;
  padding: 2.2rem 2.4rem 2.6rem;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.4);
  margin-bottom: 2.2rem;
}

body.home .post-card.section h2 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 0.4rem;
  color: #020617;
}

body.home .post-card.section > p {
  margin: 0;
  color: #6b7280;
  font-size: 0.96rem;
}

/* Steps grid */
body.home .steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.6rem;
}

/* Individual step cards */
body.home .step-card {
  background: radial-gradient(circle at top left, #eff6ff 0%, #f9fafb 55%, #ffffff 100%);
  border-radius: 1.2rem;
  padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid rgba(37, 99, 235, 0.18);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

body.home .step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

body.home .step-card h3 {
  margin-top: 0.4rem;
  margin-bottom: 0.35rem;
  font-size: 1.02rem;
  color: #020617;
}

body.home .step-card p {
  margin: 0;
  font-size: 0.92rem;
  color: #4b5563;
}

/* Step number pill */
body.home .step-number {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 0%, #38bdf8 0%, #0f172a 70%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 6px 15px rgba(15, 23, 42, 0.35);
}


/* Features grid */
body.home .feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.6rem;
}

/* Individual feature cards */
body.home .feature-card {
  background: #f9fafb;
  border-radius: 1.1rem;
  padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body.home .feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.5);
  background: linear-gradient(135deg, #eff6ff 0%, #f9fafb 60%, #ffffff 100%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}

body.home .feature-card h3 {
  margin-top: 0;
  margin-bottom: 0.35rem;
  font-size: 1.02rem;
  color: #020617;
}

body.home .feature-card p {
  margin: 0;
  font-size: 0.92rem;
  color: #4b5563;
}

/* ===== Medsers Clinic-style Hero ===== */

.hero-medsers {
  background: radial-gradient(circle at top left, #e0f2fe 0%, #f9fbff 45%, #ffffff 100%);
  padding: 3.5rem 0 3.2rem;
  border: none;
}

.hero-medsers-container {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr;
  gap: 3rem;
  align-items: center;
}

/* left side */

.hero-left h1 {
  font-size: 2.7rem;
  line-height: 1.15;
  margin: 0.25rem 0 0.75rem;
  color: #021328;
}

.hero-left .hero-accent {
  color: #08c6d8; /* teal accent */
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  background: rgba(8, 198, 216, 0.1);
  color: #0369a1;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}

.hero-lead {
  font-size: 1rem;
  color: #4b5563;
  max-width: 540px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.2rem 0;
}

.hero-btn-main {
  font-size: 1rem;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 1px solid #0f172a;
  background: #ffffff;
  color: #0f172a;
  font-weight: 500;
  font-size: 0.95rem;
}

.btn-secondary:hover {
  background: #0f172a;
  color: #ffffff;
  text-decoration: none;
}

/* meta items */

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  color: #6b7280;
}

.hero-meta-item strong {
  color: #020617;
  font-size: 0.95rem;
}

/* right side doctor card */

.hero-right {
  display: flex;
  justify-content: center;
}

.hero-doctor-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  border-radius: 1.8rem;
  padding: 1.4rem 1.4rem 0;
  background: radial-gradient(circle at top, #eff6ff 0%, #ffffff 55%);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.22);
}

.hero-doctor-img {
  display: block;
  width: 100%;
  border-radius: 1.6rem 1.6rem 0 0;
  object-fit: cover;
}

/* floating stat cards */

.hero-stat-card {
  position: absolute;
  background: #ffffff;
  border-radius: 1.2rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
  padding: 0.8rem 1rem;
  font-size: 0.8rem;
}

.hero-stat-main {
  right: -18px;
  top: 18%;
}

.hero-stat-main .stat-label {
  display: block;
  color: #6b7280;
  font-size: 0.75rem;
}

.hero-stat-main .stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0ea5e9;
}

.hero-stat-pill {
  left: -16px;
  bottom: 14%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-stat-pill .stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 0, #fb7185 0%, #be123c 80%);
  color: #fff;
}

.hero-stat-pill .stat-text {
  font-size: 0.78rem;
  color: #0f172a;
}

/* responsive */

@media (max-width: 960px) {
  .hero-medsers-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-left {
    text-align: center;
  }
  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-meta {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .hero-left h1 {
    font-size: 2.1rem;
  }
}


/* ==== FULL-VIEWPORT MEDSERS HERO (ALL DEVICES) ==== */

.hero-medsers {
  background: radial-gradient(circle at top left, #e0f2fe 0%, #f9fbff 45%, #ffffff 100%);
  padding: 4.5rem 0;                 /* top/bottom breathing room */
  min-height: calc(100vh - 80px);    /* almost full screen, accounting for header */
  display: flex;
  align-items: center;               /* vertically center hero content */
}

.hero-medsers-container {
  width: min(1280px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 3.5rem;
  align-items: center;
}

/* LEFT CONTENT */

.hero-left h1 {
  font-size: 3rem;
  line-height: 1.12;
  margin: 0.3rem 0 1.2rem;
  color: #021328;
}

.hero-left .hero-accent {
  color: #08c6d8;
}

.hero-lead {
  font-size: 1.05rem;
  max-width: 620px;
  color: #4b5563;
  margin-bottom: 1.8rem;
}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
  padding: 0.8rem 1.9rem;
  font-size: 1rem;
}

.hero-meta {
  margin-top: 1.8rem;
}

/* RIGHT DOCTOR CARD – balanced scaling */

.hero-right {
  display: flex;
  justify-content: center;
}

.hero-doctor-card {
  position: relative;
  max-width: 380px;
  width: 100%;
  padding: 1.7rem 1.7rem 0;
  border-radius: 1.9rem;
  background: radial-gradient(circle at top, #eff6ff 0%, #ffffff 55%);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.28);
  transform: scale(1.18);          /* moderate scale: looks big but not crazy */
  transform-origin: center;
}

.hero-doctor-img {
  display: block;
  width: 100%;
  border-radius: 1.6rem;
  object-fit: cover;
}

/* floating stat cards */

.hero-stat-card {
  position: absolute;
  background: #ffffff;
  border-radius: 1.2rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
  padding: 0.8rem 1rem;
  font-size: 0.8rem;
}

.hero-stat-main {
  right: -18px;
  top: 20%;
  transform: scale(1.12);
}

.hero-stat-pill {
  left: -14px;
  bottom: 16%;
  transform: scale(1.12);
}

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

@media (min-width: 1440px) {
  .hero-medsers {
    padding: 5rem 0;
  }
  .hero-left h1 {
    font-size: 3.3rem;
  }
  .hero-doctor-card {
    transform: scale(1.25);
  }
}

@media (max-width: 1024px) {
  .hero-medsers {
    min-height: calc(100vh - 70px);
    padding: 3.5rem 0 4rem;
  }
  .hero-medsers-container {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
  }
  .hero-left h1 {
    font-size: 2.6rem;
  }
}

@media (max-width: 900px) {
  .hero-medsers {
    min-height: auto;             /* on smaller screens, natural height is better */
    padding: 3.5rem 0 3.5rem;
  }
  .hero-medsers-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-left {
    text-align: center;
  }
  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-meta {
    justify-content: center;
  }
  .hero-doctor-card {
    transform: scale(1);
    margin: 0 auto;
  }
}
/* ===== ProHealth-style FULL-WIDTH HERO ===== */

.hero-medsers {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;

  box-sizing: border-box;
  padding: 4.5rem 0 4.5rem;
  min-height: calc(100vh - 80px); /* adjust 80 if your header is taller/shorter */
  display: flex;
  align-items: center;

  background: radial-gradient(circle at top left, #cfe4ff 0%, #dbeeff 35%, #eaf5ff 60%, #f5fbff 100%);
}

.hero-medsers-container {
  width: min(1240px, 90vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

/* LEFT – text like ProHealth */

.hero-left h1 {
  font-size: 3.4rem;
  line-height: 1.08;
  margin: 0 0 1.2rem;
  color: #022646;
}

.hero-left .hero-accent {
  color: #00bcd4;
}

.hero-lead {
  font-size: 1.05rem;
  max-width: 640px;
  color: #4b5563;
  margin-bottom: 2rem;
}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary {
  padding: 0.8rem 1.9rem;
  font-size: 1rem;
}

.hero-meta {
  margin-top: 2rem;
}

/* RIGHT – doctors blended into background, no white card */

.hero-right {
  display: flex;
  justify-content: flex-end;
}

.hero-doctor-card {
  position: relative;
  max-width: 520px;
  width: 100%;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.hero-doctor-img {
  display: block;
  width: 115%;
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translateY(8%);
}

/* floating stats on top of image */

.hero-stat-card {
  position: absolute;
  background: #ffffff;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  font-size: 0.8rem;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.25);
}

.hero-stat-main {
  right: 5%;
  top: 18%;
}

.hero-stat-main .stat-label {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
}

.hero-stat-main .stat-number {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0ea5e9;
}

.hero-stat-pill {
  left: 3%;
  bottom: 14%;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-stat-pill .stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 0, #fb7185 0%, #be123c 80%);
  color: #fff;
}

.hero-stat-pill .stat-text {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* No horizontal scroll from overflows */
body {
  overflow-x: hidden;
}

/* Responsive tweaks */

@media (min-width: 1440px) {
  .hero-left h1 {
    font-size: 3.8rem;
  }
  .hero-doctor-img {
    width: 120%;
  }
}

@media (max-width: 1024px) {
  .hero-medsers {
    min-height: auto;
    padding: 3.5rem 0 4rem;
  }
  .hero-medsers-container {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
  }
  .hero-left h1 {
    font-size: 2.7rem;
  }
}

@media (max-width: 900px) {
  .hero-medsers {
    padding: 3.2rem 0 3.6rem;
  }
  .hero-medsers-container {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-left {
    text-align: center;
  }
  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-meta {
    justify-content: center;
  }
  .hero-right {
    justify-content: center;
  }
  .hero-doctor-img {
    width: 100%;
    transform: translateY(0);
  }
  .hero-stat-main {
    right: 10%;
    top: 12%;
  }
  .hero-stat-pill {
    left: 10%;
    bottom: 10%;
  }
}

/* Full-width hero band */
.hero-medsers {
  width: 100%;
  background: radial-gradient(circle at top left, #cfe4ff 0%, #dbeeff 35%, #eaf5ff 60%, #f5fbff 100%);
  padding: 4.5rem 0 4.5rem;
  box-sizing: border-box;
}

.hero-inner {
  width: min(1240px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

/* left text */
.hero-pill {
  display: inline-block;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: rgba(0, 188, 212, 0.12);
  color: #0369a1;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}

.hero-left h1 {
  font-size: 3.1rem;
  line-height: 1.08;
  margin: 0.4rem 0 1.2rem;
  color: #022646;
}

.hero-accent {
  color: #00bcd4;
}

.hero-lead {
  font-size: 1.05rem;
  color: #4b5563;
  max-width: 640px;
  margin-bottom: 2rem;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  color: #6b7280;
}

.hero-meta-item strong {
  color: #020617;
}

/* right card – no overlapping */
.hero-right {
  display: flex;
  justify-content: flex-end;
}

.hero-card {
  background: radial-gradient(circle at top, #f0f7ff 0%, #ffffff 55%);
  border-radius: 1.8rem;
  padding: 1.8rem 1.8rem 1.4rem;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.hero-photo {
  width: 100%;
  border-radius: 1.5rem;
  object-fit: cover;
}

.hero-card-stats {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
}

.hero-stat {
  flex: 1;
  background: #ffffff;
  border-radius: 1rem;
  padding: 0.7rem 0.9rem;
  text-align: left;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

.hero-stat-number {
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  color: #0ea5e9;
}

.hero-stat-label {
  display: block;
  font-size: 0.78rem;
  color: #6b7280;
}

/* full-width & no horizontal scroll */
body {
  overflow-x: hidden;
}

/* responsive */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 2.5rem;
  }
  .hero-left h1 {
    font-size: 2.7rem;
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero-medsers {
    padding: 3.2rem 0 3.6rem;
  }
  .hero-left {
    text-align: center;
  }
  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-meta {
    justify-content: center;
  }
  .hero-right {
    justify-content: center;
  }
}


/* ===== FULL-WIDTH REACTISH MEDSERS HERO ===== */

/* Full-width band */
.hero-medsers {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  box-sizing: border-box;
  padding: 4.5rem 0 4.8rem;
  min-height: calc(100vh - 80px); /* header height approx */
  display: flex;
  align-items: center;

  background: radial-gradient(circle at top left, #cfe4ff 0%, #e4f2ff 40%, #f5fbff 100%);
  overflow: hidden;
}

/* Inner content constrained like ProHealth */
.hero-inner {
  width: min(1280px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

/* Soft decorative “React” blobs */
.hero-medsers::before,
.hero-medsers::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero-medsers::before {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(56,189,248,0.45), transparent 65%);
  top: -80px;
  left: -120px;
}

.hero-medsers::after {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(59,130,246,0.42), transparent 65%);
  bottom: -120px;
  right: -140px;
}

/* === LEFT SIDE TEXT === */

.hero-pill {
  display: inline-block;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  background: rgba(59,130,246,0.08);
  color: #0369a1;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.hero-left h1 {
  font-size: 3.1rem;
  line-height: 1.08;
  margin: 0.5rem 0 1.3rem;
  color: #021629;
}

.hero-left .hero-accent {
  color: #00c4d8;
}

.hero-lead {
  font-size: 1.05rem;
  color: #4b5563;
  max-width: 640px;
  margin-bottom: 2rem;
}

/* Buttons row */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Make primary button a bit more “Reactish” */
.hero-buttons .btn-primary {
  padding: 0.85rem 2.1rem;
  font-size: 1rem;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(34,197,94,0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.hero-buttons .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(34,197,94,0.5);
  filter: brightness(1.05);
}

.hero-buttons .btn-secondary {
  padding: 0.8rem 1.9rem;
  font-size: 0.97rem;
  border-radius: 999px;
}

/* little meta blocks below buttons */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin-top: 2rem;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  color: #6b7280;
}

.hero-meta-item strong {
  color: #020617;
  font-size: 1rem;
}

/* === RIGHT SIDE CARD === */

.hero-right {
  display: flex;
  justify-content: flex-end;
}

.hero-card {
  background: radial-gradient(circle at top, #f0f6ff 0%, #ffffff 56%);
  border-radius: 1.9rem;
  padding: 1.9rem 1.9rem 1.5rem;
  max-width: 430px;
  width: 100%;
  box-shadow: 0 26px 70px rgba(15,23,42,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  transform-origin: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* subtle hover lift */
.hero-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 90px rgba(15,23,42,0.32);
}

.hero-photo {
  width: 100%;
  border-radius: 1.5rem;
  object-fit: cover;
}

/* stats row */
.hero-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0.9rem;
  width: 100%;
}

.hero-stat {
  background: #ffffff;
  border-radius: 1.05rem;
  padding: 0.8rem 1rem;
  box-shadow: 0 12px 30px rgba(15,23,42,0.12);
}

.hero-stat-number {
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  color: #0ea5e9;
}

.hero-stat-label {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
}

/* Kill horizontal scroll if any */
body {
  overflow-x: hidden;
}

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

@media (min-width: 1440px) {
  .hero-left h1 {
    font-size: 3.4rem;
  }
  .hero-inner {
    width: min(1360px, 94vw);
  }
}

@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: 2.7rem;
  }
  .hero-left h1 {
    font-size: 2.8rem;
  }
}

@media (max-width: 900px) {
  .hero-medsers {
    margin-left: 0;
    margin-right: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-height: auto;
    padding: 3.2rem 0 3.6rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-left {
    text-align: center;
  }

  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-meta {
    justify-content: center;
  }

  .hero-right {
    justify-content: center;
  }

  .hero-card {
    max-width: 380px;
  }
}
/* ========== FULL-WIDTH MEDSERS HERO – POLISHED ========== */

.hero-medsers {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  box-sizing: border-box;
  padding: 4.5rem 0 5rem;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;

  background: radial-gradient(circle at top left, #c9e6ff 0%, #dff0ff 35%, #f5fbff 100%);
  overflow: hidden;
}

/* decorative blobs so background feels alive */
.hero-medsers::before,
.hero-medsers::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero-medsers::before {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(14,165,233,0.45), transparent 65%);
  top: -120px;
  left: -140px;
}

.hero-medsers::after {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(59,130,246,0.42), transparent 65%);
  bottom: -160px;
  right: -160px;
}

.hero-inner {
  width: min(1280px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 3.6rem;
  align-items: center;
}

/* ========== LEFT: TEXT AREA ========== */

.hero-pill {
  display: inline-block;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #0369a1;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.hero-left h1 {
  font-size: 3.1rem;
  line-height: 1.08;
  margin: 0.6rem 0 1.4rem;
  color: #021629;
}

.hero-left .hero-accent {
  color: #00c4d8;
}

.hero-lead {
  font-size: 1.05rem;
  color: #4b5563;
  max-width: 640px;
  margin-bottom: 1.6rem;
}

/* small "play video" CTA row */

.hero-play-row {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.7rem;
}

.hero-play-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: radial-gradient(circle at 30% 0, #22c55e 0%, #15803d 80%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(22,163,74,0.45);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.hero-play-btn:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 16px 34px rgba(22,163,74,0.55);
}

.hero-play-icon {
  margin-left: 2px; /* nudge play arrow to center */
}

.hero-play-text {
  display: flex;
  flex-direction: column;
}

.hero-play-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}

.hero-play-caption {
  font-size: 0.78rem;
  color: #6b7280;
}

/* buttons */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero-buttons .btn-primary {
  padding: 0.85rem 2.1rem;
  font-size: 1rem;
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(22,163,74,0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.hero-buttons .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(22,163,74,0.55);
  filter: brightness(1.05);
}

.hero-buttons .btn-secondary {
  padding: 0.8rem 1.9rem;
  font-size: 0.97rem;
  border-radius: 999px;
}

/* meta row */

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin-top: 1.9rem;
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  color: #6b7280;
}

.hero-meta-item strong {
  color: #020617;
  font-size: 1rem;
}

/* ========== RIGHT: CARD AREA ========== */

.hero-right {
  display: flex;
  justify-content: flex-end;
}

.hero-card {
  position: relative;
  background: linear-gradient(145deg, #f1f6ff 0%, #ffffff 40%, #f6fbff 100%);
  border-radius: 1.95rem;
  padding: 2rem 2rem 1.6rem;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 28px 80px rgba(15,23,42,0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* halo under card for React-ish feel */

.hero-card::after {
  content: "";
  position: absolute;
  inset: auto 10% -40px 10%;
  height: 60px;
  background: radial-gradient(circle, rgba(15,23,42,0.2), transparent 65%);
  filter: blur(10px);
  opacity: 0.5;
  z-index: -1;
}

.hero-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 100px rgba(15,23,42,0.36);
}

.hero-photo {
  width: 100%;
  border-radius: 1.6rem;
  object-fit: cover;
}

/* stats */

.hero-card-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  width: 100%;
}

.hero-stat {
  background: #ffffff;
  border-radius: 1.1rem;
  padding: 0.8rem 1rem;
  box-shadow: 0 12px 30px rgba(15,23,42,0.12);
}

.hero-stat-number {
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  color: #0ea5e9;
}

.hero-stat-label {
  display: block;
  font-size: 0.8rem;
  color: #6b7280;
}

/* avoid horizontal scroll if anything overflows */
body {
  overflow-x: hidden;
}

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

@media (min-width: 1440px) {
  .hero-inner {
    width: min(1360px, 94vw);
  }
  .hero-left h1 {
    font-size: 3.4rem;
  }
}

@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: 2.7rem;
  }
  .hero-left h1 {
    font-size: 2.8rem;
  }
}

@media (max-width: 900px) {
  .hero-medsers {
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    min-height: auto;
    padding: 3.2rem 0 3.6rem;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-left {
    text-align: center;
  }

  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-play-row {
    justify-content: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-meta {
    justify-content: center;
  }

  .hero-right {
    justify-content: center;
  }

  .hero-card {
    max-width: 380px;
  }
}


/* ================= GLOBAL SECTION LAYOUT ================= */

.medsers-main {
  background: #f9fafb;
}

.section {
  padding: 4.5rem 0;
}

.section-inner {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

.section-header {
  max-width: 640px;
  margin-bottom: 2.5rem;
}

.section-header h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #020617;
}

.section-header p {
  color: #4b5563;
  font-size: 0.98rem;
}

.section-kicker {
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.18rem 0.75rem;
  border-radius: 999px;
  background: rgba(37,99,235,0.06);
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ================= HOW IT WORKS ================= */

.section-steps {
  background: #f3f7ff;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

.step-card {
  background: #ffffff;
  border-radius: 1.4rem;
  padding: 1.3rem 1.3rem 1.2rem;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.step-media img {
  width: 100%;
  border-radius: 1.1rem;
  object-fit: cover;
}

.step-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(37,99,235,0.09);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #1d4ed8;
  font-size: 0.9rem;
}

.step-card h3 {
  font-size: 1rem;
  margin: 0;
  color: #020617;
}

.step-card p {
  font-size: 0.9rem;
  color: #4b5563;
}

/* ================= FEATURES SECTION ================= */

.section-features {
  background: #ffffff;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1.8rem;
}

.feature-card {
  background: linear-gradient(145deg, #f3f4ff 0%, #ffffff 40%, #f9fafb 100%);
  border-radius: 1.4rem;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 12px 34px rgba(15,23,42,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(37,99,235,0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.feature-card h3 {
  font-size: 1rem;
  margin: 0;
  color: #020617;
}

.feature-card p {
  font-size: 0.9rem;
  color: #4b5563;
}

/* ================= TRUST SECTION ================= */

.section-trust {
  background: radial-gradient(circle at top left, #e0f2fe 0%, #eff6ff 45%, #ffffff 100%);
}

.trust-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.8rem;
  align-items: center;
}

.trust-copy p {
  margin-bottom: 1rem;
}

.trust-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.trust-list li {
  margin-bottom: 0.35rem;
  font-size: 0.94rem;
  color: #374151;
}

.trust-card {
  background: #ffffff;
  border-radius: 1.6rem;
  box-shadow: 0 20px 55px rgba(15,23,42,0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.trust-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.trust-card-body {
  padding: 1.2rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.trust-badge {
  align-self: flex-start;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: rgba(16,185,129,0.08);
  color: #059669;
  font-size: 0.76rem;
  font-weight: 600;
}

/* Shared button for cards */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  border: 1px solid #0f172a;
  background: #ffffff;
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.3rem;
}

.btn-outline:hover {
  background: #0f172a;
  color: #ffffff;
  text-decoration: none;
}

/* ================= BLOG SECTION ================= */

.section-blog {
  background: #f9fafb;
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.section-link {
  font-size: 0.9rem;
  color: #2563eb;
  text-decoration: none;
}

.section-link:hover {
  text-decoration: underline;
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.6rem;
  margin-top: 2rem;
}

.latest-card {
  background: #ffffff;
  border-radius: 1.4rem;
  padding: 1.3rem 1.4rem 1.3rem;
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
}

.latest-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  margin-bottom: 0.4rem;
}

.latest-label {
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: rgba(37,99,235,0.08);
  color: #2563eb;
  font-weight: 600;
}

.latest-title {
  font-size: 1rem;
  margin: 0.2rem 0 0.4rem;
}

.latest-title a {
  color: #020617;
  text-decoration: none;
}

.latest-title a:hover {
  text-decoration: underline;
}

.latest-excerpt {
  font-size: 0.9rem;
  color: #4b5563;
}

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

.section-faq {
  background: #ffffff;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.4rem;
}

.faq-item {
  background: #f9fafb;
  border-radius: 1.2rem;
  padding: 1.2rem 1.3rem 1.1rem;
}

.faq-item h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: #020617;
}

.faq-item p {
  font-size: 0.9rem;
  color: #4b5563;
}

/* ================= ONBOARDING SECTION ================= */

.section-onboarding {
  background: linear-gradient(135deg, #0f172a 0%, #020617 60%);
  color: #e5e7eb;
}

.onboarding-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.6rem;
  align-items: center;
}

.onboarding-copy h2 {
  color: #f9fafb;
}

.onboarding-copy p {
  color: #e5e7eb;
  font-size: 0.96rem;
}

.onboarding-copy .btn-primary {
  margin-top: 1.3rem;
}

.onboarding-visual img {
  width: 100%;
  max-width: 360px;
  border-radius: 1.6rem;
  box-shadow: 0 26px 70px rgba(0,0,0,0.6);
  display: block;
  margin-left: auto;
}

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

@media (max-width: 1024px) {
  .steps-grid,
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .trust-inner {
    grid-template-columns: 1fr;
  }
  .latest-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .onboarding-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 3.5rem 0;
  }
  .steps-grid,
  .feature-grid,
  .latest-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .section-header-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .onboarding-visual img {
    margin: 1.5rem auto 0;
  }
}


/* =============== SHARED SECTION LAYOUT =============== */

.medsers-section {
  padding: 4.2rem 0;
}

.medsers-section-inner {
  width: min(1180px, 92vw);
  margin: 0 auto;
}

.medsers-section-header {
  max-width: 640px;
  margin-bottom: 2.4rem;
}

.medsers-section-header h2 {
  font-size: 2rem;
  margin: 0 0 0.6rem;
  color: #020617;
}

.medsers-section-header p {
  margin: 0;
  font-size: 0.97rem;
  color: #4b5563;
}

.medsers-kicker {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.18rem 0.75rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* =============== HOW MEDSERS WORKS =============== */

.medsers-steps {
  background: radial-gradient(circle at top left, #e0f2fe 0%, #f3f4ff 40%, #f9fafb 100%);
}

.medsers-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.7rem;
}

.medsers-step-card {
  position: relative;
  background: linear-gradient(150deg, #f9fbff 0%, #ffffff 50%, #f3f4ff 100%);
  border-radius: 1.4rem;
  padding: 1.4rem 1.3rem 1.2rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.medsers-step-card::after {
  content: "";
  position: absolute;
  inset: auto 14% -26px 14%;
  height: 40px;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.22), transparent 70%);
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.medsers-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
}

.medsers-step-card:hover::after {
  opacity: 1;
}

.medsers-step-number {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #3b82f6 0%, #1d4ed8 80%);
  box-shadow: 0 10px 28px rgba(30, 64, 175, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.medsers-step-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: #020617;
}

.medsers-step-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
}

/* =============== WHAT YOU CAN DO SECTION =============== */

.medsers-features {
  background: #ffffff;
}

.medsers-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.medsers-feature-card {
  background: linear-gradient(145deg, #f3f4ff 0%, #ffffff 40%, #f9fafb 100%);
  border-radius: 1.4rem;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.medsers-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
}

.medsers-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.medsers-feature-card h3 {
  margin: 0;
  font-size: 1rem;
  color: #020617;
}

.medsers-feature-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
}

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

@media (max-width: 1024px) {
  .medsers-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .medsers-section {
    padding: 3.5rem 0;
  }
  .medsers-steps-grid,
  .medsers-features-grid {
    grid-template-columns: 1fr;
  }
}

/* ==== HOW MEDSERS WORKS – REACTISH BG & CARDS ==== */

.medsers-steps {
  position: relative;
  padding: 4.5rem 0 4.8rem;
  background: linear-gradient(
      135deg,
      #fff0f5 0%,
      #fef3ff 25%,
      #f3f7ff 55%,
      #ffffff 100%
  );
  overflow: hidden;
}

/* soft pink + blue blobs like the purple demo */
.medsers-steps::before,
.medsers-steps::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.6;
  pointer-events: none;
}

.medsers-steps::before {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.45), transparent 65%);
  top: -150px;
  left: -140px;
}

.medsers-steps::after {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.42), transparent 65%);
  bottom: -180px;
  right: -160px;
}

/* inner layout stays the same */
.medsers-steps-grid {
  position: relative;
  z-index: 1; /* above blobs */
}

/* card styling – soft gradient, halo, hover */
.medsers-step-card {
  position: relative;
  background:
      radial-gradient(circle at top left, rgba(244, 114, 182, 0.08), transparent 55%),
      radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.08), transparent 55%),
      #ffffff;
  border-radius: 1.6rem;
  padding: 1.5rem 1.4rem 1.4rem;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* subtle glow under card on hover */
.medsers-step-card::after {
  content: "";
  position: absolute;
  inset: auto 18% -26px 18%;
  height: 40px;
  background: radial-gradient(circle, rgba(15, 23, 42, 0.25), transparent 70%);
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* big translucent step number in the corner */
.medsers-step-card::before {
  content: "01";
  position: absolute;
  right: 1.4rem;
  bottom: 0.7rem;
  font-size: 3.2rem;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.06);
  pointer-events: none;
}

/* numbers 02,03,04 for other cards */
.medsers-step-card:nth-child(2)::before {
  content: "02";
}
.medsers-step-card:nth-child(3)::before {
  content: "03";
}
.medsers-step-card:nth-child(4)::before {
  content: "04";
}

.medsers-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 68px rgba(15, 23, 42, 0.24);
}
.medsers-step-card:hover::after {
  opacity: 1;
}

/* round step badge – keep your existing style but make it pop a bit */
.medsers-step-number {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #3b82f6 0%, #1d4ed8 85%);
  box-shadow: 0 12px 32px rgba(30, 64, 175, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.9rem;
}

/* headings & body inside cards */
.medsers-step-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  color: #020617;
}
.medsers-step-card p {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
}

/* responsive: keep it neat */
@media (max-width: 1024px) {
  .medsers-steps {
    padding-top: 3.8rem;
    padding-bottom: 4rem;
  }
}

/* ==== How Medsers Works (Reactish Style) ==== */

.medsers-section.medsers-steps {
    position: relative;
    padding: 4.5rem 0 4.8rem;
    background: linear-gradient(
        135deg,
        #fff0f5 0%,
        #fef3ff 25%,
        #f3f7ff 55%,
        #ffffff 100%
    );
    overflow: hidden !important;
}

/* Blurred bg blobs */
.medsers-section.medsers-steps::before,
.medsers-section.medsers-steps::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(40px);
    opacity: 0.55;
    pointer-events: none;
}

.medsers-section.medsers-steps::before {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(244, 114, 182, 0.45), transparent 65%);
    top: -150px;
    left: -140px;
}

.medsers-section.medsers-steps::after {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.42), transparent 65%);
    bottom: -180px;
    right: -160px;
}

/* STEP CARDS */
.medsers-step-card {
    background: radial-gradient(circle at top left, rgba(244, 114, 182, 0.1), transparent 55%),
                radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.1), transparent 55%),
                #ffffff;
    border-radius: 1.6rem;
    padding: 1.5rem 1.4rem 1.4rem;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
    position: relative;
    overflow: hidden;
    transition: 0.25s ease;
}

.medsers-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 68px rgba(15, 23, 42, 0.24);
}

/* Big faint step numbers */
.medsers-step-card::before {
    content: "01";
    position: absolute;
    right: 1.2rem;
    bottom: 1rem;
    font-size: 3rem;
    font-weight: 700;
    color: rgba(0, 0, 25, 0.08);
    pointer-events: none;
}

.medsers-step-card:nth-child(2)::before { content: "02"; }
.medsers-step-card:nth-child(3)::before { content: "03"; }
.medsers-step-card:nth-child(4)::before { content: "04"; }

/* Circle step number */
.medsers-step-number {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #fff;
    background: radial-gradient(circle at 30% 0, #3b82f6, #1d4ed8);
    box-shadow: 0 12px 32px rgba(30, 64, 175, 0.5);
    margin-bottom: 0.8rem;
    
}
/* =====================================================
   HOW MEDSERS WORKS — BLUE REACTISH BACKGROUND STYLE
===================================================== */

.medsers-section.medsers-steps {
    position: relative;
    padding: 5rem 0 5rem;
    background: linear-gradient(135deg, #e8f3ff 0%, #f3f8ff 50%, #ffffff 100%);
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 50, 120, 0.05);
}

/* Floating background blobs */
.medsers-section.medsers-steps::before,
.medsers-section.medsers-steps::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.45;
}

.medsers-section.medsers-steps::before {
    width: 480px;
    height: 480px;
    background: rgba(110, 168, 255, 0.45);
    top: -160px;
    left: -200px;
}

.medsers-section.medsers-steps::after {
    width: 420px;
    height: 420px;
    background: rgba(140, 200, 255, 0.4);
    bottom: -150px;
    right: -180px;
}

/* Step Cards */
.medsers-step-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.8rem;
    box-shadow: 0 10px 24px rgba(0, 50, 120, 0.08);
    transition: 0.3s ease;
    border: 1px solid rgba(200, 220, 255, 0.6);
}

.medsers-step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(0, 70, 160, 0.15);
}

/* Number Bubble */
.medsers-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(145deg, #0d70ff, #004cd3);
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0, 60, 150, 0.35);
    margin-bottom: 1rem;
}
/* Remove solid backgrounds so the gradient shows through */
body.home #page,
body.home .site,
body.home .content-area,
body.home .site-content,
body.home .entry-content,
body.home .page,
body.home .container,
body.home .wrapper {
  background: transparent !important;
  box-shadow: none !important;
}

/* Full-page background gradient only on homepage */
body.home {
  background: radial-gradient(
    circle at top left,
    #cfe4ff 0%,
    #dbeeff 35%,
    #eaf5ff 60%,
    #f5fbff 100%
  );
}

body.home .post-card.section {
  background: rgba(255, 255, 255, 0.9);      /* slightly see-through */
  border-radius: 1.4rem;
  padding: 2.2rem 2.4rem 2.6rem;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

/* Full-page blue gradient on homepage */
body.home {
  background: radial-gradient(
    circle at top left,
    #cfe4ff 0%,
    #dbeeff 35%,
    #eaf5ff 60%,
    #f5fbff 100%
  );
}

/* ===================== MEDSERS HERO SLIDER ===================== */

.medsers-hero-slider {
    max-width: 1200px;
    margin: 1.5rem auto 2.5rem;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    background: #020617;
}

.medsers-hero-track {
    position: relative;
    width: 100%;
    height: 520px;
}

.medsers-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.medsers-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.medsers-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    filter: brightness(0.7);
    transform: scale(1.02);
    transform-origin: center;
}

.medsers-hero-slide.is-active .medsers-hero-bg {
    animation: heroZoom 18s linear forwards;
}

@keyframes heroZoom {
    from { transform: scale(1.05); }
    to   { transform: scale(1.09); }
}

/* Content */

.medsers-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 2.5rem;
    align-items: center;
    padding: 3.4rem 3.8rem;
    color: #f9fafb;
}

.medsers-hero-left h1 {
    font-size: 2.6rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 1.2rem;
}

.medsers-hero-left .accent {
    color: #38bdf8;
}

.medsers-hero-left p {
    max-width: 34rem;
    font-size: 0.98rem;
    color: #e5e7eb;
    margin-bottom: 1.6rem;
}

.medsers-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

/* Buttons */

.btn-primary.big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.98rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(21, 128, 61, 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-primary.big:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(21, 128, 61, 0.65);
    filter: brightness(1.03);
}

.btn-ghost {
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(15, 23, 42, 0.42);
    color: #e5e7eb;
    padding: 0.78rem 1.4rem;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-ghost:hover {
    background: rgba(15, 23, 42, 0.7);
    border-color: #38bdf8;
    color: #f9fafb;
}

/* Right stats card */

.medsers-hero-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.medsers-hero-stat-card {
    background: rgba(15, 23, 42, 0.82);
    border-radius: 999px;
    padding: 1.1rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.5);
    max-width: 260px;
}

.medsers-hero-stat-card.small {
    border-radius: 24px;
}

.medsers-hero-stat-main {
    display: flex;
    flex-direction: column;
}

.medsers-hero-stat-main .stat-number {
    font-size: 1.6rem;
    font-weight: 800;
}

.medsers-hero-stat-main .stat-label {
    font-size: 0.8rem;
    color: #cbd5f5;
}

.medsers-hero-stat-avatar .avatar-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #38bdf8;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.medsers-hero-stat-avatar .avatar-label {
    font-size: 0.78rem;
    color: #cbd5f5;
}

/* Controls */

.medsers-hero-controls {
    position: absolute;
    right: 2.2rem;
    bottom: 1.8rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    z-index: 2;
}

.hero-arrow {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(15, 23, 42, 0.6);
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 0.15s ease, transform 0.15s ease;
}

.hero-arrow span {
    font-size: 1.4rem;
    line-height: 1;
}

.hero-arrow:hover {
    background: rgba(15, 23, 42, 0.9);
    transform: translateY(-1px);
}

.hero-dots {
    display: flex;
    gap: 0.3rem;
}

.hero-dots button {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: rgba(226, 232, 240, 0.5);
    cursor: pointer;
    padding: 0;
    transition: width 0.15s ease, background 0.15s ease;
}

.hero-dots button.is-active {
    width: 18px;
    background: #38bdf8;
}

/* Responsive */

@media (max-width: 960px) {
    .medsers-hero-track {
        height: auto;
    }

    .medsers-hero-slide,
    .medsers-hero-slide.is-active {
        position: relative;
    }

    .medsers-hero-content {
        grid-template-columns: minmax(0, 1fr);
        padding: 2.2rem 1.8rem 2.6rem;
    }

    .medsers-hero-right {
        justify-content: flex-start;
    }

    .medsers-hero-slider {
        margin: 1rem 0.75rem 2rem;
    }
}

@media (max-width: 640px) {
    .medsers-hero-left h1 {
        font-size: 2rem;
    }

    .medsers-hero-cta-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .medsers-hero-controls {
        right: 1.2rem;
        bottom: 1.2rem;
    }
}

/* FULL-WIDTH HERO SLIDER */
.medsers-hero-slider {
    position: relative;

    /* break out of the centered content container */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    width: 100vw;
    max-width: 100vw;

    /* you can keep a small radius or remove it for perfectly square edges */
    border-radius: 0;
    overflow: hidden;

    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    background: #020617;
}

@media (max-width: 960px) {
    .medsers-hero-track {
        height: auto;
    }

    .medsers-hero-slide,
    .medsers-hero-slide.is-active {
        position: relative;
    }

    .medsers-hero-content {
        grid-template-columns: minmax(0, 1fr);
        padding: 2.2rem 1.8rem 2.6rem;
    }

    .medsers-hero-right {
        justify-content: flex-start;
    }

    .medsers-hero-slider {
        margin: 0; /* full width, no side margin on mobile */
    }
}





/* ========= MEDSERS MAIN SLIDER ========= */

.medsers-main-slider {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: #031021;
  color: #fff;
}

/* Slides wrapper */
.medsers-main-slides {
  position: relative;
  min-height: 520px;
}

/* Single slide */
.medsers-main-slide {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center right;
  display: flex;
  align-items: stretch;
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.medsers-main-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* dark gradient overlay */
.medsers-main-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 25%, rgba(17, 163, 255, 0.55), transparent 55%),
              linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(2, 8, 26, 0.6) 50%, rgba(0, 0, 0, 0.1) 100%);
  z-index: 1;
}

.medsers-main-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4.5rem 1.8rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

/* left column */
.medsers-main-left {
  flex: 1 1 50%;
  max-width: 560px;
}

.medsers-main-left h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  line-height: 1.15;
  margin: 0 0 1.2rem;
}

.medsers-main-left h1 span {
  color: #00e1ff;
}

.medsers-main-left p {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 480px;
  color: #d7e9ff;
  margin-bottom: 1.8rem;
}

/* CTA buttons */
.medsers-main-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2.4rem;
}

.medsers-main-ctas .btn-primary,
.medsers-main-ctas .btn-ghost {
  border-radius: 999px;
  padding: 0.9rem 1.9rem;
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.medsers-main-ctas .btn-primary {
  background: linear-gradient(135deg, #00d14b, #02b93f);
  color: #fff;
  box-shadow: 0 18px 45px rgba(0, 209, 75, 0.45);
}

.medsers-main-ctas .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0, 209, 75, 0.6);
}

.medsers-main-ctas .btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  background: rgba(0, 0, 0, 0.15);
}

.medsers-main-ctas .btn-ghost:hover {
  background: #ffffff;
  color: #031021;
}

/* meta strip bottom-left */
.medsers-main-meta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.meta-avatars {
  display: flex;
}

.meta-avatars img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #031021;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  margin-right: -10px;
}

.meta-card {
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  background: rgba(6, 37, 75, 0.92);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.meta-number {
  font-size: 1.05rem;
  font-weight: 700;
  color: #00e1ff;
  line-height: 1.1;
}

.meta-label {
  font-size: 0.78rem;
  color: #e1efff;
}

/* right column bubble */
.medsers-main-right {
  flex: 1 1 40%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.bubble-card {
  width: 270px;
  border-radius: 999px;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.2), rgba(3, 9, 30, 0.95));
  padding: 1.1rem 1.5rem 1.3rem;
  box-shadow: 0 26px 65px rgba(0, 0, 0, 0.75);
  color: #fff;
  position: relative;
}

.bubble-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.bubble-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(0, 225, 255, 0.7);
}

.bubble-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bubble-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00d14b;
  box-shadow: 0 0 0 4px rgba(0, 209, 75, 0.35);
}

.bubble-body {
  margin-top: 0.3rem;
}

.bubble-percentage {
  font-size: 1.7rem;
  font-weight: 700;
}

.bubble-text {
  font-size: 0.85rem;
  color: #cde5ff;
  margin-bottom: 0.7rem;
}

.bubble-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
}

.bubble-chip span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #00e1ff;
}

.bubble-chip small {
  font-size: 0.7rem;
  color: #d9e5ff;
}

/* arrows */
.medsers-main-arrow {
  position: absolute;
  bottom: 2.1rem;
  right: 5.5rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(3, 15, 40, 0.85);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  z-index: 5;
}

.medsers-main-arrow.next {
  right: 2.5rem;
}

.medsers-main-arrow:hover {
  transform: translateY(-1px);
  background: rgba(5, 35, 92, 0.95);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.75);
}

/* dots */
.medsers-main-dots {
  position: absolute;
  bottom: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 0.45rem;
  z-index: 5;
}

.medsers-main-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.medsers-main-dot.is-active {
  background: #00e1ff;
  border-color: #00e1ff;
  transform: scale(1.25);
}

/* ====== Responsive ====== */

@media (max-width: 992px) {
  .medsers-main-inner {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 4rem;
    padding-bottom: 4.2rem;
  }

  .medsers-main-right {
    align-self: center;
  }

  .medsers-main-arrow {
    bottom: 1.7rem;
    right: 4.5rem;
  }

  .medsers-main-arrow.next {
    right: 1.7rem;
  }

  .medsers-main-dots {
    bottom: 1.7rem;
  }
}

@media (max-width: 640px) {
  .medsers-main-inner {
    padding: 3.2rem 1.1rem 3.5rem;
  }

  .medsers-main-left h1 {
    font-size: 2rem;
  }

  .medsers-main-left p {
    font-size: 0.94rem;
  }

  .medsers-main-ctas {
    flex-direction: column;
  }

  .medsers-main-ctas .btn-primary,
  .medsers-main-ctas .btn-ghost {
    width: 100%;
  }

  .meta-card {
    padding: 0.5rem 1rem;
  }

  .bubble-card {
    width: 240px;
  }
}


/* ===== HERO WRAPPER ===== */
.medsers-text-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: radial-gradient(circle at top left, #e3f6ff 0%, #c7e9ff 36%, #b0defa 60%, #e1f5ff 100%);
  padding: 4.5rem 1.5rem 5rem;
  box-sizing: border-box;
}

.medsers-text-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

/* LEFT SIDE */
.medsers-text-hero-left {
  flex: 1 1 52%;
  max-width: 560px;
}

.medsers-pill-label {
  display: inline-block;
  padding: 0.45rem 1.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.9);
  color: #0c7bb3;
  font-weight: 600;
  margin-bottom: 1.4rem;
}

/* SLIDES CONTAINER */
.medsers-text-slides {
  position: relative;
  min-height: 230px; /* keeps height stable on change */
}

.medsers-text-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.medsers-text-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

.medsers-text-slide h1 {
  font-size: clamp(2.1rem, 3.3vw, 3rem);
  line-height: 1.15;
  color: #071f33;
  margin: 0 0 1.1rem;
}

.medsers-text-slide h1 span {
  color: #00b9f3;
}

.medsers-text-slide p {
  font-size: 1rem;
  line-height: 1.7;
  color: #234563;
  max-width: 520px;
  margin-bottom: 1.8rem;
}

/* CTA BUTTONS */
.medsers-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
}

.mh-btn {
  border-radius: 999px;
  padding: 0.9rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mh-btn-primary {
  background: linear-gradient(135deg, #00d14b, #02b93f);
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 180, 70, 0.45);
}

.mh-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 52px rgba(0, 180, 70, 0.6);
}

.mh-btn-ghost {
  border: 1px solid #071f33;
  background: #ffffff;
  color: #071f33;
}

.mh-btn-ghost:hover {
  background: #071f33;
  color: #ffffff;
}

/* SMALL FEATURES ROW */
.mh-small-features {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.mh-small-features div {
  font-size: 0.86rem;
}

.mh-small-features strong {
  display: block;
  color: #071f33;
  margin-bottom: 0.1rem;
}

.mh-small-features span {
  color: #5a7994;
}

/* CONTROLS */
.medsers-text-controls {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.medsers-text-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(5, 32, 70, 0.35);
  color: #0c7bb3;
  font-size: 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.medsers-text-arrow:hover {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(5, 32, 70, 0.5);
}

.medsers-text-dots {
  display: inline-flex;
  gap: 0.4rem;
}

.medsers-text-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(12, 123, 179, 0.2);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.medsers-text-dot.is-active {
  background: #0c7bb3;
  border-color: #0c7bb3;
  transform: scale(1.25);
}

/* RIGHT SIDE STATIC CARD */
.medsers-text-hero-right {
  flex: 1 1 45%;
  display: flex;
  justify-content: flex-end;
}

.mh-card {
  background: #ffffff;
  border-radius: 32px;
  padding: 2.2rem 2.2rem 1.8rem;
  box-shadow: 0 24px 80px rgba(9, 40, 80, 0.25);
  max-width: 460px;
  width: 100%;
}

.mh-card img {
  width: 100%;
  display: block;
  border-radius: 24px;
  margin-bottom: 1.2rem;
}

.mh-card-stats {
  display: flex;
  gap: 1.2rem;
}

.mh-stat-box {
  flex: 1;
  background: #f6fbff;
  border-radius: 18px;
  padding: 0.9rem 1.1rem;
}

.mh-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #008ff3;
  margin-bottom: 0.2rem;
}

.mh-stat-label {
  font-size: 0.8rem;
  color: #456382;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .medsers-text-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .medsers-text-hero-right {
    width: 100%;
    justify-content: center;
  }

  .mh-card {
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  .medsers-text-hero {
    padding: 3.2rem 1.2rem 3.8rem;
  }

  .medsers-text-slide h1 {
    font-size: 1.9rem;
  }

  .medsers-hero-ctas {
    flex-direction: column;
  }

  .mh-btn {
    width: 100%;
  }

  .mh-small-features {
    gap: 1.5rem;
  }
}

/* ===== FULL-WIDTH HERO SLIDER ===== */
.medsers-hero-slider {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: radial-gradient(circle at top left, #e3f6ff 0%, #c7e9ff 36%, #b0defa 60%, #e1f5ff 100%);
  padding: 4.5rem 1.5rem 5rem;
  box-sizing: border-box;
}

.medsers-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* SLIDES WRAPPER */
.medsers-hero-slides {
  position: relative;
  min-height: 430px; /* keeps overall hero height stable */
}

/* INDIVIDUAL SLIDE */
.medsers-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.medsers-hero-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}

/* LEFT SIDE (TEXT) */
.medsers-hero-left {
  flex: 1 1 52%;
  max-width: 560px;
}

.medsers-pill-label {
  display: inline-block;
  padding: 0.45rem 1.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(255, 255, 255, 0.9);
  color: #0c7bb3;
  font-weight: 600;
  margin-bottom: 1.4rem;
}

.medsers-hero-left h1 {
  font-size: clamp(2.1rem, 3.3vw, 3rem);
  line-height: 1.15;
  color: #071f33;
  margin: 0 0 1.1rem;
}

.medsers-hero-left h1 span {
  color: #00b9f3;
}

.medsers-hero-left p {
  font-size: 1rem;
  line-height: 1.7;
  color: #234563;
  max-width: 520px;
  margin-bottom: 1.8rem;
}

/* CTA BUTTONS */
.medsers-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
}

.mh-btn {
  border-radius: 999px;
  padding: 0.9rem 1.8rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mh-btn-primary {
  background: linear-gradient(135deg, #00d14b, #02b93f);
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 180, 70, 0.45);
}

.mh-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 52px rgba(0, 180, 70, 0.6);
}

.mh-btn-ghost {
  border: 1px solid #071f33;
  background: #ffffff;
  color: #071f33;
}

.mh-btn-ghost:hover {
  background: #071f33;
  color: #ffffff;
}

/* SMALL FEATURES */
.mh-small-features {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
}

.mh-small-features div {
  font-size: 0.86rem;
}

.mh-small-features strong {
  display: block;
  color: #071f33;
  margin-bottom: 0.1rem;
}

.mh-small-features span {
  color: #5a7994;
}

/* RIGHT SIDE (BIG IMAGE CARD) */
.medsers-hero-right {
  flex: 1 1 48%;
  display: flex;
  justify-content: flex-end;
}

.mh-card {
  background: #ffffff;
  border-radius: 34px;
  padding: 2.3rem 2.3rem 2rem;
  box-shadow: 0 26px 90px rgba(9, 40, 80, 0.28);
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mh-card img {
  width: 100%;
  display: block;
  border-radius: 26px;
  /* Bigger visual height – closer to hero height */
  max-height: 420px;
  object-fit: cover;
  margin-bottom: 1.4rem;
}

.mh-card-stats {
  display: flex;
  gap: 1.2rem;
}

.mh-stat-box {
  flex: 1;
  background: #f6fbff;
  border-radius: 20px;
  padding: 0.95rem 1.1rem;
}

.mh-stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  color: #008ff3;
  margin-bottom: 0.25rem;
}

.mh-stat-label {
  font-size: 0.8rem;
  color: #456382;
}

/* CONTROLS */
.medsers-hero-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.2rem;
}

.medsers-hero-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(5, 32, 70, 0.35);
  color: #0c7bb3;
  font-size: 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.medsers-hero-arrow:hover {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(5, 32, 70, 0.5);
}

.medsers-hero-dots {
  display: inline-flex;
  gap: 0.4rem;
}

.medsers-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(12, 123, 179, 0.2);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.medsers-hero-dot.is-active {
  background: #0c7bb3;
  border-color: #0c7bb3;
  transform: scale(1.25);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .medsers-hero-slide {
    flex-direction: column;
    align-items: flex-start;
  }

  .medsers-hero-right {
    width: 100%;
    justify-content: center;
  }

  .mh-card {
    max-width: 480px;
  }

  .medsers-hero-controls {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .medsers-hero-slider {
    padding: 3.2rem 1.2rem 3.8rem;
  }

  .medsers-hero-left h1 {
    font-size: 1.9rem;
  }

  .medsers-hero-ctas {
    flex-direction: column;
  }

  .mh-btn {
    width: 100%;
  }

  .mh-small-features {
    gap: 1.5rem;
  }
}.medsers-hero-right img {
    width: 100%;
    max-width: 900px;
    height: 600px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25);
}



.medsers-hero-slider {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    /* NEW BACKGROUND YOU REQUESTED */
    background: radial-gradient(circle at top left, #c9e6ff 0%, #dff0ff 35%, #f5fbff 100%);

    padding: 4.8rem 1.5rem 5rem;
    box-sizing: border-box;
    overflow: hidden;
}


/* --- TYPOGRAPHY UPGRADE --- */

.medsers-hero-left {
  flex: 1 1 52%;
  max-width: 560px;
}

.medsers-pill-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: rgba(255, 255, 255, 0.96);
  color: #0c7bb3;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(7, 65, 120, 0.15);
}

.medsers-hero-left h1 {
  font-size: clamp(2.4rem, 4vw, 3.3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #041524;
  margin: 1.3rem 0 1.1rem;
}

.medsers-hero-left h1 span {
  color: #00baf2;
}

.medsers-hero-left p {
  font-size: clamp(0.96rem, 1.05vw, 1.05rem);
  line-height: 1.8;
  color: #33516b;
  max-width: 520px;
  margin-bottom: 2rem;
}

/* --- BUTTONS: REACT-ISH LOOK --- */

.medsers-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

.mh-btn {
  position: relative;
  border-radius: 999px;
  padding: 0.95rem 2.1rem;
  font-size: 0.96rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: pointer;
  border: 0;
  outline: none;
  transform: translateY(0);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

/* subtle ripple-ish highlight on hover */
.mh-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 0, rgba(255,255,255,0.45), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mh-btn-primary {
  background: linear-gradient(135deg, #00c853, #02b93f);
  color: #ffffff;
  box-shadow: 0 18px 45px rgba(0, 180, 70, 0.45);
}

.mh-btn-primary:hover,
.mh-btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0, 180, 70, 0.6);
}

.mh-btn-primary:hover::after,
.mh-btn-primary:focus-visible::after {
  opacity: 1;
}

.mh-btn-ghost {
  background: #ffffff;
  color: #041524;
  border: 1px solid rgba(8, 39, 71, 0.25);
  box-shadow: 0 10px 26px rgba(8, 39, 71, 0.12);
}

.mh-btn-ghost:hover,
.mh-btn-ghost:focus-visible {
  background: #041524;
  color: #ffffff;
  border-color: #041524;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(8, 39, 71, 0.4);
}

.mh-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* if you ever add an icon span, it will round it nicely */
.mh-btn .mh-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 1rem;
}

/* --- RESPONSIVE TWEAKS FOR TEXT + BUTTONS --- */

@media (max-width: 900px) {
  .medsers-hero-slide {
    flex-direction: column;
    align-items: flex-start;
  }

  .medsers-hero-left {
    max-width: 100%;
  }

  .medsers-hero-right {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .medsers-hero-left {
    text-align: center;
    margin: 0 auto;
  }

  .medsers-hero-left p {
    margin-left: auto;
    margin-right: auto;
  }

  .medsers-hero-ctas {
    justify-content: center;
    gap: 0.7rem;
  }

  .mh-btn {
    width: 100%;
    max-width: 260px;
  }
}

.medsers-hero-right img {
    width: auto;
    height: auto;
    max-width: 540px;
    max-height: 420px;
    object-fit: contain;
    transform: translateY(10px);
}

/* RIGHT SIDE – IMAGE BOX */
.medsers-hero-right {
  flex: 0 0 420px;           /* fixed visual column so text + image balance */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* HERO IMAGE – FULL FIT, NO CROP */
.medsers-hero-right img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 420px;          /* how wide the flyer can go */
  max-height: 520px;         /* how tall it can go inside hero */
  object-fit: contain;       /* IMPORTANT: show full flyer, no cropping */
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(0, 36, 80, 0.25);
}

/* Slider dots under the image (optional polish) */
.medsers-hero-controls {
  margin-top: 1.8rem;
  display: flex;
  justify-content: flex-end;  /* pushes dots towards image side */
  gap: 0.75rem;
}


/* FULL-WIDTH HERO WRAPPER */
.medsers-hero-slider {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* gradient background */
  background:
    radial-gradient(circle at top left, #c9e6ff 0%, #dff0ff 35%, #f5fbff 100%);

  /* if you want a bg image ON TOP of gradient, uncomment this and set URL
  background:
    url('/wp-content/themes/YOURTHEME/assets/images/hero-bg-shape.png') center/cover no-repeat,
    radial-gradient(circle at top left, #c9e6ff 0%, #dff0ff 35%, #f5fbff 100%);
  */

  padding: 4.8rem 1.5rem 5rem;
  box-sizing: border-box;
  overflow: hidden;
}

.medsers-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* SLIDER WRAPPER */
.medsers-hero-slides {
  position: relative;
  min-height: 430px;
}
/* EACH SLIDE = FLEX ROW (TEXT LEFT, IMAGE RIGHT) */
.medsers-hero-slide {
  position: absolute;
  inset: 0;
  padding-right: 1rem;

  display: flex;                     /* <-- this is what was missing */
  align-items: center;
  justify-content: space-between;
  gap: 3rem;

  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* visible slide */
.medsers-hero-slide.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.medsers-hero-left {
  flex: 1 1 50%;
  max-width: 560px;
}

.medsers-pill-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: rgba(255, 255, 255, 0.96);
  color: #0c7bb3;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(7, 65, 120, 0.15);
}

.medsers-hero-left h1 {
  font-size: clamp(2.4rem, 4vw, 3.3rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #041524;
  margin: 1.3rem 0 1.1rem;
}

.medsers-hero-left h1 span {
  color: #00baf2;
}

.medsers-hero-left p {
  font-size: clamp(0.96rem, 1.05vw, 1.05rem);
  line-height: 1.8;
  color: #33516b;
  max-width: 520px;
  margin-bottom: 2rem;
}

/* CTA buttons */
.medsers-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
}

.mh-btn {
  position: relative;
  border-radius: 999px;
  padding: 0.95rem 2.1rem;
  font-size: 0.96rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: pointer;
  border: 0;
  outline: none;
  transform: translateY(0);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.mh-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 0, rgba(255,255,255,0.45), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mh-btn-primary {
  background: linear-gradient(135deg, #00c853, #02b93f);
  color: #ffffff;
  box-shadow: 0 18px 45px rgba(0, 180, 70, 0.45);
}

.mh-btn-primary:hover,
.mh-btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(0, 180, 70, 0.6);
}

.mh-btn-primary:hover::after,
.mh-btn-primary:focus-visible::after {
  opacity: 1;
}

.mh-btn-ghost {
  background: #ffffff;
  color: #041524;
  border: 1px solid rgba(8, 39, 71, 0.25);
  box-shadow: 0 10px 26px rgba(8, 39, 71, 0.12);
}

.mh-btn-ghost:hover,
.mh-btn-ghost:focus-visible {
  background: #041524;
  color: #ffffff;
  border-color: #041524;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(8, 39, 71, 0.4);
}

.medsers-hero-right {
  flex: 0 0 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* make the flyer BIG like your reference hero */
.medsers-hero-right img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 620px;      /* adjust this for how wide you want */
  max-height: 780px;     /* controls overall hero height */
  object-fit: contain;
  border-radius: 30px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(10px);
}

.medsers-hero-controls {
  margin-top: 2.2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
}

.medsers-hero-arrow {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(5, 32, 70, 0.35);
  color: #0c7bb3;
  font-size: 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.medsers-hero-arrow:hover {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(5, 32, 70, 0.5);
}

.medsers-hero-dots {
  display: inline-flex;
  gap: 0.4rem;
}

.medsers-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(12, 123, 179, 0.2);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.medsers-hero-dot.is-active {
  background: #0c7bb3;
  border-color: #0c7bb3;
  transform: scale(1.25);
}

@media (max-width: 992px) {
  .medsers-hero-slide {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0;
  }

  .medsers-hero-right {
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }

  .medsers-hero-right img {
    max-width: 460px;
    max-height: 640px;
    transform: translateY(0);
  }

  .medsers-hero-controls {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .medsers-hero-left {
    text-align: center;
    margin: 0 auto;
  }

  .medsers-hero-left p {
    margin-left: auto;
    margin-right: auto;
  }

  .medsers-hero-ctas {
    justify-content: center;
    gap: 0.7rem;
  }

  .mh-btn {
    width: 100%;
    max-width: 260px;
  }

  .medsers-hero-right img {
    max-width: 340px;
    max-height: 520px;
  }
}



/* ========= COMMON SECTION CARD WRAPPER ========= */

.post-card.section {
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding: 2.3rem 2.5rem 2.6rem;
  border-radius: 26px;
  background: radial-gradient(circle at top left, #f7fbff 0%, #f3f7ff 40%, #edf4ff 100%);
  box-shadow: 0 28px 80px rgba(9, 37, 71, 0.12);
}

/* tighten spacing between stacked sections */
.post-card.section + .post-card.section {
  margin-top: 2rem;
}

/* section headings + sub text */
.post-card.section > h2 {
  margin: 0 0 0.4rem;
  font-size: 1.7rem;
  color: #041524;
  letter-spacing: -0.02em;
}

.post-card.section > p {
  margin: 0 0 1.8rem;
  color: #5b758f;
  font-size: 0.95rem;
}

/* ========= HOW MEDSERS WORKS ========= */

#how-medsers .steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
}

/* each step card */
#how-medsers .step-card {
  position: relative;
  padding: 1.6rem 1.4rem 1.7rem;
  border-radius: 22px;
  background: linear-gradient(145deg, #ffffff, #f5f8ff);
  box-shadow: 0 18px 40px rgba(9, 37, 71, 0.11);
  border: 1px solid rgba(193, 210, 238, 0.6);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  cursor: default;
}

/* hover lift */
#how-medsers .step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(9, 37, 71, 0.16);
  border-color: rgba(0, 186, 242, 0.55);
}

/* circular number badge */
#how-medsers .step-number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 20%, #ffffff, #0052a1);
  color: #ffffff;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px rgba(0, 48, 104, 0.55);
  margin-bottom: 1rem;
}

/* step titles + copy */
#how-medsers .step-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: #041524;
}

#how-medsers .step-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #5b758f;
}

/* ========= WHAT YOU CAN DO ========= */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
}

/* feature cards */
.feature-card {
  padding: 1.5rem 1.6rem 1.6rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(203, 217, 241, 0.75);
  box-shadow: 0 16px 40px rgba(9, 37, 71, 0.08);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* gradient accent bar on left */
.feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #00c853, #00baf2);
  opacity: 0.85;
}

/* hover */
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(9, 37, 71, 0.14);
  border-color: rgba(0, 186, 242, 0.55);
}

.feature-card h3 {
  margin: 0 0 0.45rem 0.4rem;
  font-size: 1rem;
  color: #041524;
}

.feature-card p {
  margin: 0 0 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #5b758f;
}

/* ========= WHY PATIENTS & PHARMACIES TRUST MEDSERS ========= */

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.8rem;
  align-items: stretch;
}

/* list side */
.trust-list {
  margin: 0;
  padding-left: 1.1rem;
  list-style: none;
}

.trust-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  font-size: 0.95rem;
  color: #425a75;
}

.trust-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #00c853;
}

/* highlight card for pharmacies */
.trust-highlight {
  border-radius: 22px;
  padding: 1.6rem 1.7rem 1.7rem;
  background: linear-gradient(145deg, #0b72dc, #00baf2);
  color: #ffffff;
  box-shadow: 0 22px 60px rgba(7, 79, 163, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.trust-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  opacity: 0.85;
  margin: 0 0 0.6rem;
}

.trust-highlight p {
  margin: 0 0 1.2rem;
  font-size: 0.94rem;
  line-height: 1.7;
}

.trust-highlight .btn-outline {
  align-self: flex-start;
  padding: 0.75rem 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  transition:
    background 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.trust-highlight .btn-outline:hover {
  background: #ffffff;
  color: #0b72dc;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(5, 49, 121, 0.45);
}

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

@media (max-width: 992px) {
  #how-medsers .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 640px) {
  .post-card.section {
    padding: 1.8rem 1.4rem 2.1rem;
    border-radius: 20px;
  }

  #how-medsers .steps-grid,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .post-card.section > h2 {
    font-size: 1.4rem;
  }
}


/* MATCH HERO SECTION WIDTH */
.content-area .post-card.section {
    max-width: 1350px; /* same width as hero section container */
    margin-left: auto;
    margin-right: auto;
}

/* INCREASE TITLE FONT SIZE */
#how-medsers h2,
.post-card.section > h2 {
    font-size: 2rem !important;
    font-weight: 700;
    color: #0b1b33;
}

/* SUBTEXT UNDER TITLE */
#how-medsers > p,
.post-card.section > p {
    font-size: 1.05rem !important;
    color: #5c6f85;
    margin-bottom: 2.2rem;
}

/* STEP CARD TEXT IMPROVEMENTS */
#how-medsers .step-card h3 {
    font-size: 1.15rem !important;
    font-weight: 700;
}

#how-medsers .step-card p {
    font-size: 1rem !important;
    line-height: 1.7;
}

/* MAKE CARD HEIGHT EQUAL + MORE PADDING */
#how-medsers .step-card {
    padding: 2rem 1.8rem 2.2rem !important;
    height: auto;
}

/* EVEN OUT COLUMN SPACING */
#how-medsers .steps-grid {
    gap: 2rem !important;
}

/* RESPONSIVE IMPROVEMENTS */
@media (max-width: 1024px) {
    .content-area .post-card.section {
        max-width: 95%;
    }

    #how-medsers h2 {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 600px) {
    #how-medsers h2 {
        font-size: 1.5rem !important;
    }

    #how-medsers > p {
        font-size: 1rem !important;
    }

    #how-medsers .step-card h3 {
        font-size: 1.1rem !important;
    }
}

/* ===== STEP NUMBER BADGES (1, 2, 3, 4) ===== */

#how-medsers .step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* WhatsApp + health gradient ring */
  background: conic-gradient(
    from 140deg,
    #00c853,
    #00baf2,
    #00e676,
    #00c853
  );

  color: #0a2a3f;
  font-size: 0.9rem;
  font-weight: 700;

  box-shadow: 0 15px 35px rgba(0, 186, 242, 0.45);
  animation: medsers-badge-float 3.2s ease-in-out infinite;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* inner soft pill so the number sits on white */
#how-medsers .step-number::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, #ffffff, #d2f6ea);
}

/* ensure number text stays above inner circle */
#how-medsers .step-number::after {
  content: attr(data-step);
}

/* you can also set data-step automatically via JS;
   for now just keep the text node in HTML as you have */

#how-medsers .step-number {
  z-index: 1;
}

/* hover: card + badge feel connected */
#how-medsers .step-card:hover .step-number {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 22px 50px rgba(0, 186, 242, 0.7);
}

/* subtle float animation for idle state */
@keyframes medsers-badge-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

/* RESET ANY PREVIOUS STEP-NUMBER STYLES */
#how-medsers .step-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* WhatsApp + health gradient ring */
  background: conic-gradient(
    from 140deg,
    #00c853,
    #00baf2,
    #00e676,
    #00c853
  );

  color: #0a2a3f;            /* dark number, readable on light center */
  font-size: 0.9rem;
  font-weight: 700;

  box-shadow: 0 15px 35px rgba(0, 186, 242, 0.45);
  animation: medsers-badge-float 3.2s ease-in-out infinite;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* inner soft circle behind the number */
#how-medsers .step-number::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, #ffffff, #d2f6ea);
  z-index: 0;   /* stay behind text */
}

/* make sure the actual number text is above the inner circle */
#how-medsers .step-number {
  z-index: 1;
}

/* remove any old ::after content if it exists */
#how-medsers .step-number::after {
  content: none !important;
}

/* hover: card + badge pop together */
#how-medsers .step-card:hover .step-number {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 22px 50px rgba(0, 186, 242, 0.7);
}

/* subtle float animation */
@keyframes medsers-badge-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

/* BASE BADGE STYLE */
#how-medsers .step-number {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* WhatsApp + health gradient ring */
  background: conic-gradient(
    from 140deg,
    #00c853,
    #00baf2,
    #00e676,
    #00c853
  );

  /* hide any old text if it exists */
  font-size: 0 !important;
  color: transparent !important;

  box-shadow: 0 15px 35px rgba(0, 186, 242, 0.45);
  animation: medsers-badge-float 3.2s ease-in-out infinite;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* inner soft circle */
#how-medsers .step-number::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, #ffffff, #d2f6ea);
  z-index: 1;
}

/* NUMBER ITSELF FROM data-step */
#how-medsers .step-number::after {
  content: attr(data-step);
  position: relative;
  z-index: 2;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0a2a3f;
}

/* hover – badge pops with the card */
#how-medsers .step-card:hover .step-number {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 22px 50px rgba(0, 186, 242, 0.7);
}

/* idle floating animation */
@keyframes medsers-badge-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

/* ---------- MEDSERS STEP BADGES (1,2,3,4) ---------- */

#how-medsers .step-number {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* WhatsApp + health gradient ring */
  background: conic-gradient(
    from 140deg,
    #00c853,
    #00baf2,
    #00e676,
    #00c853
  );

  box-shadow: 0 15px 35px rgba(0, 186, 242, 0.45);

  /* make sure nothing else hides text */
  color: #0a2a3f !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  overflow: visible !important;

  animation: medsers-badge-float 3.2s ease-in-out infinite;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* inner soft white circle */
#how-medsers .step-number::before {
  content: "" !important;
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, #ffffff, #d2f6ea);
  z-index: 1;
}

/* THE NUMBER (1,2,3,4) – FORCED OVERRIDE */
#how-medsers .step-number::after {
  content: attr(data-step) !important;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #0a2a3f !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

/* hover – badge pops with card */
#how-medsers .step-card:hover .step-number {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 22px 50px rgba(0, 186, 242, 0.7);
}

/* soft floating animation */
@keyframes medsers-badge-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
/* ----- CLEAN BADGE RESET ----- */
#how-medsers .step-number,
#how-medsers .step-number::before,
#how-medsers .step-number::after {
  content: none !important;   /* kill any old pseudo content */
}

/* ----- FINAL STEP BADGE STYLE ----- */
#how-medsers .step-number {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* WhatsApp + health gradient ring */
  background: conic-gradient(
    from 140deg,
    #00c853,
    #00baf2,
    #00e676,
    #00c853
  );

  box-shadow: 0 15px 35px rgba(0, 186, 242, 0.45);

  /* number text */
  font-size: 0.95rem;
  font-weight: 700;
  color: #0a2a3f;
  line-height: 1;          /* no vertical weirdness */
  overflow: visible;

  animation: medsers-badge-float 3.2s ease-in-out infinite;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* soft inner white circle */
#how-medsers .step-number::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, #ffffff, #d2f6ea);
  z-index: 0;
}

/* keep the text on top */
#how-medsers .step-number {
  z-index: 1;
}

/* hover – badge pops with card */
#how-medsers .step-card:hover .step-number {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 22px 50px rgba(0, 186, 242, 0.7);
}

/* floating animation */
@keyframes medsers-badge-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}


/* ----- WHATSAPP THEME BADGE ----- */
#how-medsers .step-number {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* WhatsApp + Medsers gradient ring */
  background: conic-gradient(
    from 160deg,
    #25D366,
    #00C8FF,
    #25E089,
    #25D366
  );

  box-shadow: 0 12px 30px rgba(0, 200, 255, 0.35),
              0 6px 12px rgba(37, 211, 102, 0.25);

  font-size: 1rem;
  font-weight: 700;
  color: #003333; /* Dark teal for sharp contrast */
  z-index: 2;

  animation: medsers-badge-float 3.2s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Soft inner white-teal circle */
#how-medsers .step-number::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, #ffffff, #d7fdf2);
  z-index: -1;
}

/* Hover boost */
#how-medsers .step-card:hover .step-number {
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 20px 45px rgba(0, 200, 255, 0.55),
              0 10px 22px rgba(37, 211, 102, 0.4);
}

/* Floating animation */
@keyframes medsers-badge-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* FULL RESET + WHATSAPP COLORS FOR STEP BADGES */
#how-medsers .steps-grid .step-card .step-number {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* WHATSAPP + MEDSERS GRADIENT */
  background: conic-gradient(
    from 160deg,
    #25D366,
    #00C8FF,
    #25E089,
    #25D366
  ) !important;

  box-shadow: 0 12px 30px rgba(0, 200, 255, 0.35),
              0 6px 12px rgba(37, 211, 102, 0.25) !important;

  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #003333 !important;   /* dark teal number */
  line-height: 1 !important;
  overflow: visible !important;

  animation: medsers-badge-float 3.2s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* RESET ANY OLD BEFORE/AFTER AND APPLY LIGHT INNER CIRCLE */
#how-medsers .steps-grid .step-card .step-number::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 20%, #ffffff, #d7fdf2) !important;
  z-index: -1 !important;
}

#how-medsers .steps-grid .step-card .step-number::after {
  content: none !important;  /* make sure no old numbers are drawn here */
}

/* HOVER POP */
#how-medsers .steps-grid .step-card:hover .step-number {
  transform: translateY(-5px) scale(1.08) !important;
  box-shadow: 0 20px 45px rgba(0, 200, 255, 0.55),
              0 10px 22px rgba(37, 211, 102, 0.4) !important;
}

/* FLOAT ANIMATION (if not already defined) */
@keyframes medsers-badge-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}


/* ================= HOW MEDSERS WORKS ================= */

.medsers-steps {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    padding: 4.5rem 0;
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 45%, #f9fafb 100%);
}

.medsers-section-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Section heading */
.medsers-section-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0b1120;
    margin-bottom: .5rem;
}

.medsers-section-header p {
    font-size: 1rem;
    color: #4b5563;
    margin-bottom: 2.5rem;
}

/* Grid */
.medsers-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
}

/* Card */
.medsers-step-card {
    position: relative;
    background: #ffffff;
    border-radius: 26px;
    padding: 3.5rem 1.9rem 2.2rem;
    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

/* Number circle with glow */
.medsers-step-number {
    position: absolute;
    top: 1.4rem;
    left: 1.7rem;

    width: 54px;
    height: 54px;
    border-radius: 999px;

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

    color: #0f172a;
    font-weight: 700;
    font-size: 1.05rem;

    background:
        radial-gradient(circle at 50% 50%, rgba(45, 212, 191, 0.9), transparent 60%);
    box-shadow:
        0 15px 30px rgba(34, 197, 94, 0.35);
}

/* inner white ring */
.medsers-step-number::before {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: inherit;
    border: 3px solid #22c55e;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.3);
    position: absolute;
    z-index: 0;
}

.medsers-step-number::after {
    content: attr(data-step);
}

/* move the actual number text above the ring */
.medsers-step-number {
    font-size: 1.05rem;
    z-index: 1;
}

/* Headings & text */
.medsers-step-card h3 {
    margin-top: 1.2rem;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #020617;
}

.medsers-step-card p {
    font-size: 0.96rem;
    line-height: 1.6;
    color: #4b5563;
}

/* Hover (slight lift) */
.medsers-step-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 22px 60px rgba(15, 23, 42, 0.16),
        0 0 0 1px rgba(148, 163, 184, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Responsive */
@media (max-width: 1024px) {
    .medsers-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .medsers-steps-grid {
        grid-template-columns: 1fr;
    }

    .medsers-step-card {
        padding: 3rem 1.8rem 2rem;
    }

    .medsers-step-number {
        left: 1.5rem;
    }
}

/* ===== MEDSERS STEP BADGE (NEW CLASS) ===== */

#how-medsers .step-badge {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* outer subtle white circle */
  /*background: #ffffff;*/
  box-shadow:
    0 18px 40px rgba(9, 37, 71, 0.18),
    0 0 0 1px rgba(193, 210, 238, 0.6);

  margin-bottom: 1rem;
  overflow: visible;
}

/* inner WhatsApp / health gradient circle */
#how-medsers .step-badge::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #ffffff, #d7fdf2);
  z-index: 1;
}

#how-medsers .step-badge::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: conic-gradient(
    from 160deg,
    #25D366,
    #00C8FF,
    #25E089,
    #25D366
  );
  box-shadow: 0 10px 25px rgba(0, 200, 255, 0.35),
              0 6px 16px rgba(37, 211, 102, 0.3);
  z-index: 0;
}

/* number itself */
#how-medsers .step-badge span {
  position: relative;
  z-index: 2;
  font-size: 1rem;
  font-weight: 700;
  color: #003333; /* dark teal, easy to read */
}

/* hover: badge + card feel connected */
#how-medsers .step-card:hover .step-badge::after {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 200, 255, 0.55),
              0 10px 24px rgba(37, 211, 102, 0.45);
}

/* subtle breathing / pulse animation */
#how-medsers .step-badge {
  animation: medsers-badge-pulse 3.4s ease-in-out infinite;
}

@keyframes medsers-badge-pulse {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-3px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

/* Section background */
.how-medsers {
  padding: 80px 16px;
  background: radial-gradient(circle at top left, #e4f9ff, #f5fbff);
}

/* Center content */
.how-container {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

/* Heading + subtitle */
.how-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #022b3a;
  margin-bottom: 8px;
}


/* Make sure numbers 1,2,3,4 are visible inside the circles */
.step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00c977, #00bcd4);
  box-shadow: 0 12px 25px rgba(0, 188, 212, 0.35);

  font-size: 22px !important;
  font-weight: 700;
  color: #ffffff !important;

  position: relative;
  z-index: 2;
}

/* Kill any old pseudo-elements that might be covering the text */
.step-badge::before,
.step-badge::after {
  content: none !important;
}

/* Section background */
.how-medsers {
  padding: 80px 16px;
  background: radial-gradient(circle at top left, #e4f9ff, #f5fbff);
}

.how-container {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

/* Heading + subtitle */
.how-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #022b3a;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.how-subtitle {
  font-size: 1rem;
  color: #5c6c7f;
  margin-bottom: 40px;
}

/* Grid */
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  position: relative;
}

/* Progress line behind circles (desktop only) */
.how-grid::before {
  content: "";
  position: absolute;
  top: 82px; /* roughly through center of circles */
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, #00c977, #00bcd4);
  opacity: 0.22;
  z-index: 0;
}

/* Card */
.how-card {
  background: #ffffff;
  border-radius: 26px;
  padding: 34px 26px 28px;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

/* Small pill with “Step X” */
.how-card::before {
  content: attr(data-step);
  position: absolute;
  top: 18px;
  left: 24px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 204, 153, 0.08);
  color: #00a47a;
}

/* Hover effect */
.how-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 65px rgba(0, 0, 0, 0.09);
  border-color: rgba(0, 204, 153, 0.35);
  background: radial-gradient(circle at top, #f1fffb 0, #ffffff 55%);
}

/* Number circle */
.step-badge {
  width: 60px;
  height: 60px;
  margin: 18px auto 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #48ffe0, #00c977);
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(0, 188, 212, 0.35);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.how-card:hover .step-badge {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 40px rgba(0, 188, 212, 0.5);
}

/* Title & text */
.how-card-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: #012b47;
  margin-bottom: 10px;
}

.how-card-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #607286;
}

/* Responsive tweaks */
@media (max-width: 1024px) {
  .how-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-grid::before {
    left: 10%;
    right: 10%;
  }
}

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

  /* Hide connector line on mobile (cards will stack) */
  .how-grid::before {
    display: none;
  }

  .how-medsers {
    padding: 60px 16px;
  }

  .how-card {
    padding: 30px 22px 24px;
  }

  .how-title {
    font-size: 1.9rem;
  }
}

/* --- PULSE GLOW AROUND THE NUMBER CIRCLES --- */

.step-badge {
  position: relative;
  overflow: visible;
}

/* glowing ring */
.step-badge::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(0, 238, 188, 0.7);
  box-shadow: 0 0 0 0 rgba(0, 238, 188, 0.4);
  opacity: 0.9;
  pointer-events: none;
  animation: medsers-pulse 2.2s ease-out infinite;
}

/* Stagger the pulses so 1-2-3-4 animate one after another */
.how-card:nth-child(1) .step-badge::after { animation-delay: 0s; }
.how-card:nth-child(2) .step-badge::after { animation-delay: 0.3s; }
.how-card:nth-child(3) .step-badge::after { animation-delay: 0.6s; }
.how-card:nth-child(4) .step-badge::after { animation-delay: 0.9s; }

@keyframes medsers-pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 238, 188, 0.45);
    opacity: 0.95;
  }
  60% {
    transform: scale(1.25);
    box-shadow: 0 0 0 22px rgba(0, 238, 188, 0);
    opacity: 0;
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 238, 188, 0);
    opacity: 0;
  }
}

/* --- SOFT FLOATING EFFECT ON CARDS --- */

.how-card {
  animation: medsers-float 7s ease-in-out infinite;
}

/* tiny different timing so they don’t move in sync */
.how-card:nth-child(2) { animation-delay: 0.4s; }
.how-card:nth-child(3) { animation-delay: 0.8s; }
.how-card:nth-child(4) { animation-delay: 1.2s; }

@keyframes medsers-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* When hovering, make the card feel “active” and the circle pop a bit more */
.how-card:hover {
  transform: translateY(-12px) scale(1.01);
}

.how-card:hover .step-badge {
  transform: translateY(-6px) scale(1.08);
}

/* Optional: slightly speed up the pulse on hover */
.how-card:hover .step-badge::after {
  animation-duration: 1.6s;
}
/* ENTRY + FLOAT ANIMATION ON CARDS */
.how-card {
  opacity: 0;
  transform-origin: center top;
  animation:
    medsers-enter 0.7s ease-out forwards,
    medsers-float 9s ease-in-out 0.9s infinite;
}

/* stagger entry + float so they appear one by one */
.how-card:nth-child(1) {
  animation-delay: 0s, 0.9s;
}
.how-card:nth-child(2) {
  animation-delay: 0.12s, 1.05s;
}
.how-card:nth-child(3) {
  animation-delay: 0.24s, 1.2s;
}
.how-card:nth-child(4) {
  animation-delay: 0.36s, 1.35s;
}

@keyframes medsers-enter {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.96) rotateX(6deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

@keyframes medsers-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Hover: add slight 3D tilt + scale */
.how-card:hover {
  transform: translateY(-14px) scale(1.02) rotate3d(1, -1, 0, 6deg);
}

.how-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 70%;
  height: 70px;
  transform: translateX(-50%);
  background: radial-gradient(
    circle at center,
    rgba(0, 204, 153, 0.23),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.how-card:hover::after {
  opacity: 1;
  transform: translate(-50%, -8px);
}



.how-subtitle {
  font-size: 1rem;
  color: #5c6c7f;
  margin-bottom: 40px;
}

/* Grid for cards */
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* Card styling */
.how-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px 24px 28px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border: 1px solid rgba(0, 0, 0, 0.02);
}

/* Hover effect */
.how-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 204, 153, 0.3);
}

/* Number circle */
.step-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00c977, #00bcd4);
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 25px rgba(0, 188, 212, 0.35);
}

/* Title & text inside card */
.how-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #012b47;
  margin-bottom: 10px;
}

.how-card-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #607286;
}

/* Responsive */
@media (max-width: 1024px) {
  .how-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .how-medsers {
    padding: 60px 16px;
  }
  .how-grid {
    grid-template-columns: 1fr;
  }
  .how-card {
    padding: 24px 20px;
  }
  .how-title {
    font-size: 1.8rem;
  }
}


/* Outer block */
.medsers-uses {
  padding: 80px 16px;
}

.uses-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 40px 44px;
  border-radius: 30px;
  background: radial-gradient(circle at top left, #f5fbff, #ffffff);
  box-shadow:
    0 24px 60px rgba(3, 41, 71, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

/* Heading */
.uses-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #03263c;
  margin-bottom: 6px;
}

.uses-subtitle {
  font-size: 0.98rem;
  color: #647589;
  max-width: 640px;
  margin: 0 0 32px;
}

/* Grid */
.uses-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
}

/* Individual cards */
.use-card {
  position: relative;
  border-radius: 22px;
  background: #ffffff;
  padding-left: 22px; /* room for accent */
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(6, 44, 71, 0.08);
  border: 1px solid rgba(2, 90, 110, 0.04);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

/* Accent strip on the left */
.use-accent {
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #00c977, #00bcd4);
}

/* Internal content */
.use-inner {
  padding: 20px 26px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Icon pill */
.use-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: radial-gradient(circle at top left, #e4fff7, #f7ffff);
  color: #009f7a;
  box-shadow: 0 8px 16px rgba(0, 180, 140, 0.25);
  margin-bottom: 2px;
}

/* Heading & text */
.use-heading {
  font-size: 1.02rem;
  font-weight: 700;
  color: #042338;
}

.use-copy {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #617388;
}

/* Hover state – premium effect */
.use-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle at center, rgba(0, 204, 153, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.use-card:hover {
  transform: translateY(-8px);
  background: radial-gradient(circle at top left, #f7fffe, #ffffff);
  box-shadow:
    0 22px 60px rgba(6, 44, 71, 0.14),
    0 0 0 1px rgba(0, 210, 170, 0.12);
  border-color: rgba(0, 196, 153, 0.45);
}

.use-card:hover::after {
  opacity: 1;
  transform: translate(-8px, -8px);
}

/* Subtle “React-ish” float on cards */
.use-card {
  animation: uses-float 10s ease-in-out infinite;
}

.use-card:nth-child(2) { animation-delay: 0.2s; }
.use-card:nth-child(3) { animation-delay: 0.4s; }
.use-card:nth-child(4) { animation-delay: 0.6s; }

@keyframes uses-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Responsive */
@media (max-width: 900px) {
  .uses-shell {
    padding: 28px 20px 30px;
  }
  .uses-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .uses-title {
    font-size: 1.9rem;
  }
}

/* Section Container */
.medsers-uses {
  padding: 80px 16px;
}

.uses-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 40px 44px;
  border-radius: 30px;
  background: radial-gradient(circle at top left, #f5fbff, #ffffff);
  box-shadow:
    0 24px 60px rgba(3, 41, 71, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset;
}

/* Eyebrow Heading */
.uses-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 204, 153, 0.06);
  color: #00a37a;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Dot */
.uses-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00c977, #00bcd4);
}

/* Titles */
.uses-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #03263c;
  margin-bottom: 6px;
}

.uses-subtitle {
  font-size: 0.98rem;
  color: #647589;
  max-width: 640px;
  margin: 0 0 32px;
}

/* Grid */
.uses-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 26px;
}

/* Cards */
.use-card {
  position: relative;
  border-radius: 22px;
  background: #ffffff;
  padding-left: 22px;
  overflow: hidden;
  box-shadow: 0 14px 35px rgba(6, 44, 71, 0.08);
  border: 1px solid rgba(2, 90, 110, 0.04);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
  animation: uses-float 10s ease-in-out infinite;
}

/* Staggered Animation */
.use-card:nth-child(2) { animation-delay: 0.2s; }
.use-card:nth-child(3) { animation-delay: 0.4s; }
.use-card:nth-child(4) { animation-delay: 0.6s; }

@keyframes uses-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Left Accent Bar */
.use-accent {
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #00c977, #00bcd4);
}

/* Card Inner */
.use-inner {
  padding: 20px 26px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Icon Pill */
.use-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: radial-gradient(circle at top left, #e4fff7, #f7ffff);
  color: #009f7a;
  box-shadow: 0 8px 16px rgba(0, 180, 140, 0.25);
  margin-bottom: 2px;
}

/* Headings & Text */
.use-heading {
  font-size: 1.02rem;
  font-weight: 700;
  color: #042338;
}

.use-copy {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #617388;
}

/* Hover Effects */
.use-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle at center, rgba(0, 204, 153, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.use-card:hover {
  transform: translateY(-8px);
  background: radial-gradient(circle at top left, #f7fffe, #ffffff);
  box-shadow:
    0 22px 60px rgba(6, 44, 71, 0.14),
    0 0 0 1px rgba(0, 210, 170, 0.12);
  border-color: rgba(0, 196, 153, 0.45);
}

.use-card:hover::after {
  opacity: 1;
  transform: translate(-8px, -8px);
}

/* Responsive */
@media (max-width: 900px) {
  .uses-shell {
    padding: 28px 20px 30px;
  }
  .uses-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .uses-title {
    font-size: 1.9rem;
  }
}

/* SECTION WRAPPER */
.pharmacy-partner {
  padding: 80px 16px 90px;
  background: radial-gradient(circle at top left, #eff8ff, #f7fcff);
}

/*.pharmacy-shell {*/
/*  max-width: 1180px;*/
/*  margin: 0 auto;*/
/*  padding: 34px 38px;*/
/*  border-radius: 26px;*/
/*  background: radial-gradient(circle at top left, #f6fbff, #ffffff);*/
/*  box-shadow:*/
/*    0 28px 70px rgba(3, 41, 71, 0.16),*/
/*    0 0 0 1px rgba(255, 255, 255, 0.5) inset;*/
/*  display: grid;*/
/*  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);*/
/*  gap: 32px;*/
/*  align-items: center;*/
/*}*/

.pharmacy-shell {
  max-width: 80%; /* much wider hero */
  padding: 0 40px; /* only mild padding */
  margin: 0 auto;
  
  display: grid;
  grid-template-columns: 1fr 1.1fr; /* image slightly bigger */
  align-items: center;

  gap: 40px;
  border-radius: 0; /* remove the card shape */
  background: none; /* remove card background */

  box-shadow: none; /* remove card shadow */
}



/* LEFT SIDE */
.pharmacy-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pharmacy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 204, 153, 0.06);
  color: #00a37a;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pharmacy-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00c977, #00bcd4);
}

.pharmacy-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #03263c;
  margin-top: 4px;
}

.pharmacy-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #586679;
}

.pharmacy-quote {
  font-weight: 600;
  color: #022d4a;
}

/* Chips */
.pharmacy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pharmacy-chip {
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 188, 212, 0.08);
  color: #036e87;
  font-weight: 500;
}

/* CTA */
.pharmacy-cta-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.pharmacy-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #02c152, #00a83e);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(2, 193, 82, 0.4);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.pharmacy-cta-icon {
  font-size: 1.1rem;
}

.pharmacy-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 40px rgba(2, 193, 82, 0.55);
  background: linear-gradient(135deg, #00d45d, #00b447);
}

.pharmacy-cta-note {
  font-size: 0.86rem;
  color: #6a7a8c;
}

/* RIGHT SIDE IMAGE CARD */
.pharmacy-visual {
  display: flex;
  justify-content: flex-end;
}

.pharmacy-card-hero {
 
  max-width: 680px; /* Bigger hero */
  width: 100%;
  padding: 0;
  border-radius: 32px;
  background: radial-gradient(circle at top left, #e8fbff, #ffffff);
  box-shadow: 0 40px 95px rgba(14, 94, 119, 0.22);
}


.pharmacy-card-hero::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 204, 153, 0.6),
    rgba(0, 188, 212, 0.6),
    transparent 40%,
    transparent 100%
  );
  opacity: 0.18;
  filter: blur(12px);
  z-index: -1;
}

.pharmacy-hero-img {
  width: 100%;
  display: block;
  border-radius: 18px;
}

/* Stats badges */
.pharmacy-stat-badge {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 25px rgba(7, 53, 84, 0.3);
  font-size: 0.75rem;
}

.pharmacy-stat-1 {
  left: 16px;
  top: 16px;
}

.pharmacy-stat-2 {
  right: 16px;
  bottom: 16px;
}

.stat-label {
  color: #6a7b8c;
  font-weight: 500;
}

.stat-value {
  font-weight: 700;
  color: #03825f;
  font-size: 0.86rem;
}

/* Floating animation */
@keyframes pharmacyFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .pharmacy-shell {
    grid-template-columns: 1fr;
    padding: 26px 20px 30px;
  }

  .pharmacy-visual {
    justify-content: flex-start;
  }

  .pharmacy-card-hero {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .pharmacy-title {
    font-size: 1.9rem;
  }
  .pharmacy-cta-row {
    align-items: flex-start;
  }
}

/* Make the right visual section wider */
.pharmacy-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make hero card bigger + premium */
.pharmacy-card-hero {
  position: relative;
  width: 100%;
  max-width: 520px; /* Increased from ~360px → BIG & premium */
  border-radius: 28px;
  padding: 24px;
  background: radial-gradient(circle at top left, #e7fbff, #ffffff);
  box-shadow: 0 30px 75px rgba(11, 94, 119, 0.28);
  overflow: hidden;
  animation: pharmacyFloat 9s ease-in-out infinite;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Hover zoom for premium feel */
.pharmacy-card-hero:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 45px 90px rgba(11, 94, 119, 0.35);
}

/* Bigger hero image */
.pharmacy-hero-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  transform: scale(1.06); /* Slight upscale for better presence */
}

/* Stronger glow background */
.pharmacy-card-hero::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 204, 153, 0.5),
    rgba(0, 188, 212, 0.4),
    transparent 40%
  );
  opacity: 0.22;
  filter: blur(18px);
  z-index: -1;
}

/* Resize the floating stats to match bigger card */
.pharmacy-stat-badge {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.82rem;
  box-shadow: 0 12px 28px rgba(7, 53, 84, 0.25);
}

.pharmacy-stat-1 {
  left: 22px;
  top: 22px;
}
.pharmacy-stat-2 {
  right: 22px;
  bottom: 22px;
}

.stat-value {
  font-size: 0.95rem;
}

/* RESPONSIVE: Keep looking premium on mobile */
@media (max-width: 900px) {
  .pharmacy-card-hero {
    max-width: 100%;
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .pharmacy-card-hero {
    transform: scale(1) !important;
    box-shadow: 0 18px 45px rgba(11, 94, 119, 0.2);
  }

  .pharmacy-card-hero:hover {
    transform: scale(1.02);
  }
}





/* ---------------------------------------------------------- */
/* PREMIUM ANIMATIONS FOR PHARMACY PARTNER VISUALS            */
/* ---------------------------------------------------------- */

/* Glow Pulse Behind the Card */
.pharmacy-card-hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 210, 0.25), transparent 70%);
  filter: blur(30px);
  z-index: -2;
  animation: heroGlow 4.5s ease-in-out infinite;
}

@keyframes heroGlow {
  0% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.15); }
  100% { opacity: 0.55; transform: scale(1); }
}

/* Animated Aura Ring */
.pharmacy-card-hero::before {
  animation: auraRotate 12s linear infinite;
}

@keyframes auraRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Parallax Hover for Depth */
.pharmacy-card-hero:hover .pharmacy-hero-img {
    transform: scale(1.15);

  transition: transform 0.45s ease;
}

/* Sparkle Particles */
.pharmacy-card-hero .sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #00ffd0, transparent);
  border-radius: 50%;
  opacity: 0.75;
  animation: sparkleFloat 6s ease-in-out infinite;
  pointer-events: none;
}

.pharmacy-card-hero .sparkle:nth-child(1) {
  top: 14%;
  left: 18%;
  animation-delay: 0s;
}

.pharmacy-card-hero .sparkle:nth-child(2) {
  top: 8%;
  right: 14%;
  width: 10px;
  height: 10px;
  animation-delay: 1.4s;
}

.pharmacy-card-hero .sparkle:nth-child(3) {
  bottom: 12%;
  left: 12%;
  animation-delay: 2.7s;
}

.pharmacy-card-hero .sparkle:nth-child(4) {
  bottom: 8%;
  right: 10%;
  width: 12px;
  height: 12px;
  animation-delay: 3.9s;
}

@keyframes sparkleFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0.6; }
  50%  { transform: translateY(-14px) scale(1.4); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.6; }
}

/* Parallax effect on hover (entire card) */
.pharmacy-card-hero:hover {
  transform: translateY(-8px) scale(1.04) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 55px 110px rgba(11, 94, 119, 0.45);
}

/* Enhance Stats Animations */
.pharmacy-stat-badge {
  animation: statPop 0.6s ease forwards;
}

.pharmacy-stat-1 { animation-delay: 0.2s; }
.pharmacy-stat-2 { animation-delay: 0.4s; }

@keyframes statPop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ===========================
   PHARMACY PARTNER SECTION
   =========================== */

.pharmacy-partner {
  padding: 80px 16px 90px;
  background: radial-gradient(circle at top left, #eff8ff, #f7fcff);
}

.pharmacy-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 38px;
  border-radius: 26px;
  background: radial-gradient(circle at top left, #f6fbff, #ffffff);
  box-shadow:
    0 28px 70px rgba(3, 41, 71, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}

/* LEFT SIDE COPY */

.pharmacy-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pharmacy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 204, 153, 0.06);
  color: #00a37a;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pharmacy-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00c977, #00bcd4);
}

.pharmacy-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #03263c;
  margin-top: 4px;
}

.pharmacy-text {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #586679;
}

.pharmacy-quote {
  font-weight: 600;
  color: #022d4a;
}

/* Chips */

.pharmacy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pharmacy-chip {
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 188, 212, 0.08);
  color: #036e87;
  font-weight: 500;
}

/* CTA */

.pharmacy-cta-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.pharmacy-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #02c152, #00a83e);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(2, 193, 82, 0.4);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.pharmacy-cta-icon {
  font-size: 1.1rem;
}

.pharmacy-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 40px rgba(2, 193, 82, 0.55);
  background: linear-gradient(135deg, #00d45d, #00b447);
}

.pharmacy-cta-note {
  font-size: 0.86rem;
  color: #6a7a8c;
}

/* RIGHT SIDE VISUAL */

.pharmacy-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pharmacy-card-hero {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: 28px;
  padding: 24px;
  background: radial-gradient(circle at top left, #e7fbff, #ffffff);
  box-shadow: 0 30px 75px rgba(11, 94, 119, 0.28);
  overflow: hidden;
  animation: pharmacyFloat 9s ease-in-out infinite;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Hover: parallax + scale */
.pharmacy-card-hero:hover {
  transform: translateY(-8px) scale(1.04) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 55px 110px rgba(11, 94, 119, 0.45);
}

/* Main image */
.pharmacy-hero-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  transform: scale(1.06);
  transition: transform 0.45s ease;
}

.pharmacy-card-hero:hover .pharmacy-hero-img {
  transform: scale(1.1) translateY(-6px);
}

/* Aura background (rotating) */
.pharmacy-card-hero::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 204, 153, 0.5),
    rgba(0, 188, 212, 0.4),
    transparent 40%
  );
  opacity: 0.22;
  filter: blur(18px);
  z-index: -1;
  animation: auraRotate 12s linear infinite;
}

/* Glow pulse behind card */
.pharmacy-card-hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 210, 0.25), transparent 70%);
  filter: blur(30px);
  z-index: -2;
  animation: heroGlow 4.5s ease-in-out infinite;
}

/* Floating stats */

.pharmacy-stat-badge {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(7, 53, 84, 0.3);
  font-size: 0.82rem;
  animation: statPop 0.6s ease forwards;
}

.pharmacy-stat-1 {
  left: 22px;
  top: 22px;
  animation-delay: 0.2s;
}

.pharmacy-stat-2 {
  right: 22px;
  bottom: 22px;
  animation-delay: 0.4s;
}

.stat-label {
  color: #6a7b8c;
  font-weight: 500;
}

.stat-value {
  font-weight: 700;
  color: #03825f;
  font-size: 0.95rem;
}

/* Sparkles */

.sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #00ffd0, transparent);
  border-radius: 50%;
  opacity: 0.75;
  animation: sparkleFloat 6s ease-in-out infinite;
  pointer-events: none;
}

.sparkle:nth-child(1) {
  top: 14%;
  left: 18%;
  animation-delay: 0s;
}

.sparkle:nth-child(2) {
  top: 8%;
  right: 14%;
  width: 10px;
  height: 10px;
  animation-delay: 1.4s;
}

.sparkle:nth-child(3) {
  bottom: 12%;
  left: 12%;
  animation-delay: 2.7s;
}

.sparkle:nth-child(4) {
  bottom: 8%;
  right: 10%;
  width: 12px;
  height: 12px;
  animation-delay: 3.9s;
}

/* WhatsApp chat overlay */

.pharmacy-chat {
  position: absolute;
  left: 20px;
  bottom: 22px;
  z-index: 3;
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pharmacy-chat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  color: #067a46;
  font-size: 0.72rem;
  font-weight: 600;
}

.whatsapp-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #25d366;
}

.pharmacy-chat-bubble {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(7, 53, 84, 0.26);
  font-size: 0.78rem;
  animation:
    chatFloat 4.5s ease-in-out infinite,
    chatAppear 0.6s ease-out 0.3s forwards;
  opacity: 0;
}

.pharmacy-chat-icon {
  font-size: 1rem;
  margin-top: 2px;
}

.pharmacy-chat-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-main {
  font-weight: 600;
  color: #062b3f;
}

.chat-sub {
  font-size: 0.72rem;
  color: #6a7a8c;
}

/* Typing dots */

.chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  margin-top: 2px;
}

.chat-typing span {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #b6c4d4;
  animation: typingDot 1.4s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }

/* ANIMATIONS */

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

@keyframes heroGlow {
  0%   { opacity: 0.55; transform: scale(1); }
  50%  { opacity: 0.9; transform: scale(1.15); }
  100% { opacity: 0.55; transform: scale(1); }
}

@keyframes auraRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sparkleFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0.6; }
  50%  { transform: translateY(-14px) scale(1.4); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.6; }
}

@keyframes chatAppear {
  0%   { opacity: 0; transform: translateY(16px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes typingDot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

@keyframes statPop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .pharmacy-shell {
    grid-template-columns: 1fr;
    padding: 26px 20px 30px;
  }

  .pharmacy-visual {
    justify-content: flex-start;
  }

  .pharmacy-card-hero {
    max-width: 100%;
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .pharmacy-title {
    font-size: 1.9rem;
  }

  .pharmacy-cta-row {
    align-items: flex-start;
  }

  .pharmacy-chat {
    max-width: 86%;
    left: 16px;
    bottom: 18px;
  }

  .pharmacy-card-hero {
    transform: scale(1) !important;
    box-shadow: 0 18px 45px rgba(11, 94, 119, 0.2);
  }

  .pharmacy-card-hero:hover {
    transform: scale(1.02);
  }
}

.pharmacy-partner {
  padding: 60px 0;
}

/*.pharmacy-partner::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: -120px;*/
/*  right: -120px;*/
/*  width: 520px;*/
/*  height: 520px;*/
/*  background: radial-gradient(circle, rgba(0, 255, 204, 0.2), transparent 60%);*/
/*  filter: blur(60px);*/
/*  z-index: 0;*/
/*}*/

.pharmacy-partner::after {
  content: "";
  position: absolute;
  /*bottom: -160px;*/
  left: -160px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 180, 255, 0.18), transparent 70%);
  filter: blur(70px);
}

/* MAIN SECTION WRAPPER */
.trust-section {
  padding: 70px 16px;
}

.trust-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 34px;
  border-radius: 26px;
  background: radial-gradient(circle at top left, #f5fbff, #ffffff);
  box-shadow:
    0 22px 60px rgba(3, 41, 71, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

/* LEFT SIDE */
.trust-left {
  padding-right: 10px;
}

.trust-title {
  font-size: 2rem;
  font-weight: 800;
  color: #02253a;
  margin-bottom: 18px;
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.98rem;
  color: #46576a;
  line-height: 1.7;
}

.trust-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  background: rgba(0, 204, 153, 0.12);
  color: #00a86b;
  margin-top: 3px;
}

/* RIGHT CTA CARD */
.trust-cta {
  position: relative;
  border-radius: 22px;
  padding: 22px 26px 24px;
  background: linear-gradient(135deg, #047efc, #00b3ff);
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(2, 82, 160, 0.45);
}

/* subtle gradient border halo */
.trust-cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.7), transparent 50%);
  opacity: 0.25;
  pointer-events: none;
}

/* soft glow */
.trust-cta::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%);
  filter: blur(4px);
}

/* content */
.trust-cta-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
  opacity: 0.85;
}

.trust-cta-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.trust-cta-text {
  font-size: 0.92rem;
  line-height: 1.7;
  opacity: 0.96;
  max-width: 360px;
}

/* badges */
.trust-cta-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 16px;
}

.trust-cta-badge {
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* button */
.trust-cta-btn {
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(1, 42, 102, 0.45);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.trust-cta-btn:hover {
  background: #ffffff;
  color: #0262cf;
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(1, 42, 102, 0.55);
}

/* Responsive */
@media (max-width: 900px) {
  .trust-shell {
    grid-template-columns: 1fr;
    padding: 26px 20px;
  }

  .trust-cta {
    margin-top: 8px;
  }
}

@media (max-width: 600px) {
  .trust-title {
    font-size: 1.6rem;
  }
}
/* ========= BENEFITS HERO SECTION ========= */

.benefits-hero {
  padding: 90px 16px;
  background: radial-gradient(circle at top left, #f7f9ff, #ffffff);
}

.benefits-shell {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

/* LEFT – DEVICE / IMAGE */

.benefits-media {
  position: relative;
}

.benefits-device {
  position: relative;
  max-width: 640px;
  transform-origin: center;
  animation: deviceFloat 10s ease-in-out infinite;
  filter: drop-shadow(0 30px 80px rgba(13, 40, 80, 0.35));
}

.benefits-device::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 40px;
  background: radial-gradient(circle at top left,
              rgba(129, 230, 217, 0.4),
              transparent 60%);
  opacity: 0.5;
  z-index: -1;
}

.benefits-device-img {
  width: 100%;
  display: block;
  border-radius: 32px;
}

/* RIGHT – CONTENT */

.benefits-content {
  position: relative;
  z-index: 1;
  animation: fadeUp 0.8s ease-out forwards;
  opacity: 0;
}

/* Small pill */

.benefits-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.06);
  color: #6b21ff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle, #a855f7, #22d3ee);
}

/* Heading + sub */

.benefits-title {
  font-size: 2.6rem;
  line-height: 1.15;
  font-weight: 800;
  color: #05081a;
  margin-bottom: 14px;
}

.benefits-subtitle {
  font-size: 0.98rem;
  line-height: 1.8;
  color: #64748b;
  max-width: 460px;
  margin-bottom: 26px;
}

/* Feature grid */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

/* Individual card */

.benefit-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
  cursor: default;
  opacity: 0;
  animation: cardFadeUp 0.7s ease-out forwards;
}

/* Staggered animation */
.benefit-card:nth-child(1) { animation-delay: 0.15s; }
.benefit-card:nth-child(2) { animation-delay: 0.25s; }
.benefit-card:nth-child(3) { animation-delay: 0.35s; }
.benefit-card:nth-child(4) { animation-delay: 0.45s; }

.benefit-card:hover {
  transform: translateY(-6px);
  background: radial-gradient(circle at top left, #f5f3ff, #ffffff);
  box-shadow:
    0 20px 45px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(124, 58, 237, 0.18);
  border-color: rgba(124, 58, 237, 0.4);
}

/* Icon */

.benefit-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: radial-gradient(circle at top left, #eef2ff, #e0f2fe);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #4c1d95;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.benefit-card:hover .benefit-icon {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 35px rgba(79, 70, 229, 0.35);
}

/* Text */

.benefit-text h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.benefit-text p {
  font-size: 0.86rem;
  line-height: 1.7;
  color: #6b7280;
}

/* ========= ANIMATIONS ========= */

@keyframes deviceFloat {
  0%   { transform: translateY(0) rotateX(0deg) rotateZ(-4deg); }
  50%  { transform: translateY(-12px) rotateX(3deg) rotateZ(-2deg); }
  100% { transform: translateY(0) rotateX(0deg) rotateZ(-4deg); }
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes cardFadeUp {
  0%   { opacity: 0; transform: translateY(22px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

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

@media (max-width: 1024px) {
  .benefits-shell {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .benefits-media {
    order: 2;
    display: flex;
    justify-content: center;
  }

  .benefits-content {
    order: 1;
  }

  .benefits-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 640px) {
  .benefits-hero {
    padding: 60px 16px;
  }

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

  .benefits-title {
    font-size: 1.9rem;
  }
}


/* Tighter hero on small screens */
@media (max-width: 640px) {
  .mh-hero {
    padding: 52px 16px 34px;   /* was ~70 / 60 – reduce top & bottom */
  }

  .mh-hero-slide {
    gap: 20px;                 /* smaller gap between text + image */
  }

  .mh-hero-title {
    font-size: 1.7rem;         /* a bit smaller */
    line-height: 1.2;
    margin-bottom: 10px;
  }

  .mh-hero-text {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 100%;
  }

  .mh-hero-buttons {
    gap: 8px;
    margin-bottom: 14px;
  }

  .mh-hero-meta {
    margin-top: 4px;
    gap: 10px;
    font-size: 0.8rem;
  }

  .mh-hero-meta-item strong {
    font-size: 0.85rem;
  }

  .mh-hero-device {
    max-width: 270px;          /* slightly smaller phone */
    padding: 12px 10px 10px;
  }
}

@media (max-width: 480px) {
  .mh-hero-meta {
    display: none;
  }
}