/* =============================================================
   MNS HEADER — Two-row design: white brand bar + navy nav bar
   ============================================================= */

/* ── GOOGLE FONTS ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Poppins:wght@500;600;700&display=swap');

/* ── GLOBAL FONT: Open Sans across entire header ───────────────── */
#header-1,
#header-1 a,
#header-1 span,
#header-1 button,
#header-1 input,
#header-1 li,
#header-1 nav,
#header-1 .mns-topbar,
#header-1 .mns-topbar-link,
#header-1 .mns-ticker {
  font-family: 'Open Sans', sans-serif !important;
}

/* Menu links (top level + dropdown/mega-menu items) — Poppins */
#header-1 .navbar-nav .nav-link,
#header-1 .navbar-nav .dropdown-item {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
}

/* ── RESET OLD THEME HEADER STYLES ─────────────────────────── */
.mns-header .header-area,
.mns-header .header-top,
.mns-header .header-bottom,
.mns-header .way-1 { display: none !important; }
.mns-header .nav-sticky,
.mns-header .navigation-sticky { background: transparent !important; box-shadow: none !important; }
.way-2 { display: none !important; }

/* Remove ::before / ::after decorations on the sticky bar */
#header-1 .nav-sticky::before,
.header1 .nav-sticky::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  background: transparent !important;
}
#header-1 .nav-sticky::after,
.header1 .nav-sticky::after {
  display: none !important;
  content: none !important;
}

/* ── SIDE STRIPS — pushed below header ──────────────────────── */
.normal-contact,
.social-contact {
  top: 168px !important;  /* 40px topbar + 80px brand + 48px nav */
  z-index: 1 !important;
  height: calc(85% - 168px) !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── PLACEHOLDER for sticky wrapper height in document flow ── */
/* When sticky kicks in, a phantom height prevents layout jump */
.mns-header { min-height: 0; }

/* ── SPACING RESET ───────────────────────────────────────────── */
html, body { margin: 0 !important; padding: 0 !important; }
#page-wrapper, #page, #page_content { margin: 0 !important; padding: 0 !important; }
#header-1, .header1 { margin: 0 !important; padding: 0 !important; }
#loaders { position: fixed !important; z-index: 9999 !important; }
#loader  { position: fixed !important; z-index: 9998 !important; }
.page-top, .region-page-top { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }

.mns-header {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   ROW 1 — TOPBAR: full width lighter navy
   ══════════════════════════════════════════════════════════════ */
.mns-topbar {
  display: flex !important;
  background: #23277D !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
  min-height: 40px;
  position: relative;
  z-index: 101;
}
.mns-topbar > .container {
  display: flex !important;
  width: 100% !important;
  padding: 0 15px !important;
}
.mns-topbar-inner {
  display: flex !important;
  align-items: center;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
}
.mns-topbar-left {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  justify-content: flex-start;
}
.mns-topbar-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.2s;
  font-family: 'Open Sans', sans-serif;
}
.mns-topbar-link:hover { color: #FBBF01; text-decoration: none !important; }
.mns-topbar-link svg { flex-shrink: 0; opacity: 0.75; }

.mns-topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Social icons — spread out */
.mns-topbar-right .social-icons,
.mns-topbar-right .fontawesome-icons {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.mns-topbar-right .social-icons a,
.mns-topbar-right .fontawesome-icons a {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 12px !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  background: transparent !important;
}
.mns-topbar-right .social-icons a:hover,
.mns-topbar-right .fontawesome-icons a:hover {
  border-color: #FBBF01 !important;
  color: #FBBF01 !important;
  background: rgba(251,191,1,0.1) !important;
}
.mns-topbar-right .social-icons a i,
.mns-topbar-right .fontawesome-icons a i { font-size: 12px !important; color: inherit !important; }

/* ── TOPBAR — mobile: two stacked rows instead of one cramped,
   horizontally-scrolling row. Row 1: phone + email. Row 2: social +
   GOV.JM. Hours text still drops (least essential, and a third row
   just for it isn't worth the height). ── */
@media (max-width: 991.98px) {
  .mns-topbar-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 0;
    row-gap: 8px;
  }
  .mns-topbar-left {
    flex: 1 1 100%;
    gap: 14px;
  }
  .mns-topbar-left span.mns-topbar-link { display: none !important; }
  .mns-topbar-right {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  .mns-gov-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    gap: 4px !important;
  }
  /* Full text wraps on very narrow phones even at 11px — keep the flag
     badge (still a clickable link to gov.jm) and drop just the label. */
  @media (max-width: 400px) {
    .mns-gov-btn span { display: none !important; }
  }
  .mns-topbar-right .social-icons a,
  .mns-topbar-right .fontawesome-icons a {
    width: 26px !important;
    height: 26px !important;
  }
}

/* GOV.JM button */
.mns-gov-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FBBF01;
  color: #2F34A6 !important;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 5px;
  text-decoration: none !important;
  transition: all 0.2s;
  white-space: nowrap;
}
.mns-gov-btn:hover { background: #d4a200; }

/* ══════════════════════════════════════════════════════════════
   STICKY WRAPPER — contains the brand row + nav bar
   ══════════════════════════════════════════════════════════════ */
.mns-navbar-wrap {
  background: transparent;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 100;
  flex-shrink: 0;
}
.mns-navbar-wrap.navigation-sticky.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
}

/* ══════════════════════════════════════════════════════════════
   ROW 2 — BRAND HEADER: white
   coat of arms | ministry name + tagline          | search
   ══════════════════════════════════════════════════════════════ */
.mns-header-brand {
  background: #ffffff;
  border-bottom: 1px solid rgba(1,30,82,0.1);
  width: 100%;
}
.mns-brand-inner {
  display: flex;
  align-items: center;
  padding: 12px 0;
  min-height: 110px;
  gap: 0;
}

/* Logo area: coat of arms + text block side by side */
.mns-logo-area {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
}
#header-1 .mns-logo-area,
#header-1 .navbar-brand {
  background: transparent !important;
  background-color: transparent !important;
}
/* Strip block wrapper spacing so coat-of-arms sits flush */
.mns-logo-area .block,
.mns-logo-area .block > .content {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.mns-logo-area .navbar-brand {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  flex-shrink: 0 !important;
}
.mns-logo-area .navbar-brand img,
.mns-coa-img {
  height: 104px !important;
  width: auto !important;
  display: block !important;
}

/* Vertical separator between coat of arms and ministry text */
.mns-logo-divider {
  display: block;
  width: 1px;
  height: 52px;
  background: rgba(1,30,82,0.22);
  flex-shrink: 0;
  margin: 0 8px 0 4px;
}

/* Ministry name text — 2 lines: "Ministry of National" / "Security and Peace" */
.mns-site-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.mns-gov-label {
  font-size: 11px;
  font-weight: 600;
  color: #2F34A6;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: block;
  margin-bottom: 3px;
  opacity: 0.7;
}
.mns-ministry-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 700;
  color: #2F34A6;
  text-transform: none;
  letter-spacing: 0;
  display: block;
  line-height: 1.25;
}

