/* =========================
   FULL STYLES.CSS (FINAL)
   Merged: original + responsive + icon-size fixes
   ========================= */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #ffffff;
  color: #3D4F5C;
  line-height: 1.6;
}

/* GLOBAL CONTAINER */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- TOP HERO ---------- */

.hero-top {
  background: linear-gradient(to right, #F5E6E6 0%, #F5E6E6 50%, #FFFFFF 50%, #FFFFFF 100%);
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

/* Logo row - unified across pages */
.hero-logo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  width: 100%;
  max-width: 580px;
  text-align: center;
}

.hero-logo-img {
  height: 80px;
  max-width: 100%;
  width: auto;
  display: block;
}

.hero-tagline {
  color: #6B7280;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  margin-top: 0.5rem;
}

/* When pages use a left/right top bar (buttons + logo center) keep the visual layout */
.hero-doctors-bar,
.hero-patients-bar,
.hero-hospitals-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.hero-doctors-bar .hero-logo-row,
.hero-patients-bar .hero-logo-row,
.hero-hospitals-bar .hero-logo-row {
  position: relative;
  order: 2;
  left: 0;
  transform: none;
}

/* Ensure side buttons don't push the logo off center */
.hero-doctors-bar > button,
.hero-patients-bar > button,
.hero-hospitals-bar > button {
  order: 1;
  min-width: 120px;
}

/* Main hero row */
.hero-main {
  width: 100%;
}

.hero-main-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  min-height: 430px;
  flex-wrap: wrap;
}

/* LEFT column */
.hero-left {
  flex: 0.9;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-right: 1rem;
}

.hospital-main-img {
  width: 260px;
  max-width: 100%;
  display: block;
  margin: 0 auto 1.75rem;
}

.section-title {
  color: #2E5F9E;
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.section-description {
  color: #3D4F5C;
  font-size: 1.1rem;
  line-height: 1.8;
}

/* Feature icons under HOSPITALS & similar */
.feature-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.feature-item {
  flex: 1;
  text-align: center;
  min-width: 120px;
  max-width: 33%;
}

.feature-image {
  width: 72px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 0.75rem;
}

.feature-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #3D4F5C;
  margin-bottom: 0.4rem;
}

.feature-description {
  font-size: 0.75rem;
  color: #6B7280;
}

.feature-description1 {
  font-size: 0.75rem;
  color: #6B7280;
}

/* RIGHT column - Sign in */
.hero-right {
  flex: 0.9;
  display: flex;
  flex-direction: column;
  align-items: center;  /* centers form in right half */
}

/* Post job wrapper at top-right */
.post-job-wrapper {
  align-self: flex-end;
  margin-bottom: 2.5rem;
}

.btn {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #EF5430;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #D64826;
}

.btn-secondary {
  background-color: #2E5F9E;
  color: #ffffff;
}

.btn-secondary:hover {
  background-color: #254D82;
}

.btn-full {
  width: 100%;
  padding: 0.875rem;
}

.btn-post-job {
  font-size: 0.9rem;
}

/* Sign in content (no card) */
.signin-block {
  width: 100%;
  max-width: 430px;
}

.signin-title {
  font-size: 2.1rem;
  font-weight: 700;
  color: #2E5F9E;
  margin-bottom: 0.25rem;
}

.signin-subtitle {
  font-size: 0.875rem;
  color: #6B7280;
  margin-bottom: 1.5rem;
}

/* Form elements */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  margin-bottom: 0.25rem;
  color: #3D4F5C;
  font-size: 0.875rem;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: #ffffff;
}

.form-input:focus {
  outline: none;
  border-color: #EF5430;
  box-shadow: 0 0 0 3px rgba(239, 84, 48, 0.1);
}

.form-footer {
  text-align: center;
  font-size: 0.875rem;
  color: #6B7280;
  margin-top: 1rem;
}

.form-footer a {
  color: #EF5430;
  font-weight: 600;
  text-decoration: none;
}

.form-footer a:hover {
  text-decoration: underline;
}

.plan-button {
  margin-top: 1.25rem;
}

.form-note {
  font-size: 0.75rem;
  text-align: center;
  color: #6B7280;
  margin-top: 1rem;
  line-height: 1.5;
}

