/* ===================================================================
   Columbus Parks & Recreation — Homepage Styles
   Organized: variables -> base/typography -> layout sections -> components
   =================================================================== */

/* ---------- CSS Variables ---------- */
:root {
  --primary-orange: #e8632c;
  --primary-orange-dark: #C94D12;
  --primary-orange-darker: #C94D12;
  --primary-orange-darkest: #8a3110;
  --dark-blue: #002A48;
  --dark-blue-light: #1b3c58;
  --park-green: #2f6e31;
  --park-green-dark: #1f4d22;
  --light-cream: rgba(244, 221, 196, 1);
  --light-cream-dark: #ecd8b4;

  /* Brand tokens supplied directly by the design file */
  --Colors-Main: rgba(242, 103, 36, 1);
  --footer-copyright-bg: rgba(223, 83, 16, 1);
  --engage-card-gradient: linear-gradient(272.14deg, rgba(255, 255, 255, 0) -26.69%, rgba(255, 255, 255, 0.2) 143.48%);
  --text-dark: #1F2933;
  --text-muted: #5b5651;
  --white: #ffffff;
  --gray-100: #f8f7f5;
  --gray-300: #ddd8d0;
  --focus-color: #000000;

  --font-heading: 'Libre Franklin', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Libre Franklin', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  /* Type scale from spec */
  --fs-h1: 3.625rem; /* 58px */
  --fs-h2: 3rem;      /* 48px */
  --fs-p: 1rem;       /* 16px */

  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  /* Belt-and-suspenders guard against accidental horizontal scroll.
     Deliberately NOT on body: setting overflow-x there forces
     overflow-y to compute to `auto`, turning body into its own scroll
     container and breaking `position: sticky` on .main-nav in Safari
     and other browsers. */
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}




/* ---------- Fade-up reveal animations ----------
   Two variants:
   - .fade-up-load: pure CSS, plays immediately once on page load. Used
     for above-the-fold hero content, so it never depends on JS running.
   - .fade-up: starts hidden; JS (IntersectionObserver, see script.js)
     adds .is-visible the first time each element scrolls into view.
     The <noscript> rule in <head> forces these visible if JS is off.
   Both read the same .fade-delay-* utilities for staggering a group of
   siblings (cards, list rows, stat items). */