/* Hamburger — dark (for white bg), hidden on desktop */
.mns-hamburger {
  background: transparent;
  border: 1.5px solid #2F34A6;
  border-radius: 8px;
  padding: 8px;
  margin-left: 16px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mns-hamburger:focus { box-shadow: none; outline: none; }

/* Search bar — always visible, matching reference */
.mns-search-bar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
/* Flatten ALL Drupal wrapper divs around the search form */
.mns-search-bar > *,
.mns-search-bar .search-block-form,
.mns-search-bar .content,
.mns-search-bar .container-inline {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  width: auto !important;
}
.mns-search-bar form {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Bootstrap input-group — keep inline */
.mns-search-bar .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: auto !important;
  position: relative !important;
}
/* The text input */
.mns-search-bar .input-group .form-control,
.mns-search-bar input[type="text"],
.mns-search-bar input[type="search"] {
  width: 210px !important;
  min-width: 160px !important;
  height: 42px !important;
  background: #f4f7fb !important;
  border: 1.5px solid #dde4ef !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  font-family: 'Open Sans', sans-serif !important;
  color: #2F34A6 !important;
  box-shadow: none !important;
  outline: none !important;
  flex: 1 !important;
  flex-shrink: 0 !important;
  transition: border-color 0.2s !important;
}
.mns-search-bar .input-group .form-control::placeholder,
.mns-search-bar input::placeholder { color: #aab8cc !important; font-style: italic !important; }
.mns-search-bar .input-group .form-control:focus,
.mns-search-bar input:focus {
  border-color: #2F34A6 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Submit button — target both Bootstrap .btn class and generic type */
.mns-search-bar .input-group .btn,
.mns-search-bar .input-group button[type="submit"],
.mns-search-bar button[type="submit"] {
  height: 42px !important;
  width: 48px !important;
  min-width: 48px !important;
  background: #2F34A6 !important;
  background-color: #2F34A6 !important;
  border: 1.5px solid #2F34A6 !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  color: #ffffff !important;
  font-size: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Magnifying glass icon */
.mns-search-bar .input-group .btn::after,
.mns-search-bar .input-group button[type="submit"]::after,
.mns-search-bar button[type="submit"]::after {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  content: '\f002' !important;
  font-size: 14px !important;
  color: #ffffff !important;
  display: block !important;
}
.mns-search-bar .input-group .btn:hover,
.mns-search-bar button[type="submit"]:hover {
  background: #FBBF01 !important;
  background-color: #FBBF01 !important;
  border-color: #FBBF01 !important;
}

/* ── Search loading spinner ─────────────────────────────────────
   global.js adds .is-searching to the form on submit. The search is a
   normal GET navigation, so this spins for the moment between the
   click and the results page painting — enough to show it registered. */
.mns-search-bar form.is-searching .input-group .btn::after,
.mns-search-bar form.is-searching button[type="submit"]::after {
  content: '' !important;
  width: 15px !important;
  height: 15px !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: mns-search-spin 0.6s linear infinite !important;
  font-size: 0 !important;
}

/* Keep the gold hover colour from hiding the spinner mid-request */
.mns-search-bar form.is-searching .input-group .btn,
.mns-search-bar form.is-searching button[type="submit"] {
  background: #2F34A6 !important;
  background-color: #2F34A6 !important;
  border-color: #2F34A6 !important;
  cursor: wait !important;
}

@keyframes mns-search-spin {
  to { transform: rotate(360deg); }
}
/* Hide the close/X button */
.mns-search-bar button.close,
.mns-search-bar .svg-close { display: none !important; }

/* Hardcoded fallback search form */
.mns-hdr-search-form { margin: 0; }
.mns-hdr-search-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #d0d9e8;
  border-radius: 6px;
  overflow: hidden;
}
.mns-hdr-search-input {
  width: 220px;
  height: 42px;
  border: none;
  outline: none;
  padding: 0 14px;
  font-size: 13.5px;
  color: #1a202c;
  background: #fff;
}
.mns-hdr-search-input::placeholder { color: #a0aec0; }
.mns-hdr-search-btn {
  width: 46px;
  height: 42px;
  border: none;
  cursor: pointer;
  background: #2F34A6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.mns-hdr-search-btn:hover { background: #FBBF01; color: #2F34A6; }

/* ══════════════════════════════════════════════════════════════
   ROW 3 — NAV BAR: full width dark navy
   🏠 HOME | Divisions | Resources | Initiatives | …
   ══════════════════════════════════════════════════════════════ */
.mns-nav-bar {
  background: #2F34A6;
  border-bottom: 3px solid #FBBF01;
  box-shadow: 0 2px 16px rgba(0,0,0,0.2);
  width: 100%;
}
.mns-nav-bar .container,
#header-1 .mns-nav-bar .container {
  background: #2F34A6 !important;
  background-color: #2F34A6 !important;
}

/* Nav collapse: always visible on desktop */
.mns-nav-collapse {
  background: #2F34A6 !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 992px) {
  .mns-nav-collapse {
    display: flex !important;
    flex-direction: row !important;
  }
}

/* Nav list — spread evenly across full width */
#header-1 .mns-nav-bar .navbar-nav,
.mns-nav-bar .navbar-nav,
.mns-nav-collapse .navbar-nav {
  display: flex !important;
  align-items: stretch !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

/* Nav item */
#header-1 .mns-nav-bar .navbar-nav .nav-item,
.mns-nav-bar .navbar-nav .nav-item,
.mns-nav-collapse .navbar-nav .nav-item {
  display: flex !important;
  align-items: stretch !important;
  border: none !important;
  padding: 0 !important;
  position: relative !important;
}
#header-1 .mns-nav-bar .navbar-nav .nav-item + .nav-item {
  border-left: none !important;
}

/* Nav links */
#header-1 .mns-nav-bar .navbar-nav .nav-item .nav-link,
#header-1 .mns-nav-bar .navbar-nav .nav-item a,
#header-1 .mns-nav-bar .navbar-nav li a,
.mns-nav-bar .navbar-nav .nav-link,
.mns-nav-collapse .navbar-nav .nav-link {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.92) !important;
  padding: 0 20px !important;
  height: 48px !important;
  border-radius: 0 !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
  background: transparent !important;
  background-color: transparent !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Dropdown caret — pure CSS triangle, no font dependency */
#header-1 .mns-nav-bar .navbar-nav .nav-item.dropdown > .nav-link::after,
.mns-nav-collapse .navbar-nav .nav-item.dropdown > .nav-link::after {
  content: '' !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  border-color: rgba(255,255,255,0.75) transparent transparent transparent !important;
  margin-left: 7px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  font-family: inherit !important;
  font-size: 0 !important;
  opacity: 1 !important;
}

/* Hover */
#header-1 .mns-nav-bar .navbar-nav .nav-item .nav-link:hover,
.mns-nav-bar .navbar-nav .nav-link:hover,
.mns-nav-collapse .navbar-nav .nav-link:hover {
  color: #FBBF01 !important;
  background: rgba(255,255,255,0.08) !important;
  background-color: rgba(255,255,255,0.08) !important;
}

/* Active item — gold background tab */
#header-1 .mns-nav-bar .navbar-nav .nav-item.active > .nav-link,
#header-1 .mns-nav-bar .navbar-nav .nav-item.in-active-trail > .nav-link,
.mns-nav-bar .navbar-nav .nav-item.active > .nav-link,
.mns-nav-collapse .navbar-nav .nav-item.active > .nav-link {
  color: #2F34A6 !important;
  background: #FBBF01 !important;
  background-color: #FBBF01 !important;
  font-weight: 700 !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* House icon on the active nav item */
#header-1 .mns-nav-bar .navbar-nav .nav-item.active > .nav-link::before,
.mns-nav-collapse .navbar-nav .nav-item.active > .nav-link::before {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  content: '\f015' !important;
  margin-right: 7px !important;
  font-size: 11px !important;
}

/* Dropdown menus — white with gold top accent */
#header-1 .mns-nav-bar .navbar-nav .dropdown-menu,
.mns-nav-bar .navbar-nav .dropdown-menu,
.mns-nav-collapse .navbar-nav .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(1,30,82,0.18) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  padding: 8px 0 !important;
  margin-top: 0 !important;
  border-top: 3px solid #FBBF01 !important;
  z-index: 9999 !important;
  min-width: 300px !important;
  width: max-content !important;
  overflow: visible !important;
}

/* Ensure parent containers don't clip the dropdown */
.mns-nav-bar,
.mns-nav-bar .container,
.mns-nav-collapse,
.mns-nav-bar .navbar-nav,
.mns-nav-bar .navbar-nav .nav-item {
  overflow: visible !important;
}
#header-1 .mns-nav-bar .navbar-nav .dropdown-menu .dropdown-item,
.mns-nav-collapse .navbar-nav .dropdown-menu .dropdown-item {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2F34A6 !important;
  padding: 10px 28px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.15s !important;
  background: transparent !important;
  background-color: transparent !important;
  white-space: nowrap !important;
}
#header-1 .mns-nav-bar .navbar-nav .dropdown-menu .dropdown-item:hover,
.mns-nav-collapse .navbar-nav .dropdown-menu .dropdown-item:hover {
  background: #f7f9fc !important;
  color: #2F34A6 !important;
  border-left-color: #FBBF01 !important;
  padding-left: 24px !important;
}

/* Right-anchor last few dropdown menus to avoid viewport overflow */
@media (min-width: 992px) {
  .mns-nav-bar .navbar-nav > li:nth-last-child(-n+3) > .dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }
}

/* (Click-to-open fix lives further down, scoped to .mns-main-collapse —
   the container the current header actually renders the nav into.) */

/* ── Divisions dropdown — standard vertical list (same as other menus) ── */
.navbar-nav .nav-item.element .dropdown-menu {
  display: none !important;
  min-width: 320px !important;
  width: max-content !important;
  max-width: 480px !important;
  padding: 8px 0 !important;
}

.navbar-nav .nav-item.element .dropdown-menu.show,
.navbar-nav .nav-item.element:hover > .dropdown-menu {
  display: block !important;
}

.navbar-nav .nav-item.element .submenu-1 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: unset !important;
  flex: unset !important;
}

.navbar-nav .nav-item.element .submenu-1 .dropdown-item {
  white-space: normal !important;
  word-break: normal !important;
  line-height: 1.4 !important;
  padding: 9px 24px !important;
}

/* ══════════════════════════════════════════════════════════════
   ROW 4 — NEWS TICKER: dark navy, centred 80%
   ══════════════════════════════════════════════════════════════ */
.mns-ticker {
  display: flex;
  align-items: center;
  background: #2F34A6;
  border-top: 1px solid rgba(255,255,255,0.06);
  height: 38px;
  overflow: hidden;
  width: 100%;
  flex-shrink: 0;
  padding: 0 10%;
  box-sizing: border-box;
}
.mns-ticker-label {
  background: #FBBF01;
  color: #2F34A6;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.mns-ticker-track {
  overflow: hidden;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
}
.mns-ticker-items {
  display: flex;
  align-items: center;
  gap: 24px;
  animation: mns-ticker-scroll 40s linear infinite;
  white-space: nowrap;
  padding-left: 24px;
}
.mns-ticker-items:hover { animation-play-state: paused; }
.mns-ticker-items span {
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  flex-shrink: 0;
  font-family: 'Open Sans', sans-serif;
}
.mns-ticker-items span a {
  color: #FBBF01;
  text-decoration: none;
  margin-left: 6px;
  font-weight: 600;
  transition: opacity 0.2s;
}
.mns-ticker-items span a:hover { opacity: 0.8; }
.mns-ticker-sep { color: rgba(255,255,255,0.2) !important; font-size: 10px !important; }
@keyframes mns-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Ensure sticky wrapper has no background of its own ── */
#header-1 .mns-navbar-wrap,
.mns-header .mns-navbar-wrap {
  background: transparent !important;
  background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   V2-STYLE SINGLE ROW HEADER — white bar: logo + nav + cta + search
   ══════════════════════════════════════════════════════════════ */
.mns-main-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(1,30,82,0.1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  width: 100%;
}
.mns-main-inner {
  display: flex;
  align-items: center;
  height: 110px;
  gap: 16px;
}

/* ── Logo area ── */
.mns-main-header .mns-logo-area {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  min-width: max-content !important; /* never let the brand squeeze */
  margin-right: 16px;
}
/* Desktop-only nudge — on mobile this pushed the logo almost entirely
   off the left edge of the viewport (it's not wide enough to compensate
   for a 130px shift the way the desktop layout is). */
@media (min-width: 992px) {
  .mns-main-header .mns-logo-area {
    transform: translateX(-130px); /* nudge left without affecting sibling layout */
  }
}
/* Flatten all Drupal block wrappers around the logo */
.mns-main-header .mns-logo-area > *,
.mns-main-header .mns-logo-area .block,
.mns-main-header .mns-logo-area .block > .content {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.mns-main-header .mns-logo-area .navbar-brand {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}
.mns-main-header .mns-logo-area .navbar-brand img {
  height: 90px !important;
  width: auto !important;
  display: block !important;
  margin-right: 12px !important; /* gap between COA and text */
}
.mns-main-header .mns-site-name {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.15;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
.mns-main-header .mns-ministry-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #2F34A6 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1.15 !important;
  display: block !important;
  white-space: nowrap !important;
}
.mns-main-header .mns-gov-label {
  font-size: 11px !important;
  color: #718096 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  margin: 3px 0 0 0 !important;
  white-space: nowrap !important;
}

/* ── Nav collapse wrapper ── */
.mns-main-collapse {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* ── Primary menu — styled for white background ── */
.mns-main-collapse nav,
.mns-main-collapse .navbar-nav-wrapper { width: 100%; display: flex; justify-content: center; }
.mns-main-collapse .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  justify-content: center !important;
  background: transparent !important;
  width: auto !important;
}
.mns-main-collapse .navbar-nav .nav-item {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  border: none !important;
  padding: 0 !important;
}
.mns-main-collapse .navbar-nav .nav-item .nav-link,
.mns-main-collapse .navbar-nav .nav-item a.nav-link {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  /* 700 to match .site-nav a in the WEBGO app's stylesheet. */
  font-weight: 700 !important;
  color: #2d3748 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 8px 16px !important;
  height: auto !important;
  border-radius: 6px !important;
  transition: background .2s, color .2s !important;
  white-space: nowrap !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}
.mns-main-collapse .navbar-nav .nav-item .nav-link:hover {
  background: #f0f4f8 !important;
  color: #2F34A6 !important;
}
.mns-main-collapse .navbar-nav .nav-item.active > .nav-link,
.mns-main-collapse .navbar-nav .nav-item.in-active-trail > .nav-link {
  color: #2F34A6 !important;
  background: #f0f4f8 !important;
  font-weight: 700 !important;
}
/* Dropdown caret — dark for white bg.
   .element is the mega-menu item type (Divisions); it has a submenu just
   like .dropdown does, so it gets the same caret. */
.mns-main-collapse .navbar-nav .nav-item.dropdown > .nav-link::after,
.mns-main-collapse .navbar-nav .nav-item.element > .nav-link::after {
  content: '' !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  border-color: #718096 transparent transparent transparent !important;
  margin-left: 5px !important;
  flex-shrink: 0 !important;
  font-family: inherit !important;
  font-size: 0 !important;
}
.mns-main-collapse .navbar-nav .nav-item.dropdown:hover > .nav-link::after,
.mns-main-collapse .navbar-nav .nav-item.element:hover > .nav-link::after {
  border-color: #2F34A6 transparent transparent transparent !important;
}

/* The menu template stamps .nav-item.dropdown on every top-level item,
   including ones with no submenu (Careers, Home, Contact Us) — so they
   were drawing a caret that opens nothing. Only show it where a real
   .dropdown-menu exists. Browsers without :has() simply ignore this and
   keep the previous behaviour. */
.mns-main-collapse .navbar-nav .nav-item.dropdown:not(:has(.dropdown-menu)) > .nav-link::after,
.mns-main-collapse .navbar-nav .nav-item.dropdown:not(:has(.dropdown-menu)):hover > .nav-link::after,
.mns-main-collapse .navbar-nav .nav-item.element:not(:has(.dropdown-menu)) > .nav-link::after,
.mns-main-collapse .navbar-nav .nav-item.element:not(:has(.dropdown-menu)):hover > .nav-link::after {
  content: none !important;
  display: none !important;
  margin-left: 0 !important;
}
/* Remove home icon from active item (only relevant in old navy bar) */
.mns-main-collapse .navbar-nav .nav-item.active > .nav-link::before { content: none !important; }
/* Dropdown panels */
.mns-main-collapse .navbar-nav .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 1px) !important;
  left: 0 !important;
  border: 1px solid rgba(1,30,82,0.1) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(47,52,166,0.14) !important;
  background: #ffffff !important;
  padding: 6px !important;
  margin-top: 0 !important;
  border-top: 3px solid #FBBF01 !important;
  z-index: 9999 !important;
  min-width: 210px !important;
  width: max-content !important;
}
.mns-main-collapse .navbar-nav,
.mns-main-collapse .navbar-nav .nav-item { overflow: visible !important; }
.mns-main-collapse .navbar-nav .dropdown-menu .dropdown-item {
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #2d3748 !important;
  padding: 9px 14px !important;
  border-left: none !important;
  border-radius: 5px !important;
  transition: background .15s, color .15s !important;
  background: transparent !important;
  white-space: normal !important;
}
.mns-main-collapse .navbar-nav .dropdown-menu .dropdown-item:hover {
  background: #f0f4f8 !important;
  color: #2F34A6 !important;
  border-left: none !important;
  padding-left: 14px !important;
}
/* Right-anchor last menus to avoid viewport overflow */
@media (min-width: 992px) {
  .mns-main-collapse .navbar-nav > li:nth-last-child(-n+3) > .dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }
}

/* ── Click-to-open fix (Resources, Initiatives, Media, About Us…) ──
   These menus use Bootstrap's dropdown JS (data-bs-toggle="dropdown"),
   which positions the panel with Popper via an INLINE
   `transform: translate3d(...)` and `inset: 0 auto auto 0`. Hovering is
   pure CSS — no JS, no transform — so the panel lands where the rules
   above put it; clicking adds Popper's transform on top and throws it
   off diagonally. Neutralise Popper's positioning so a clicked menu
   lands exactly where a hovered one does. */
@media (min-width: 992px) {
  .mns-main-collapse .navbar-nav .dropdown-menu.show,
  .mns-main-collapse .navbar-nav .dropdown-menu[data-bs-popper] {
    /* custom.css has a "multi-column mega menu" rule
       (.navbar-nav > li > .dropdown-menu.show { display: flex })
       that lays clicked menus out horizontally. Hover never triggers it
       because .show is only added by the JS — hence click ≠ hover.
       Force a normal vertical list. */
    display: block !important;
    flex-wrap: nowrap !important;
    transform: none !important;
    inset: auto !important;
    top: calc(100% + 1px) !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
  }

  /* Each item full width, not a flex column */
  .mns-main-collapse .navbar-nav .dropdown-menu.show > li,
  .mns-main-collapse .navbar-nav .dropdown-menu.show > li.submenu-1 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
  }

  /* Keep the last few menus right-anchored when opened by click too */
  .mns-main-collapse .navbar-nav > li:nth-last-child(-n+3) > .dropdown-menu.show,
  .mns-main-collapse .navbar-nav > li:nth-last-child(-n+3) > .dropdown-menu[data-bs-popper] {
    left: auto !important;
    right: 0 !important;
  }
}
/* Style the last nav item (Contact Us) as a navy CTA button */
.mns-main-collapse .navbar-nav .nav-item:last-child > .nav-link {
  background: #2F34A6 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  margin-left: 8px !important;
}
.mns-main-collapse .navbar-nav .nav-item:last-child > .nav-link:hover {
  background: #1E2170 !important;
  color: #ffffff !important;
}
/* Mobile: Contact Us shouldn't stretch full-width like a plain nav
   link — it's meant to read as a button. */
