.font-urbanist {
  font-family: "Urbanist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.font-roboto {
  font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
.font-playfair { font-family: "Playfair Display", Georgia, "Times New Roman", serif; }

.logi-btn {
  background-color: #37467d;
}
.contact {
  background-color: #f1f8ff;
}
section[id] {
  scroll-margin-top: 100px;
}

.background{
  background-color: #F1F8FF;
}

.text-color {
  color: #37467D;
}

.bg-top{
  background-color: #37467D;
}
/* keep image fixed within viewport on desktops; no effect on small screens */
@media (min-width: 992px) {
  .fixed-story-image {
    position: sticky;
    top: 100px; /* tweak to your header height */
  }
}

#medrefStoryCarousel .carousel-indicators {
  position: static; /* key: no overlay */
  gap: 8px;
  margin: 0;
}
#medrefStoryCarousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #cbd5e1; /* slate-300 */
  opacity: 1;
}
#medrefStoryCarousel .carousel-indicators .active {
  background-color: #1f2937; /* gray-800 */
}
#medrefStoryCarousel .btn.rounded-circle {
  width: 44px;
  height: 44px;
}
/* optional: subtle icon tint */
#medrefStoryCarousel .carousel-control-prev-icon,
#medrefStoryCarousel .carousel-control-next-icon {
  filter: invert(40%) sepia(6%) saturate(300%) hue-rotate(170deg)
    brightness(95%) contrast(88%);
}
/* Size & center the arrow icons inside round buttons */
#medrefStoryCarousel .nav-btn {
  --btn-size: 18px; /* touch-friendly */
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  padding: 0; /* no extra padding */
}

#medrefStoryCarousel .nav-btn .carousel-control-prev-icon,
#medrefStoryCarousel .nav-btn .carousel-control-next-icon {
  width: 18px; /* icon size */
  height: 18px;
  background-size: 100% 100%;
}
.btn-medref {
  background-color: #d3d4d5;
}
#medrefBenefitsCarousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #0b3d91; /* dark blue */
  opacity: 0.4; /* dim when inactive */
}

#medrefBenefitsCarousel .carousel-indicators .active {
  background-color: #072f6b; /* darker when active */
  opacity: 1;
  transform: scale(1.1);
}
/* Works with <button class="btn btn-medref"> */
.btn-medref {
  --bs-btn-color: #000;
  --bs-btn-bg: #d3d4d5;
  --bs-btn-border-color: #d3d4d5;

  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d3d4d5;
  --bs-btn-hover-border-color: #d3d4d5;

  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #d3d4d5;
  --bs-btn-active-border-color: #d3d4d5;

  --bs-btn-disabled-bg: #d3d4d5;
  --bs-btn-disabled-border-color: #d3d4d5;
}

/* if you want that special last dot via your bg-dot class */
#medrefBenefitsCarousel .carousel-indicators .bg-dot {
  background-color: #0b3d91 !important;
}
.bg-dot {
  background-color: blue;
}
/* optional tint for the default Bootstrap SVG icons */
#medrefStoryCarousel .nav-btn .carousel-control-prev-icon,
#medrefStoryCarousel .nav-btn .carousel-control-next-icon {
  filter: invert(35%) sepia(8%) saturate(300%) hue-rotate(170deg)
    brightness(95%) contrast(88%);
}
/* Same inner gap between image and text everywhere */
.uniform-row {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 2rem;
}
@media (max-width: 991.98px) {
  .uniform-row {
    --bs-gutter-x: 1.25rem;
  }
}