/* ---------- HOW IT WORKS ---------- */

.how-it-works {
  background-color: #2E5F9E;
  padding: 4rem 1.5rem;
}

.section-title-white {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

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

.step-icon {
  margin-bottom: 1rem;
}

/* make step icons compact by default (keeps consistent with index) */
.step-icon-img {
  max-width: 80px;
  width: 80px;
  height: auto;
  display: block;
  margin: 0 auto 0.8rem;
}

.step-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.step-title2 {
  color: red ;
  align-self: center;
}
.step-title1 {
  color: pink;
  text-align: center;
}
.step-description {
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ---------- BENEFITS ---------- */

.benefits-section {
  background-color: #EF5430;
  padding: 4rem 1.5rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.benefits-content h2 {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: left;
}

/* two text columns inside benefits-content */
.benefits-columns {
  display: flex;
  gap: 3rem;
}

.benefits-col {
  flex: 1;
}

.benefit-item {
  margin-bottom: 1.5rem;
}

.benefit-title {
  color: #2E5F9E;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.benefit-description {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

/* 24/7 badge image */
.access-badge {
  text-align: center;
  color: #ffffff;
}

.badge-image {
  width: 260px;
  max-width: 100%;
  display: block;
  margin: 0 auto 1rem;
}

.badge-subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- RESPONSIVE ---------- */

/* Tablet / narrow desktop behavior */
@media (max-width: 992px) {
  .hero-main-inner {
    flex-direction: column;
    align-items: center;
    min-height: auto;
    gap: 3rem;
  }

  /* background becomes full peach; right block gets white panel feel */
  .hero-top {
    background: #F5E6E6;
  }

  .hero-right {
    background-color: #ffffff;
    padding: 2rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  .post-job-wrapper {
    align-self: flex-end;
  }

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

  .benefits-columns {
    flex-direction: column;
  }

  .access-badge {
    margin-top: 2rem;
  }

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

  /* steps icons slightly larger cap on tablet */
  .step-icon-img { max-width: 96px; width: 96px; }
}

/* small screens (phones/tablets) */
@media (max-width: 640px) {
  .feature-row {
    flex-direction: column;
  }

  .hero-logo-img {
    height: 80px;
  }

  .section-title,
  .section-title-white,
  .benefits-content h2 {
    font-size: 2rem;
  }
}

/* =========================
   DOCTORS PAGE SPECIFIC
   ========================= */

/* Top bar with two buttons + centered logo */
.hero-doctors-bar {
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

/* Doctors hero left column */
.hero-left-doctors {
  align-items: center;
  text-align: center;
}

.doctors-main-img {
  width: 260px;
  max-width: 100%;
  display: block;
  margin: 0 auto 1.75rem;
}

.doctors-subtitle {
  color: #3D4F5C;
  font-size: 1.05rem;
  margin-top: 0.25rem;
}

/* Doctors hero right column */
.hero-right-doctors {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}

/* App download buttons (reused for this page) */
.app-download {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.75rem;
  width: 100%;
  max-width: 260px;
}

.app-button {
  background-color: #000000;
  color: #ffffff;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.app-button:hover {
  opacity: 0.85;
}

.app-button-text {
  text-align: left;
}

.app-button-label {
  font-size: 0.75rem;
  display: block;
}

.app-button-name {
  font-size: 1.15rem;
  font-weight: 600;
  display: block;
}

.app-button-android {
  background-color: #1a1a1a;
}

/* Doctors monthly plan card */
.doctors-plan-card {
  background-color: #2E5F9E;
  border-radius: 0.5rem;
  padding: 1.1rem 1.5rem;
  margin-top: 1.25rem;
  max-width: 320px;
  text-align: center;
  color: #ffffff;
  font-size: 0.95rem;
}

.doctors-plan-main {
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.doctors-plan-sub {
  line-height: 1.5;
}

.doctors-note {
  margin-top: 1.5rem;
}

/* DOCTOR BENEFITS section (bottom orange band) */
.doctor-benefits {
  background-color: #EF5430;
  padding: 4rem 1.5rem;
}

.doctor-benefits-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 3rem;
  align-items: flex-start;
}

.doctor-benefits-text h2 {
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.doctor-benefits-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.doctor-benefits-col {
  font-size: 0.95rem;
}

.doctor-benefit-heading {
  color: #2E5F9E;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.doctor-benefit-list {
  list-style-type: disc;
  margin-left: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

/* Right side 24/7 block adjustments */
.doctor-access-badge {
  text-align: center;
}

/* Responsive tweaks for Doctors page */
@media (max-width: 992px) {
  .hero-doctors-bar {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hero-right-doctors {
    align-items: center;
  }

  .doctor-benefits-grid {
    grid-template-columns: 1fr;
  }

  .doctor-benefits-columns {
    grid-template-columns: 1fr;
  }

  .doctor-access-badge {
    margin-top: 2rem;
  }
}

/* =========================
   PATIENTS PAGE SPECIFIC
   ========================= */

/* Left column (hero) */
.hero-left-patients {
  align-items: center;
  text-align: center;
}

.patients-main-img {
  width: 260px;
  max-width: 100%;
  display: block;
  margin: 0 auto 1.75rem;
}

.patients-subtitle {
  color: #3D4F5C;
  font-size: 1.05rem;
  margin-top: 0.25rem;
}

/* Right column (hero) */
.hero-right-patients {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Big grey "details" in background */
.patients-details-bg {
  position: absolute;
  right: 5%;
  top: 20%;
  font-size: 7rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #E5E7EB;
  text-transform: lowercase;
  pointer-events: none;
  user-select: none;
}

/* First Quote button */
.patients-quote-btn {
  margin-top: 4rem;
  padding: 0.8rem 2.8rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.patients-note {
  margin-top: 1.5rem;
}

/* PATIENT BENEFITS section */
.patient-benefits {
  background-color: #EF5430;
  padding: 4rem 1.5rem;
}

.patient-benefits-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 3rem;
  align-items: flex-start;
}

.patient-benefits-text h2 {
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.patient-benefits-columns {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
}

.patient-benefits-col {
  font-size: 0.95rem;
}

.patient-benefit-heading {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.patient-benefit-body {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Right side 24/7 block tweaks */
.patient-access-badge {
  text-align: center;
}

/* Responsive tweaks */
@media (max-width: 992px) {
  .patient-benefits-grid {
    grid-template-columns: 1fr;
  }

  .patient-benefits-columns {
    grid-template-columns: 1fr;
  }

  .patient-access-badge {
    margin-top: 2rem;
  }

  .patients-details-bg {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    font-size: 5rem;
    top: 15%;
  }
}

/* =========================
   HOME / LANDING PAGE
   ========================= */

/* Top area background */
.home-top {
  background-color: #F5E6E6;
  padding: 2.5rem 1.5rem 3.5rem;
}

/* Three roles row */
.home-roles {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  margin-top: 2.5rem;
}

.home-role-card {
  flex: 1;
  text-align: center;
}

.home-role-img {
  width: 200px;
  max-width: 100%;
  display: block;
  margin: 0 auto 1.25rem;
}

/* Label with small white block and colored line under */
.home-role-label-wrapper {
  display: inline-block;
}

.home-role-label {
  padding: 0.6rem 1.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: #2E5F9E;
}

.home-role-underline {
  height: 4px;
  background: linear-gradient(to right, #EF5430 40%, #2E5F9E 60%);
}

/* Caption under cards */
.home-role-caption {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: #3D4F5C;
  line-height: 1.6;
}

/* WELCOME section */
.home-welcome {
  background-color: #FFFFFF;
  padding: 4rem 1.5rem 4.5rem;
}

.home-welcome-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 3rem;
  align-items: center;
}

.home-welcome-img {
  width: 100%;
  max-width: 380px;
  display: block;
  margin: 0 auto;
}

.home-welcome-title {
  color: #2E5F9E;
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.home-welcome-intro {
  color: #3D4F5C;
  line-height: 1.8;
  margin-bottom: 1.75rem;
}

.home-welcome-columns {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.5rem;
}

.home-welcome-block + .home-welcome-block {
  margin-top: 1.3rem;
}

.home-welcome-heading {
  color: #EF5430;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.home-welcome-body {
  color: #3D4F5C;
  line-height: 1.7;
  font-size: 0.95rem;
}

.role-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform .22s ease;
}

.role-link:hover {
  transform: translateY(-5px);
}

/* Responsive tweaks for home */
@media (max-width: 992px) {
  .home-roles {
    flex-direction: column;
    align-items: center;
  }

  .home-role-card {
    max-width: 360px;
  }

  .home-welcome-grid {
    grid-template-columns: 1fr;
  }

  .home-welcome-img {
    max-width: 320px;
  }

  .home-welcome-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------- MOBILE LAYOUT FOR HOME ROLES (PATIENTS / HOSPITALS / DOCTORS) ---------- */
@media (max-width: 600px) {

  .home-top {
    padding: 1.5rem 1rem 2rem;
  }

  .hero-logo-row {
    margin-bottom: 1.25rem;
  }

  .hero-logo-img {

    width: 100%;
    height:70%;
  }

  .home-roles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
  }

  .home-role-card {
    width: 100%;
    max-width: 260px;
    text-align: center;
    padding: 1px 0;
    margin: 0;
  }

  .home-role-img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain;
    display: block;
    margin: 0 auto 2px;
  }

  .home-role-label {
    font-size: 14px !important;
    margin-top: 2px;
    margin-bottom: 2px;
  }

  .home-role-underline {
    width: 34px;
    height: 3px;
    margin: 2px auto 4px;
  }

  .home-role-caption {
    font-size: 11px;
    line-height: 1.25;
    margin: 0 0 4px 0;
  }

  .hero-tagline{
    font-size: 12px !important;
  }
}

/* extra mobile spacing cleanup */
@media (max-width: 600px) {

  .hero-logo-row,
  .header-logo,
  .home-top,
  .hero-subtitle {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .home-roles {
    margin-top: -8px !important;
  }

  .hero-subtitle {
    line-height: 1.2 !important;
  }
}

/* Store badges on doctors page */
.app-download {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.75rem;
  width: 100%;
  max-width: 260px;
}

/* store badge image */
.store-badge img {
  display: block;
  width: 100%;
  height: auto;
}

/* Optional: center badges on smaller screens */
@media (max-width: 768px) {
  .hero-right-doctors {
    align-items: center;
  }

  .app-download {
    max-width: 240px;
  }
}

/* =========================
   RESPONSIVE IMPROVEMENTS + ICON CONSISTENCY
   ========================= */

/* Make all images fluid by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Cap large illustrations and allow scaling */
.doctors-main-img,
.patients-main-img,
.hospital-main-img,
.home-welcome-img,
.badge-image {
  max-width: 420px;
  width: 100%;
  height: auto;
}

/* Feature & step icons: consistent caps across pages */
.feature-image,
.step-icon-img,
.home-role-img,
.register-img,
.receive-img,
.getquotes-img,
.badge-image {
  max-width: 140px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Slightly smaller default for small feature icons */
.feature-image,
.step-icon-img {
  max-width: 110px;
}

/* Tighten hero columns to wrap cleanly on small screens */
.hero-main-inner {
  flex-wrap: wrap;
}

/* Remove inline-style margin-left if present (safety override) */
.hero-right[style] {
  margin-left: 0 !important;
}

/* Tablet adjustments */
@media (max-width: 992px) {

  .feature-image,
  .step-icon-img,
  .home-role-img {
    max-width: 120px;
  }

  .doctors-main-img,
  .patients-main-img,
  .home-welcome-img {
    max-width: 320px;
  }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .doctor-benefits-columns,
  .patient-benefits-columns,
  .home-welcome-columns,
  .benefits-columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .app-download {
    max-width: 280px;
  }
}

/* Mobile / phone adjustments */
@media (max-width: 600px) {

  /* Stack hero columns vertically */
  .hero-main-inner {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .hero-left,
  .hero-left-doctors,
  .hero-left-patients {
    width: 100%;
    min-width: 0;
    padding: 0;
  }


  /* center right-hand content on mobile (app badges, plan card) */
  .hero-right {
    align-items: center;
  }

  /* Reduce main illustrations to fit mobile */
  .doctors-main-img,
  .patients-main-img,
  .home-role-img,
  .home-welcome-img {
    max-width: 180px;
  }
.hospital-main-img{
    max-width: 200px;
}
  /* Feature icons become small consistent boxes */
  .feature-row {
    justify-content: space-between;
    gap: 0.6rem;
    margin-left: 10px;
  }
  .feature-item {
    width: 30%;
    min-width: 60px;
    max-width: 110px;
  }
  .feature-image {
    max-width: 72px;
  }

  /* Steps -> single column on mobile */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Benefits -> single column */
  .doctor-benefits-columns,
  .patient-benefits-columns,
  .home-welcome-columns,
  .benefits-columns {
    grid-template-columns: 1fr;
  }

  /* compact the app badges */
  .app-download {
    max-width: 220px;
    gap: 0.6rem;
  }

  /* home roles - vertical stacked option */
  .home-top {
    padding: 1rem 1rem 1.5rem;
  }

  .hero-logo-row {
    margin-bottom: 6px;
  }

  .home-roles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .home-role-card {
    width: 100%;
    max-width: 240px;
    padding: 2px 0;
    margin: 0;
  }

  .home-role-img {
    width: 100px !important;
    height: 80px !important;
    object-fit: contain;
    margin: 0 auto 4px !important;
  }

  .home-role-label {
    font-size: 14px !important;
    margin: 2px 0 !important;
  }

  .home-role-underline {
    width: 30px !important;
    height: 3px;
    margin: 2px auto 4px;
  }

  .home-role-caption {
    font-size: 11px !important;
    line-height: 1.2;
    margin: 0 0 4px 0;
  }

  /* tighten header spacing */
  .hero-logo-row,
  .header-logo,
  .home-top,
  .hero-subtitle {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* doctors page tweak */
  .hero-right-doctors {
    margin-top: 16px;
    align-items: center;
  }

  .doctors-plan-card {
    margin-left: 0;
    margin-top: 8px;
    max-width: 260px;
  }

  .feature-title {
    font-size: 0.82rem;
  }

  .feature-description{
    margin-left: -30px;
    width: max-content;
  }

  .feature-description1{
    margin-left: -45px;
    width: max-content;
  }
  
  .home-role-caption,
  .step-description {
    font-size: 12px;
  }
}

/* Ultra small screens */
@media (max-width: 360px) {

  .home-role-img {
    width: 68px !important;
    height: 68px !important;
  }

  .feature-image {
    max-width: 60px;
  }

  .doctors-main-img,
  .patients-main-img {
    max-width: 160px;
  }

  .store-badge img {
    max-width: 200px;
  }

  .section-title {
    font-size: 20px;
  }

  .doctors-plan-card {
    padding: 0.75rem 1rem;
    font-size: 13px;
  }
}

/* Final helpful overrides and cleanup */
/* Prevent any inline style margin-left used earlier from breaking responsive alignment */
.hero-right[style] {
  margin-left: 0 !important;
}

/* Ensure app badges scale nicely and are clickable */
.store-badge img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 8px;
}

/* =========================
   ICON SIZE TIDY-UP (How it works / Patients features)
   Ensures consistent compact icons across pages (index-like)
   ========================= */

/* How It Works - compact icons */
.how-it-works .step-icon-img {
  max-width: 80px !important;
  width: 80px !important;
  height: auto !important;
  margin: 0 auto 0.8rem !important;
}

/* Patient / Hospital / Doctor feature icons - small and consistent */
.feature-row .feature-image,
.patient-benefits .feature-image,
.hero-left-patients .feature-image,
.hero-left .feature-image{
  max-width: 100px !important;
  width: 100px !important;
  height: auto !important;
  margin: 0 auto 0.6rem !important;
}

.home-role-img {
  max-width: 200px ;
  width: 200px;
  height: auto !important;
  margin: 0 auto 0.6rem !important;
}

/* Ensure block display and horizontal centering */
.step-icon-img,
.feature-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Tighten title spacing under icons */
.step-title,
.feature-title {
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

/* Mobile: make icons even smaller to fit */
@media (max-width: 600px) {
  .how-it-works .step-icon-img {
    max-width: 64px !important;
    width: 64px !important;
  }

  .feature-row .feature-image,
  .hero-left-patients .feature-image{
    max-width: 60px !important;
    width: 60px !important;
  }

  .feature-title,
  .step-title {
    font-size: 0.88rem;
    width: max-content;
    margin-left: -50px;
  }

  .feature-item,
  .step-item {
    padding-bottom: 6px;
  }
}