@media (max-width: 991.98px) {
  .mns-main-collapse .navbar-nav .nav-item:last-child {
    width: auto !important;
    padding: 8px 20px 4px !important;
  }
  .mns-main-collapse .navbar-nav .nav-item:last-child > .nav-link {
    width: auto !important;
    display: inline-flex !important;
    padding: 10px 22px !important;
    border-bottom: none !important;
    margin-left: 0 !important;
  }
}

/* ── Mobile: dropdown submenus open inline, not as a floating panel ──
   The base rule above (position: absolute) is a desktop flyout with no
   mobile guard, so on a phone a clicked submenu floated on top of (and
   hid) the nav items below it, instead of pushing them down like a
   normal mobile accordion. Force it into the document flow here. */
@media (max-width: 991.98px) {
  /* The mega-menu variant (.nav-item.element, used by "About Us" etc.)
     has its own min-width:320px/width:max-content/max-width:480px rule
     with one more class than the selector below, so it was winning on
     specificity despite loading earlier — repeat .nav-item.element and
     .nav-item.dropdown explicitly here so both variants are covered. */
  .mns-main-collapse .navbar-nav .dropdown-menu,
  .mns-main-collapse .navbar-nav .nav-item.element .dropdown-menu,
  .mns-main-collapse .navbar-nav .nav-item.dropdown .dropdown-menu {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f7f9fc !important;
  }
  .mns-main-collapse .navbar-nav .dropdown-menu .dropdown-item {
    padding: 10px 20px 10px 32px !important;
    border-radius: 0 !important;
  }
  /* The real culprit: .nav-item itself is display:flex (desktop link
     vertical-centering), and the <a> + <ul class="dropdown-menu"> are
     siblings inside it — so once the menu is position:static (above),
     it becomes a flex item sitting beside the link instead of a block
     below it. Let the row wrap, and force the menu onto its own
     full-width line. */
  .mns-main-collapse .navbar-nav .nav-item {
    flex-wrap: wrap !important;
  }
  .mns-main-collapse .navbar-nav .nav-item > .dropdown-menu {
    flex: 1 1 100% !important;
  }
  /* Mega-menu's own item rule also forces width/flex values on its
     direct <li> children — flatten those too. */
  .mns-main-collapse .navbar-nav .nav-item.element .submenu-1 {
    width: 100% !important;
  }
}

