/* ============================================================
homepage-revamp.css — MedEasy.ai Homepage Redesign
Design language: matches fordoctor.css v3
Class prefix: hr- (homepage revamp)
Tokens: --b #2464ee | --hd #0f172a | --bd #475569
Container: hr-wrap (max-width 1354px)
============================================================ */
/* ── CSS TOKENS (mirrored from fordoctor.css for homepage use) */
:root {
--b: #2464ee;
--b-dk: #1a52c4;
--b-t1: #e8f0fe;
--b-t2: #d2e3fc;
--b-bg: #f7f9ff;
--hd: #0f172a;
--bd: #475569;
--br: #dde7ff;
--ai-bg: #0d1117;
--sh-sm: 0 1px 4px rgba(15,23,42,.06), 0 2px 8px rgba(36,100,238,.07);
--sh-md: 0 4px 16px rgba(15,23,42,.08), 0 8px 28px rgba(36,100,238,.10);
--sh-lg: 0 8px 32px rgba(15,23,42,.10), 0 16px 48px rgba(36,100,238,.12);
--sh-b: 0 6px 24px rgba(36,100,238,.28);
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 24px;
--ease: cubic-bezier(.4,0,.2,1);
}
/* ── GLOBAL OVERFLOW GUARD ─────────────────────────────────── */
body { overflow-x: hidden; }
/* ── SHARED UTILITIES ──────────────────────────────────────── */
.hr-wrap {
max-width: 1354px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
box-sizing: border-box;
}
.hr-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 16px;
background: var(--b-t1);
color: var(--b);
border: 1px solid var(--br);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.hr-sh { text-align: center; margin-bottom: 48px; }
.hr-sh--left { text-align: left; }
.hr-st {
font-size: 40px;
font-weight: 700;
color: var(--hd);
letter-spacing: -.025em;
line-height: 1.12;
margin: 0 0 12px;
}
.hr-st span { color: var(--b); }
.hr-ss {
font-size: 16px;
color: var(--bd);
line-height: 1.7;
max-width: 560px;
margin: 0 auto;
}
.hr-sh--left .hr-ss { margin: 0; }
.hr-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--b);
color: #fff;
border-radius: var(--r-md);
font-size: 15px;
font-weight: 600;
text-decoration: none;
box-shadow: var(--sh-b);
transition: background .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.hr-btn-primary:hover {
background: var(--b-dk);
transform: translateY(-1px);
box-shadow: 0 10px 40px rgba(36,100,238,.30);
color: #fff;
text-decoration: none;
}
.hr-btn-outline {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 26px;
background: transparent;
color: var(--b);
border: 1.5px solid var(--b);
border-radius: var(--r-md);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background .2s var(--ease), color .2s var(--ease);
}
.hr-btn-outline:hover {
background: var(--b-t1);
color: var(--b);
text-decoration: none;
}
/* ── SECTION 1: HERO ──────────────────────────────────────── */
.hr-hero {
background: #e8efff;
padding-top: 120px !important;
padding-bottom: 0 !important;
height: 100vh !important;
overflow: hidden;
position: relative;
}
.hr-hero::before {
content: '';
position: absolute;
top: -160px; right: -160px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(36,100,238,.06) 0%, transparent 68%);
pointer-events: none;
}
.hr-hero::after {
content: '';
position: absolute;
bottom: -80px; left: -80px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(124,58,237,.04) 0%, transparent 68%);
pointer-events: none;
}
.hr-hero-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
height: calc(100vh - 87px);
}
.hr-hero-left {
padding-bottom: 0;
padding-top: 0;
}
/* Trust badge with avatars */
.hr-hero-trust {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px 8px 8px;
background: #fff;
border: 1.5px solid var(--br);
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--bd);
margin-bottom: 28px;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.hr-hero-avs {
display: flex;
align-items: center;
}
.hr-hero-av {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2.5px solid #fff;
object-fit: cover;
margin-left: -9px;
flex-shrink: 0;
display: block;
box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.hr-hero-avs .hr-hero-av:first-child { margin-left: 0; }
.hr-hero-trust-check {
width: 26px;
height: 26px;
border-radius: 50%;
background: #2563eb;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
/* Headline */
.hr-hero-title {
font-size: 48px;
font-weight: 900;
color: var(--hd);
line-height: 1.06;
letter-spacing: -.04em;
margin: 0 0 14px;
}
.hr-hero-title-accent { color: var(--b); }
.hr-hero-tagline {
font-size: 20px;
font-weight: 700;
color: var(--b);
letter-spacing: -.01em;
line-height: 1.3;
margin: 0 0 14px;
}
.hr-hero-sub {
font-size: 15px;
color: var(--bd);
line-height: 1.75;
max-width: 460px;
margin: 0 0 28px;
}
/* Service quick-access bar */
.hr-hero-svcbar {
display: inline-flex;
align-items: center;
background: #fff;
border: 1.5px solid #e8edf5;
border-radius: 999px;
padding: 5px 14px;
box-shadow: 0 3px 12px rgba(0,0,0,.06);
margin-bottom: 16px;
}
.hr-hero-svcbar-item {
display: flex;
align-items: center;
gap: 7px;
text-decoration: none;
padding: 0 12px;
transition: opacity .18s;
}
.hr-hero-svcbar-item:first-child { padding-left: 0; }
.hr-hero-svcbar-item:last-child { padding-right: 0; }
.hr-hero-svcbar-item:hover { opacity: .72; text-decoration: none; }
.hr-hero-svcbar-ico {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.hr-hero-svcbar-lbl {
font-size: 12.5px;
font-weight: 600;
color: #0f172a;
white-space: nowrap;
}
.hr-hero-svcbar-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: #cbd5e1;
flex-shrink: 0;
}
/* Compliance badge row */
.hr-hero-badge-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 4px;
}
.hr-hero-badge-img {
height: 60px;
width: auto;
object-fit: contain;
display: block;
filter: grayscale(.15);
transition: filter .2s, transform .2s;
}
.hr-hero-badge-img:hover { filter: grayscale(0); transform: translateY(-2px); }
.hr-btn-arr { font-size: 11px; margin-left: 2px; }
/* Search bar */
.hr-hero-search {
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid var(--br);
border-radius: var(--r-md);
box-shadow: var(--sh-md);
padding: 7px 7px 7px 18px;
max-width: 560px;
margin-bottom: 14px;
gap: 8px;
}
.hr-hero-search-icon { color: var(--bd); font-size: 15px; flex-shrink: 0; }
.hr-hero-search input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
color: var(--hd);
background: transparent;
padding: 6px 0;
}
.hr-hero-search input::placeholder { color: #94a3b8; }
.hr-hero-search-btn {
padding: 10px 22px;
background: var(--b);
color: #fff;
border: none;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .2s;
white-space: nowrap;
}
.hr-hero-search-btn:hover { background: var(--b-dk); }
/* Quick filter pills */
.hr-hero-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 560px;
margin-bottom: 28px;
}
.hr-hero-filter {
padding: 6px 14px;
background: #fff;
border: 1.5px solid var(--br);
border-radius: 999px;
font-size: 12px;
font-weight: 500;
color: var(--bd);
text-decoration: none;
transition: border-color .18s, color .18s, background .18s;
cursor: pointer;
}
.hr-hero-filter:hover {
border-color: var(--b);
color: var(--b);
background: var(--b-t1);
text-decoration: none;
}
/* 2×2 horizontal service cards */
.hr-hero-svcs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
max-width: 560px;
margin-bottom: 28px;
}
.hr-hero-svc-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1.5px solid var(--br);
border-radius: var(--r-md);
text-decoration: none;
transition: border-color .2s, box-shadow .2s, transform .15s var(--ease);
}
.hr-hero-svc-card:hover {
border-color: var(--b);
box-shadow: 0 4px 16px rgba(36,100,238,.10);
transform: translateY(-2px);
text-decoration: none;
}
.hr-hero-svc-ico {
width: 44px; height: 44px;
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.hr-hero-svc-ico--blue { background: #e8f0fe; color: var(--b); }
.hr-hero-svc-ico--green { background: #dcfce7; color: #16a34a; }
.hr-hero-svc-ico--purple { background: #ede9fe; color: #7c3aed; }
.hr-hero-svc-ico--dark { background: #1e293b; color: #60a5fa; }
.hr-hero-svc-info { flex: 1; min-width: 0; }
.hr-hero-svc-title {
font-size: 13px;
font-weight: 700;
color: var(--hd);
line-height: 1.3;
margin-bottom: 2px;
}
.hr-hero-svc-desc {
font-size: 11px;
color: var(--bd);
line-height: 1.45;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hr-hero-svc-arr {
font-size: 12px;
color: var(--bd);
flex-shrink: 0;
transition: transform .2s var(--ease), color .2s;
}
.hr-hero-svc-card:hover .hr-hero-svc-arr {
transform: translateX(3px);
color: var(--b);
}
/* CTA row */
.hr-hero-cta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.hr-hero-cta-ai {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 13px 22px;
background: transparent;
color: var(--b);
border: 1.5px solid var(--b);
border-radius: var(--r-md);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: background .2s, color .2s;
}
.hr-hero-cta-ai:hover {
background: var(--b-t1);
color: var(--b);
text-decoration: none;
}
.hr-hero-cta-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: 600;
color: var(--bd);
text-decoration: none;
transition: color .18s;
}
.hr-hero-cta-link:hover { color: var(--b); text-decoration: none; }
/* Stats with colored icons */
.hr-hero-stats {
display: flex;
align-items: center;
gap: 0;
flex-wrap: wrap;
row-gap: 12px;
margin-bottom: 20px;
}
.hr-hero-stat {
display: flex;
align-items: center;
gap: 8px;
padding-right: 14px;
}
.hr-hero-stat-ico {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.hr-hero-stat-text { display: flex; flex-direction: column; gap: 1px; }
.hr-hero-stat-text strong {
display: block;
font-size: 16px;
font-weight: 800;
color: var(--hd);
line-height: 1.1;
letter-spacing: -.03em;
}
.hr-hero-stat-text span {
display: block;
font-size: 10px;
color: var(--bd);
font-weight: 500;
line-height: 1.3;
max-width: 80px;
}
.hr-hero-stat-div {
width: 1px;
height: 28px;
background: var(--br);
margin: 0 14px 0 0;
flex-shrink: 0;
align-self: center;
}
/* Service chips */
.hr-hero-chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding-top: 18px;
border-top: 1px solid var(--br);
}
.hr-hero-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: var(--bd);
}
.hr-hero-chip i { color: var(--b); font-size: 12px; }
.hr-hero-chip-dot { color: #cbd5e1; font-size: 14px; line-height: 1; }
/* Partner logos */
.hr-hero-partners {
max-width: 560px;
}
.hr-hero-partners-label {
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--bd);
margin-bottom: 12px;
}
.hr-hero-partners-logos {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.hr-hero-partner {
font-size: 13px;
font-weight: 700;
color: #94a3b8;
letter-spacing: -.01em;
white-space: nowrap;
filter: grayscale(1) opacity(.55);
transition: filter .2s;
}
.hr-hero-partner:hover { filter: grayscale(0) opacity(1); }
.hr-hero-partner img {
height: 22px;
width: auto;
object-fit: contain;
}
/* Right image column */
.hr-hero-right {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
overflow: visible;
}
.hr-hero-img {
width: 130%;
height: auto;
max-height: calc(100vh - 87px);
object-fit: contain;
display: block;
margin-right: -80px;
/* filter: drop-shadow(0 32px 72px rgba(36,100,238,.18)); */
}
/* ── STATS SLIDER (below hero) ─────────────────────────────── */
.sts-section {
padding: 0 0 36px !important;
background: #e8efff;
}
.sts-outer {
display: flex;
align-items: center;
gap: 14px;
}
.sts-card {
flex: 1;
background: #fff;
border-radius: 24px;
box-shadow: 0 8px 40px rgba(37,99,235,.11);
overflow: hidden;
min-width: 0;
border: 1px solid rgba(37,99,235,.07);
}
.sts-viewport {
overflow: hidden;
width: 100%;
}
.sts-track {
display: flex;
transition: transform .42s cubic-bezier(.4,0,.2,1);
will-change: transform;
}
.sts-item {
flex-shrink: 0;
display: flex;
align-items: flex-start;
gap: 14px;
padding: 26px 22px;
border-right: 1px solid #eef2f8;
box-sizing: border-box;
transition: background .2s;
}
.sts-item:last-child { border-right: none; }
.sts-item:hover { background: #f8faff; }
.sts-ico {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.sts-val {
font-size: 22px;
font-weight: 800;
line-height: 1;
letter-spacing: -.03em;
}
.sts-name {
font-size: 13.5px;
font-weight: 700;
color: #0f172a;
margin-top: 4px;
line-height: 1.2;
}
.sts-desc {
font-size: 11.5px;
color: #94a3b8;
margin-top: 4px;
line-height: 1.5;
}
/* Arrow buttons */
.sts-arrow {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1.5px solid #e2e8f0;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background .2s, border-color .2s, color .2s;
color: #64748b;
font-size: 13px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sts-arrow:hover:not(:disabled) { background: #2563eb; border-color: #2563eb; color: #fff; }
.sts-arrow:disabled { opacity: .38; cursor: default; pointer-events: none; }
/* Dot indicators */
.sts-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 14px;
}
.sts-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
border: none;
cursor: pointer;
padding: 0;
transition: width .25s, background .25s, border-radius .25s;
}
.sts-dot--active {
width: 24px;
border-radius: 4px;
background: #2563eb;
}
/* Responsive */
@media (max-width: 768px) {
.sts-arrow { width: 34px; height: 34px; font-size: 12px; }
.sts-item { padding: 18px 16px; gap: 10px; }
.sts-ico { width: 38px; height: 38px; font-size: 14px; }
.sts-val { font-size: 17px; }
}
@media (max-width: 480px) {
.sts-outer { gap: 8px; }
.sts-arrow { width: 30px; height: 30px; }
}
/* ── SECTION 2: QUICK ACCESS SERVICES ────────────────────── */
.hr-qa-section {
padding: 80px 0 !important;
background: #f4f7ff;
}
.hr-qa-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}
/* Card base */
.hr-qa-card {
background: #fff !important;
border-radius: 20px !important;
overflow: hidden !important;
text-decoration: none !important;
display: flex !important;
flex-direction: column !important;
transition: transform .25s ease, box-shadow .25s ease !important;
box-shadow: 0 2px 16px rgba(0,0,0,.07) !important;
border: 1px solid #f1f5f9 !important;
position: relative !important;
padding: 0 !important;
}
.hr-qa-card--blue { background: #eef4ff !important; border-color: #dbeafe !important; }
.hr-qa-card--green { background: #edfaf4 !important; border-color: #bbf7d0 !important; }
.hr-qa-card--purple { background: #f3f0ff !important; border-color: #e9d5ff !important; }
.hr-qa-card--dark { background: #0d1117 !important; border-color: #0d1117 !important; }
.hr-qa-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 16px 48px rgba(0,0,0,.12) !important;
text-decoration: none !important;
}
/* Photo image area */
.hr-qa-img-wrap {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
flex-shrink: 0 !important;
height: 220px !important;
}
.hr-qa-photo {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
transition: transform .35s ease !important;
}
.hr-qa-card:hover .hr-qa-photo { transform: scale(1.04) !important; }
/* Icon badge top-left over image */
.hr-qa-icon-badge {
position: absolute !important;
top: 14px !important;
left: 14px !important;
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 18px !important;
z-index: 2 !important;
color: #fff !important;
}
.hr-qa-card--blue .hr-qa-icon-badge { background: #2464ee !important; }
.hr-qa-card--green .hr-qa-icon-badge { background: #059669 !important; }
.hr-qa-card--purple .hr-qa-icon-badge { background: #7c3aed !important; }
.hr-qa-card--dark .hr-qa-icon-badge { background: #2563eb !important; }
/* Body */
.hr-qa-body {
padding: 20px 22px 24px !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
}
/* Label */
.hr-qa-card-label {
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
margin-bottom: 6px !important;
}
.hr-qa-card--blue .hr-qa-card-label { color: #2464ee !important; }
.hr-qa-card--green .hr-qa-card-label { color: #059669 !important; }
.hr-qa-card--purple .hr-qa-card-label { color: #7c3aed !important; }
.hr-qa-card--dark .hr-qa-card-label { color: #60a5fa !important; }
/* Title */
.hr-qa-card-title {
font-size: 20px !important;
font-weight: 800 !important;
color: #0f172a !important;
line-height: 1.25 !important;
margin-bottom: 10px !important;
letter-spacing: -.02em !important;
}
.hr-qa-card--dark .hr-qa-card-title { color: #f1f5f9 !important; }
/* Description */
.hr-qa-card-desc {
font-size: 13px !important;
color: #64748b !important;
line-height: 1.7 !important;
margin-bottom: 20px !important;
flex: 1 !important;
}
.hr-qa-card--dark .hr-qa-card-desc { color: #94a3b8 !important; }
/* Outlined pill CTA */
.hr-qa-card-cta {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 9px 20px !important;
border-radius: 999px !important;
font-size: 13.5px !important;
font-weight: 600 !important;
align-self: flex-start !important;
transition: all .22s ease !important;
text-decoration: none !important;
border: 1.5px solid !important;
}
.hr-qa-card--blue .hr-qa-card-cta { color: #2464ee !important; border-color: #2464ee !important; background: transparent !important; }
.hr-qa-card--green .hr-qa-card-cta { color: #059669 !important; border-color: #059669 !important; background: transparent !important; }
.hr-qa-card--purple .hr-qa-card-cta { color: #7c3aed !important; border-color: #7c3aed !important; background: transparent !important; }
.hr-qa-card--dark .hr-qa-card-cta { color: #fff !important; border-color: #2563eb !important; background: #2563eb !important; }
.hr-qa-card--blue:hover .hr-qa-card-cta { background: #2464ee !important; color: #fff !important; gap: 12px !important; }
.hr-qa-card--green:hover .hr-qa-card-cta { background: #059669 !important; color: #fff !important; gap: 12px !important; }
.hr-qa-card--purple:hover .hr-qa-card-cta { background: #7c3aed !important; color: #fff !important; gap: 12px !important; }
.hr-qa-card--dark:hover .hr-qa-card-cta { background: #1a52c4 !important; gap: 12px !important; }
/* ── New card colour variants ── */
.hr-qa-card--pharmacy { background: #fff7ed !important; border-color: #fed7aa !important; }
.hr-qa-card--postpartum { background: #fff1f2 !important; border-color: #fecdd3 !important; }
.hr-qa-card--financing { background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
.hr-qa-card--bnpl { background: #eef2ff !important; border-color: #c7d2fe !important; }
.hr-qa-card--smartrx { background: #f0fdfa !important; border-color: #99f6e4 !important; }
.hr-qa-card--pharmacy .hr-qa-icon-badge { background: #f97316 !important; }
.hr-qa-card--postpartum .hr-qa-icon-badge { background: #f43f5e !important; }
.hr-qa-card--financing .hr-qa-icon-badge { background: #16a34a !important; }
.hr-qa-card--bnpl .hr-qa-icon-badge { background: #6366f1 !important; }
.hr-qa-card--smartrx .hr-qa-icon-badge { background: #0d9488 !important; }
.hr-qa-card--pharmacy .hr-qa-card-label { color: #f97316 !important; }
.hr-qa-card--postpartum .hr-qa-card-label { color: #f43f5e !important; }
.hr-qa-card--financing .hr-qa-card-label { color: #16a34a !important; }
.hr-qa-card--bnpl .hr-qa-card-label { color: #6366f1 !important; }
.hr-qa-card--smartrx .hr-qa-card-label { color: #0d9488 !important; }
.hr-qa-card--pharmacy .hr-qa-card-cta { color: #f97316 !important; border-color: #f97316 !important; background: transparent !important; }
.hr-qa-card--postpartum .hr-qa-card-cta { color: #f43f5e !important; border-color: #f43f5e !important; background: transparent !important; }
.hr-qa-card--financing .hr-qa-card-cta { color: #16a34a !important; border-color: #16a34a !important; background: transparent !important; }
.hr-qa-card--bnpl .hr-qa-card-cta { color: #6366f1 !important; border-color: #6366f1 !important; background: transparent !important; }
.hr-qa-card--smartrx .hr-qa-card-cta { color: #0d9488 !important; border-color: #0d9488 !important; background: transparent !important; }
.hr-qa-card--pharmacy:hover .hr-qa-card-cta { background: #f97316 !important; color: #fff !important; gap: 12px !important; }
.hr-qa-card--postpartum:hover .hr-qa-card-cta { background: #f43f5e !important; color: #fff !important; gap: 12px !important; }
.hr-qa-card--financing:hover .hr-qa-card-cta { background: #16a34a !important; color: #fff !important; gap: 12px !important; }
.hr-qa-card--bnpl:hover .hr-qa-card-cta { background: #6366f1 !important; color: #fff !important; gap: 12px !important; }
.hr-qa-card--smartrx:hover .hr-qa-card-cta { background: #0d9488 !important; color: #fff !important; gap: 12px !important; }
/* ── 3-slot slider + fixed AI card ── */
.hr-qa-grid {
align-items: start !important;
}
.hr-qa-carousel-outer {
grid-column: span 3;
overflow: hidden;
}
.hr-qa-carousel-track {
display: flex;
gap: 20px;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.hr-qa-carousel-track .hr-qa-card {
flex-shrink: 0 !important;
}
.hr-qa-card--fixed-ai {
grid-column: 4;
grid-row: 1;
}
/* Dot navigation */
.hr-qa-carousel-dots {
margin-top: 24px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.hr-qa-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #cbd5e1;
cursor: pointer;
transition: background 0.25s, width 0.25s, border-radius 0.25s;
flex-shrink: 0;
}
.hr-qa-dot--active {
width: 24px;
border-radius: 4px;
background: #2563eb;
}
/* Keep 4-col layout between 993px–1200px (override the generic 2-col rule) */
@media (max-width: 1200px) {
.hr-qa-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
/* Collapse to single column ≤992px */
@media (max-width: 992px) {
.hr-qa-grid { grid-template-columns: 1fr !important; }
.hr-qa-carousel-outer { grid-column: 1 / -1 !important; }
.hr-qa-card--fixed-ai { grid-column: 1 / -1 !important; grid-row: auto !important; }
}
/* ── Instant Consultation: spinning timer ring ── */
.hr-qa-instant-vis {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
}
.hr-qa-instant-ring {
width: 108px; height: 108px;
border-radius: 50%;
border: 8px solid rgba(5,150,105,.18);
border-top-color: #059669;
border-right-color: #34d399;
display: flex; align-items: center; justify-content: center;
animation: hr-qa-ring-spin 3.5s linear infinite;
box-shadow: 0 0 0 16px rgba(5,150,105,.06), 0 0 36px rgba(5,150,105,.2);
}
@keyframes hr-qa-ring-spin {
from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
.hr-qa-instant-inner {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
animation: hr-qa-ring-spin-rev 3.5s linear infinite;
}
@keyframes hr-qa-ring-spin-rev {
from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}
.hr-qa-instant-num {
font-size: 36px; font-weight: 800;
color: #059669; line-height: 1;
letter-spacing: -.04em;
}
.hr-qa-instant-lbl {
font-size: 9px; font-weight: 700;
color: #059669; letter-spacing: .14em;
text-transform: uppercase; margin-top: 1px;
}
/* ── Lab Tests: three vials CSS ── */
.hr-qa-lab-vis {
display: flex; align-items: flex-end; gap: 14px;
padding-bottom: 12px;
}
.hr-qa-vial {
border-radius: 5px 5px 20px 20px;
border: 2.5px solid rgba(124,58,237,.35);
box-shadow: 0 6px 20px rgba(124,58,237,.15);
display: flex; flex-direction: column;
justify-content: flex-end; overflow: hidden;
background: rgba(237,233,254,.45);
}
.hr-qa-vial--a { width: 30px; height: 88px; }
.hr-qa-vial--b { width: 34px; height: 108px; }
.hr-qa-vial--c { width: 28px; height: 72px; }
.hr-qa-vial-fill {
width: 100%;
border-radius: 0 0 18px 18px;
display: block;
}
.hr-qa-vial--a .hr-qa-vial-fill { height: 55px; background: linear-gradient(to bottom, rgba(167,139,250,.65), rgba(124,58,237,.9)); }
.hr-qa-vial--b .hr-qa-vial-fill { height: 72px; background: linear-gradient(to bottom, rgba(196,181,253,.55), rgba(109,40,217,.95)); }
.hr-qa-vial--c .hr-qa-vial-fill { height: 46px; background: linear-gradient(to bottom, rgba(167,139,250,.55), rgba(91,33,182,.8)); }
/* ── MedEasy AI: glow + image ── */
.hr-qa-ai-vis {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; position: relative;
}
.hr-qa-ai-glow {
position: absolute; inset: 15%;
border-radius: 50%;
background: radial-gradient(circle, rgba(96,165,250,.3) 0%, transparent 70%);
filter: blur(18px);
z-index: 0;
}
.hr-qa-ai-vis > img {
width: 78%; height: 78%;
object-fit: contain;
position: relative; z-index: 1;
filter: brightness(1.1) saturate(1.2) drop-shadow(0 0 16px rgba(96,165,250,.4));
}
/* ── SECTION 3: HEALTH CONCERNS (Interactive Anatomy) ───── */
.hr-hc-section {
padding: 80px 0 !important;
background: #fff;
}
.hr-hc-body {
display: grid;
grid-template-columns: 1fr 500px 1fr;
gap: 16px;
align-items: center;
margin-top: 48px;
position: relative;
}
/* Center anatomy */
.hr-hc-anatomy {
position: relative;
display: flex;
justify-content: center;
}
.hr-hc-anatomy-img {
width: 100%;
max-width: 500px;
height: auto;
display: block;
margin: 0 auto;
border-radius: 16px;
}
/* Hotspot dots */
.hr-hotspot {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 3;
width: 22px;
height: 22px;
}
.hr-hotspot-inner {
position: relative;
width: 12px;
height: 12px;
margin: 5px;
}
.hr-hotspot-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--hc, var(--b));
position: absolute;
z-index: 2;
transition: transform .2s var(--ease), box-shadow .2s;
}
.hr-hotspot-ring {
position: absolute;
top: 0; left: 0;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--hc, var(--b));
opacity: .55;
animation: hr-dot-pulse 2.4s ease-out infinite;
}
.hr-hotspot-ring2 {
position: absolute;
top: 0; left: 0;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--hc, var(--b));
opacity: .3;
animation: hr-dot-pulse 2.4s ease-out infinite .9s;
}
@keyframes hr-dot-pulse {
0% { transform: scale(1); opacity: .55; }
100% { transform: scale(3.8); opacity: 0; }
}
.hr-hotspot--active .hr-hotspot-dot,
.hr-hotspot:hover .hr-hotspot-dot {
transform: scale(1.6);
box-shadow: 0 0 0 5px rgba(36,100,238,.22);
}
/* Cards */
.hr-hc-col {
display: flex;
flex-direction: column;
gap: 8px;
}
.hr-hc-col--left { align-items: flex-end; }
.hr-hc-col--right { align-items: flex-start; }
.hr-hc-card {
background: #fff;
border: 1.5px solid var(--br);
border-radius: var(--r-lg);
padding: 12px 14px;
display: flex;
align-items: flex-start;
gap: 11px;
cursor: pointer;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), opacity .2s;
max-width: 260px;
width: 100%;
text-decoration: none;
}
.hr-hc-card:hover,
.hr-hc-card--active {
border-color: var(--b);
box-shadow: 0 4px 20px rgba(36,100,238,.12);
transform: translateY(-2px);
text-decoration: none;
}
.hr-hc-card-ico {
width: 38px; height: 38px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.hr-hc-card-content { flex: 1; min-width: 0; }
.hr-hc-card-content h4 {
font-size: 12px;
font-weight: 700;
color: var(--hd);
margin: 0 0 4px;
line-height: 1.3;
}
.hr-hc-card-list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-wrap: wrap;
column-gap: 8px;
}
.hr-hc-card-list li {
font-size: 10.5px;
color: var(--bd);
line-height: 1.6;
padding-left: 9px;
position: relative;
}
.hr-hc-card-list li::before {
content: '•';
position: absolute;
left: 0;
color: var(--b);
font-size: 9px;
top: 1px;
}
/* View all */
.hr-hc-viewall {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 32px auto 0;
padding: 11px 28px;
border: 1.5px solid var(--b);
border-radius: var(--r-md);
font-size: 14px;
font-weight: 600;
color: var(--b);
text-decoration: none;
transition: background .2s;
}
.hr-hc-viewall:hover {
background: var(--b-t1);
text-decoration: none;
color: var(--b);
}
/* ── SECTION 4: FIND THE RIGHT SPECIALIST ────────────────── */
/* ── SECTION 4: FIND THE RIGHT SPECIALIST ───────────────── */
.hr-spec-section {
padding: 80px 0 !important;
background: #f4f7ff;
}
.hr-spec-header {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
margin-bottom: 36px !important;
gap: 24px;
}
.hr-spec-hd-left { max-width: 560px; }
.hr-spec-hd-left .hr-st { margin-bottom: 10px !important; }
.hr-spec-hd-sub {
font-size: 14px; color: #64748b; line-height: 1.6; margin: 0;
}
.hr-spec-viewall {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--b) !important;
text-decoration: none !important;
border: 1.5px solid var(--b) !important;
border-radius: 999px !important;
padding: 10px 22px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
transition: background .2s, color .2s !important;
}
.hr-spec-viewall:hover { background: var(--b) !important; color: #fff !important; text-decoration: none !important; }
/* ── 4 Featured specialty cards ── */
.hr-spec-featured {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
margin-bottom: 16px !important;
}
.hr-spec-feat-card {
background: #fff !important;
border-radius: 20px !important;
overflow: hidden !important;
text-decoration: none !important;
display: flex !important;
flex-direction: column !important;
box-shadow: 0 2px 16px rgba(0,0,0,.06) !important;
transition: transform .22s ease, box-shadow .22s ease !important;
border: 1.5px solid transparent !important;
}
.hr-spec-feat-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 18px 48px rgba(0,0,0,.1) !important;
border-color: var(--br) !important;
text-decoration: none !important;
}
.hr-spec-feat-photo {
position: relative !important;
height: 200px !important;
overflow: visible !important;
background: #e8edf5 !important;
}
.hr-spec-feat-photo > img {
width: 100%; height: 100%;
object-fit: cover; object-position: top center; display: block;
border-radius: 20px 20px 0 0;
}
.hr-spec-feat-ico {
position: absolute !important;
bottom: -20px !important; left: 16px !important;
width: 44px !important; height: 44px !important;
border-radius: 50% !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-size: 18px !important;
border: 3px solid #fff !important;
z-index: 2 !important;
}
.hr-spec-feat-body {
padding: 30px 18px 18px !important;
display: flex !important; flex-direction: column !important; flex: 1 !important;
}
.hr-spec-feat-name {
font-size: 18px !important; font-weight: 700 !important;
color: #0f172a !important; letter-spacing: -.02em !important; margin: 0 0 4px !important;
}
.hr-spec-feat-desc {
font-size: 12.5px !important; color: #64748b !important;
line-height: 1.5 !important; margin: 0 0 12px !important;
}
.hr-spec-feat-badge {
display: inline-flex !important; align-items: center !important; gap: 5px !important;
font-size: 11.5px !important; font-weight: 600 !important;
border-radius: 999px !important; padding: 4px 12px !important;
margin-bottom: 16px !important; align-self: flex-start !important;
}
.hr-spec-badge--blue { background: #eef4ff; color: #2464ee; }
.hr-spec-badge--teal { background: #e0f7f4; color: #0d9488; }
.hr-spec-badge--green { background: #ecfdf5; color: #059669; }
.hr-spec-badge--pink { background: #fdf2f8; color: #be185d; }
.hr-spec-feat-bottom {
margin-top: auto !important;
display: flex !important; flex-direction: column !important; gap: 12px !important;
}
.hr-spec-avatars {
display: flex !important; align-items: center !important; gap: 8px !important;
}
.hr-spec-av-stack { display: flex !important; }
.hr-spec-av {
width: 26px !important; height: 26px !important;
border-radius: 50% !important; border: 2px solid #fff !important;
object-fit: cover !important; margin-left: -8px !important;
background: #e0e7ff !important;
}
.hr-spec-av:first-child { margin-left: 0 !important; }
.hr-spec-av-count {
font-size: 11.5px !important; font-weight: 600 !important;
color: #475569 !important; white-space: nowrap !important;
}
.hr-spec-feat-cta {
display: flex !important; align-items: center !important;
justify-content: center !important; gap: 8px !important;
background: #f8faff !important; border: 1.5px solid var(--br) !important;
border-radius: 999px !important; padding: 9px 18px !important;
font-size: 13px !important; font-weight: 600 !important; color: var(--b) !important;
transition: background .2s, border-color .2s, color .2s !important;
}
.hr-spec-feat-card:hover .hr-spec-feat-cta {
background: var(--b) !important; border-color: var(--b) !important; color: #fff !important;
}
/* ── Secondary specialty chips grid ── */
.hr-spec-chips-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 12px !important;
}
.hr-spec-chip-row {
display: flex !important; align-items: center !important; gap: 12px !important;
background: #fff !important; border-radius: 14px !important;
padding: 14px !important; text-decoration: none !important;
border: 1.5px solid var(--br) !important;
transition: border-color .18s, box-shadow .18s, transform .15s !important;
}
.hr-spec-chip-row:hover {
border-color: var(--b) !important;
box-shadow: 0 4px 16px rgba(36,100,238,.1) !important;
transform: translateY(-2px) !important; text-decoration: none !important;
}
.hr-spec-chip-ico {
width: 40px !important; height: 40px !important; flex-shrink: 0 !important;
border-radius: 10px !important;
display: flex !important; align-items: center !important; justify-content: center !important;
font-size: 17px !important;
}
.hr-spec-chip-text { flex: 1 !important; min-width: 0 !important; }
.hr-spec-chip-name {
font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.hr-spec-chip-sub { font-size: 11px !important; color: #64748b !important; line-height: 1.3 !important; }
.hr-spec-chip-arr { font-size: 11px !important; color: #94a3b8 !important; flex-shrink: 0 !important; }
.hr-spec-chip-row:hover .hr-spec-chip-arr { color: var(--b) !important; }
/* Keep legacy classes so nothing else breaks */
.hr-spec-grid { display: none !important; }
.hr-spec-card, .hr-spec-img-wrap, .hr-spec-icon-wrap, .hr-spec-name, .hr-spec-count { display: none !important; }
/* ── SECTION 5: HOW IT WORKS (redesigned) ────────────────── */
.s5-section {
padding: 72px 0 !important;
background: #fff;
}
.s5-wrap {
max-width: 1354px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
box-sizing: border-box;
}
/* Header */
.s5-header {
text-align: center;
margin-bottom: 52px;
}
.s5-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: #fff;
color: #2563EB;
border: 1.5px solid #BFDBFE;
border-radius: 50px;
padding: 6px 18px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
margin-bottom: 18px;
}
.s5-title {
font-size: 44px;
font-weight: 800;
color: #0F172A;
line-height: 1.15;
margin-bottom: 14px;
}
.s5-title span { color: #2563EB; }
.s5-sub {
color: #64748B;
font-size: 16px;
line-height: 1.6;
}
/* Track — flex row with staggered vertical positions */
.s5-track {
display: flex;
align-items: flex-start;
gap: 0;
}
/* Cards */
.s5-card {
flex: 1;
min-width: 0;
background: #fff;
border-radius: 18px;
padding: 22px 16px 18px;
box-shadow: 0 4px 28px rgba(37,99,235,.09);
position: relative;
}
.s5-card--top { margin-top: 0; }
.s5-card--bot { margin-top: 96px; }
/* Step number badge */
.s5-num {
position: absolute;
top: -13px;
left: 14px;
width: 30px; height: 30px;
background: #2563EB;
color: #fff;
border-radius: 50%;
font-size: 11px;
font-weight: 800;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(37,99,235,.35);
}
/* Icon circle */
.s5-ico {
width: 52px; height: 52px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
margin: 10px auto 12px;
}
.s5-card-title {
font-size: 14px;
font-weight: 700;
color: #0F172A;
text-align: center;
margin-bottom: 5px;
}
.s5-card-desc {
font-size: 11.5px;
color: #64748B;
text-align: center;
line-height: 1.5;
margin-bottom: 14px;
}
/* Connector — pure dashed line, no button */
.s5-conn {
flex-shrink: 0;
width: 56px;
height: 12px;
position: relative;
align-self: flex-start;
margin-top: 114px;
z-index: 2;
}
/* Full dashed line */
.s5-conn::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 50%;
transform: translateY(-50%);
border-top: 2px dashed #93C5FD;
}
/* Small glowing dot at midpoint */
.s5-conn::after {
content: '';
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 8px; height: 8px;
background: #2563EB;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}
/* ── Card 01: Phone mockup ── */
.s5-phone {
background: #F1F5FF;
border-radius: 12px;
padding: 10px 10px 12px;
border: 1px solid #DBEAFE;
}
.s5-ph-bar {
width: 36px; height: 4px;
background: #CBD5E1;
border-radius: 2px;
margin: 0 auto 8px;
}
.s5-ph-label {
font-size: 10px;
font-weight: 700;
color: #0F172A;
margin-bottom: 8px;
text-align: center;
}
.s5-ph-field {
background: #fff;
border: 1px solid #E2E8F0;
border-radius: 5px;
height: 24px;
margin-bottom: 6px;
font-size: 9px;
color: #94A3B8;
display: flex; align-items: center;
padding: 0 8px;
}
.s5-ph-btn {
background: #2563EB;
color: #fff;
border-radius: 5px;
height: 26px;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
font-weight: 700;
margin-top: 8px;
}
/* ── Card 02: Service list ── */
.s5-svc {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 7px;
}
.s5-svc li {
display: flex; align-items: center; gap: 10px;
font-size: 12px; font-weight: 600; color: #0F172A;
background: #F8FAFF;
border-radius: 8px;
padding: 9px 10px;
border: 1px solid #E2E8F0;
}
.s5-svc-ico {
width: 28px; height: 28px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
/* ── Card 03: Video call ── */
.s5-vcall {
border-radius: 12px;
overflow: hidden;
position: relative;
background: #1E293B;
}
.s5-vcall-img {
width: 100%; height: 120px;
object-fit: cover; object-position: top center;
display: block;
}
.s5-vcall-av {
position: absolute;
top: 8px; right: 8px;
width: 36px; height: 36px;
border-radius: 8px;
overflow: hidden;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.s5-vcall-av img { width: 100%; height: 100%; object-fit: cover; }
.s5-vcall-ctrl {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 8px;
background: rgba(15,23,42,.75);
}
.s5-vcall-ctrl span {
width: 28px; height: 28px;
background: rgba(255,255,255,.18);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 11px;
}
.s5-ctrl-red { background: #EF4444 !important; }
/* ── Card 04: Prescription ── */
.s5-rx {
background: #F8FAFF;
border-radius: 10px;
padding: 12px;
border: 1px solid #E2E8F0;
}
.s5-rx-hd {
font-size: 11px; font-weight: 700; color: #2563EB;
margin-bottom: 10px;
display: flex; align-items: center; gap: 6px;
}
.s5-rx-row {
display: flex; justify-content: space-between;
font-size: 11px; color: #64748B;
padding: 5px 0;
border-bottom: 1px solid #E8EFF8;
}
.s5-rx-row:last-of-type { border-bottom: none; }
.s5-rx-row span:last-child { color: #0F172A; font-weight: 600; }
.s5-rx-sent {
margin-top: 10px;
background: #FFF7ED;
color: #EA580C;
border-radius: 7px;
padding: 7px 10px;
font-size: 11px; font-weight: 700;
display: flex; align-items: center; gap: 6px;
}
/* ── Card 05: Progress tracker ── */
.s5-prog {
background: #F8FAFF;
border-radius: 10px;
padding: 12px;
border: 1px solid #E2E8F0;
}
.s5-prog-hd {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px;
}
.s5-prog-hd > span:first-child { font-size: 11px; font-weight: 700; color: #0F172A; }
.s5-impr {
background: #DCFCE7; color: #16A34A;
border-radius: 20px; padding: 2px 8px;
font-size: 9px; font-weight: 700;
}
.s5-chart { margin-bottom: 8px; }
.s5-chart svg { width: 100%; height: 44px; display: block; }
.s5-chart-lbl {
display: flex; justify-content: space-between;
font-size: 9px; color: #94A3B8;
padding: 0 2px;
}
.s5-pi {
display: flex; align-items: center; gap: 8px;
background: #fff;
border-radius: 8px;
padding: 7px 8px;
margin-top: 6px;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.s5-pi-ico {
width: 26px; height: 26px;
border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.s5-pi-body {
flex: 1;
font-size: 10px; color: #0F172A; font-weight: 600; line-height: 1.3;
}
.s5-pi-body small { color: #94A3B8; font-weight: 400; }
.s5-pi-arr { color: #CBD5E1; font-size: 10px; }
/* Trust bar */
.s5-trust {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 48px;
font-size: 14px; color: #475569;
background: #fff;
border-radius: 50px;
padding: 12px 28px;
width: fit-content;
margin-left: auto; margin-right: auto;
box-shadow: 0 2px 12px rgba(37,99,235,.08);
border: 1px solid #E2E8F0;
}
.s5-trust i { color: #2563EB; font-size: 15px; }
.s5-hipaa { color: #2563EB; }
/* Responsive */
@media (max-width: 1024px) {
.s5-track { flex-wrap: wrap; gap: 20px; }
.s5-card { flex: 0 0 calc(50% - 30px); }
.s5-card--bot { margin-top: 0; }
.s5-arrow { display: none; }
.s5-title { font-size: 34px; }
}
@media (max-width: 640px) {
.s5-card { flex: 0 0 100%; }
.s5-title { font-size: 28px; }
}
/* ── SECTION 6: WHY PATIENTS CHOOSE US ───────────────────── */
.hr-why-section {
padding: 72px 0 !important;
background: #EEF3FF;
}
.hw-inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: self-end;
}
/* --- LEFT --- */
.hw-title {
font-size: 36px;
font-weight: 800;
color: #0f172a;
letter-spacing: -.03em;
line-height: 1.12;
margin: 10px 0 10px;
}
.hw-title span { color: #2563EB; }
.hw-sub {
font-size: 14px;
color: #64748b;
line-height: 1.65;
margin-bottom: 18px;
}
/* Photo + rating overlay */
.hw-photo-wrap {
position: relative;
border-radius: 20px;
overflow: hidden;
margin-bottom: 14px;
}
.hw-photo {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
}
.hw-rating {
position: absolute;
bottom: 52px;
right: -16px;
background: #0f172a;
border-radius: 18px;
padding: 16px 18px;
min-width: 190px;
z-index: 2;
}
.hw-rating-stars {
color: #FBBF24;
font-size: 12px;
letter-spacing: 2px;
margin-bottom: 4px;
}
.hw-rating-score {
font-size: 34px;
font-weight: 800;
color: #fff;
line-height: 1;
letter-spacing: -.03em;
}
.hw-rating-score span { font-size: 16px; color: #64748b; }
.hw-rating-label {
font-size: 13px;
font-weight: 700;
color: #fff;
margin: 4px 0 2px;
}
.hw-rating-sub {
font-size: 11px;
color: #64748b;
margin-bottom: 10px;
}
.hw-rating-avs { display: flex; align-items: center; }
.hw-av {
width: 26px; height: 26px;
border-radius: 50%;
border: 2px solid #0f172a;
object-fit: cover;
margin-left: -6px;
}
.hw-av:first-child { margin-left: 0; }
.hw-av-count {
margin-left: 8px;
font-size: 11px;
font-weight: 700;
color: #fff;
background: #2563EB;
border-radius: 999px;
padding: 2px 8px;
}
/* Stats row */
.hw-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: #fff;
border-radius: 14px;
border: 1.5px solid #e2e8f0;
margin-bottom: 10px;
overflow: hidden;
}
.hw-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 14px 8px;
border-right: 1px solid #e2e8f0;
}
.hw-stat:last-child { border-right: none; }
.hw-stat-ico { font-size: 16px; }
.hw-stat strong {
font-size: 20px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.1;
}
.hw-stat span {
font-size: 10px;
color: #64748b;
font-weight: 500;
text-align: center;
line-height: 1.3;
}
/* Trust badges */
.hw-trust {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.hw-trust-item {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border-radius: 12px;
padding: 10px 12px;
border: 1.5px solid #e2e8f0;
}
.hw-trust-ico {
width: 30px; height: 30px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.hw-trust-name {
font-size: 11px;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.hw-trust-sub {
font-size: 9px;
color: #64748b;
font-weight: 600;
letter-spacing: .04em;
}
/* --- RIGHT: feature cards --- */
.hw-right {
display: flex;
flex-direction: column;
gap: 10px;
}
.hw-card {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border-radius: 16px;
padding: 16px 18px;
border: 1.5px solid #e2e8f0;
position: relative;
overflow: hidden;
}
.hw-card-ico {
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.hw-card-body { flex: 1; min-width: 0; }
.hw-card-title {
font-size: 14px;
font-weight: 700;
color: #0f172a;
margin-bottom: 3px;
}
.hw-card-desc {
font-size: 12px;
color: #64748b;
line-height: 1.5;
}
.hw-card-illus {
font-size: 56px;
opacity: .12;
flex-shrink: 0;
line-height: 1;
}
/* ── SECTION 7: MED AI SHOWCASE ──────────────────────────── */
.hr-ai-section {
padding: 72px 0 !important;
background: var(--ai-bg);
position: relative;
overflow: hidden;
}
.hr-ai-section::before {
content: '';
position: absolute;
top: -200px; right: -200px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(36,100,238,.15) 0%, transparent 65%);
pointer-events: none;
}
.hr-ai-section::after {
content: '';
position: absolute;
bottom: -150px; left: -150px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(124,58,237,.12) 0%, transparent 65%);
pointer-events: none;
}
/* ── Floating particles ── */
.fd-ai-particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.fd-ai-dot {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(96,165,250,.45);
animation: fdDotFloat var(--dur,3.5s) ease-in-out infinite alternate;
animation-delay: var(--delay,0s);
}
@keyframes fdDotFloat {
0% { transform: translateY(0) scale(1); opacity:.5; }
100% { transform: translateY(-18px) scale(1.4); opacity:.9; }
}
/* ── Header ── */
.meetmed__ai_header {
text-align: center;
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.meetmed__ai_badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(36,100,238,.18);
color: #93c5fd;
border: 1px solid rgba(96,165,250,.28);
border-radius: 999px;
padding: 6px 16px;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 18px;
}
.meetmed__ai_badge span {
width: 6px; height: 6px;
border-radius: 50%;
background: #60a5fa;
display: inline-block;
animation: fdDotFloat 1.8s ease-in-out infinite alternate;
}
.meetmed__ai_heading {
font-size: 40px;
font-weight: 800;
color: #f1f5f9;
letter-spacing: -.03em;
line-height: 1.12;
margin-bottom: 14px;
}
.meetmed__ai_heading span { color: #60a5fa; }
.meetmed__ai_subtitle {
font-size: 16px;
color: #94a3b8;
line-height: 1.7;
max-width: 560px;
margin: 0 auto;
}
/* ── Tab Navigation ── */
.meetmed__ai_tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 32px;
position: relative;
z-index: 2;
}
.meetmed__ai_tabbtn {
display: inline-flex !important;
align-items: center;
gap: 7px;
background: rgba(255,255,255,.06) !important;
color: #94a3b8 !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 999px !important;
padding: 8px 20px !important;
font-size: 13px !important;
font-weight: 600 !important;
transition: background .2s, color .2s, box-shadow .2s !important;
}
.meetmed__ai_tabbtn:hover {
background: rgba(255,255,255,.10) !important;
color: #e2e8f0 !important;
}
.meetmed__ai_tabbtn.active {
background: var(--b) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 4px 20px rgba(36,100,238,.38) !important;
}
/* ── Glassmorphism card ── */
.meetmed__ai_card {
background: rgba(255,255,255,.05) !important;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 24px;
padding: 40px 40px;
backdrop-filter: blur(20px);
position: relative;
z-index: 2;
min-height: 520px;
display: flex;
align-items: stretch;
}
.meetmed__ai_card > .row {
width: 100%;
align-items: stretch !important;
min-height: 440px;
}
.meetmed__ai_card .col-lg-6:last-child {
display: flex;
flex-direction: column;
}
/* ── Content column ── */
.meetmed__ai_content {
padding-right: 16px;
}
.meetmed__ai_title {
font-size: 28px;
font-weight: 800;
color: #f1f5f9;
letter-spacing: -.025em;
line-height: 1.2;
margin-bottom: 14px;
}
.meetmed__ai_title span { color: #60a5fa; }
.meetmed__ai_desc {
font-size: 15px;
color: #94a3b8;
line-height: 1.75;
margin-bottom: 22px;
}
.meetmed__ai_list {
list-style: none;
padding: 0; margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
.meetmed__ai_list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #cbd5e1;
font-weight: 500;
}
.meetmed__ai_list li::before {
content: '';
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(36,100,238,.25);
border: 1.5px solid rgba(96,165,250,.45);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%2360a5fa' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: 11px 11px;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.meetmed__ai_link {
display: inline-flex;
align-items: center;
gap: 8px;
background: #2464ee;
color: #fff;
border-radius: 999px;
padding: 11px 24px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 4px 20px rgba(36,100,238,.35);
transition: background .2s, transform .15s;
}
.meetmed__ai_link:hover {
background: #1a50d4;
transform: translateY(-1px);
color: #fff;
text-decoration: none;
}
/* ── Image column ── */
.meetmed__ai_imagewrap {
border-radius: 18px;
overflow: hidden;
flex: 1;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.meetmed__ai_image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center top;
display: block;
}
/* ── Tab-pane visibility — override Bootstrap conflicts ── */
.hr-ai-section .tab-content > .tab-pane {
display: none !important;
opacity: 0;
}
.hr-ai-section .tab-content > .tab-pane.nlai-active {
display: block !important;
opacity: 1 !important;
animation: nlaiTabFade .3s ease;
}
@keyframes nlaiTabFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── SECTION 8: LAB TEST ─────────────────────────────────── */
.lt-section {
padding: 72px 0 !important;
background: #EEF3FF;
}
/* outer white rounded card */
.lt-box {
background: #fff;
border-radius: 28px;
box-shadow: 0 4px 40px rgba(37,99,235,.08);
overflow: hidden;
padding: 40px 40px 0;
}
/* ── TOP: two-column layout ── */
.lt-main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
padding-bottom: 32px;
}
/* --- IMAGE COLUMN --- */
.lt-img-col {
position: relative;
}
.lt-img-wrap {
border-radius: 20px;
overflow: hidden;
position: relative;
}
.lt-photo {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}
/* floating cards */
.lt-float {
position: absolute;
background: #fff;
border-radius: 16px;
padding: 14px 18px;
box-shadow: 0 8px 32px rgba(0,0,0,.13);
z-index: 10;
}
.lt-float--tl { top: -45px; left: -20px; max-width: 220px; }
.lt-float--bl { bottom: 20px; left: 16px; max-width: 220px; }
.lt-float-row {
display: flex;
align-items: center;
gap: 12px;
}
.lt-float-divider {
height: 1px;
background: #e2e8f0;
margin: 10px 0;
}
.lt-float-ico {
width: 36px; height: 36px;
border-radius: 50%;
background: #EEF4FF;
color: #2563EB;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.lt-float-ico--green { background: #ECFDF5; color: #059669; }
.lt-float-ico--blue { background: #EEF4FF; color: #2563EB; }
.lt-float-name {
font-size: 13px;
font-weight: 700;
color: #0f172a;
line-height: 1.2;
}
.lt-float-sub {
font-size: 11px;
color: #64748b;
margin-top: 2px;
line-height: 1.4;
}
/* app mockup */
.lt-app-mock {
position: absolute;
bottom: -50px;
right: -10px;
background: #fff;
border-radius: 20px;
padding: 16px 18px;
box-shadow: 0 12px 40px rgba(0,0,0,.16);
width: 230px;
z-index: 10;
}
.lt-app-mock-hd {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
font-weight: 700;
color: #0f172a;
margin-bottom: 12px;
}
.lt-app-back, .lt-app-bell { color: #94a3b8; font-size: 12px; }
.lt-app-mock-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f1f5f9;
}
.lt-app-item-dot {
width: 28px; height: 28px;
border-radius: 50%;
background: #059669;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.lt-app-item-text {
font-size: 12px;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
}
.lt-app-item-meta {
font-size: 10px;
color: #94a3b8;
margin-top: 3px;
line-height: 1.5;
}
.lt-app-track-label {
font-size: 11px;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
}
.lt-app-mock-track {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.lt-track-step {
display: flex;
align-items: center;
flex: 1;
}
.lt-track-step:last-child { flex: none; }
.lt-track-node {
width: 20px; height: 20px;
border-radius: 50%;
background: #e2e8f0;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 8px;
color: #fff;
}
.lt-track-node--on { background: #059669; }
.lt-track-line {
flex: 1;
height: 2px;
background: #e2e8f0;
}
.lt-track-line--on { background: #059669; }
.lt-app-track-labels {
display: flex;
justify-content: space-between;
font-size: 9px;
color: #94a3b8;
margin-bottom: 12px;
}
.lt-app-view-btn {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: 600;
color: #2563EB;
background: #f8fafc;
border-radius: 10px;
padding: 8px 12px;
cursor: pointer;
}
/* --- CONTENT COLUMN --- */
.lt-title {
font-size: 34px;
font-weight: 800;
color: #0f172a;
letter-spacing: -.03em;
line-height: 1.12;
margin: 10px 0 12px;
}
.lt-title span { color: #2563EB; }
.lt-sub {
font-size: 14px;
color: #64748b;
line-height: 1.65;
margin-bottom: 18px;
}
/* 2×2 feature grid */
.lt-feat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.lt-feat {
display: flex;
align-items: flex-start;
gap: 10px;
background: #f8fafc;
border-radius: 12px;
padding: 12px 14px;
border: 1px solid #e2e8f0;
}
.lt-feat-ico {
width: 36px; height: 36px;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.lt-feat-name {
font-size: 13px;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
}
.lt-feat-desc {
font-size: 11px;
color: #64748b;
margin-top: 3px;
line-height: 1.5;
}
/* CTA button + proof row */
.lt-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
font-size: 15px;
}
.lt-proof {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
}
.lt-proof-avs { display: flex; }
.lt-av {
width: 34px; height: 34px;
border-radius: 50%;
border: 2.5px solid #fff;
object-fit: cover;
margin-left: -10px;
}
.lt-av:first-child { margin-left: 0; }
.lt-proof-num {
font-size: 15px;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
}
.lt-proof-lbl {
font-size: 12px;
color: #64748b;
}
/* ── BOTTOM: popular tests + stats ── */
.lt-bottom {
display: flex;
align-items: stretch;
border-top: 1.5px solid #e2e8f0;
margin: 0 -40px;
}
.lt-tests {
flex: 1;
padding: 22px 40px;
border-right: 1.5px solid #e2e8f0;
min-width: 0;
}
.lt-tests-lbl {
font-size: 11px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 12px;
}
.lt-chips {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.lt-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-decoration: none;
transition: opacity .2s;
min-width: 52px;
}
.lt-chip:hover { opacity: .75; text-decoration: none; }
.lt-chip-ico {
width: 48px; height: 48px;
border-radius: 14px;
border: 1.5px solid #e2e8f0;
background: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
color: #64748b;
transition: border-color .2s, color .2s;
}
.lt-chip:hover .lt-chip-ico { border-color: #2563EB; color: #2563EB; }
.lt-chip-ico--blue { background: #EEF4FF; border-color: #2563EB; color: #2563EB; }
.lt-chip-name {
font-size: 11px;
font-weight: 600;
color: #334155;
text-align: center;
line-height: 1.3;
}
.lt-chip--view .lt-chip-name { color: #2563EB; }
/* stats (right side of bottom) */
.lt-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
flex-shrink: 0;
width: 300px;
}
.lt-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 18px 12px;
border-bottom: 1.5px solid #e2e8f0;
border-right: 1.5px solid #e2e8f0;
}
.lt-stat:nth-child(2n) { border-right: none; }
.lt-stat:nth-child(n+3) { border-bottom: none; }
.lt-stat-ico {
font-size: 18px;
margin-bottom: 2px;
}
.lt-stat strong {
font-size: 20px;
font-weight: 800;
color: #0f172a;
letter-spacing: -.02em;
line-height: 1.1;
}
.lt-stat span {
font-size: 10px;
color: #64748b;
font-weight: 500;
text-align: center;
}
/* ── SECTION 9: MOBILE APP ───────────────────────────────── */
.hr-app-section {
padding: 72px 0 !important;
background: var(--b-bg);
}
.hr-app-inner {
display: grid;
grid-template-columns: 1fr 440px;
gap: 64px;
align-items: center;
}
.hr-app-title {
font-size: 36px;
font-weight: 700;
color: var(--hd);
letter-spacing: -.025em;
line-height: 1.15;
margin-bottom: 12px;
}
.hr-app-title span { color: var(--b); }
.hr-app-sub {
font-size: 15px;
color: var(--bd);
line-height: 1.7;
margin-bottom: 24px;
}
.hr-app-stores {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.hr-app-stores a { display: block; }
.hr-app-stores img { height: 44px; width: auto; }
.hr-app-stats {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.hr-app-stat strong {
display: block;
font-size: 22px;
font-weight: 800;
color: var(--hd);
letter-spacing: -.02em;
}
.hr-app-stat span {
font-size: 12px;
color: var(--bd);
}
.hr-app-stat-div { width: 1px; height: 28px; background: var(--br); }
.hr-app-img-wrap {
display: flex;
justify-content: center;
align-items: center;
}
.hr-app-img-wrap img {
max-width: 100%;
height: auto;
max-height: 420px;
object-fit: contain;
filter: drop-shadow(0 20px 48px rgba(36,100,238,.18));
}
/* ── SECTION 10: DOCTOR SPOTLIGHT ───────────────────────── */
.hr-doc-section {
padding: 72px 0 !important;
background: linear-gradient(to bottom, #eef4ff 0%, #ffffff 100%);
}
.hr-doc-inner {
display: grid;
grid-template-columns: 380px 1fr;
gap: 64px;
align-items: center;
}
.hr-doc-img-card {
background: linear-gradient(145deg, #e8f0fe 0%, #f0f6ff 100%);
border-radius: var(--r-xl);
overflow: hidden;
position: relative;
min-height: 420px;
display: flex;
align-items: flex-end;
}
.hr-doc-img-card img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.hr-doc-img-badge {
position: absolute;
bottom: 20px; left: 20px; right: 20px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(12px);
border-radius: var(--r-md);
padding: 14px 18px;
border: 1px solid rgba(255,255,255,.6);
}
.hr-doc-img-badge-name {
font-size: 14px;
font-weight: 700;
color: var(--hd);
line-height: 1.3;
margin-bottom: 2px;
}
.hr-doc-img-badge-role {
font-size: 12px;
color: var(--bd);
}
.hr-doc-img-badge-loc {
font-size: 11px;
color: var(--bd);
display: flex;
align-items: center;
gap: 4px;
margin-top: 3px;
}
.hr-doc-img-badge-loc i { color: #ef4444; font-size: 10px; }
.hr-doc-img-socials {
position: absolute;
top: 20px; right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.hr-doc-social {
width: 36px; height: 36px;
border-radius: 50%;
background: #fff;
box-shadow: var(--sh-sm);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
color: var(--hd);
text-decoration: none;
transition: background .2s, color .2s;
}
.hr-doc-social:hover { background: var(--b); color: #fff; text-decoration: none; }
.hr-doc-quote {
font-size: 22px;
font-weight: 700;
color: var(--hd);
letter-spacing: -.02em;
line-height: 1.35;
margin-bottom: 16px;
}
.hr-doc-body {
font-size: 15px;
color: var(--bd);
line-height: 1.75;
margin-bottom: 24px;
}
.hr-doc-extra { display: block; }
.hr-doc-creds {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}
.hr-doc-cred {
display: flex;
align-items: center;
gap: 6px;
background: var(--b-t1);
color: var(--b);
border: 1px solid var(--br);
border-radius: 999px;
padding: 5px 14px;
font-size: 12px;
font-weight: 600;
}
/* ── SECTION 11: PATIENT REVIEWS ─────────────────────────── */
/* ── SECTION 11: PATIENT REVIEWS ────────────────────────── */
.hr-rev-section {
padding: 80px 0 72px !important;
background: #fff;
}
.hr-rev-header {
display: grid;
grid-template-columns: 1fr 1.1fr;
align-items: flex-start;
gap: 48px;
margin-bottom: 48px;
}
.hr-rev-header-left .hr-badge { margin-bottom: 14px; }
.hr-rev-title {
font-size: 42px;
font-weight: 900;
line-height: 1.15;
color: var(--hd);
margin: 0 0 14px;
letter-spacing: -0.5px;
}
.hr-rev-title span { color: var(--b); }
.hr-rev-sub {
font-size: 15px;
color: var(--bd);
line-height: 1.65;
max-width: 420px;
margin: 0;
}
.hr-rev-header-right {
display: flex;
flex-direction: column;
gap: 20px;
}
.hr-rev-score-wrap {
display: flex;
align-items: center;
gap: 16px;
}
.hr-rev-score {
font-size: 76px;
font-weight: 900;
color: var(--hd);
line-height: 1;
letter-spacing: -2px;
}
.hr-rev-score-info { display: flex; flex-direction: column; gap: 5px; }
.hr-rev-stars { color: #f59e0b; font-size: 22px; display: flex; gap: 4px; }
.hr-rev-count { font-size: 13px; color: var(--bd); }
.hr-rev-stats-bar {
display: flex;
align-items: center;
background: #f8faff;
border: 1.5px solid var(--br);
border-radius: 14px;
padding: 16px 20px;
}
.hr-rev-stat {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.hr-rev-stat-icon {
width: 36px; height: 36px;
background: var(--b-t1);
color: var(--b);
border-radius: 8px;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.hr-rev-stat strong {
display: block;
font-size: 17px;
font-weight: 800;
color: var(--hd);
line-height: 1.1;
}
.hr-rev-stat span {
display: block;
font-size: 11.5px;
color: var(--bd);
}
.hr-rev-stat-sep {
width: 1px;
height: 38px;
background: var(--br);
margin: 0 4px;
flex-shrink: 0;
}
.hr-rev-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.hr-rev-card {
background: #fff;
border: 1.5px solid #e5e9f4;
border-radius: 16px;
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
overflow: hidden;
transition: box-shadow .2s, transform .15s;
}
.hr-rev-card:hover {
box-shadow: 0 8px 28px rgba(37,99,235,.1);
transform: translateY(-3px);
}
.hr-rev-quote {
position: absolute;
right: 16px;
bottom: 12px;
font-size: 56px;
line-height: 1;
color: #eef2ff;
font-family: Georgia, 'Times New Roman', serif;
pointer-events: none;
user-select: none;
}
.hr-rev-card-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.hr-rev-profile {
display: flex;
align-items: center;
gap: 10px;
}
.hr-rev-avatar {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #e8edf8;
flex-shrink: 0;
}
.hr-rev-name {
font-size: 14px;
font-weight: 700;
color: var(--hd);
line-height: 1.2;
}
.hr-rev-loc {
font-size: 11.5px;
color: var(--bd);
margin-top: 2px;
}
.hr-rev-loc i { font-size: 9px; margin-right: 3px; }
.hr-rev-time {
font-size: 11px;
color: #94a3b8;
white-space: nowrap;
flex-shrink: 0;
}
.hr-rev-stars-sm { color: #f59e0b; font-size: 13px; display: flex; gap: 2px; }
.hr-rev-text {
font-size: 13.5px;
color: #475569;
line-height: 1.65;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hr-rev-card-foot { margin-top: auto; }
.hr-rev-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
border-radius: 999px;
padding: 4px 11px;
}
.hr-rev-tag--blue { color: #2563eb; background: #eff4ff; }
.hr-rev-tag--green { color: #16a34a; background: #f0fdf4; }
.hr-rev-tag--purple { color: #7c3aed; background: #f5f3ff; }
.hr-rev-tag--orange { color: #d97706; background: #fffbeb; }
.hr-rev-tag--teal { color: #0d9488; background: #f0fdfa; }
.hr-rev-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 36px;
padding: 18px 24px;
background: #f8faff;
border: 1.5px solid var(--br);
border-radius: 14px;
flex-wrap: wrap;
gap: 14px;
}
.hr-rev-trust {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--bd);
font-weight: 500;
}
.hr-rev-trust i { color: var(--b); font-size: 18px; }
.hr-rev-nav {
display: flex;
align-items: center;
gap: 10px;
}
.hr-rev-nav-btn {
width: 38px; height: 38px;
border-radius: 50%;
border: 1.5px solid var(--br);
background: #fff;
color: var(--hd);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13px;
transition: border-color .2s, background .2s, color .2s;
}
.hr-rev-nav-btn:hover { border-color: var(--b); background: var(--b-t1); color: var(--b); }
.hr-rev-dots { display: flex; gap: 6px; align-items: center; }
.hr-rev-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #d1d5db;
transition: background .2s, width .2s;
cursor: pointer;
}
.hr-rev-dot--active {
background: var(--b);
width: 22px;
border-radius: 4px;
}
/* ── SECTION 12: HEALTH RESOURCES ───────────────────────── */
.hr-blogs-section {
padding: 72px 0 !important;
background: #fff;
}
.hr-blogs-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 40px;
flex-wrap: wrap;
gap: 16px;
}
.hr-blogs-viewall {
font-size: 14px;
font-weight: 600;
color: var(--b);
text-decoration: none;
padding-bottom: 4px;
}
.hr-blogs-viewall:hover { text-decoration: underline; }
.hr-blogs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.hr-blog-card {
border: 1.5px solid var(--br);
border-radius: var(--r-lg);
overflow: hidden;
background: #fff;
transition: box-shadow .2s, transform .15s;
text-decoration: none;
display: flex;
flex-direction: column;
}
.hr-blog-card:hover {
box-shadow: var(--sh-md);
transform: translateY(-4px);
text-decoration: none;
}
.hr-blog-img-wrap {
height: 180px;
overflow: hidden;
background: var(--b-t2);
}
.hr-blog-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .4s var(--ease);
}
.hr-blog-card:hover .hr-blog-img-wrap img { transform: scale(1.04); }
.hr-blog-body {
padding: 20px 22px 24px;
display: flex;
flex-direction: column;
flex: 1;
}
.hr-blog-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--bd);
margin-bottom: 10px;
}
.hr-blog-meta-dot { color: var(--br); }
.hr-blog-title {
font-size: 15px;
font-weight: 700;
color: var(--hd);
line-height: 1.45;
margin-bottom: 12px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hr-blog-link {
font-size: 13px;
font-weight: 600;
color: var(--b);
display: inline-flex;
align-items: center;
gap: 5px;
transition: gap .2s;
}
.hr-blog-card:hover .hr-blog-link { gap: 8px; }
/* ── SECTION 13: FAQ ──────────────────────────────────────── */
.hr-faq-section {
padding: 72px 0 !important;
background: var(--b-bg);
}
.hr-faq-inner {
display: grid;
grid-template-columns: 360px 1fr;
gap: 64px;
align-items: start;
}
.hr-faq-left-title {
font-size: 34px;
font-weight: 700;
color: var(--hd);
letter-spacing: -.025em;
line-height: 1.2;
margin-bottom: 12px;
}
.hr-faq-left-title span { color: var(--b); }
.hr-faq-left-sub {
font-size: 14px;
color: var(--bd);
line-height: 1.7;
margin-bottom: 24px;
}
.hr-faq-left-cta {
font-size: 14px;
font-weight: 600;
color: var(--b);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.hr-faq-left-cta:hover { text-decoration: underline; }
.hr-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.hr-faq-item {
background: #fff;
border: 1.5px solid var(--br);
border-radius: var(--r-md);
overflow: hidden;
transition: border-color .2s;
}
.hr-faq-item.is-open { border-color: var(--b); }
.hr-faq-q {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
cursor: pointer;
gap: 16px;
}
.hr-faq-q-text {
font-size: 14px;
font-weight: 600;
color: var(--hd);
line-height: 1.4;
}
.hr-faq-item.is-open .hr-faq-q-text { color: var(--b); }
.hr-faq-toggle {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--b-t1);
border: none;
color: var(--b);
display: flex; align-items: center; justify-content: center;
font-size: 12px;
flex-shrink: 0;
cursor: pointer;
transition: background .2s, color .2s, transform .2s;
}
.hr-faq-item.is-open .hr-faq-toggle {
background: var(--b);
color: #fff;
transform: rotate(45deg);
}
.hr-faq-a {
display: none;
padding: 0 20px 18px;
font-size: 13px;
color: var(--bd);
line-height: 1.7;
}
.hr-faq-item.is-open .hr-faq-a { display: block; }
/* ── SECTION 14: FINAL CTA BANNER ────────────────────────── */
.hr-cta-section {
background: #f6f8fe !important;
padding: 64px 0 96px !important;
}
.hr-cta-outer { padding: 0 !important; }
/* Blue gradient card */
.hr-cta-card {
position: relative;
border-radius: 28px;
overflow: visible;
background: linear-gradient(135deg, #2952e3 0%, #1a3fd4 100%);
background-image: url('../../images/cta-bg.webp'), linear-gradient(135deg, #2952e3 0%, #1a3fd4 100%);
background-size: cover;
background-position: center;
padding: 52px 80px 0;
text-align: center;
isolation: isolate;
}
/* Floating icon circles */
.hr-cta-float {
position: absolute;
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(255,255,255,.14);
border: 1.5px solid rgba(255,255,255,.28);
backdrop-filter: blur(10px);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.90);
font-size: 20px;
z-index: 2;
pointer-events: none;
}
/* Content */
.hr-cta-inner {
position: relative;
z-index: 3;
text-align: center;
}
.hr-cta-title {
font-size: 48px;
font-weight: 800;
color: #fff;
line-height: 1.08;
letter-spacing: -.03em;
margin-bottom: 14px;
}
.hr-cta-sub {
font-size: 16px;
color: rgba(255,255,255,.78);
line-height: 1.65;
max-width: 500px;
margin: 0 auto 28px;
}
/* Buttons */
.hr-cta-btns {
display: flex;
gap: 16px;
justify-content: center;
margin-bottom: 28px;
flex-wrap: wrap;
}
.hr-cta-btn-primary {
display: inline-flex; align-items: center; gap: 12px;
background: #fff; color: var(--b);
border-radius: 999px; padding: 14px 20px 14px 28px;
font-size: 16px; font-weight: 700;
text-decoration: none; transition: all .25s;
box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.hr-cta-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0,0,0,.24); color: var(--b); text-decoration: none; }
.hr-cta-arrow {
width: 36px; height: 36px; border-radius: 50%;
background: var(--b); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 14px; flex-shrink: 0;
}
.hr-cta-btn-outline {
display: inline-flex; align-items: center; gap: 10px;
background: transparent; color: #fff;
border: 1.5px solid rgba(255,255,255,.60);
border-radius: 999px; padding: 14px 28px;
font-size: 16px; font-weight: 600;
text-decoration: none; transition: all .25s;
}
.hr-cta-btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; transform: translateY(-3px); text-decoration: none; }
/* Trust row */
.hr-cta-trust {
display: flex; gap: 10px;
justify-content: center; align-items: center; flex-wrap: wrap;
color: rgba(255,255,255,.72); font-size: 14px;
margin-bottom: 36px;
}
.hr-cta-trust i { color: rgba(255,255,255,.90); margin-right: 4px; }
.hr-cta-sep { color: rgba(255,255,255,.30); }
/* Stats bar — floats out of the card */
.hr-cta-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
background: #fff; border-radius: 18px;
padding: 28px 16px;
box-shadow: 0 12px 48px rgba(0,0,0,.14);
position: relative; z-index: 4;
margin: 0 20px;
transform: translateY(32px);
}
.hr-cta-stat {
display: flex; align-items: center; gap: 14px;
padding: 0 20px;
border-right: 1px solid #e5eaf3;
}
.hr-cta-stat:last-child { border-right: none; }
.hr-cta-stat-icon {
width: 48px; height: 48px; border-radius: 50%;
background: #eef3ff; color: var(--b);
display: flex; align-items: center; justify-content: center;
font-size: 20px; flex-shrink: 0;
}
.hr-cta-stat-text strong {
display: block; font-size: 22px;
font-weight: 800; color: var(--hd);
letter-spacing: -.02em; line-height: 1.2;
}
.hr-cta-stat-text span { font-size: 13px; color: var(--bd); }
/* ═══════════════════════════════════════════════════════════
RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════════ */
/* ── 1200px ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
.hr-hero-title { font-size: 48px; }
.hr-hero-title-sub { font-size: 34px; }
.hr-hero-inner { grid-template-columns: 1fr 460px; gap: 32px; }
.hr-hero-svcs { max-width: 100%; }
.hr-hero-search { max-width: 100%; }
.hr-hero-trust { max-width: 100%; }
.hr-qa-grid { grid-template-columns: repeat(2, 1fr); }
.hr-spec-grid { grid-template-columns: repeat(4, 1fr); }
.hw-inner { gap: 36px; }
.meetmed__ai_heading { font-size: 34px; }
.hr-doc-inner { grid-template-columns: 320px 1fr; gap: 40px; }
.lt-box { padding: 36px 36px 0; }
.lt-main { gap: 36px; }
.lt-bottom { margin: 0 -36px; }
.lt-tests { padding: 20px 36px; }
.hr-app-inner { gap: 40px; }
.hr-faq-inner { gap: 40px; }
}
/* ── 1024px ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
.hr-wrap { padding: 0 20px; }
.hr-st { font-size: 34px; }
.hr-hero-title { font-size: 44px; }
.hr-hero-title-sub { font-size: 28px; }
.hr-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.hr-hero-right { max-width: 520px; margin: 0 auto; }
.hr-hero-svcs { max-width: 100%; grid-template-columns: repeat(2, 1fr); }
.s5-track { flex-wrap: wrap; gap: 20px; }
.s5-card--bot { margin-top: 0; }
.s5-conn { display: none; }
.hw-inner { grid-template-columns: 1fr; gap: 32px; }
.hw-card-illus { display: none; }
.hw-photo { height: 260px; }
.meetmed__ai_card { padding: 28px 24px; min-height: 400px; }
.meetmed__ai_card .col-lg-6:last-child { margin-top: 24px; }
.meetmed__ai_imagewrap { min-height: 300px; flex: none; height: 340px; }
.meetmed__ai_image { height: 100%; }
.lt-box { padding: 28px 24px 0; border-radius: 20px; }
.lt-main { grid-template-columns: 1fr; gap: 28px; }
.lt-float { display: none; }
.lt-app-mock { display: none; }
.lt-photo { height: 300px; }
.lt-bottom { flex-direction: column; margin: 0 -24px; }
.lt-tests { border-right: none; border-bottom: 1.5px solid #e2e8f0; padding: 20px 24px; }
.lt-stats { width: 100%; }
.lt-stat { padding: 14px 10px; }
.hr-app-inner { grid-template-columns: 1fr; }
.hr-app-img-wrap { display: none; }
.hr-doc-inner { grid-template-columns: 1fr; }
.hr-doc-img-card { max-height: 320px; }
.hr-faq-inner { grid-template-columns: 1fr; }
.hr-faq-left-title { font-size: 28px; }
.hr-spec-grid { grid-template-columns: repeat(4, 1fr); }
.hr-rev-grid { grid-template-columns: repeat(2, 1fr); }
.hr-rev-header { grid-template-columns: 1fr; }
.hr-rev-score { font-size: 60px; }
}
/* ── 768px ──────────────────────────────────────────────── */
@media (max-width: 768px) {
.hr-hero { padding-top: 24px !important; }
.hr-hero-title { font-size: 34px; }
.hr-hero-title-sub { font-size: 22px; }
.hr-hero-sub { font-size: 15px; }
.hr-hero-right { display: none; }
.hr-hero-svcs { grid-template-columns: 1fr 1fr; }
.hr-hero-svc-desc { display: none; }
.hr-hero-cta { flex-wrap: wrap; gap: 10px; }
.hr-hero-cta-link { display: none; }
.hr-hero-trust { padding: 12px 16px; gap: 0; }
.hr-hero-trust-div { margin: 0 10px; }
.hr-hero-trust-ico { width: 30px; height: 30px; font-size: 13px; }
.hr-hero-trust-item strong { font-size: 15px; }
.hr-hero-trust-item { gap: 7px; }
.hr-qa-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hr-qa-card { padding: 24px 20px; }
.hr-spec-grid { grid-template-columns: repeat(3, 1fr); }
.hr-spec-header { flex-direction: column; align-items: flex-start; gap: 12px; }
.s5-card { flex: 0 0 calc(50% - 30px); }
.hw-title { font-size: 28px; }
.hw-trust { grid-template-columns: repeat(2, 1fr); }
.meetmed__ai_heading { font-size: 28px; }
.meetmed__ai_card { padding: 24px 20px; min-height: unset; }
.meetmed__ai_title { font-size: 22px; }
.meetmed__ai_imagewrap { min-height: 220px; flex: none; height: 260px; }
.meetmed__ai_image { height: 100%; }
.lt-title { font-size: 28px; }
.lt-feat-grid { grid-template-columns: 1fr 1fr; }
.hr-rev-grid { grid-template-columns: 1fr; }
.hr-rev-header { grid-template-columns: 1fr; }
.hr-rev-title { font-size: 32px; }
.hr-rev-score { font-size: 54px; }
.hr-rev-stats-bar { flex-wrap: wrap; gap: 12px; }
.hr-rev-stat-sep { display: none; }
.hr-rev-footer { flex-direction: column; align-items: flex-start; }
.hr-blogs-grid { grid-template-columns: repeat(2, 1fr); }
.hr-blogs-header { flex-direction: column; align-items: flex-start; gap: 10px; }
.hr-cta-title { font-size: 32px; }
.hr-cta-sub { font-size: 15px; }
.hr-cta-btns { flex-direction: column; align-items: center; }
.hr-cta-btn-primary, .hr-cta-btn-outline { width: 100%; max-width: 320px; justify-content: center; }
.hr-cta-stats { grid-template-columns: 1fr 1fr; padding: 20px 12px; }
.hr-cta-stat { padding: 0 8px; gap: 10px; border-right: none; border-bottom: 1px solid #e5eaf3; padding-bottom: 12px; }
.hr-cta-stat:nth-child(odd) { border-right: 1px solid #e5eaf3; }
.hr-cta-stat:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
.hr-cta-card { padding: 40px 24px 0; }
.hr-cta-float { display: none; }
.hr-cta-sep { display: none; }
.hr-doc-creds { gap: 8px; }
.hr-app-stats { gap: 16px; }
.hr-app-stat-div { display: none; }
}
/* ── 480px ──────────────────────────────────────────────── */
@media (max-width: 480px) {
.hr-hero-title { font-size: 28px; }
.hr-hero-title-sub { font-size: 18px; }
.hr-hero-svcs { grid-template-columns: 1fr; }
.hr-hero-svc-desc { display: none; }
.hr-hero-trust { flex-wrap: wrap; }
.hr-hero-trust-div { display: none; }
.hr-hero-trust-item { flex: 0 0 calc(50% - 8px); }
.hr-hero-partners-logos { gap: 14px; }
.hr-qa-grid { grid-template-columns: 1fr; }
.hr-spec-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hr-spec-card { padding: 16px 8px; }
.s5-card { flex: 0 0 100%; }
.hw-title { font-size: 24px; }
.hw-stats { grid-template-columns: repeat(2, 1fr); }
.hw-stat:nth-child(2) { border-right: none; }
.hw-stat:nth-child(1), .hw-stat:nth-child(2) { border-bottom: 1px solid #e2e8f0; }
.hw-rating { min-width: 160px; padding: 12px 14px; }
.hw-rating-score { font-size: 26px; }
.hr-blogs-grid { grid-template-columns: 1fr; }
.hr-cta-title { font-size: 26px; }
.hr-cta-trust { gap: 8px; font-size: 12px; }
.hr-cta-stat-icon { width: 38px; height: 38px; font-size: 16px; }
.hr-cta-stat-text strong { font-size: 18px; }
.lt-box { padding: 24px 20px 0; border-radius: 16px; }
.lt-title { font-size: 26px; }
.lt-photo { height: 260px; }
.lt-bottom { margin: 0 -20px; }
.lt-tests { padding: 20px; }
.lt-stats { padding: 16px 20px; }
.lt-feat-grid { grid-template-columns: 1fr; gap: 10px; }
.lt-chip-ico { width: 40px; height: 40px; font-size: 16px; }
.lt-stat strong { font-size: 20px; }
.hr-doc-img-card { min-height: 260px; }
.hr-faq-inner { grid-template-columns: 1fr; }
.hr-app-stores img { height: 38px; }
}
/* ═══════════════════════════════════════════════════════════════
MOBILE APP SECTION — happ-*
═══════════════════════════════════════════════════════════════ */
.happ-section {
background: #fff;
padding: 88px 0 !important;
overflow: hidden;
}
.happ-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
/* ── LEFT content ── */
.happ-content {
display: flex;
flex-direction: column;
gap: 26px;
}
.happ-trust-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: #eff6ff;
color: #2563eb;
border: 1px solid #bfdbfe;
border-radius: 999px;
padding: 6px 16px;
font-size: 13px;
font-weight: 600;
width: fit-content;
letter-spacing: .01em;
}
.happ-heading {
font-size: 40px;
font-weight: 800;
line-height: 1.22;
color: #0f172a;
margin: 0;
}
.happ-heading span { color: #2563eb; }
.happ-sub {
font-size: 16px;
color: #64748b;
line-height: 1.75;
margin: 0;
}
/* Feature chips */
.happ-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.happ-chip {
display: flex;
align-items: center;
gap: 9px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 10px 14px;
font-size: 13.5px;
font-weight: 500;
color: #334155;
transition: border-color .2s, box-shadow .2s;
}
.happ-chip:hover {
border-color: #bfdbfe;
box-shadow: 0 2px 8px rgba(37,99,235,.08);
}
.happ-chip i { color: #2563eb; font-size: 14px; width: 16px; text-align: center; }
/* Store buttons */
.happ-stores {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.happ-stores a { display: inline-block; transition: transform .15s, opacity .15s; }
.happ-stores a:hover { transform: translateY(-2px); opacity: .88; }
.happ-store-img {
height: 46px;
width: auto;
display: block;
}
.happ-platform-note {
display: flex;
align-items: center;
gap: 7px;
font-size: 13.5px;
color: #64748b;
margin-top: -10px;
}
.happ-platform-note .fa-android { color: #3ddc84; font-size: 16px; }
.happ-platform-note .fa-apple { color: #555; font-size: 16px; }
/* Stats row */
.happ-stats {
display: flex;
align-items: center;
gap: 20px;
background: #fff;
border-radius: 16px;
padding: 16px 22px;
border: 1px solid #e2e8f0;
width: fit-content;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.happ-stat {
display: flex;
align-items: center;
gap: 10px;
}
.happ-stat-ico {
width: 36px;
height: 36px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.happ-stat strong {
display: block;
font-size: 15px;
font-weight: 700;
color: #0f172a;
line-height: 1;
}
.happ-stat span {
font-size: 11px;
color: #94a3b8;
display: block;
margin-top: 2px;
}
.happ-stat-div {
width: 1px;
height: 34px;
background: #e2e8f0;
flex-shrink: 0;
}
/* Security badge */
.happ-security {
font-size: 13px;
color: #64748b;
display: flex;
align-items: center;
gap: 6px;
}
.happ-security i { color: #16a34a; }
/* ── RIGHT: image ── */
.happ-visual {
display: flex;
align-items: center;
justify-content: center;
}
.happ-visual-img {
width: 100%;
max-width: 600px;
height: auto;
display: block;
object-fit: contain;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.happ-layout { grid-template-columns: 1fr; gap: 40px; }
.happ-content { text-align: center; align-items: center; }
.happ-chips { justify-items: center; }
.happ-heading { font-size: 32px; }
.happ-visual-img { max-width: 440px; }
.happ-stats { flex-wrap: wrap; gap: 12px; justify-content: center; }
}
@media (max-width: 640px) {
.happ-section { padding: 56px 0 !important; }
.happ-heading { font-size: 26px; }
.happ-chips { grid-template-columns: 1fr; width: 100%; }
.happ-stores { flex-direction: column; align-items: flex-start; }
.happ-store-img { height: 42px; }
.happ-stats { width: 100%; justify-content: center; }
.happ-visual-img { max-width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════
SECTION 10B: PROVIDER TOOLS — hr-biz-*
═══════════════════════════════════════════════════════════════ */
.hr-biz-section {
padding: 80px 0 !important;
background: #f8faff;
}
.hr-biz-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
/* ── Base card — stacked layout (content top, visual bottom) for 3-col ── */
.hr-biz-card {
border-radius: 28px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
/* ── Card 1: Ads — dark navy ── */
.hr-biz-card--ads {
background: linear-gradient(145deg, #0c1525 0%, #0f2045 100%);
}
/* ── Card 2: Mail — dark indigo/purple ── */
.hr-biz-card--mail {
background: linear-gradient(145deg, #0f0a24 0%, #1e1050 100%);
}
/* ── Card 3: Notification Centre — dark emerald/teal ── */
.hr-biz-card--notify {
background: linear-gradient(145deg, #022c22 0%, #064e3b 100%);
}
/* ── Content side ── */
.hr-biz-content {
flex: 1; /* expands to fill card height → pushes visual to bottom */
padding: 28px 28px 20px;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: flex-start;
}
.hr-biz-tag {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
width: fit-content;
}
.hr-biz-card--ads .hr-biz-tag { background: rgba(96,165,250,.15); color: #93c5fd; }
.hr-biz-card--mail .hr-biz-tag { background: rgba(167,139,250,.15); color: #c4b5fd; }
.hr-biz-card--notify .hr-biz-tag { background: rgba(52,211,153,.15); color: #6ee7b7; }
.hr-biz-title {
font-size: 20px;
font-weight: 800;
color: #fff;
line-height: 1.25;
letter-spacing: -.02em;
margin: 0;
}
.hr-biz-desc {
font-size: 13px;
color: rgba(255,255,255,.6);
line-height: 1.7;
margin: 0;
}
.hr-biz-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.hr-biz-list li {
display: flex;
align-items: center;
gap: 9px;
font-size: 12.5px;
color: rgba(255,255,255,.75);
font-weight: 500;
}
.hr-biz-card--ads .hr-biz-list li i { color: #60a5fa; font-size: 11px; }
.hr-biz-card--mail .hr-biz-list li i { color: #a78bfa; font-size: 11px; }
.hr-biz-card--notify .hr-biz-list li i { color: #34d399; font-size: 11px; }
.hr-biz-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
width: fit-content;
margin-top: 4px;
transition: transform .18s, box-shadow .18s;
}
.hr-biz-cta:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.hr-biz-cta--light { background: #2563eb; color: #fff; }
.hr-biz-cta--purple { background: #7c3aed; color: #fff; }
.hr-biz-cta--teal { background: #059669; color: #fff; }
/* ── Visual side ── */
.hr-biz-visual {
display: flex;
align-items: center;
justify-content: center;
padding: 0 24px 28px;
}
/* ── Shared mock wrapper ── */
.hr-biz-mock {
width: 100%;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 16px 48px rgba(0,0,0,.45);
}
/* ── Ad mockup ── */
.hr-biz-mock--ads {
background: #fff;
}
.hr-biz-mock-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: #f8fafc;
border-bottom: 1px solid #f1f5f9;
font-size: 11px;
font-weight: 600;
color: #475569;
}
.hr-biz-mock-bar i { color: #2563eb; margin-right: 3px; }
.hr-biz-ad-banner {
margin: 10px;
background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
border-radius: 12px;
padding: 14px;
position: relative;
}
.hr-biz-ad-tag {
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.65);
margin-bottom: 4px;
}
.hr-biz-ad-clinic {
font-size: 13px;
font-weight: 800;
color: #fff;
line-height: 1.2;
}
.hr-biz-ad-spec {
font-size: 10.5px;
color: rgba(255,255,255,.7);
margin-top: 2px;
}
.hr-biz-ad-btn {
display: inline-block;
margin-top: 10px;
background: #fff;
color: #1d4ed8;
font-size: 11px;
font-weight: 700;
padding: 5px 14px;
border-radius: 999px;
}
.hr-biz-ad-metrics {
display: flex;
align-items: center;
justify-content: space-around;
padding: 12px 14px 8px;
}
.hr-biz-metric { text-align: center; }
.hr-biz-metric strong { display: block; font-size: 15px; font-weight: 800; color: #0f172a; }
.hr-biz-metric span { font-size: 10px; color: #94a3b8; }
.hr-biz-metric-div { width: 1px; height: 24px; background: #e2e8f0; }
.hr-biz-ad-graph { padding: 0 10px 10px; }
.hr-biz-ad-graph svg { width: 100%; height: auto; display: block; }
/* ── Mail mockup ── */
.hr-biz-mock--mail {
background: #fff;
}
.hr-biz-mail-hd {
display: flex;
justify-content: space-between;
align-items: center;
padding: 11px 14px;
background: #f8fafc;
border-bottom: 1px solid #f1f5f9;
font-size: 12px;
font-weight: 700;
color: #0f172a;
}
.hr-biz-mail-hd i { color: #7c3aed; margin-right: 5px; }
.hr-biz-mail-compose-btn {
font-size: 10.5px;
font-weight: 700;
color: #7c3aed;
cursor: pointer;
}
.hr-biz-mail-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid #f8fafc;
transition: background .15s;
}
.hr-biz-mail-row:hover { background: #fafbff; }
.hr-biz-mail-row--unread { background: #f5f3ff; }
.hr-biz-mail-row--unread .hr-biz-mail-name { font-weight: 800; }
.hr-biz-mail-av {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
flex-shrink: 0;
}
.hr-biz-mail-body { flex: 1; min-width: 0; }
.hr-biz-mail-name {
font-size: 12px;
font-weight: 600;
color: #0f172a;
line-height: 1.2;
}
.hr-biz-mail-subj {
font-size: 10.5px;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.hr-biz-mail-time {
font-size: 10px;
color: #94a3b8;
white-space: nowrap;
flex-shrink: 0;
}
.hr-biz-mail-footer {
padding: 10px 14px;
font-size: 11px;
color: #7c3aed;
font-weight: 600;
background: #faf8ff;
text-align: center;
}
/* ── Notification Centre mockup ── */
.hr-biz-mock--notify {
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.hr-biz-notif-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 10px;
font-size: 12px;
font-weight: 700;
color: #1e293b;
border-bottom: 1px solid #f1f5f9;
}
.hr-biz-notif-hd i { color: #059669; margin-right: 5px; }
.hr-biz-notif-live {
font-size: 10px;
font-weight: 700;
color: #059669;
display: flex;
align-items: center;
gap: 4px;
}
.hr-biz-notif-live i { font-size: 7px; color: #10b981; animation: biz-pulse 1.4s ease-in-out infinite; }
@keyframes biz-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .3; }
}
.hr-biz-notif-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-bottom: 1px solid #f8fafc;
}
.hr-biz-notif-ico {
width: 32px; height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.hr-biz-notif-ico--email { background: #eff6ff; color: #2563eb; }
.hr-biz-notif-ico--sms { background: #f0fdf4; color: #16a34a; }
.hr-biz-notif-ico--wa { background: #dcfce7; color: #15803d; }
.hr-biz-notif-body { flex: 1; min-width: 0; }
.hr-biz-notif-title {
font-size: 12px;
font-weight: 700;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hr-biz-notif-sub {
font-size: 10px;
color: #94a3b8;
margin-top: 1px;
display: flex;
align-items: center;
gap: 4px;
}
.hr-biz-notif-sub i { font-size: 9px; }
.hr-biz-notif-badge {
font-size: 9px;
font-weight: 700;
padding: 2px 7px;
border-radius: 20px;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: .4px;
}
.hr-biz-notif-badge--sent { background: #dbeafe; color: #1d4ed8; }
.hr-biz-notif-badge--delivered { background: #dcfce7; color: #15803d; }
.hr-biz-notif-stats {
display: flex;
align-items: center;
padding: 10px 14px;
gap: 0;
border-top: 1px solid #f1f5f9;
}
.hr-biz-notif-stat {
flex: 1;
text-align: center;
}
.hr-biz-notif-stat strong {
display: block;
font-size: 14px;
font-weight: 800;
color: #059669;
line-height: 1.1;
}
.hr-biz-notif-stat span {
display: block;
font-size: 9.5px;
color: #94a3b8;
margin-top: 1px;
}
.hr-biz-notif-stat-div {
width: 1px;
height: 28px;
background: #e2e8f0;
flex-shrink: 0;
}
.hr-biz-notif-channels {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border-top: 1px solid #f1f5f9;
}
.hr-biz-notif-ch {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
padding: 4px 9px;
border-radius: 20px;
}
.hr-biz-notif-ch--email { background: #eff6ff; color: #2563eb; }
.hr-biz-notif-ch--sms { background: #f0fdf4; color: #16a34a; }
.hr-biz-notif-ch--wa { background: #dcfce7; color: #15803d; }
.hr-biz-notif-ch i { font-size: 9px; }
/* ── Responsive ── */
@media (max-width: 1100px) {
.hr-biz-grid { grid-template-columns: 1fr; }
.hr-biz-card { flex-direction: row; min-height: 360px; }
.hr-biz-content { flex: 1; }
.hr-biz-visual { flex: 0 0 46%; max-width: 46%; }
}
@media (max-width: 768px) {
.hr-biz-card { flex-direction: column; min-height: 0; }
.hr-biz-visual { max-width: 100%; padding: 0 20px 24px; }
.hr-biz-content { padding: 28px 24px 20px; }
.hr-biz-title { font-size: 18px; }
}
/* ================================================================
LANDING PAGE — COMPREHENSIVE NATIVE MOBILE FIX
Covers every section at 992 / 768 / 480 / 360px
================================================================ */
/* ── 992px: tablet — collapse 3/4-col grids ─────────────── */
@media (max-width: 992px) {
/* Health Concerns — anatomy 3-column → single column */
.hr-hc-body {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.hr-hc-col--left,
.hr-hc-col--right { align-items: flex-start !important; }
.hr-hc-card { max-width: 100% !important; }
.hr-hc-anatomy { max-width: 320px !important; margin: 0 auto !important; }
.hr-hc-anatomy-img { max-height: 320px !important; width: 100% !important; object-fit: contain !important; }
.hr-hotspot { width: 32px !important; height: 32px !important; }
/* Specialists — 4-col → 2-col on tablet */
.hr-spec-featured { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ── 768px: phone — additions to existing block ─────────── */
@media (max-width: 768px) {
/* ── HERO: kill fixed height, go auto ── */
.hr-hero {
height: auto !important;
min-height: auto !important;
padding-top: 24px !important;
padding-bottom: 32px !important;
overflow: hidden !important;
}
.hr-hero-inner {
grid-template-columns: 1fr !important;
height: auto !important;
gap: 24px !important;
}
.hr-hero-left {
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.hr-hero-cta {
width: 100% !important;
box-sizing: border-box !important;
}
/* Trust badge — single line, don't overflow */
.hr-hero-trust {
font-size: 12px !important;
padding: 6px 14px 6px 6px !important;
margin-bottom: 18px !important;
max-width: 100% !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.hr-hero-av { width: 28px !important; height: 28px !important; }
/* Title — hide
so text wraps naturally; prevents "HealthcareThat Works" merge */
.hr-hero-title br { display: none !important; }
.hr-hero-title {
font-size: 32px !important;
line-height: 1.22 !important;
letter-spacing: -.025em !important;
margin-bottom: 10px !important;
word-break: break-word !important;
}
.hr-hero-tagline { font-size: 16px !important; margin-bottom: 10px !important; }
.hr-hero-sub { font-size: 14px !important; line-height: 1.65 !important; margin-bottom: 20px !important; max-width: 100% !important; }
/* CTA buttons — flex (not inline-flex) so width:100% actually works */
.hr-hero-cta { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin-bottom: 20px !important; }
.hr-btn-primary,
.hr-hero-cta-ai {
display: flex !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
justify-content: center !important;
align-items: center !important;
min-height: 52px !important;
font-size: 15px !important;
font-weight: 600 !important;
border-radius: 14px !important;
letter-spacing: .01em !important;
}
/* Service quick-access bar — horizontal scroll pill */
.hr-hero-svcbar {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
border-radius: 14px !important;
padding: 8px 12px !important;
gap: 0 !important;
margin-bottom: 16px !important;
}
.hr-hero-svcbar::-webkit-scrollbar { display: none !important; }
.hr-hero-svcbar-item {
flex-shrink: 0 !important;
padding: 4px 10px !important;
gap: 6px !important;
}
.hr-hero-svcbar-lbl { font-size: 12px !important; }
.hr-hero-svcbar-ico { width: 24px !important; height: 24px !important; font-size: 10px !important; }
/* Badge row — smaller compliance logos */
.hr-hero-badge-row { flex-wrap: wrap !important; gap: 10px !important; margin-top: 8px !important; }
.hr-hero-badge-img { height: 36px !important; }
/* Service cards grid (2×2) — scroll on narrow screens */
.hr-hero-svcs {
display: flex !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
flex-wrap: nowrap !important;
scrollbar-width: none !important;
gap: 8px !important;
padding-bottom: 4px !important;
}
.hr-hero-svcs::-webkit-scrollbar { display: none !important; }
.hr-hero-svc {
flex-shrink: 0 !important;
min-width: 120px !important;
}
/* Quick Access — image height */
.hr-qa-img-wrap { height: 160px !important; }
.hr-qa-card-title { font-size: 16px !important; }
/* Specialists — keep 2×2 on phone (not 1-col; 4 single-col cards = huge scroll) */
.hr-spec-featured { grid-template-columns: repeat(2, 1fr) !important; }
.hr-spec-feat-photo { height: 160px !important; }
/* Chips grid — collapse 5-col → 2-col */
.hr-spec-chips-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.hr-spec-chip-row { padding: 12px 12px !important; gap: 10px !important; }
.hr-spec-chip-ico { width: 36px !important; height: 36px !important; font-size: 14px !important; flex-shrink: 0 !important; }
.hr-spec-chip-name { font-size: 12.5px !important; }
.hr-spec-chip-sub { font-size: 10.5px !important; }
/* Card body — tighter for 2-col narrow cards */
.hr-spec-feat-body { padding: 12px 12px 14px !important; }
.hr-spec-feat-name { font-size: 14px !important; }
.hr-spec-feat-desc { font-size: 11.5px !important; display: none !important; }
.hr-spec-feat-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
.hr-spec-feat-cta { width: 100% !important; justify-content: center !important; font-size: 12px !important; padding: 8px 12px !important; }
.hr-spec-av-count { font-size: 10.5px !important; }
/* Section header */
.hr-spec-section { padding: 48px 0 !important; }
.hr-spec-hd-sub br { display: none !important; }
.hr-spec-hd-sub { font-size: 14px !important; }
/* How-it-Works steps — tighter padding */
.s5-card { padding: 18px 14px 16px !important; }
.s5-num { width: 26px !important; height: 26px !important; font-size: 10px !important; }
/* Why Patients — photo and floating rating */
.hw-photo { height: 240px !important; }
.hw-rating {
position: relative !important;
bottom: auto !important; right: auto !important;
margin: -32px auto 0 !important;
max-width: 200px !important;
}
.hw-card { padding: 14px 16px !important; }
/* MedAI tabs — scrollable */
.meetmed__ai_tabs {
overflow-x: auto !important;
overflow-y: hidden !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
justify-content: flex-start !important;
gap: 6px !important;
padding-bottom: 4px !important;
width: 100% !important;
max-width: 100% !important;
}
.meetmed__ai_tabs::-webkit-scrollbar { display: none !important; }
.meetmed__ai_tabbtn {
white-space: nowrap !important;
flex-shrink: 0 !important;
padding: 8px 14px !important;
font-size: 12px !important;
min-height: 40px !important;
}
/* Lab Tests — chips scrollable */
.lt-chips {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
flex-wrap: nowrap !important;
scrollbar-width: none !important;
gap: 8px !important;
padding-bottom: 6px !important;
}
.lt-chips::-webkit-scrollbar { display: none !important; }
.lt-chip { flex-shrink: 0 !important; }
.lt-photo { height: 260px !important; }
.lt-stats { width: 100% !important; }
/* Reviews — tighter */
.hr-rev-card { padding: 18px 16px !important; }
.hr-rev-score { font-size: 54px !important; }
/* FAQ — single column */
.hr-faq-inner { grid-template-columns: 1fr !important; }
.hr-faq-left-title { font-size: 26px !important; }
/* App section */
.happ-section { padding: 48px 0 !important; }
.happ-heading { font-size: 28px !important; }
/* Blog cards */
.hr-blog-img-wrap { height: 150px !important; }
.hr-blog-body { padding: 16px 18px 20px !important; }
/* Section headings — global tighten */
.hr-st { font-size: 28px !important; line-height: 1.2 !important; }
.hr-section-badge { font-size: 11px !important; }
}
/* ── 480px: small phones — additions to existing block ──── */
@media (max-width: 480px) {
/* Hero */
.hr-hero { padding-top: 16px !important; padding-bottom: 24px !important; }
.hr-hero-title br { display: none !important; }
.hr-hero-title { font-size: 26px !important; line-height: 1.22 !important; letter-spacing: -.025em !important; }
.hr-hero-tagline { font-size: 15px !important; }
.hr-hero-sub { font-size: 13px !important; margin-bottom: 16px !important; }
.hr-hero-trust { font-size: 11.5px !important; margin-bottom: 14px !important; }
.hr-hero-av { width: 24px !important; height: 24px !important; }
.hr-btn-primary,
.hr-hero-cta-ai { display: flex !important; min-height: 46px !important; font-size: 14px !important; }
.hr-hero-svcbar { padding: 6px 10px !important; }
.hr-hero-svcbar-item { padding: 4px 8px !important; }
.hr-hero-svcbar-lbl { font-size: 11px !important; }
.hr-hero-badge-img { height: 30px !important; }
.hr-hero-svc { min-width: 100px !important; padding: 10px 8px !important; }
.hr-hero-svc-ico { width: 28px !important; height: 28px !important; font-size: 13px !important; }
/* Quick Access */
.hr-qa-grid { grid-template-columns: 1fr !important; }
.hr-qa-img-wrap { height: 180px !important; }
.hr-qa-card-title { font-size: 15px !important; }
.hr-qa-body { padding: 14px 16px 16px !important; }
.hr-qa-card-cta { width: 100% !important; justify-content: center !important; }
/* Specialists — still 2-col at 480px, just tighter */
.hr-spec-featured { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.hr-spec-feat-photo { height: 140px !important; }
.hr-spec-feat-name { font-size: 13px !important; }
.hr-spec-feat-badge { font-size: 10px !important; padding: 4px 8px !important; }
/* Chips — 2-col at 480px */
.hr-spec-chips-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.hr-spec-chip-row { padding: 10px 10px !important; gap: 8px !important; }
.hr-spec-chip-ico { width: 32px !important; height: 32px !important; font-size: 13px !important; }
.hr-spec-chip-name { font-size: 12px !important; }
.hr-spec-chip-sub { font-size: 10px !important; }
/* How-it-Works */
.s5-card { padding: 14px 12px 12px !important; }
.s5-vcall-img { height: 90px !important; }
/* Why Patients */
.hw-photo { height: 200px !important; }
.hw-rating { max-width: 180px !important; padding: 10px 12px !important; }
.hw-rating-score { font-size: 26px !important; }
.hw-card { padding: 10px 12px !important; gap: 10px !important; }
.hw-card-ico { width: 36px !important; height: 36px !important; font-size: 15px !important; }
.hw-card-title { font-size: 13px !important; }
/* MedAI tabs — tighter */
.meetmed__ai_tabbtn { padding: 7px 10px !important; font-size: 11px !important; min-height: 38px !important; }
.meetmed__ai_card { padding: 16px 14px !important; }
.meetmed__ai_imagewrap { height: 200px !important; min-height: unset !important; }
.meetmed__ai_title { font-size: 19px !important; }
.meetmed__ai_desc { font-size: 13px !important; line-height: 1.6 !important; }
.meetmed__ai_list li { font-size: 13px !important; }
/* Lab Tests */
.lt-photo { height: 200px !important; }
.lt-feat-ico { width: 32px !important; height: 32px !important; font-size: 13px !important; }
.lt-feat h6 { font-size: 12.5px !important; }
.lt-feat p { font-size: 11.5px !important; }
/* Reviews */
.hr-rev-card { padding: 16px 14px 14px !important; }
.hr-rev-avatar { width: 40px !important; height: 40px !important; }
.hr-rev-name { font-size: 13px !important; }
.hr-rev-text { font-size: 12.5px !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; }
.hr-rev-score { font-size: 44px !important; letter-spacing: -1px !important; }
.hr-rev-stats-bar { flex-direction: column !important; gap: 8px !important; padding: 14px 16px !important; }
.hr-rev-footer { padding: 14px 16px !important; }
.hr-rev-nav-btn { width: 34px !important; height: 34px !important; font-size: 11px !important; }
/* CTA */
.hr-cta-card { padding: 28px 16px 0 !important; }
.hr-cta-title { font-size: 24px !important; line-height: 1.2 !important; }
.hr-cta-sub { font-size: 13.5px !important; max-width: 100% !important; }
.hr-cta-stat-text strong { font-size: 16px !important; }
.hr-cta-stat-text span { font-size: 11px !important; }
.hr-cta-stat-icon { width: 36px !important; height: 36px !important; font-size: 15px !important; }
.hr-cta-trust { font-size: 11.5px !important; gap: 6px !important; flex-wrap: wrap !important; justify-content: center !important; }
/* Blog */
.hr-blog-img-wrap { height: 130px !important; }
.hr-blog-body { padding: 14px 14px 16px !important; }
.hr-blog-title { font-size: 13px !important; }
.hr-blog-desc { font-size: 12px !important; }
.hr-blog-meta { font-size: 11px !important; }
/* FAQ */
.hr-faq-left-title { font-size: 22px !important; }
.hr-faq-q { padding: 14px 14px !important; }
.hr-faq-q-text { font-size: 13px !important; }
.hr-faq-a { padding: 0 14px 14px !important; font-size: 13px !important; }
.hr-faq-toggle { width: 24px !important; height: 24px !important; font-size: 10px !important; }
/* App download */
.happ-section { padding: 40px 0 !important; }
.happ-heading { font-size: 22px !important; line-height: 1.3 !important; }
.happ-chips { grid-template-columns: 1fr !important; }
.happ-chip { padding: 12px 14px !important; }
.happ-chip-title { font-size: 13px !important; }
.happ-stores { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
.happ-store-img { height: 40px !important; }
.happ-stats { gap: 12px !important; }
.happ-security { font-size: 12px !important; }
/* Doctor spotlight */
.hr-doc-quote { font-size: 18px !important; line-height: 1.35 !important; }
.hr-doc-creds { gap: 6px !important; }
/* Global section headings at 480px */
.hr-st { font-size: 24px !important; }
.hr-section-badge { font-size: 11px !important; padding: 6px 12px !important; }
}
/* ── 360px: ultra-small phones ──────────────────────────── */
@media (max-width: 360px) {
.hr-hero { padding-top: 12px !important; padding-bottom: 20px !important; }
.hr-hero-title { font-size: 24px !important; }
.hr-hero-tagline { font-size: 14px !important; }
.hr-hero-sub { font-size: 12.5px !important; }
.hr-btn-primary,
.hr-hero-cta-ai { display: flex !important; font-size: 13px !important; min-height: 44px !important; }
.hr-hero-badge-img { height: 26px !important; }
.hr-hero-svcbar-lbl { font-size: 10px !important; }
.hr-qa-card-title { font-size: 14px !important; }
.meetmed__ai_tabbtn { padding: 6px 9px !important; font-size: 10.5px !important; }
.hr-rev-score { font-size: 38px !important; }
.hr-rev-card { padding: 14px 12px !important; }
.hr-cta-title { font-size: 20px !important; }
.hr-cta-card { padding: 24px 12px 0 !important; }
.hr-cta-stat-text strong { font-size: 14px !important; }
.hr-st { font-size: 21px !important; }
.happ-heading { font-size: 20px !important; }
.hr-faq-left-title { font-size: 19px !important; }
.hr-faq-q-text { font-size: 12.5px !important; }
.hr-blog-title { font-size: 12px !important; }
/* Specialists — 1-col at 360px */
.hr-spec-featured { grid-template-columns: 1fr !important; }
.hr-spec-feat-photo { height: 180px !important; }
.hr-spec-chips-grid { grid-template-columns: 1fr !important; }
.hr-spec-feat-desc { display: block !important; font-size: 11px !important; }
}
/* ══ Reviews carousel ═══════════════════════════════════════
Convert the static grid into a flex carousel.
MUST come after all base rules so !important overrides work.
══════════════════════════════════════════════════════════ */
.hr-rev-grid {
overflow: hidden !important;
display: block !important;
/* Remove the grid layout so the track controls everything */
grid-template-columns: unset !important;
gap: 0 !important;
}
.hr-rev-track {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch;
transition: transform .42s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
/* Card dimensions are set by JS; only enforce flex behaviour here */
.hr-rev-card {
flex-shrink: 0 !important;
box-sizing: border-box;
/* height: auto so all cards in a "row" stretch to tallest */
}
/* ═══════════════════════════════════════════════════════════════
SPECIALIST SECTION — Full Responsive Fix
Adds the missing 769–992px tablet range and corrects the
overflow / cramping on phones.
══════════════════════════════════════════════════════════════ */
/* Grid-item min-width fix: prevents chip rows from forcing their
grid track wider than the 1fr allocation (default is min-width:auto
which uses min-content size and causes horizontal overflow). */
.hr-spec-chip-row {
min-width: 0 !important;
overflow: hidden !important;
}
/* Ensure name text clips rather than overflows when space is tight */
.hr-spec-chip-name {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
max-width: 100% !important;
}
/* ── Tablet: 769px – 992px (was completely unaddressed) ─────── */
@media (min-width: 769px) and (max-width: 992px) {
.hr-spec-section { padding: 60px 0 !important; }
.hr-spec-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
.hr-spec-featured { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
.hr-spec-feat-photo { height: 175px !important; }
.hr-spec-feat-name { font-size: 14px !important; }
.hr-spec-feat-desc { font-size: 12px !important; }
.hr-spec-chips-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
.hr-spec-chip-name { font-size: 12.5px !important; }
.hr-spec-chip-sub { font-size: 10.5px !important; }
}
/* ── Large phone: ≤ 640px — one card fills the width ─────────── */
@media (max-width: 640px) {
.hr-spec-section { padding: 44px 0 !important; }
.hr-spec-featured { grid-template-columns: 1fr !important; gap: 14px !important; }
.hr-spec-feat-photo { height: 195px !important; }
.hr-spec-feat-desc { display: block !important; font-size: 12px !important; }
.hr-spec-feat-body { padding: 14px 14px 16px !important; }
.hr-spec-feat-name { font-size: 15px !important; }
.hr-spec-feat-bottom { flex-direction: row !important; align-items: center !important; }
.hr-spec-feat-cta { width: auto !important; }
/* 2-col chips only if space allows; at this breakpoint phones can fit 2 cols */
.hr-spec-chips-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.hr-spec-chip-row { padding: 10px 10px !important; gap: 8px !important; }
.hr-spec-chip-ico { width: 30px !important; height: 30px !important; font-size: 13px !important; }
.hr-spec-chip-name { font-size: 11.5px !important; }
.hr-spec-chip-sub { font-size: 10px !important; }
.hr-spec-chip-arr { display: none !important; }
.hr-spec-viewall { display: none !important; }
}
/* ── Small phone: ≤ 480px — drop to 1 col, no more cramping ──── */
@media (max-width: 480px) {
.hr-spec-featured { grid-template-columns: 1fr !important; gap: 12px !important; }
.hr-spec-feat-photo { height: 185px !important; }
.hr-spec-feat-desc { display: block !important; font-size: 11.5px !important; }
.hr-spec-feat-name { font-size: 14px !important; }
.hr-spec-feat-badge { font-size: 10.5px !important; padding: 5px 10px !important; }
.hr-spec-feat-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
.hr-spec-feat-cta { width: 100% !important; justify-content: center !important; }
/* Single column — no overflow possible, text has full width */
.hr-spec-chips-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
.hr-spec-chip-row { padding: 12px 14px !important; gap: 12px !important; }
.hr-spec-chip-ico { width: 34px !important; height: 34px !important; font-size: 14px !important; }
.hr-spec-chip-name { font-size: 13px !important; white-space: nowrap !important; }
.hr-spec-chip-sub { font-size: 10.5px !important; display: block !important; }
.hr-spec-chip-arr { display: inline !important; }
.hr-spec-viewall { display: none !important; }
}
/* ═══════════════════════════════════════════════════════════════
TABLET COMPREHENSIVE FIX — 769px to 1024px
Closes layout gaps and eliminates overlaps section by section.
══════════════════════════════════════════════════════════════ */
/* ── Hero fix: all mid-sizes 769–1199px ─────────────────────
.hr-hero-img has width:130% + margin-right:-80px intentionally
for the desktop floating effect. At tablet those values make the
phone massive and it visually "bleeds" into the lavender .sts-section
(same background colour) below.
Also: .hr-hero-inner has height:calc(100vh-87px) — that fixed height
causes the inner to overflow the hero section at tablet.
──────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1199px) {
.hr-hero { height: auto !important; padding-bottom: 40px !important; }
.hr-hero-inner { height: auto !important; }
.hr-hero-img {
width: 100% !important;
max-width: 340px !important;
max-height: 360px !important;
margin-right: 0 !important;
object-fit: contain !important;
display: block !important;
margin-left: auto !important;
}
}
/* ── Full tablet range 769–1024px ──────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
/* Hero: already handled by 769–1199px block above */
/* Blog: base 3-col is too narrow at tablet; 2-col is correct */
.hr-blogs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
.hr-blogs-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
/* How-it-works: track wraps at 1024px but flex:1 cards have no
explicit width constraint — force exactly 2 per row */
.s5-card { flex: 0 0 calc(50% - 10px) !important; }
/* Section heading scale for mid-tablet */
.hr-st { font-size: 30px !important; }
/* CTA stats: 4-col at ~800px makes each stat ~190px — tight.
Collapse to 2×2 grid. */
.hr-cta-stats { grid-template-columns: repeat(2, 1fr) !important; }
.hr-cta-stat { border-right: none !important; border-bottom: 1px solid #e5eaf3 !important; padding-bottom: 14px !important; }
.hr-cta-stat:nth-child(odd) { border-right: 1px solid #e5eaf3 !important; }
.hr-cta-stat:nth-last-child(-n+2) { border-bottom: none !important; padding-bottom: 0 !important; }
}
/* ── Gap fill: 993px–1024px ─────────────────────────────────
Sections already fixed at ≤992px — extend those fixes upward
─────────────────────────────────────────────────────────── */
@media (min-width: 993px) and (max-width: 1024px) {
/* QA Carousel: at 993–1024px the ≤992px collapse rule stops, so the
grid reverts to repeat(4,1fr) — carousel outer gets only 3/4 width
(~225px per card). Extend the 1-col collapse to cover this range. */
.hr-qa-grid { grid-template-columns: 1fr !important; }
.hr-qa-carousel-outer { grid-column: 1 / -1 !important; }
.hr-qa-card--fixed-ai { grid-column: 1 / -1 !important; grid-row: auto !important; }
/* Health Concerns: 500px fixed center column in ~960px viewport
cramps the 1fr side columns — collapse to 1-col (mirrors 992px fix) */
.hr-hc-body {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.hr-hc-col--left,
.hr-hc-col--right { align-items: flex-start !important; }
.hr-hc-card { max-width: 100% !important; }
.hr-hc-anatomy { max-width: 280px !important; margin: 0 auto !important; }
.hr-hc-anatomy-img { max-height: 280px !important; width: 100% !important; object-fit: contain !important; }
.hr-hotspot { width: 32px !important; height: 32px !important; }
/* Specialist Featured: still 4-col at 993–1024px (992px fix stops at 992).
Each card is only ~231px — far too narrow. Force 2-col. */
.hr-spec-featured { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
.hr-spec-feat-photo { height: 175px !important; }
.hr-spec-feat-name { font-size: 14px !important; }
.hr-spec-feat-desc { font-size: 12px !important; }
.hr-spec-feat-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
.hr-spec-feat-cta { width: 100% !important; justify-content: center !important; }
/* Specialist chips: 3-col fits well at this width */
.hr-spec-chips-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
/* Specialist header: space-between layout risks overlap at ~1000px — stack */
.hr-spec-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
HEALTH CONCERNS — Mobile redesign ≤ 767 px
Design: skeleton image becomes a full-width featured visual at the top
(anatomy "window" card), then both card columns sit side-by-side below.
Cards are simplified to icon + name — list items hidden to save space.
Uses flexbox order to resequence without any HTML change.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.hr-hc-section { padding: 44px 0 !important; }
/* Switch from grid to flex-wrap so we can use `order` to float
the anatomy above both card columns */
.hr-hc-body {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 24px !important;
align-items: flex-start !important;
}
/* ── Anatomy: full-width row 1 (order:-1 pulls it before both cols) ── */
.hr-hc-anatomy {
order: -1 !important;
width: 100% !important;
max-width: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0 0 12px 0 !important;
padding: 20px 0 !important;
background: linear-gradient(160deg, #eef4ff 0%, #f5f8ff 100%) !important;
border-radius: 20px !important;
position: static !important; /* anatomy is position:relative in base */
}
.hr-hc-anatomy-img {
max-height: 230px !important;
max-width: 160px !important;
width: auto !important;
object-fit: contain !important;
}
/* Hotspots: too small to interact with at mobile scale — remove them */
.hr-hotspot { display: none !important; }
/* ── Card columns: sit side-by-side in row 2 ── */
.hr-hc-col--left,
.hr-hc-col--right {
flex: 1 !important;
min-width: 0 !important;
width: auto !important;
align-items: stretch !important;
gap: 6px !important;
order: 1 !important;
}
/* ── Compact card: icon + name only ── */
.hr-hc-card {
max-width: 100% !important;
width: 100% !important;
padding: 10px 8px !important;
gap: 8px !important;
align-items: center !important;
border-radius: 12px !important;
flex-direction: row !important;
}
.hr-hc-card-ico {
width: 32px !important;
height: 32px !important;
font-size: 13px !important;
border-radius: 8px !important;
flex-shrink: 0 !important;
min-width: 32px !important;
}
.hr-hc-card-content {
min-width: 0 !important;
overflow: hidden !important;
}
.hr-hc-card-content h4 {
font-size: 10.5px !important;
font-weight: 700 !important;
margin: 0 !important;
line-height: 1.3 !important;
white-space: normal !important;
}
/* Condition list takes too much space at this width — hide it */
.hr-hc-card-list { display: none !important; }
/* ── View All button: full-width centered ── */
.hr-hc-viewall {
display: flex !important;
width: 100% !important;
justify-content: center !important;
margin-top: 20px !important;
padding: 11px 24px !important;
font-size: 13px !important;
box-sizing: border-box !important;
}
}
/* ── Extra-small phones ≤ 380px: slightly more compact ── */
@media (max-width: 380px) {
.hr-hc-anatomy-img {
max-height: 190px !important;
max-width: 130px !important;
}
.hr-hc-card {
padding: 8px 6px !important;
gap: 6px !important;
}
.hr-hc-card-ico {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
font-size: 11px !important;
}
.hr-hc-card-content h4 { font-size: 9.5px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
APP DOWNLOAD SECTION — Mobile responsive fixes (≤ 767px)
Overrides the base ≤640px / ≤480px rules that ship with the section.
Key fixes:
• Chips stay 2-col (not 1-col) — halves the vertical chip stack
• Store badges displayed as centred row, NOT stretched column
• Stat dividers hidden; 3 stats space-around in one row
• App image gets a max-height so it doesn't dominate the screen
• All inline elements (trust-pill, platform-note, security) centred
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Reduce overall vertical gap in the content stack */
.happ-content { gap: 18px !important; }
/* ── Feature chips: 2-per-row (3 rows instead of 6) ── */
.happ-chips {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
justify-items: stretch !important;
gap: 8px !important;
width: 100% !important;
}
.happ-chip {
padding: 10px 12px !important;
font-size: 13px !important;
gap: 8px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.happ-chip i { font-size: 13px !important; }
/* ── Store buttons: side-by-side centred row (not stretched column) ── */
.happ-stores {
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
}
.happ-store-img {
height: 42px !important;
width: auto !important; /* maintain badge aspect ratio */
}
/* ── Centred inline items ── */
.happ-trust-pill { margin: 0 auto !important; }
.happ-platform-note { justify-content: center !important; }
.happ-security { justify-content: center !important; }
/* ── Stats: hide vertical dividers; distribute 3 stats evenly ── */
.happ-stats {
width: 100% !important;
box-sizing: border-box !important;
padding: 14px 16px !important;
justify-content: space-around !important;
gap: 0 !important;
}
.happ-stat-div { display: none !important; }
/* ── App image: cap height on mobile ── */
.happ-visual-img {
max-height: 360px !important;
max-width: 100% !important;
width: auto !important;
margin: 0 auto !important;
display: block !important;
}
}
/* ── Extra-small (≤ 480px): tighten further ── */
@media (max-width: 480px) {
.happ-chips { gap: 6px !important; }
.happ-chip {
padding: 9px 10px !important;
font-size: 12px !important;
gap: 6px !important;
}
.happ-chip i { font-size: 12px !important; }
.happ-stores { gap: 10px !important; }
.happ-store-img { height: 38px !important; }
.happ-stats { padding: 12px 12px !important; }
.happ-visual-img { max-height: 280px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
PATIENT REVIEWS — Mobile header fix (≤ 767px)
Root cause: appended ≤480px block set flex-direction:column on the stats
bar, stacking 10K+ / 4.8/5 / 98% into a tall vertical list.
Fix: restore horizontal row with column-layout per stat cell so the 3
items sit side-by-side and fit at any phone width.
Also hides the
in the title so "What Our Patients Are Saying" wraps
naturally instead of forcing "Are" onto a broken partial line.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* ── Heading: flow as one paragraph, hide forced break ── */
.hr-rev-title br { display: none !important; }
.hr-rev-title {
font-size: 28px !important;
line-height: 1.22 !important;
}
/* ── Stats bar: 3 items in a horizontal row ── */
.hr-rev-stats-bar {
flex-direction: row !important; /* override ≤480px column !important */
flex-wrap: nowrap !important;
justify-content: space-around !important;
align-items: center !important;
gap: 0 !important;
padding: 14px 10px !important;
}
.hr-rev-stat-sep { display: none !important; }
/* Each stat: icon stacked above value + label (column layout fits ~105px col) */
.hr-rev-stat {
flex: 1 !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 5px !important;
}
.hr-rev-stat-icon {
width: 30px !important;
height: 30px !important;
font-size: 12px !important;
}
.hr-rev-stat strong { font-size: 13px !important; line-height: 1.1 !important; }
.hr-rev-stat span { font-size: 10px !important; line-height: 1.3 !important; }
/* Score number: tighten for mobile */
.hr-rev-score { font-size: 48px !important; letter-spacing: -1px !important; }
.hr-rev-stars { font-size: 18px !important; }
.hr-rev-count { font-size: 12px !important; }
}
@media (max-width: 480px) {
.hr-rev-title { font-size: 24px !important; }
.hr-rev-score { font-size: 40px !important; }
.hr-rev-stats-bar { padding: 12px 8px !important; }
.hr-rev-stat-icon { width: 26px !important; height: 26px !important; font-size: 10px !important; }
.hr-rev-stat strong { font-size: 12px !important; }
.hr-rev-stat span { font-size: 9.5px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MEDICAL LEADERSHIP — Doctor image cut fix (≤ 767px)
Root cause: max-height: 320px (≤992px rule) + align-items: flex-end
clips the face when the portrait image is taller than the card.
Fix: remove the height cap entirely; anchor the image from the top so
the face is always visible. Allow the card to be as tall as the photo.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.hr-doc-img-card {
max-height: none !important; /* remove 320px clip */
height: auto !important;
min-height: 320px !important;
align-items: flex-start !important; /* anchor image top → face visible */
}
.hr-doc-img-card img {
width: 100% !important;
height: auto !important; /* natural aspect ratio */
object-fit: cover !important;
object-position: top center !important; /* if ever constrained, keep face */
}
}
/* ═══════════════════════════════════════════════════════════════════════════
BLOG ARTICLE IMAGES — height fix on mobile (≤ 767px)
Root cause: 130px image height at ≤480px on a full-width single-col card
makes images extremely wide and short, cutting important subject matter.
Fix: increase to 200px on mobile and anchor to top so faces/key subjects
are never cropped to the bottom.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.hr-blog-img-wrap {
height: 200px !important; /* was 130–150px — too shallow for full-width cards */
}
.hr-blog-img-wrap img {
object-position: top center !important; /* show subject top, not default center */
}
}