body.mobile {
/* ===== Mobile Overrides for BENU campaign (Bootstrap 5 friendly) ===== */
:root{
  --radius: 14px;
}

/* Typography scaling */
h1 { font-size: clamp(24px, 6vw, 44px); line-height: 1.15; }
h2 { font-size: clamp(20px, 4.8vw, 34px); line-height: 1.2; }
h3 { font-size: clamp(18px, 4vw, 26px); line-height: 1.25; }
.lead { font-size: clamp(16px, 3.8vw, 20px); }

/* Images */
img, svg, picture, video, canvas { max-width: 100%; height: auto; }
.object-fit-cover { object-fit: cover; width: 100%; height: 100%; }

/* Cards */
.card, .icon-card, .qa-card, .testimonial {
  border-radius: var(--radius);
}
.icon-card { background:#fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.qa-card{
  color:#fff; background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.testimonial{ background:#f7fbff; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.avatar{ width:56px; height:56px; object-fit:cover; border-radius:50%; }

/* Hero section spacing */
.hero{ padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 992px){
  .hero{ padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* Section rhythm */
section + section { margin-top: 2rem; }
@media (min-width: 992px){ section + section { margin-top: 2.5rem; } }

/* List with checks */
.list-checked{ list-style:none; padding-left:0; }
.list-checked li{ position:relative; padding-left:1.6rem; margin-bottom:.5rem; }
.list-checked li::before{ content:"✓"; position:absolute; left:0; top:0; }

/* Background helpers */
.bg-gradient-blue{ background: linear-gradient(180deg,#0e6ba8 0%, #0b4e86 100%); }
.bg-light-ice{ background: #f4f9ff; }

/* Utilities if Bootstrap grid isn't present on some blocks */
@media (max-width: 991.98px){
  .stack-md, .stack-lg, .stack {
    display: flex;
    flex-direction: column !important;
  }
  .stack-md > *, .stack-lg > *, .stack > * { width: 100% !important; }
}

/* Make big side-by-side image/text blocks stack on mobile */
@media (max-width: 991.98px){
  .row.g-0.align-items-center > [class*="col-"],
  .row.align-items-center > [class*="col-"],
  .split, .split > * {
    width:100% !important;
  }
  .order-md-1 { order: 0 !important; }
  .order-md-2 { order: 0 !important; }
  .p-hero-img { max-height: 320px; }
}

/* Buttons full-width on small screens */
@media (max-width: 575.98px){
  .btn-block-sm, .btn.btn-lg, .btn.btn-primary, .btn.btn-success, .btn.btn-outline-light {
    width: 100%;
  }
}

/* Form blocks: padding and alignment */
form .form-label{ font-weight:600; }
@media (max-width: 767.98px){
  .form-inline-collapse, .form-row-collapse { display:block !important; }
  .form-inline-collapse .form-control,
  .form-row-collapse .form-control { width:100% !important; }
}

/* Footer fine-tune */
footer .logo-row { gap: 1rem; }
footer .small, footer small { line-height: 1.55; }

/* Navigation: ensure hamburger is tappable (even if custom nav) */
.navbar-toggler { padding: .5rem .75rem; font-size: 1.25rem; line-height: 1; border: none; }
.navbar-toggler:focus { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }

/* Prevent layout jump on sliders by setting min-heights on cards on mobile if needed */
@media (max-width: 575.98px){
  .equalize-mobile > *{ min-height: 240px; }
}

/* Smooth scroll for anchor links */
html { scroll-behavior: smooth; }


/* === Targeted fixes: NAVBAR & HERO (mobile) === */
.navbar{ background:#fff; }
.navbar .container{ display:flex; align-items:center; justify-content:space-between; }
.navbar-brand img{ height:52px; width:auto; }

/* Ensures toggler is visible regardless of navbar-light/dark */
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px){
  /* reflow right column content cleanly in collapsed state */
  #mainNav .text-end{ display:none; } /* hide slogan row on mobile */
  .navbar-collapse{ padding-top:.25rem; padding-bottom:.5rem; }
  .navbar-nav .nav-link{ padding: .4rem 0; }

  /* keep brand + toggler on one line */
  .navbar .container{ flex-wrap: nowrap; }
}

/* HERO spacing & readability */
.hero{ padding-top: clamp(16px, 4vw, 32px); padding-bottom: clamp(24px, 6vw, 48px); }
@media (max-width: 767.98px){
  .hero h1{ font-size: clamp(22px, 6.2vw, 32px); line-height:1.2; }
  .hero .lead{ margin-top: 1rem !important; margin-bottom: 1.25rem !important; }
  .hero .hero-cta{ display:inline-flex; align-items:center; gap:.5rem; }
}


/* Mobile navbar slogan always visible under brand row */
.navbar-slogan{ display:block; }
.navbar-slogan img{ vertical-align: middle; margin-right:.25rem; height: 28px; width: auto; }
.navbar-slogan .slogen{ font-weight:700; letter-spacing:.02em; font-size: 80%; }

@media (min-width: 992px){
  .navbar-slogan{ display:none; }
}


/* === Refined mobile navbar layout === */
@media (max-width: 991.98px){
  .navbar { position: relative; z-index: 1030; }
  .navbar .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; }
  .navbar-brand{ order: 1; }
  .navbar-toggler{ order: 1; }
  .navbar-slogan{ order: 2; width: 100%; text-align: center; padding: .25rem 0 .35rem; }
  /* Collapsed menu occupies full width on a new row */
  .navbar-collapse{ order: 3; width: 100%; }
  .navbar-collapse.show{
    display:block;
    background: #ffffff;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    padding: .25rem 0 .5rem;
  }
  .navbar-nav{ padding: .25rem .75rem; }
  .navbar-nav .nav-link{ display:block; padding: .4rem .25rem; }
}

/* === Hero: ensure text clears the hand image on mobile === */
@media (max-width: 767.98px){
  .hero{ padding-top: clamp(300px, 30vh, 160px) !important; }
  .hero h1{ margin-top: 0 !important; }
}
.river-nav i {
  font-size: 1.6rem;
}
.medicine-steps h2 {
  font-size: 1.8rem;
}
.expired-meds {
  padding-bottom: 50px;
}
.divider-section .divider-text {
  font-size: 1.8rem;
}
.divider-section img {
  width: 70px;
  height: auto;
}

/* === Ambassadors: mobile stacked, all open === */
@media (max-width: 991.98px){
  #ambassadors.amb-mobile .amb-track{
    display: block;
    height: auto !important;
  }
  #ambassadors.amb-mobile .amb-card{
    display: block;
    margin-bottom: 1rem;
  }
  #ambassadors.amb-mobile .amb-nav{ display: none !important; }
}


/* Ambassadors mobile typography and quote positioning */
@media (max-width: 991.98px){
  #ambassadors.amb-mobile .amb-card{
    margin-bottom: 50px;
    --quote-w2: 90%;
    --quote-pad2: 15px 20px;
    --quote-inset2: 24px 16px auto auto;
  }
  #ambassadors .amb-quote{
    /*inset: var(--quote-inset2, 24px 24px auto auto) !important;
    max-width: var(--quote-w2, 80%) !important;*/
    padding: var(--quote-pad2, 16px 10px) !important;
    inset: unset !important;
    max-width: unset !important;
  }
}


/* === Ambassadors mobile layout & quote positioning (final) === */
@media (max-width: 991.98px){
  #ambassadors .amb-card{
    margin-bottom: 28px;
  }
  #ambassadors .amb-photo{
    position: relative;
  }
  /* Blue rounded panel for quote */
  #ambassadors .amb-quote{
    position: absolute;
    left: 50%;
    /*transform: translateX(-50%);*/
    bottom: 18px;
    width: min(100%, 420px);
    padding: 16px 18px;
    border-radius: 16px;
    color: #fff;
    text-align: left;
    line-height: 1.25;
	font-size: 0.95rem;
  }
  #ambassadors .amb-quote p{ margin:0; }
  #ambassadors .amb-card .amb-img{
    display:block; width:100%; height:auto;
  }
  /* Name/role block spacing */
  #ambassadors .amb-card + .amb-meta,
  #ambassadors .amb-meta{ margin-top: 8px; }
}
.divider-section {
  margin-top: 0;
}
@media (max-width: 767.98px){
  .footer .footer-logos{
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .footer .footer-logo{
    max-width: 220px; width: 100%; height: auto;
  }
  .footer .footer-divider{ margin-top: 12px !important; }
}
@media (min-width:768px) and (max-width:991.98px){
  .footer .footer-logos{ gap: 24px; }
}
.footer .container {
  text-align: center !important;
}
}