/* ── Contact Us CTA button ── */
.mns-contact-btn {
  display: inline-flex;
  align-items: center;
  background: #2F34A6;
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s;
}
.mns-contact-btn:hover { background: #1E2170; color: #ffffff !important; }

/* ── Search in main header ── */
.mns-main-header .mns-search-bar {
  flex-shrink: 0;
  margin-left: 0;
  display: flex;
  align-items: center;
}
.mns-main-header .mns-hdr-search-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid #d0dce8;
  border-radius: 6px;
  overflow: hidden;
}
.mns-main-header .mns-hdr-search-input {
  width: 190px !important;
  height: 40px !important;
  border: none !important;
  outline: none !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  color: #1a202c !important;
  background: #fff !important;
  border-radius: 0 !important;
}
.mns-main-header .mns-hdr-search-input::placeholder { color: #a0aec0 !important; font-style: normal !important; }
.mns-main-header .mns-hdr-search-btn {
  width: 42px !important;
  height: 40px !important;
  border: none !important;
  cursor: pointer !important;
  background: #2F34A6 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background .2s !important;
  border-radius: 0 !important;
}
.mns-main-header .mns-hdr-search-btn::after { content: none !important; }
.mns-main-header .mns-hdr-search-btn:hover { background: #FBBF01 !important; color: #2F34A6 !important; }
.mns-main-header .mns-hdr-search-btn svg { pointer-events: none; }

/* Also style Drupal's search block output inside .mns-main-header */
.mns-main-header .mns-search-bar input[type="search"],
.mns-main-header .mns-search-bar input[type="text"] {
  width: 190px !important; height: 40px !important;
  border: none !important; outline: none !important;
  border-right: none !important; border-radius: 0 !important;
  padding: 0 12px !important; font-size: 13px !important;
  background: #f4f7fb !important; color: #2F34A6 !important;
}
.mns-main-header .mns-search-bar button[type="submit"] {
  width: 42px !important; height: 40px !important;
  background: #2F34A6 !important; border: none !important;
  border-radius: 0 !important; color: #fff !important;
  cursor: pointer !important; transition: background .2s !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.mns-main-header .mns-search-bar button[type="submit"]:hover {
  background: #FBBF01 !important; color: #2F34A6 !important;
}

/* ── Mobile ── */
@media (max-width: 991.98px) {
  .mns-main-inner { height: 70px; gap: 10px; }
  .mns-main-header .mns-logo-area .navbar-brand img { height: 50px !important; }
  .mns-coa-img { height: 40px !important; }
  .mns-main-header .mns-logo-area { margin-right: 0; }
  .mns-main-header .mns-site-name { display: none !important; }
  .mns-main-header .mns-search-bar { display: none !important; }
  .mns-contact-btn { display: none !important; }
  .mns-main-inner { width: 100% !important; position: relative !important; padding-right: 44px; flex-wrap: wrap !important; }
  .mns-main-header .mns-hamburger {
    display: flex !important;
    padding: 6px;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
  }
  /* A normal mobile menu: an overlay panel anchored under the header
     (not inline content that pushes the whole page down forever), with
     its own scrollbar once it's taller than the screen. */
  .mns-main-collapse {
    flex: none !important;
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    background: #ffffff !important;
    padding: 8px 0 16px !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1000 !important;
    box-shadow: 0 16px 32px rgba(1,30,82,0.18) !important;
    border-top: 1px solid rgba(1,30,82,0.08) !important;
  }
  .mns-main-collapse.show { display: flex !important; }
  .mns-main-collapse .navbar-nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 0 !important;
  }
  .mns-main-collapse .navbar-nav .nav-item { width: 100% !important; }
  .mns-main-collapse .navbar-nav .nav-item .nav-link {
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(1,30,82,0.06) !important;
  }
}

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Show hamburger */
  .mns-hamburger { display: flex !important; }

  /* Compact brand row */
  .mns-brand-inner { min-height: 56px !important; padding: 8px 0 !important; }
  .mns-logo-area { flex: 0 0 auto !important; }
  .mns-logo-area .navbar-brand img { height: 40px !important; width: auto !important; }
  .mns-site-name { display: none !important; }
  .mns-logo-divider { display: none !important; }
  .mns-search-bar { display: none !important; }

  /* Mobile nav: collapse into full-width stack */
  .mns-nav-collapse {
    flex-direction: column !important;
    padding: 8px 0 16px !important;
    width: 100% !important;
  }
  .mns-nav-collapse.show {
    display: flex !important;
    flex-direction: column !important;
  }
  .mns-nav-bar .navbar-nav,
  .mns-nav-collapse .navbar-nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  .mns-nav-bar .navbar-nav .nav-item,
  .mns-nav-collapse .navbar-nav .nav-item { width: 100% !important; }
  .mns-nav-bar .navbar-nav .nav-item .nav-link,
  .mns-nav-collapse .navbar-nav .nav-item .nav-link {
    width: 100% !important;
    padding: 12px 20px !important;
    height: auto !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

  .mns-ticker { width: 100%; }
  .mns-topbar-left .mns-topbar-link:last-child { display: none; }
}

/* ── SLIDER TICKER (inside hero banner) ──────────────────────── */
.mns-slider-ticker {
  display: flex;
  align-items: center;
  background: rgba(1,30,82,0.88);
  height: 38px;
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 10;
  padding: 0 10%;
  box-sizing: border-box;
}
.mns-slider-ticker .mns-ticker-label {
  background: #FBBF01;
  color: #2F34A6;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.mns-slider-ticker .mns-ticker-track {
  overflow: hidden;
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
}
.mns-slider-ticker .mns-ticker-items {
  display: flex;
  align-items: center;
  gap: 24px;
  animation: mns-ticker-scroll 40s linear infinite;
  white-space: nowrap;
  padding-left: 24px;
}
.mns-slider-ticker .mns-ticker-items:hover { animation-play-state: paused; }
.mns-slider-ticker .mns-ticker-items span {
  color: rgba(255,255,255,0.80);
  font-size: 13px;
  flex-shrink: 0;
  font-family: 'Open Sans', sans-serif;
}
.mns-slider-ticker .mns-ticker-items span a {
  color: #FBBF01;
  text-decoration: none;
  margin-left: 6px;
  font-weight: 600;
}
.mns-slider-ticker .mns-ticker-items span a:hover { opacity: 0.8; }
.mns-slider-ticker .mns-ticker-sep { color: rgba(255,255,255,0.2) !important; font-size: 10px !important; }

/* ── OWL CAROUSEL FADE ANIMATION ──────────────────────────── */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in  { z-index: 0; }
.owl-carousel .owl-animated-out { z-index: 1; }

@keyframes fadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.fadeOut { animation-name: fadeOut; }
.fadeIn  { animation-name: fadeIn; }

/* ═══════════════════════════════════════
   HERO SLIDER — Ken Burns + Fade
   ═══════════════════════════════════════ */
.mySwiper .swiper-slide {
  width: 100% !important;
  height: 88vh !important;
  min-height: 480px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: none !important;
}
@media (max-width: 767px) {
  .mySwiper .swiper-slide { height: 60vh !important; min-height: 360px !important; }
}

.mySwiper .swiper-slide .slide-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: contain !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  transform: scale(1);
  transform-origin: center bottom;
  z-index: 0 !important;
  will-change: transform;
}

/* Slides with a link (field_button_link) are clickable across the whole
   image, not just a small button — see paragraph--hero_slide_style_2. */
.mySwiper .swiper-slide > a.swiper-slide-link {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
}
.mySwiper .swiper-slide-active .slide-bg,
.mySwiper .swiper-slide-duplicate-active .slide-bg {
  animation: mnsKenBurns 8s ease-in-out forwards !important;
}
@keyframes mnsKenBurns {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.03); }
}
.mySwiper .swiper-slide .banner-content {
  position: relative !important;
  z-index: 2 !important;
}
.mySwiper .banner-content h1,
.mySwiper .banner-content p,
.mySwiper .banner-content a {
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.9s ease, opacity 0.9s ease;
}
.mySwiper .swiper-slide-active .banner-content h1 { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.mySwiper .swiper-slide-active .banner-content p  { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.mySwiper .swiper-slide-active .banner-content a  { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }

/* ═══════════════════════════════════════════════════════════════
   HERO SLIDER SECTION — full-width, reference-style
   ═══════════════════════════════════════════════════════════════ */

/* Hide OLD side contact strips — replaced by new .mns-side-* strips */
.normal-contact,
.social-contact { display: none !important; }

/* ── LEFT SIDE STRIP — black, phone + email, rotated text ──────── */
.mns-side-contact {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 38px !important;
  z-index: 20 !important;
  background: #111111 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}
.mns-side-contact .mns-side-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,0.80) !important;
  text-decoration: none !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  padding: 20px 0 !important;
  white-space: nowrap !important;
  letter-spacing: 0.4px !important;
  transition: color 0.2s !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  width: 100% !important;
  justify-content: center !important;
}
.mns-side-contact .mns-side-item:first-child { border-top: none !important; }
.mns-side-contact .mns-side-item:hover { color: #FBBF01 !important; }
.mns-side-contact .mns-side-item svg {
  flex-shrink: 0 !important;
  opacity: 0.75 !important;
  transform: rotate(90deg) !important;
}

/* ── RIGHT SIDE STRIP — blue, stacked social icons ─────────────── */
.mns-side-social {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 38px !important;
  z-index: 20 !important;
  background: #2F34A6 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 16px 0 !important;
}
.mns-side-social .social-icons,
.mns-side-social .fontawesome-icons,
.mns-side-social ul,
.mns-side-social .block,
.mns-side-social > div,
.mns-side-social .field {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}
.mns-side-social a {
  width: 38px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  transition: background 0.2s !important;
  background: transparent !important;
}
.mns-side-social a:hover { background: rgba(255,255,255,0.15) !important; }
.mns-side-social a i { font-size: 15px !important; color: #ffffff !important; }

.home3-info.home-page,
.home3-info {
  min-height: 0 !important;
  height: 88vh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background-image: none !important;
}
.home3-info .container12 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
}
.home3-info-block {
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  position: relative !important;
}
.home3-info-block .mySwiper,
.home3-info-block .swiper {
  height: 88vh !important;
  min-height: 480px !important;
  width: 100% !important;
}
.home3-info-block .swiper-slide {
  height: 88vh !important;
  min-height: 480px !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: #2F34A6 !important;
}
.home3-info-block .swiper-slide .slide-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: contain !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  will-change: transform !important;
  z-index: 0 !important;
}
/* No overlay — images have baked-in text, keep them clean */
.home3-info-block .swiper-slide::after {
  display: none !important;
  content: none !important;
}
.home3-info-block .banner-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 0 0 0 8% !important;
  max-width: 700px !important;
  width: 100% !important;
}
.home3-info-block .banner-content::before { content: none !important; display: none !important; }