@keyframes fadeUpIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up-load {
  animation: fadeUpIn 0.6s ease both;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-delay-1 { animation-delay: 0.1s; transition-delay: 0.1s; }
.fade-delay-2 { animation-delay: 0.2s; transition-delay: 0.2s; }
.fade-delay-3 { animation-delay: 0.3s; transition-delay: 0.3s; }
.fade-delay-4 { animation-delay: 0.4s; transition-delay: 0.4s; }
.fade-delay-5 { animation-delay: 0.5s; transition-delay: 0.5s; }

body {
   font-family: "Libre Franklin", sans-serif;
  font-size: var(--fs-p); /* 16px */
  color: var(--text-dark);
  background-color: var(--white);
}

h1, h2, h3, h4, .section-heading {
  font-family: var(--font-heading);
  font-weight: normal;
}

a {
  color: var(--primary-orange);
}

a:hover {
  color: var(--primary-orange-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container, .container-fluid {
  max-width: 100%;
}

/* ---------- Section side padding ----------
   Design calls for 160px left/right on desktop. Scaled down at smaller
   breakpoints so mobile/tablet keep readable content width and no
   horizontal scroll. */
.section-px {
  padding-left: 1.25rem;
  padding-top: 0 !important;
    padding-bottom: 0 !important;
  padding-right: 1.25rem;
}

.main-nav {
    transition: transform 0.5s ease-in-out;
}

body.is-sticky .main-nav {
position: fixed;
  z-index: 9999;
  transform: translateY(-20px);
  right: 30px;
  top: 80px;
}

.utility-header__actions {
    transition: transform 0.5s ease-in-out;
}

body.is-sticky .utility-header__actions {
    transform: translateY(-20px);
}


@media (min-width: 576px) {
  .section-px {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .section-px {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 992px) {
  .section-px {
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
}

@media (min-width: 1200px) {
  .section-px {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ---------- Focus visibility (WCAG 2.2 AA) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.explore-card__link:focus-visible,
.engage-card__link:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Ensure focus remains visible on dark backgrounds too */
.manager-section a:focus-visible,
.schedule-section a:focus-visible,
.engage-section a:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 3px var(--dark-blue);
}

/* ---------- Skip Link ---------- */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 2000;
  background: var(--primary-orange);
  color: var(--white);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s ease-in-out;
}

.skip-link:focus {
  top: 0.5rem;
}

/* ---------- Utility Header ---------- */
.utility-header {
  background: var(--white);
}

.utility-header .utility-section {
  padding: 20px 0 !important;
}


.brand-logo {
  margin-bottom: 24px;
}

.brand-logo__mark {
  margin-right: 0.6rem;
}

.brand-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-logo__eyebrow {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.brand-logo__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-dark);
}

.utility-header .brand-logo__amp {
  /* Darker than --primary-orange so this bold, small-size glyph still
     reaches 4.5:1 against the *white* header background (WCAG 2.2 AA).
     Scoped to the header only — the footer logo sits on an orange fill
     and inherits white from .site-footer instead (see below). */
  color: var(--primary-orange-darker);
}

.site-footer .brand-logo__amp {
  color: var(--white);
}

.brand-logo__place {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.utility-link {
  font-size: 1rem;
  color: var(--text-dark);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #D9D9D9;
  padding:6px 25px;
  border-radius: 95px;
}

.utility-link:hover,
.utility-link:focus-visible {
  color: var(--primary-orange);
}

.lang-select {
  width: auto;
  font-size: 0.85rem;
  border-color: var(--gray-300);
}

.lang-select-icon {
  color: var(--text-muted);
}

.follow-us__label {
  font-weight: normal;
  color: #C94D12;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: none;
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
}

.list-inline-item:not(:last-child) {margin-right:0 !important}



.social-icon--footer {
}


/* ---------- Fixed header (utility bar + main nav, together) ----------
   Both bars live inside .site-header-fixed, which is the thing that's
   actually sticky — so they scroll away and lock to the top of the
   viewport together as one unit, with no separate offset math needed
   and no layout jump (sticky reserves its own space in flow). script.js
   toggles .is-stuck once the page has scrolled at all, so the shadow
   eases in smoothly rather than being permanently on. */
.site-header-fixed {
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow 0.35s ease;
  box-shadow: 0 8px 44px #FEF0E9E0;
}

.site-header-fixed.is-stuck {
  box-shadow:0 8px 34px #FEF0E973;
}

/* ---------- Main Navigation ---------- */
/* .main-nav {
  background: var(--white);
} */

.navbar-expand-lg .navbar-nav .nav-link {padding-right: 1.063rem;
    padding-left: 1.063rem;}

.main-nav .nav-link {
  color: var(--text-dark);
  font-weight: 500;
  padding:0.313rem 1rem;
  border-radius: 11px !important;
  min-height: 33px;
  display: flex;
  align-items: center;
}

.main-nav .nav-link:hover {
  color: var(--primary-orange-dark);
}

.main-nav .nav-link.active {
  background:#FEF0E9 !important;
  color:#9E3A08 !important;
  padding-left: 1.938rem;
  padding-right: 1.938rem;
}

.col-lg-5.menu-section {
  padding: 0 !important;
  margin: 0 !important;
}

.utility-header .main-nav.navbar.navbar-expand-lg {
  display: none;
}

.goog-te-gadget img {display: initial;}

.hero-section.hero-section-inside .col-lg-12.menu-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
}


.hero-section.hero-section-inside .small-img {
  height: 50%;
}

/* ---------- Mobile off-canvas navigation (below the lg breakpoint) ----------
   Bootstrap's offcanvas-lg does the heavy lifting: below lg it becomes a
   fixed panel that slides in from the right (offcanvas-end) over a dimmed
   backdrop; at lg and up it's reset to a normal inline nav, so nothing
   here should leak into the desktop layout. */
#mainNavigation {
  --bs-offcanvas-width: 320px;
}


.modal.show .modal-dialog {
  transform: none;margin-top: 70px;
  --bs-modal-width: 770px;
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 0;
    background: transparent;
    border-radius: 84px !important;
    border-radius: 24px !important;
}

.modal-body .quote-card {
  margin-bottom: 0;
  padding: 0;
  background: var(--dark-blue);
  padding: 20px 50px 50px 50px !important;
}

.modal-body .quote-card .field-insert {
  border-bottom: 1px solid #ffffff63;
  font-size: 15px;
}

.is-sticky.modal-open .main-nav.navbar.navbar-expand-lg {
  opacity: 0;
}

option {color:#000;background:#fff}


.col-lg-12.form-row {
  display: flex;
  gap: 35px;
}
.modal-content button.btn-close {
    position: absolute;
    right: 0;
    top: -40px;
    background-color:#135d93;
    opacity: 1;
    border-radius: 0;
    color: #fff;
    padding: 0;
	--bs-btn-close-bg: none !important;
    width: 40px;
    height: 40px;
}

.modal-content button.btn-close img { display:-webkit-inline-box; }

.quote-card .form-control, .quote-card .form-select {background-color:
    background-color: rgb(0 0 0 / 18%);}



@media (max-width: 991.98px) {
  #mainNavigation {
    background: var(--white);
  }

  #mainNavigation .offcanvas-header {
    padding: 1rem 1.25rem;
  }

  #mainNavigation .navbar-nav {
    gap: 0.25rem;
  }

#mainNavigation .nav-link {
    padding: 0.85rem 1rem 0.85rem 0rem;
    border-radius: var(--radius-md);
    border-bottom: 1px solid var(--gray-300);
    border-radius: 0 !important;
  }
  
 #mainNavigation .nav-link.active {
  border-bottom-color: transparent;
  padding-left: 1rem !important;
}

#mainNavigation .nav-item:last-child .nav-link {
  border: 0 !important;
} 

  /* The backdrop IS the requested overlay — Bootstrap adds/removes
     .offcanvas-backdrop.show for us; this just tunes its darkness. */
  .offcanvas-backdrop.show {
    opacity: 0.55;
  }
}

/* ---------- Section heading helper ----------
   Spec: h1 58px (3.625rem), h2 48px (3rem), paragraphs 16px (1rem).
   Those exact sizes are the desktop (lg, ≥992px) target — a smaller
   mobile-first base is set below so a 58px headline doesn't overwhelm a
   360px screen; adjust/remove the two @media steps if a flat size across
   all breakpoints is actually what's wanted instead. */
.section-heading {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .section-heading {
    font-size: 2.25rem;
  }
}

@media (min-width: 992px) {
  .section-heading {
    font-size: var(--fs-h2); /* 48px */
  }
}

.section-heading--accent {
  /* --primary-orange-darker, not the bright --primary-orange: on a cream
     background (.reports-section, .info-band--cream) the bright orange
     only reaches ~2.6:1 — below even the relaxed 3:1 large-text minimum.
     The darker shade clears 4.75:1+ on cream and ~6:1 on white, so one
     color works safely on every background this class is used against. */
  color: var(--primary-orange-darker);
}

.section-heading--light {
  color:#F5F5F5;
}

/* ---------- Hero Section ---------- */
.hero-section {
  background: var(--white);
  padding: 80px 0 !important;
}

.hero-section.hero-section-inside {
  padding-bottom: 4rem !important;
}

.hero-heading {
  font-size: 2rem;
  color: var(--text-dark);
}


.schedule-card__body-right .schedule-card__text b {
  font-weight: 500;
}


@media (min-width: 768px) {
  .hero-heading {
    font-size: 2.75rem;
  }
}

@media (min-width: 992px) {
  .hero-heading {
    font-size: var(--fs-h1); /* 58px */
  }
}

.hero-text {
  color: #000;
  font-size: 24px;
  max-width: 100ch;
  line-height: 33px;
  margin-bottom: 2.375rem;
}

.stats-list {
  border-top: 1px solid var(--gray-300);
  border-bottom:0;
  padding-top: 1.5rem;
  padding-bottom:0;
  justify-content: space-between;
}

