.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", "Times New Roman", serif;
}
.logi-btn {
  background-color: #37467d;
}

section[id] { scroll-margin-top: 100px; } 

.text-color {
  color: #3c742b;
}
#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: 48px; /* 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%;
}

/* 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,.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 .15s ease, box-shadow .2s ease, filter .2s ease;
}

/* Hover: slight lift + subtle darken */
.logi-btn:hover {
 background: #37467d;
  box-shadow: 0 8px 20px rgba(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,.15) inset;
  color: #fff;
}

/* Focus-visible: accessible outline */
.logi-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.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 .2s ease, color .2s ease,
              box-shadow .2s ease, transform .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,.15);
  text-decoration: none;
}

/* Active: pressed */
.btn-border:active {
  transform: translateY(0);
  box-shadow: inset 0 4px 12px rgba(0,0,0,.12);
  filter: brightness(.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;
}

/* 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: .25rem;           /* tweak as needed */
  transition: color .2s ease, border-color .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 */
}