/* Content text (for slides that have HTML text) */
.home3-info-block .banner-content h1 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(38px, 5.5vw, 74px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5) !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.5px !important;
}
.home3-info-block .banner-content p {
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(15px, 1.8vw, 20px) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35) !important;
  margin-bottom: 36px !important;
  max-width: 520px !important;
}
.home3-info-block .banner-content .btn-outline-primary,
.home3-info-block .banner-content .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FBBF01 !important;
  border: 2px solid #FBBF01 !important;
  color: #2F34A6 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 13px 32px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 20px rgba(251,191,1,0.35) !important;
}
.home3-info-block .banner-content .btn-outline-primary:hover,
.home3-info-block .banner-content .btn:hover {
  background: transparent !important;
  color: #FBBF01 !important;
  box-shadow: 0 4px 20px rgba(251,191,1,0.2) !important;
}

/* ── Swiper navigation arrows — round, on image edges ─────── */
.home3-info-block .swiper-button-prev,
.home3-info-block .swiper-button-next {
  width: 52px !important;
  height: 52px !important;
  background: rgba(255,255,255,0.15) !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transition: all 0.25s !important;
  top: 50% !important;
  margin-top: -26px !important;
  z-index: 10 !important;
}
.home3-info-block .swiper-button-prev { left: 28px !important; }
.home3-info-block .swiper-button-next { right: 28px !important; }
.home3-info-block .swiper-button-prev:hover,
.home3-info-block .swiper-button-next:hover {
  background: #FBBF01 !important;
  border-color: #FBBF01 !important;
}
.home3-info-block .swiper-button-prev::after,
.home3-info-block .swiper-button-next::after {
  font-size: 16px !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* ── Swiper pagination dots ── */
.home3-info-block .swiper-pagination {
  bottom: 24px !important;
  z-index: 10 !important;
}
.home3-info-block .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  background: rgba(255,255,255,0.45) !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  transition: all 0.3s !important;
}
.home3-info-block .swiper-pagination-bullet-active {
  background: #FBBF01 !important;
  width: 28px !important;
  border-radius: 5px !important;
}