.stat-item {
  display: flex;
  flex-direction: column;
  width: auto !important;
  margin: 0 !important;
}

.stat-item__number {
  font-family: var(--font-heading);
  font-size:clamp(1.5rem, 2.5vw, 2.75rem);
  font-weight: 300;
  color: var(--primary-orange);
}

.stat-item__label {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hero-image {
  border-radius: var(--radius-lg);
  width: 100%;height: 100%;
  object-fit: cover;
}

.small-img {
  height: 50%;
  
}

.col-lg-8.big-img {
  padding-right: 20px;
}

.col-lg-7.hero-content {
  margin: 0 !important;
}

.hero-section.hero-section-inside .hero-text {
  font-size: 1rem !important;
  line-height: 160%;
}
/* ---------- Manager's Message ---------- */
.manager-section {
  /* Deepened from the design's bright orange (#e8632c) to this darker
     pair so the white body copy clears 4.5:1 (bright orange only gives
     ~3.4:1) while staying unmistakably orange. */
  background:#C94D12;
  color: var(--white);
}

.manager-content-section {padding-left: 60px;}

.manager-portrait {
  border-radius: var(--radius-lg);
  width: 100%;
}

.quote-mark {
  margin-bottom:30px;
}

.quote-mark.quote-mark2 {
  float: right;
  margin-top: -80px;
  margin-bottom: 0 !important;
}

.manager-pillar__text.last {
  margin-bottom: 54px !important;
}

.manager-quote {
  margin: 0 0 1.5rem;
}

.manager-quote p {
  font-size: 32px;
  line-height:133%;
}

.manager-quote__cite {
  margin-top: 0.75rem;
  font-style: normal;
  font-weight: 40;
  opacity: 0.9;
  font-size: 18px;
}

.manager-divider {
  border-color: rgba(255, 255, 255, 0.35);
  margin:2.2rem 0;
}

.manager-pillar__heading {
    font-size: 1.125rem;
    color: var(--white);
    margin-bottom: 0;
    font-weight: 700;
}

.manager-pillar__text {
  font-size: 1rem;
  color:#ffffff;
  margin-bottom: 1.75rem;
}

.manager-pillar__text.manager-pillar__text2 {
  margin: 0; font-size: 1.125rem;line-height: 22px;
}

/* ---------- Button animation ----------
   Applies to every Bootstrap .btn (btn-park, btn-outline-light,
   btn-accessibility, etc.): a small lift + shadow on hover/focus, a
   quick press-down on click. The global prefers-reduced-motion rule
   near the top of this file already forces all transition-durations to
   ~0 for users who've asked for reduced motion, so this needs no
   separate reduced-motion override here. */
.btn {
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    color 0.15s ease-in-out;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
}

.btn:focus-visible {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.96);
  box-shadow: none;
}

/* The trailing bi-arrow-right on most CTAs nudges forward with the lift. */
.btn i.bi-arrow-right {
  display: inline-block;
  transition: transform 0.18s ease;
}

.btn:hover i.bi-arrow-right,
.btn:focus-visible i.bi-arrow-right {
  transform: translateX(4px);
}

.btn-park {
  --primary-orange-darker (not --primary-orange) so the white label clears 4.5: 1;
  background-color: var(--primary-orange-darker);
  border-color: var(--primary-orange-darker);
  color: var(--white);
  font-weight: 600;
  padding:0.75rem 1.5rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  border-radius: var(--radius-md);
  width: 157px !important;
  display: flex;
  gap: 18px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  align-content: center;
  margin: 0 auto !important;
  justify-content: center;
}

.btn-park:hover,
.btn-park:focus-visible {
  background-color: var(--primary-orange-darkest);
  border-color: var(--primary-orange-darkest);
  color: var(--white);
}

.manager-section .btn-outline-light, .schedule-section .btn-outline-light {
  font-weight: 600;
  width: 150px;
  height: 45px;
  border-width: 1px;
  border-radius: 0.5rem !important;
  line-height: 32px;
}

.manager-section .btn-outline-light:hover,
.schedule-section .btn-outline-light:hover {
  color: var(--text-dark);
}

/* ---------- Explore our Park ---------- */
.explore-section {
  padding: 80px 0 !important;
  background: var(--white);
}

.explore-section p {
  color: #000 !important;
}

#explore-heading {
  margin-bottom: 30px !important;
}

.explore-intro {
  max-width: 100ch;
}