/* Optional: match wide side padding from your screenshot */
.section-edges {
  padding-left: 3rem;
  padding-right: 3rem;
}
@media (min-width: 1400px) {
  .section-edges {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

:root {
  --card-radius: 1.25rem; /* ~rounded-4 */
  --img-radius: 1rem;
  --arrow-size: 48px;
  --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 16px 40px rgba(0, 0, 0, 0.12);
  --bg-1: #eef9d9; /* light green */
  --bg-2: #d7f3ea; /* mint */
}

/* Page background like the screenshot */
.feature-section {
  background: linear-gradient(115deg, var(--bg-1), var(--bg-2));
}

/* Cards */
.feature-card {
  border: 0;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-soft);
  height: 100%;
}
.feature-card.feature-center {
  box-shadow: var(--shadow-strong);
}
.feature-card.feature-dim {
  opacity: 0.5;
}

/* Images */
.feature-img {
  width: 100%;
  height: clamp(180px, 26vw, 260px); /* responsive but close to screenshot */
  object-fit: cover;
  border-radius: var(--img-radius);
  display: block;
  margin-bottom: 1rem;
  filter: saturate(0.95) brightness(0.98);
}

/* Typography */
.feature-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.feature-eyebrow .emoji {
  font-size: 1.25rem;
  line-height: 1;
}
.feature-title {
  font-weight: 600;
  margin: 0;
  text-align: center;
}
.feature-text {
  color: #6c757d;
  text-align: center;
  margin: 0;
}

/* Carousel nav buttons (outside, vertically centered) */
/* make room for arrows outside the card area */
.carousel-wrapper {
  position: relative;
  overflow: visible;
}

/* shared arrow styles (keep yours if you already have them) */
.carousel-nav {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* how far OUTSIDE the cards the arrows sit */
:root {
  --nav-offset: 36px;
}
.carousel-nav.prev {
  left: calc(-1 * var(--nav-offset));
}
.carousel-nav.next {
  right: calc(-1 * var(--nav-offset));
}

/* keep them a bit closer on small screens so they don't go off-screen */
@media (max-width: 576px) {
  :root {
    --nav-offset: 12px;
  }
}

.btn-border {
  border: #37467d 1px solid;
}

@media (min-width: 992px) {
  :root {
    --pad-x: 72px;
  } /* was 48px */
}
@media (min-width: 992px) {
  .section-rails {
    padding-left: clamp(48px, 8vw, 160px) !important;
    padding-right: clamp(48px, 8vw, 160px) !important;
  }
}
/* ≤ 991.98px: tighten spacing, stack CTAs, keep image height reasonable */
@media (max-width: 991.98px) {
  .hero-connecting .hero-img-wrap {
    min-height: 220px !important;
  }
  .hero-connecting h1 {
    font-size: 1.5rem;
    line-height: 1.3;
  }
}

/* ≤ 575.98px: make buttons full-width and comfy */
@media (max-width: 575.98px) {
  .hero-connecting .btn {
    width: 100%;
  }
}

.prev-icon {
  color: black;
}

.carousel-nav-btn {
  width: 48px; /* min touch target */
  height: 48px;
  background: #fff; /* white bg */
  border: 0;
  border-radius: 9999px; /* circle */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  display: inline-flex; /* center icon */
  align-items: center;
  justify-content: center;
  padding: 0; /* size controlled by w/h */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2; /* above slides */
}
.carousel-nav-btn--prev {
  left: 0.5rem;
}
.carousel-nav-btn--next {
  right: 0.5rem;
}

/* Icon itself */
.carousel-nav-btn img {
  width: 18px;
  height: 18px;
  display: block; /* remove baseline gap */
  object-fit: contain;
  pointer-events: none; /* click hits the button */
}

@media (min-width: 992px) {
  .carousel-nav-btn {
    width: 56px;
    height: 56px;
  }
  .carousel-nav-btn img {
    width: 20px;
    height: 20px;
  }
}

/* Base look (works with any background you already set) */
.logi-btn {
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

/* Hover: slight lift + subtle darken */
.logi-btn:hover {
  background: #37467d;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  text-decoration: none; /* keep text un-underlined */
  color: #fff; /* keep text white */
}

/* Active: press down feel */
.logi-btn:active {
  transform: translateY(0);
  filter: brightness(0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) inset;
  color: #fff;
}

/* Focus-visible: accessible outline */
.logi-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logi-btn {
    transition: none;
  }
}
/* Outline button */
.btn-border {
  --btn-border-color: #37467d; /* change to your brand color */
  --btn-text-color: #37467d;

  border: 2px solid var(--btn-border-color);
  color: var(--btn-text-color);
  background: transparent;
  text-decoration: none;

  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    transform 0.15s ease;
}

/* Hover: fill + lift */
.btn-border:hover {
  background: var(--btn-border-color);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

/* Active: pressed */
.btn-border:active {
  transform: translateY(0);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.12);
  filter: brightness(0.95);
}

/* Keyboard focus: accessible ring */
.btn-border:focus-visible {
  outline: 2px solid #37467d;
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-border {
    transition: none;
  }
}

:root {
  --medref-start: #f1fee0;
  --medref-end: #c2e6da;
}

/* Strong utility with higher specificity + fallback */
section.bg-medref-gradient {
  background-color: var(--medref-start) !important; /* fallback */
  background-image: linear-gradient(
    135deg,
    var(--medref-start) 0%,
    var(--medref-end) 100%
  ) !important;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Gradient text for "Story Behind MedRef" */
.text-gradient {
  background-image: linear-gradient(90deg, #37467d 20%, #6dbf53 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
  display: inline-block; /* helps on some browsers */
}

/* Fallback (older browsers) */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .text-gradient {
    color: #37467d;
  }
}
/* Base link: reserve space so layout doesn't jump */
.navbar-nav .nav-link {
  border-bottom: 2px solid transparent;
  padding-bottom: 0.25rem; /* tweak as needed */
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Hover/focus (optional, matches the active color) */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #37467d;
  border-bottom-color: #37467d;
}

/* Active state */
.navbar-nav .nav-link.active {
  color: #37467d;
  border-bottom-color: #37467d; /* this is the visible underline */
}

.rotating-word.fade-out {
  opacity: 0;
}
.rotating-wrapper {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.fade-out {
  opacity: 0;
}

.green-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #28a745;
  border-radius: 50%;
}

/* ===== Center card pop motion for #featuresCarousel ===== */
#solution .cl-carousel {
  position: relative;
}



#solution .cl-carousel-rail {
  display: flex;
  gap: 1rem;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.25rem;
}
/* 3 visible cards on lg+ */
#solution .cl-carousel-slide {
  flex: 0 0 calc((100% - 2rem) / 3);
  scroll-snap-align: center;
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
/* Emphasize the active (center) card */
/* 1) Turn off any whole-card fading you added before */
.carousel-wrap .carousel-slide:not(.active) {
  filter: none !important;
  opacity: 1 !important; /* keep text crisp */
}

/* 2) Fade ONLY the image on non-active cards */
.carousel-wrap .carousel-slide:not(.active) .image {
  /* subtle image dim like your screenshot */
  filter: grayscale(0.6) saturate(0.9) brightness(0.95) blur(0.4px);
  opacity: 0.88;
}

/* Active image stays vivid */
.carousel-wrap .carousel-slide.active .image {

}
/* Non-active slides: text uses secondary color */
.carousel-wrap .carousel-slide:not(.active) h1,
.carousel-wrap .carousel-slide:not(.active) h2,
.carousel-wrap .carousel-slide:not(.active) h3,
.carousel-wrap .carousel-slide:not(.active) h4,
.carousel-wrap .carousel-slide:not(.active) h5,
.carousel-wrap .carousel-slide:not(.active) h6,
.carousel-wrap .carousel-slide:not(.active) p,
.carousel-wrap .carousel-slide:not(.active) li,
.carousel-wrap .carousel-slide:not(.active) small,
.carousel-wrap .carousel-slide:not(.active) .text,
.carousel-wrap .carousel-slide:not(.active) .label,
.carousel-wrap .carousel-slide:not(.active) a {
  color: var(--muted) !important;
}

/* If you have inline SVG icons, tint them too */
.carousel-wrap .carousel-slide:not(.active) svg {
  color: var(--muted) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* Flash icon only on the active slide heading */
.carousel-slide h3,
.carousel-slide h5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.carousel-slide.active h3::before,
.carousel-slide.active h5::before {
  content: "";
  width: 1.2em;                /* scales with font size */
  height: 1.2em;
  margin-right: 8px;
  display: inline-block;
  background: url("../images/icons/flash.svg") center/contain no-repeat;
  vertical-align: middle;
}


/* Active slide: keep headings strong (body can stay muted) */
.carousel-wrap .carousel-slide.active h1,
.carousel-wrap .carousel-slide.active h2,
.carousel-wrap .carousel-slide.active h3,
.carousel-wrap .carousel-slide.active h4,
.carousel-wrap .carousel-slide.active h5,
.carousel-wrap .carousel-slide.active h6 {
  color: #000; /* or var(--ink) */
}
.carousel-wrap .carousel-slide:not(.active) .image {
  filter: grayscale(0.6) saturate(0.9) brightness(0.95) blur(0.4px);
  opacity: 0.58;
}

/* 3) Small fade on the card chrome (shadow only, not text) */
.carousel-wrap .carousel-slide:not(.active) {
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.1);
}
.carousel-wrap .carousel-slide.active {
  box-shadow: var(--shadow-strong);
}

/* Use your existing external buttons; no Bootstrap JS needed */
#solution .carousel-nav-btn {
  z-index: 2;
}