/* Hide old duplicate divider-btn arrows */
.home3-info .divider-btn { display: none !important; }

@media (max-width: 767px) {
  /* The designed slide graphics are wide/short (~2.1–2.6:1) — a fixed
     60vh/360px box was much taller than that shape needs, forcing
     "cover" to zoom in and crop heavily. Size to the image's own
     proportions instead so it sits naturally with little to no crop. */
  .home3-info.home-page, .home3-info { height: auto !important; min-height: 0 !important; aspect-ratio: 2.3 / 1; }
  .home3-info-block .mySwiper, .home3-info-block .swiper { height: auto !important; min-height: 0 !important; aspect-ratio: 2.3 / 1; }
  .home3-info-block .swiper-slide { height: auto !important; min-height: 0 !important; aspect-ratio: 2.3 / 1; }
  .home3-info-block .banner-content { padding: 0 0 0 5% !important; max-width: 95% !important; }
  .home3-info-block .banner-content h1 { font-size: clamp(20px, 6vw, 32px) !important; }
  .home3-info-block .swiper-button-prev { left: 10px !important; }
  .home3-info-block .swiper-button-next { right: 10px !important; }
}

/* ── OVERRIDE STYLE.CSS / CUSTOM.CSS CONFLICTS ───────────────── */

/* style.css sets .header1 .nav-sticky { background: white; z-index: 999 } — override */
.header1 .nav-sticky.mns-navbar-wrap {
  background: transparent !important;
  box-shadow: none !important;
  z-index: 200 !important;
}