.explore-card {
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.explore-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.explore-card__img {
  width: 100%;
  object-fit: cover;
}

.explore-card__body {
  background: var(--light-cream);
  padding:1.2rem 1.25rem;
  height: 97px;
}

.explore-card__title {
  font-size:1.5rem;
  /* --primary-orange-darker gives this bold sub-heading ~5:1 against the
     cream card background; --primary-orange-dark only reaches ~3.7:1. */
  color: var(--primary-orange-darker);
  margin-bottom: 0.25rem;
}

.explore-card__text {
  font-size: 0.813rem;
  color: #000;
  margin-bottom: 0;
}

.explore-card:hover,
.explore-card:focus-within {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.explore-section .btn.btn-park {
  margin-top: 3.313rem !important;
}

.explore-section.explore-section2 .explore-intro {
  margin-bottom: 4rem !important;
}

/* ---------- Programme Schedule ---------- */
.schedule-section {
  background:url(../images/programme-bg.webp)no-repeat center top;
  color: var(--white);
  background-attachment: fixed;
  background-size: cover;
}

.schedule-intro {
  max-width:100ch;
}

#schedule-heading {
  margin-bottom: 30px !important;
  color: #ffffff !important;
}

.schedule-item:last-child .schedule-card {
  border: 0 !important;
}

.schedule-intro__text {
  color:#ffffff;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap:0;
  max-width: 99%;
    background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2rem;
  margin: 0 auto;
  padding:0 2rem;
}

.schedule-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:3rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.schedule-card__date {
  min-width:7rem;
  font-weight: 700;
  font-size:1.125rem;
  margin: 0;
}

.schedule-card__body {
  flex: 1 1 260px;
  display: flex;
  gap: 30px;
  border-right: 1px solid #ffffff5e;
  height: 60px;
}

.schedule-card__title {
  font-size: 1.125rem;
  color: var(--white);
  margin-bottom:0.625rem;
  font-weight: 700;
}

.schedule-card__body {
  width: 44%;
}

.schedule-card__body .schedule-card__text {
  margin-bottom: 0;
}


.schedule-card__body-right {
  width: 44%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schedule-card__text {
    font-size:1rem;
    color:#ffffff;;
    margin-bottom: 0.75rem;
    display: flex;
    gap: 10px;
    align-items: center;
}

.first {
  display: flex;
  gap: 8px;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.schedule-card__text:last-child {
  margin: 0;
}

.time-area {
  display: flex;
  gap: 0.9rem;
}

.schedule-card__location {
  font-size: 0.82rem;
  color:#ffffff;
  margin-bottom: 0;
  font-weight: normal;
  display: flex;
  gap: 10px;
}

.schedule-card__cta {
  white-space: nowrap;
}

.schedule-card__body-right .btn.btn-outline-light.btn-sm.schedule-card__cta {
  display: ruby;
}
.schedule-card__body-right .btn.btn-outline-light.btn-sm.schedule-card__cta img {
  margin-left: 8px !important;
}

.schedule-card__body-right .btn.btn-outline-light.btn-sm.schedule-card__cta:hover {
	color: #fff;
  background:#002E4D !important;
}

/* ---------- Your Park, Your Voice ---------- */
.engage-section {
  background:#002E4D;
  color:#ffffff;
  opacity:1;
}

.engage-section .col-md-4 {
  width: 29% !important;
}

.engage-intro-text {
  max-width: 100ch;
  color: #ffffff;
  background-color:#002E4D;
}


/* #engage-heading {
  background-color:#002A48;
} */

.engage-card__title,
.engage-card__text,
.engage-card__link {
  color: #FFFFFF;
}

.engage-card {
background: #163B54;
  border: 1px solid #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.engage-card__title {
  font-size:1.75rem;
  color:#ffffff;
  margin-bottom:1rem;
}

.engage-card__text {
  font-size: 0.875rem;
  color:#ffffff;
  margin-bottom:2.75rem;
}

.engage-card__link {
  color: #ffffff;
  font-weight: normal;
  text-decoration: none;
  font-size: 0.875rem;
  display: flex;
  gap: 10px;
}

.engage-card__link:hover,
.engage-card__link:focus-visible {
  color: var(--white);
  text-decoration: underline;
}

.engage-section .btn.btn-park.mt-5 {
  background: rgba(58, 101, 131, 1);
  width: 245px !important;
  border: 0 !important;
  font-size: 14px !important;
}

/* ---------- Our Work. Our Progress. ---------- */
.reports-section {
  background:#FFF8F4 !important;
}

#reports-heading {color:#C94D12}

.reports-intro-text {color:#000;}


.reports-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width:1600px;
  margin: 0 auto;
}

.reports-section .btn.btn-park {
  width: 191px !important;
  border: 0 !important;
  font-size: 14px !important;
}

.report-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap:0;
  height: 80px;
  background: var(--white);
  border-radius:1.25rem;
  padding: 0.9rem 1.25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.report-row__cta {
  display: flex;
  gap: 0.625rem;
}

.report-row__badge {
  /* Darker fill so the small bold "Report" label keeps white text above
     4.5:1 contrast. */
  background: var(--primary-orange-darker);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding:0.9rem 2rem;
  border-radius: 999px;
}

.report-row__badge--plan {
  background: var(--park-green);
}

.report-row__year {
  font-weight: 700;
  color: #C94D12;
  min-width:18rem;
  font-size:1rem;
    text-transform: uppercase;
}

.report-row__title {
  flex: 1 1 260px;
  font-weight: normal;
  color: var(--text-dark);
  font-size: 1.5rem;
}

.report-row__cta {
  color: var(--primary-orange-darker);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.report-row__cta:hover,
.report-row__cta:focus-visible {
  text-decoration: underline;
}


/* ================================
   PLAN GOALS SECTION
================================ */

.info-band--cream {
    background: #f5dec4;
}

.plan-goals {
    max-width: 1535px;
    margin: 60px auto 0;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.plan-goal {
  min-height: 200px;
  padding: 10px 45px 0px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 48px;
  width: 100%;
}

/* Vertical separators */
.plan-goal:not(:nth-child(3n + 1)) {
    border-left:1px solid #C3B19D;
}

/* Horizontal separator between rows */
.plan-goal:nth-child(n + 4) {
    border-top:1px solid #C3B19D;
    padding-top: 45px;
}

.plan-section {
  display: contents;
  border-bottom: 1px solid #C3B19D;
  margin-bottom: 48px !important;
  float: left;
  width: 100%;
  clear: both;
  display: flex;
}

.plan-section:last-child {
  border: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}


.plan-section:last-child .plan-goal {
  margin: 0 !important;
}

/* Icon */
.plan-icon {
  height: 80px;
  width: 80px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: 300;
  color: #111;
}

.plan-icon i {
    font-weight: 300;
}

/* Heading */
.plan-goal h3 {
    margin: 0 0 12px;
    color: #111;
    font-size: 1.25rem;
    line-height: 1.15;
    font-weight: 500;
}

/* Description */
.plan-goal p {
    max-width: 480px;
    margin: 0;
    color: #111;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 400;
}

/* Section heading */
/* .section-heading--light {
    color: #f15a24;
    text-align: center;
    margin-bottom: 0;
} */

.info-band--cream .section-heading--light {
    color: #f15a24;
}

.info-band--blue .section-heading--light {
    color: #ffffff;
}

.info-band--orange .section-heading--light {
    color: #ffffff;
}
.your-comment .access-form form {
  width: 44% !important;
  margin: 0 auto !important;
}
.your-comment .access-form form .comment-form {
  width: 100% !important;
}


.access-form .frm-field.checkbox-fild #ClickHere {
  margin-top: 4px;
}

/* ================================
   TABLET
================================ */

@media (max-width: 991px) {
body.is-sticky .utility-header__actions {
  transform: none !important;
}
	
.utility-header__actions.home-header__actions {
  transition:none;
}

.main-nav {
   transition:none;
}
  .order-md-1 {
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
    width: 100%;
  }

.order-md-2 {
    order: 2 !important;
    width: 100%;
  }

    .plan-goals {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 45px;
    }

.plan-section {display: grid;}

.plan-goal {
    padding: 35px 25px;
    min-height: anchor-size;
    margin: 0 !important;
    border-bottom: 1px solid rgba(80, 55, 35, 0.18) !important;
  }
.plan-goal:last-child {
  border: 0 !important;
}


    /* Remove old desktop borders */
    .plan-goal:not(:nth-child(3n + 1)) {
        border-left: none;
    }

    .plan-goal:nth-child(n + 4) {
        border-top: none;
        padding-top: 35px;
    }

    /* Vertical separator for 2-column layout */
    .plan-goal:nth-child(even) {
        border-left: 0;
    }
	

    /* Horizontal separators */
    .plan-goal:nth-child(n + 3) {
        border-top: 1px solid rgba(80, 55, 35, 0.18);
    }

    .plan-goal h3 {
        font-size: 19px;
    }

    .plan-goal p {
        font-size: 16px;
    }
}


/* ================================
   MOBILE
================================ */

@media (max-width: 767px) {
.report-row__title {
  font-size: 1.25rem;
}	
.manager-section .btn-outline-light, .schedule-section .btn-outline-light {width: 160px;}	
.modal-body .quote-card {
  padding: 20px !important;
}	
.col-lg-12.form-row {
  display: grid;
  gap:0px;
}
.modal-body .quote-card .field-insert {
  border-bottom: 1px solid #ffffff63;
  margin-bottom: 4px;
}
.modal-body .quote-card  .field-insert.comments1 {
  min-height: 93px;
}
.explore-card__title {
  font-size: 1.2rem;
}
.feature-row.feature-row2 .col-md-6.order-md-1 {
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    padding-right: calc(var(--bs-gutter-x) * .5) !important;
  }
.explore-card__body {
  height: auto;
  background: var(--light-cream);
  padding: 0.7rem 1.25rem;
}  
	

    .plan-goals {
        grid-template-columns: 1fr;
        margin-top: 35px;
    }

    .plan-goal,
    .plan-goal:nth-child(n + 4) {
        min-height: auto;
        padding: 35px 15px;
        border-left: none !important;
    }

    .plan-goal:first-child {
        border-top: none !important;
		padding-top: 0 !important;
    }

.plan-section:last-child .plan-goal {
    margin: 0 !important;
    padding-bottom: 35px !important;
    border-bottom:1px solid rgba(80, 55, 35, 0.18) !important;
  }
  
.plan-section:last-child .plan-goal:last-child {
    border-bottom:0 !important;padding-bottom: 0 !important;
  }
  
	
    .plan-icon {
        width: 65px;
        height: 65px;
        font-size: 45px;
        margin-bottom: 15px;
    }

    .plan-goal h3 {
        font-size: 19px;
    }

    .plan-goal p {
        font-size: 15px;
        max-width: 500px;
    }

    .desktop-only {
        display: none;
    }
}

/* ---------- Footer ---------- */
.site-footer {
  /* Design token: --Colors-Main. NOTE: at ~3.4:1 against white this falls
     short of the 4.5:1 AA target for normal-size text; kept as specified
     because it's an explicit brand color. Body copy stays fully opaque
     (not the softened rgba(255,255,255,.8) used elsewhere) to get as
     close to compliant as this fill allows — consider a darker fill or
     larger/bolder type here if strict AA is required. */
  background: #C94D12;
  color: var(--white);
  padding:100px 0 0 0;
  clear: both;
}

.site-footer .container-fluid{
  padding-bottom: 60px !important;
  width:1600px;
}

.site-footer .container-fluid.section-px {
  padding-bottom: 60px !important;
  width: 1600px !important;
}
.site-footer .row {
  justify-content: space-around;
}

.footer-tagline {
  font-size: 0.9rem;
  color: var(--white);
  max-width: 37ch;
}

.footer-bottom-bar .container-fluid.section-px {
  padding: 0 !important;
  height: 64px;
}
.footer-bottom-bar p {
  text-align: center !important;
  font-size: 12px;
  width: 100%;
  margin-bottom: 0 !important;
  height: 65px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.footer-bottom-bar {
  /* Design token for the copyright strip; see the .site-footer note above
     — same AA caveat applies at this fill's default text size. */
  background:#AB3C09;
}

.footer-utility-buttons a {
  color: var(--white);
  width: 315px;
  font-size: 1rem;
  height: 42px;
  line-height: 30px;
  border-radius: 25px;
  margin-bottom: 30px;
}

.site-footer a:hover {
  color: var(--white);
}

.site-footer .col-lg-3 {
  width: auto !important;
}

.site-footer .col-lg-3.footer-link {width: 13% !important;}

.site-footer .row {
  justify-content: space-between;
}

.footer-heading {
  font-size:1.125rem;
  text-transform: capitalize;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
  color: var(--white);
}

.social-list.list-inline {
  gap: 0.813rem !important;
}

.footer-tagline {
  font-size: 0.9rem;
  color: var(--white);
  max-width: 42ch;
}

.footer-links li {
  margin-bottom:30px;
}

.footer-links a {
  font-size: 1.125rem;
  text-decoration: none;
  color: #fff;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  text-decoration: underline;
}

.footer-contact p {
  font-size: 0.9rem;
  margin-bottom: 0.688rem;
  display: flex;
  align-items: center;
  gap: 25px;
  padding-bottom: 0.688rem;
  border-bottom:1px solid #F47E457D;
}


.footer-contact span {
  font-weight: 300;
}
.footer-contact span b {
  font-weight: 600 !important;
}

.footer-contact p:last-child {
  border: 0;
}

.footer-contact a {
  font-size: 1rem;	
  text-decoration: none;
  color: #fff;
}

.footer-contact span a {
  font-weight: 500 !important;
  text-decoration: none !important;
}

.btn-accessibility {
  background-color:#175f24;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--white);
  font-weight: normal;
  line-height: 31px !important;
}

.btn.btn-outline-light.btn-sm.btn-sm1 {
  background:#ffffff21;
}

.btn-accessibility:hover,
.btn-accessibility:focus-visible {
  background-color: #175f24;
  border-color: #ffffff;;
  color: var(--white);
}

.footer-divider {
  border-color: rgba(255, 255, 255, 0.3);
  margin: 2rem 0 1.25rem;
}

.footer-bottom {
  font-size: 0.85rem;
  color: var(--white);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.footer-bottom a {
  text-decoration: underline;
}

/* ---------- Inside-page components (About Us, etc.) ---------- */

/* Breadcrumb */


.breadcrumb-nav .breadcrumb {
  --bs-breadcrumb-divider: '|';
  margin: 0;
  padding: 0.75rem 0;
  font-size: 0.85rem;
}

.breadcrumb-nav .breadcrumb-item a {
  color: #000;
  text-decoration: none;
  font-size: 1.125rem;
}

.breadcrumb-nav .breadcrumb-item a:hover,
.breadcrumb-nav .breadcrumb-item a:focus-visible {
  color: var(--primary-orange-darker);
  text-decoration: underline;
}

.breadcrumb-nav .breadcrumb-item.active {
  color: rgba(242, 103, 36, 1);
  font-weight: normal;
  font-size: 1.125rem;
  padding-left: 1.25rem !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  padding-right: 1.25rem;
}

.info-band {
  padding-bottom:80px !important;
}

/* Full-width text bands: reused for "Who We Are" / "What We Do" /
   "Planning for the Future" / "Our Commitment to the Community" style
   sections — a heading plus a centered paragraph or two, no grid. */
.info-band--orange {
  background:#C94D12;
  color: var(--white);
}

.info-band--orange .engage-card__text {
  margin: 0 !important;
  font-size: 1rem;
}

.info-band--orange .engage-card {
  background: var(--engage-card-gradient);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  padding: 1.563rem;
}

#mission-heading {
  margin-bottom: 4rem !important;
}

.info-band--green {
  background-color: var(--park-green-dark);
  background-image: linear-gradient(rgba(31, 77, 34, 0.88), rgba(31, 77, 34, 0.92));
  color: var(--white);
}


.feature-row.feature-row2 .col-md-6.order-md-1 {
  padding-left: 60px;
  padding-right: 10px;
}

.info-band--blue {
   background-color:#002E4D;
  color: #ffffff !important;
  opacity: 1 !important;
}

.info-band--blue .section-heading {
  margin-bottom: 1.875rem;
}

.info-band--cream {
  background: var(--light-cream);
}

.info-band__text {
  max-width: 100%;
  margin-inline: auto;
}

.info-band--orange .info-band__text,
.info-band--green .info-band__text {
  color:#ffffff;
}

.info-band--cream .info-band__text {
  color: var(--text-muted);
}

/* Alternating image/text feature rows ("Parks & Trails", "Recreation",
   "Facilities", "Community"). Left/right order alternates via Bootstrap's
   order-md-* utilities in the markup, not here. */
.feature-row {
  margin-bottom: 3rem;
}

.feature-row:last-child {
  margin-bottom: 0;
}

.feature-row__img {
  border-radius: var(--radius-lg);
}

.feature-row__title {
  color: var(--primary-orange-darker);
  font-size: 3rem;
  margin-bottom: 1.875rem;
}

.feature-row__text {
  color: var(--text-muted);
}

.order-md-1 {
    order: 1 !important;
    padding-right: 135px;
  }
.order-md-2 img {
  display: inherit !important;
  float: right;
}  
  

/* Small pill/badge lists — e.g. facility types, core-value commitments */
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

.pill--cream {
  background: var(--light-cream);
  color: var(--text-dark);
}

/* Light variant of .manager-section (same component, white background
   instead of the orange gradient — used partway down longer pages so
   the orange doesn't repeat back-to-back with other bands). */
.manager-section--light {
  background: var(--white);
  color: var(--text-dark);
}

.top-link {
  position: relative;
  top: -200px;
}

.manager-section--light .manager-pillar__heading {
  color: var(--primary-orange-darker);
}

.manager-section--light .manager-pillar__text {
  color: var(--text-muted);
}

.manager-section--light .manager-divider {
  border-color: var(--gray-300);
}

.manager-section--light .quote-mark {
  color: var(--gray-300);
}

.py-5 {
  padding-top: 6.25rem !important;
  padding-bottom:6.25rem !important;
}


.web-access .container { width: 1500px; margin: 0 auto !important;}
.web-access { display: flex; }
.section-heading2.section-heading--light.fade-up.is-visible { font-size: 2rem; margin: 0 0 30px 0; }
section.accessibility-form .bg-grid{padding:60px 0 130px}
.list.last.col2 { margin: 0; padding: 0 !important; }
section.accessibility2:after,section.accessibility2:before,section.effect-goal:after,section.effect-goal:before{content:"";position:absolute;top:0;bottom:0;width:50%}
section.accessibility2,section.effect-goal{position:relative;margin-top:-120px}
section.accessibility2:before,section.effect-goal:before{border-radius:0 120px 0 0;background-color:#28235c}
section.accessibility2:after,section.effect-goal:after{border-radius:117px 0 0 0;background-color:#1aaa61;right:0}
section.accessibility2>.container,section.effect-goal>.container{position:relative;z-index:2}
.content-text.affect{padding-right:50px}
.content-text.goals{padding-left:50px}
.ptb-60{padding:60px 0}
.subtitle { font-size:2rem; text-align: center; margin-bottom: 55px; }
ul.list.last.col2 li{background:url(../images/bullet.svg) no-repeat left 3px}
.list { margin: 0; padding: 0 !important; }
ul.list li{background:url(../images/bullet-black.svg) no-repeat left 4px}
p#AdobeAcrobat .list li {
	background:url(../images/bullet-black.svg) no-repeat left 0
}
ul.list.text-white2 li{background:url(../images/bullet-white2.svg) no-repeat left 5px}
ul.list.text-white li a{color:#fff}
ul.list li { padding-left: 17px; margin-bottom: 23px; font-size: 16px; min-height: 20px; list-style: none !important; width: 50%; float: left; padding-right: 80px; }

ul.list li:last-child{margin:0}
section.future-responsible{background:url(../images/future-responsible.jpg) no-repeat center;background-size:auto 100%;padding-bottom:400px}
.content-text.future p,.content-text.goals p{font-size:20px;font-style:normal;font-weight:400;line-height:23px;}
p a,ul.list li a{text-decoration:underline!important;color:#000}
.comment-img {
    position: absolute;
    left: 0;
    width: 50%;
    top: 0;
    bottom: 0;
	background:url(../images/comment-img.png) no-repeat center; background-size:cover;
}
section.master-plan {
    position: relative;
    background:#0080A1;
    /*background: url(../images/master-plan.png) no-repeat center;*/
	background-attachment: fixed;
}
.contact-container { padding-bottom: 80px !important; display: block ruby; }
.hero-section.hero-section-inside.pb-0 { padding-bottom: 0 !important; }
.frm-field{width:100%;float:none}
.frm-field.checkbox-data{margin:16px 0}
.frm-field label{display:block;margin:0}
.frm-field.frm-fild2{display:flex;align-items:center;gap:30px;     flex-wrap: wrap;}
.sr-only{position:static;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;color:#ffffff;opacity:1;}
.field-insert{font-size: 17px;font-style:normal;font-weight: 400;line-height: 22px;padding: 15px 0;border:.5px solid #585858;border-radius:8px;width:100%;margin-bottom: 20px;color: #ffffff;border: 0;border-bottom: 1px solid #fff;background: transparent;border-radius: 0;text-transform: none;outline: 0 !important;}
.field-insert::placeholder{color: #ffffff;font-size:15px;font-style:normal;font-weight:400; text-transform: capitalize;}
.field-insert.comments1{min-height: 133px;}
.modal-body .heading.text-white {
  text-align: center;
  padding: 25px 0 0 0;
  background: var(--dark-blue);
  margin: 0 !important;
}
.frm-field .checkbox-fild label{display:inline;color: #ffffff;     font-size: 14px;}
input.submit-btn {
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  width: 160px;
  display: inline-block;
  border-radius: var(--radius-md);
  line-height: 23px;
  background: rgba(58, 101, 131, 1);
  padding: 0.75rem 1.5rem;
  border: 0;
  outline: 0;
  font-family: "Libre Franklin", sans-serif;
}
.read-more span.icon {
    position: relative;
        z-index: 999;
}
span.btn-more{padding:18px 34px;border-radius:20px 0;background:#28235c}
.g-recaptcha{display:inline-block}
.form-details{
    display: block;
    padding-left: 60px;
    margin: 0 auto;}
.form-flex{position:relative}
.access-form .comment-form{float:left;width:48%;padding:0;margin:0}
.FR{float:right!important}
.frm-field.checkbox-fild label{display:inline-block}
.access-form .frm-field.checkbox-fild {
  margin-bottom: 15px;
  clear: both;
  display: flex;
  align-items: start;
  gap: 15px;
}

.contact-content{margin-bottom:30px;padding:20px 0;border-right:1px solid #ccc;float:left;width:100%;word-break:break-all}
.contact-content.no-border{border:0}
.contact-content { border: 0; position: relative; height: 100%; margin: 0; text-align: left !important; }
.contact-content:after{content:"";width:100%;height:0;position:absolute;bottom:0;left:0;border-bottom:1px solid rgba(0,0,0,0.15)}
.contact-content.no-border:after{display:none}
.con-text a{color:#000;text-decoration:underline!important}
.con-text a:hover{text-decoration:underline!important}
.contact-content h5 span{font-weight:400;padding-right:15px;display:inline-block}
.contact-content .subtitle { margin-bottom: 10px; font-weight: 400; text-align: left; color: var(--primary-orange-darker); }
.contact-content h5 { font-weight: 700; font-size: 18px; margin-bottom: 20px; padding-right: 20px; }


/* ---------- Print styles ---------- */
@media print {
  .utility-header,
  .main-nav,
  .skip-link,
  .schedule-card__cta,
  .site-footer .btn,
  .social-list {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

.col-lg-7.hero-content.hero-content2 {
    padding-bottom: 50px;
}


@media (max-width:1600px) {
.schedule-card__body { width: 40%; }	
.form-details { display: block; padding-left: 0; margin: 0 auto; }	
.your-comment .access-form form { width: 52% !important; }	
.small-img img { height: 100% !important; }	
.hero-image { height: 374px; }
.small-img { height: 50% !important; }
.hero-section.hero-section-inside .hero-image { height: 515px; }
.row.g-3.hero-image-grid.about-header-area .hero-section.hero-section-inside .hero-image { height: 435px; }
.hero-section.hero-section-inside .small-img { height: 50%; }
.hero-text {font-size: 22px;}	
.hero-heading { font-size: 3.2rem; }	
.schedule-card__body-right {width: 46%}	
.engage-section .col-md-4 { width: 33% !important; }
.reports-list {max-width: 100%;}
}

@media (max-width:1440px) {
.schedule-card__body-right { width: 48%; }	
.hero-heading { font-size:3rem; }	
.schedule-card {gap:2rem; }
.order-md-1 { order: 1 !important; padding-right: 110px; }
.row.g-3.hero-image-grid.about-header-area .hero-section.hero-section-inside .small-img { height: 36% !important; }
.img-fluid.hero-image.hero-image--large.hero-image--large2 { height: 415px; }

}

@media (max-width:1360px) {
.schedule-card__body {height: auto;}	
.site-footer .container-fluid.section-px { width: 100% !important; }
.site-footer .col-lg-3 { width: 26% !important; }
.schedule-card__text span { width: 62%; }
.schedule-card__body {gap:25px}
.small-img { height: 165px; }
.hero-heading { font-size:2.5rem; }
.hero-text br { display: none; }
.col-lg-7.hero-content { padding-right: 70px; }
.navbar-expand-lg .navbar-nav .nav-link { font-size: 0.9rem; }
.schedule-card__text { font-size:0.9rem; }
.schedule-card__text span { width: auto; }
.schedule-card__date { font-size: 1rem; }
.feature-row__title { font-size: 2.8rem; }
.section-heading { font-size:2.8rem; }
}


@media (max-width:1024px) {
.site-footer .col-lg-3 { width: 100% !important; }
.site-footer .container-fluid.section-px { padding-bottom: 40px !important; }
.site-footer .col-lg-3.footer-link { width: 100% !important; }
.footer-links a { font-size: 1rem; }
.footer-links li { margin-bottom: 16px; width: 100%; }
.footer-contact p {gap: 15px;}
.site-footer {padding-top:50px;}
.site-footer .row { justify-content: space-between; gap: 15px; }
.schedule-card { gap: 2.813rem; display: grid; }
.schedule-card__body { gap: 25px; width: 100%; border: 0; }
.schedule-card__text span { width: auto; }
.schedule-card { gap: 1.813rem; }
.schedule-card__body-right { width: 100%; }
.manager-content-section { padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); }
.small-img { height: 125px; }
.col-lg-7.hero-content { padding-right: 70px; width: 100%; order: 2; }
.col-lg-5.menu-section { padding: 0 !important; width: 100%; }
}

@media (max-width:991px) {
.schedule-card__text {
    font-size: 1rem;
  }	
.breadcrumb-nav .container-fluid {
  padding-left: 0 !important;
}	
.your-comment .access-form form { width: 100% !important; margin: 0 auto !important; }	
.contact-content .subtitle {
  margin-bottom: 10px;
  font-weight: 400;
  text-align: left;
  color: var(--primary-orange-darker);
  font-size: 1.5rem;
    margin-bottom: 0px !important;
    line-height: 31px;
}	
.contact-container {
  padding-bottom: 40px !important;
  display: block ruby;
}

.contact-content .col-lg-4 {
    margin-top: 20px;
  }
.subtitle {
  font-size: 2.25rem;
}
ul.list li {
  padding-left: 17px;
  margin-bottom: 23px;
  font-size: 16px;
  min-height:inherit;
  list-style: none !important;
  width: 100%;
  float: left;
  padding-right: 0;
}  
.utility-header .main-nav.navbar.navbar-expand-lg {
    display: block !important;
    position: static !important;
    transform: none !important;
  }
body.is-sticky .main-nav {
  position: relative !important;
  transform: none !important;
}
.hero-section.hero-section-inside {
  padding-bottom: 0 !important;
}
  
.py-5 {
  padding-top: 3.125rem !important;
  padding-bottom: 3.125rem !important;
}
}


/* ---------- Responsive adjustments ---------- */
@media (max-width: 767.98px) {
.access-form .frm-field.checkbox-fild #ClickHere { margin-top: 4px; }	
.frm-field.checkbox-fild { display: flex; align-items: self-start; gap: 12px; }	
.form-details { padding-right: calc(var(--bs-gutter-x) * .5) !important; padding-left: calc(var(--bs-gutter-x) * .5) !important; }	
.form-details { display: block; padding-left: 0; margin: 0 auto; }	
.access-form .comment-form { float: left; width: 100%; padding: 0; margin: 0; }	
.subtitle { font-size: 2rem;margin-bottom: 30px !important; }	
.hero-section.hero-section-inside.pb-0 { padding-bottom: 0 !important; padding-top: 50px !important; }
.col-lg-4.d-flex.flex-column.gap-4.small-section { gap: 1.0rem !important; }	
.feature-row__title { font-size: 2rem; margin-bottom: 1.50rem; }	
#mission-heading { margin-bottom: 2rem !important; }	
.info-band { padding-bottom: 50px !important; }	

.hero-section.hero-section-inside .hero-text { margin-bottom: 0px; }	
.section-heading { font-size: 2rem; }	
.col-lg-8.big-img { padding-right: calc(var(--bs-gutter-x) * .5); }	
.hero-image { height: auto !important; }	
.stat-item:nth-child(4), .stat-item:nth-child(5) { width: 50% !important; margin-top: 20px !important; }	
.stat-item { width: 33.3% !important; }	
.utility-link { position: absolute; font-size: 0.88rem !important; top: 20px; right: 15px; padding: 4px 19px; }	
.lang-select-form.d-flex.align-items-center.gap-1.m-0 { position: absolute; right: 15px; top: 64px; }	
.utility-header__actions { width: 100%; justify-content: space-between; gap: 0.5rem !important; }	
.utility-header .utility-section { padding: 20px 0 0 0 !important; }	
.brand-logo__mark { margin-right: 0.6rem; width: 100%; }	
a.brand-logo { width:50%; display: flex; align-items: center; justify-content: center; }	
.col-lg-5.menu-section { padding: 0 !important; margin: 0 !important; }	
.col-lg-7.hero-content { padding-right:calc(var(--bs-gutter-x) * .5); width: 100%; order: 2; margin: 0 !important;}	
.schedule-card__date { margin: 0 0 15px 0; }	
.schedule-card__body-right .schedule-card__text { display: grid; }	
.first { display: flex; gap: 8px; align-content: center; justify-content: left; align-items: center; }	
.schedule-card__body { gap: 0; width: 100%; display: grid; border-bottom: 1px solid #ffffff1a; padding-bottom: 20px; }
.reports-intro-text br {display:none}
.site-footer .col-lg-3.footer-link { width: 100% !important; display: none; }
.btn.btn-accessibility.btn-sm { margin-bottom: 0 !important; }
.time-area { display: grid; gap: 0.9rem; }
.site-footer .container-fluid.section-px { padding-bottom: 50px !important; }
.hero-heading { font-size: 2rem; }
.schedule-card__body-right { width: 100%; display: grid; gap: 15px; }
.hero-text { font-size: 19px; line-height: 25px; }
.py-5 {
  padding-top:3rem !important;
  padding-bottom:3rem !important;
}
	
.engage-section .col-md-4 {
    width: 100% !important;
  }

.engage-section .row {
  gap: 35px;
}  
  .schedule-card {
    flex-direction: column;
    align-items: flex-start;
  }
.report-row {
    flex-direction: column;
    align-items: flex-start;
    display: grid;
    height: auto;
    gap: 15px;
  }

  .stats-list {
    text-align: center;
  }
}

@media (max-width: 575.98px) {
.utility-header__actions {
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid #eee;
    margin-top: 4px;
  }
}