/* Tablet: 2 cards */
@media (max-width: 991.98px) {
  #solution .cl-carousel-slide {
    flex: 0 0 calc((100% - 1rem) / 2);
  }
}
/* Mobile: 1 card */
@media (max-width: 575.98px) {
  #solution .cl-carousel-slide {
    flex: 0 0 100%;
  }
}

:root {
  --bg-1: #e9f7ef;
  --bg-2: #d9f1e5;
  --card: #ffffff;
  --ink: #2b2b2b;
  --muted: #667085;
  --shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
  --shadow-strong: 0 28px 60px rgba(16, 24, 40, 0.18);
  --ring: rgba(16, 24, 40, 0.06);
  --accent: #37467d;
}

* {
  box-sizing: border-box;
}

/* ---- Carousel ---- */
.carousel-wrap {
  position: relative;
}
.carousel-container {
  position: relative;
  height: 560px; /* tall like the screenshot */
  perspective: 800px;
  margin: 0 auto 10px;
  overflow: visible;
}
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.carousel-slide {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 360px;
  height: 460px;
  background: var(--card);
  border-radius: 28px;
  box-shadow: var(--shadow);
  transition: all 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px;
  gap: 14px;
  overflow: hidden;
}

/* Image block like your screenshot */
.carousel-slide .image {
  width: 100%;
  height: 230px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 10px 24px var(--ring);
}