/* Brand row must be white regardless */
#header-1 .mns-header-brand {
  background: #ffffff !important;
}

/* Nav bar must be dark navy regardless */
#header-1 .mns-nav-bar {
  background: #2F34A6 !important;
}
#header-1 .mns-nav-bar .container {
  background: #2F34A6 !important;
}

/* custom.css line 1491 adds 20px right padding + border-right to logo — strip both */
#header-1 .navbar-brand,
#header-1 .header1 .navbar-brand,
.header1 #header-1 .navbar-brand {
  border-right: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* custom.css line 1500 centres navbar-nav — undo for our layout */
#header-1 .header1 .navbar-nav,
.header1 #header-1 .navbar-nav { justify-content: flex-start !important; }

/* Toolbar offset when Drupal admin bar is visible */
.toolbar-fixed #header-1 .mns-navbar-wrap.navigation-sticky.sticky { top: 40px !important; }
.toolbar-fixed.toolbar-tray-open #header-1 .mns-navbar-wrap.navigation-sticky.sticky { top: 79px !important; }

/* ================================================================
   HERO BANNER — mobile fill fix. Placed at the very end of this file
   so it wins source order against the two earlier (unguarded)
   "background-size: contain" declarations that were leaving big blue
   bands around the designed slide graphics on narrow screens.
   ================================================================ */
@media (max-width: 767px) {
  .mySwiper .swiper-slide .slide-bg,
  .home3-info-block .swiper-slide .slide-bg {
    background-size: cover !important;
    background-position: center center !important;
  }
}