.carousel-slide h3,
.carousel-slide h5 {
  margin: 6px 0 4px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: black;
}
.carousel-slide p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  padding: 0 6px;
}

/* Active is centered; side cards slide left/right, no 3D tilt */
.carousel-slide.active {
  transform: translate(-50%, -50%) scale(1.02);
  z-index: 10;
  box-shadow: var(--shadow-strong);
}
.carousel-slide.prev {
  transform: translate(calc(-50% - 390px), -50%) scale(0.96);
  filter: grayscale(0.75) opacity(0.92);
  z-index: 5;
}
.carousel-slide.next {
  transform: translate(calc(-50% + 390px), -50%) scale(0.96);
  filter: grayscale(0.75) opacity(0.92);
  z-index: 5;
}

/* Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  color: black;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
  cursor: pointer;
  color: black;
}
.dot.active {
  background: var(--accent);
  transform: scale(1.2);
}

/* Controls: put arrows at the sides like your screenshot */
.carousel-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #1c1c1c;
  font-size: 18px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.18);
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.arrow-btn:hover {
  transform: translateY(-50%) scale(1.06);
}
#prevBtn {
  left: -24px;
}
#nextBtn {
  right: -24px;
}

/* Play/Pause small pill below */
.play-wrap {
  margin-top: 20px;
}
.play-btn {
  background: #ffffff99;
  border: 0;
  padding: 10px 16px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  font-weight: 600;
  color: #123b26;
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.12);
}
.auto-play-status {
  display: inline-block;
  margin-left: 10px;
  color: #3b7557;
  font-weight: 600;
}
/* ===== Mobile-only slider behavior (≤576px) ===== */
@media (max-width: 575.98px) {
  /* Make the slider horizontally scrollable with snap */
  .carousel-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px; /* breathing room for arrows */
  }

  .carousel-track {
    /* flex row with gaps; disable any JS transforms on mobile */
    display: flex;
    gap: var(--slide-gap, 12px);
    transform: none !important;
    transition: none !important;
    padding: 0 12px;
  }

  /* Each slide takes most of the viewport width and snaps to center */
  .carousel-slide {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
    margin: 0; /* keep tight */
  }

  .carousel-slide .image {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Arrows overlay, still available on mobile */
  .carousel-arrows {
    position: absolute;
    inset: 0 0 auto 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    pointer-events: none; /* allow clicks only on buttons */
  }
  .carousel-arrows .arrow-btn {
    pointer-events: auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Dots */
  .carousel-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
  }
  .carousel-dots .dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: #d0d0d0;
    padding: 0;
  }
  .carousel-dots .dot.active {
    background: var(--bs-primary, #0d6efd);
  }
}
/* ===== Mobile-only centering for everything inside <main> ===== */
@media (max-width: 576px) {
  /* Center the whole main content area */
  main .content-wrap {
    text-align: center;
  }

  /* Center section titles and bodies */
  main .section-title,
  main .section-body {
    text-align: center;
  }

  /* Make cards centered with comfy spacing */
  main .card {
    margin-left: auto;
    margin-right: auto;
  }

  /* Lists: center + keep bullets readable */
  main .section-body ul,
  main .section-body ol {
    padding-left: 0;                 /* remove default left padding */
    list-style-position: inside;     /* keep bullets visible */
    margin-left: 0;                  /* no left indent */
    display: inline-block;           /* allows bullets to appear centered */
    text-align: left;                /* keeps multi-line list items aligned nicely */
  }

  /* Tweak individual list items spacing for readability */
  main .section-body li {
    margin: 0.35rem 0;
  }

  /* Center any images inside main content */
  main img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
  }

  /* Make long links wrap instead of overflowing */
  main .section-body a {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Keep the floating back-to-top button reachable on small screens */
  .floating-top {
    right: 0.75rem;
    bottom: 0.75rem;
  }
}

/* Optional: slightly widen mobile content since we’re centering */
@media (max-width: 576px) {
  :root {
    --content-max: 960px; /* only affects max width; keeps desktop behavior */
  }
}