/* =========================================================
   HOME.CSS — Department of Arts and Culture, Government of Meghalaya
   Homepage-only styles. Base styles and the Cinnamon Red colour
   tokens live in style.css, so load style.css first.

   1.  Hero banner
   2.  Announcements ticker
   3.  About Us + Leadership
   4.  Section headings (one style for every homepage section)
   5.  What's New + Key Offerings
   6.  Our Organisations
   7.  Services for You (personas)
   8.  Online Services + Important Links
   9.  Visit Us (location)
   10. Government portals logo slider
   11. Other homepage blocks (not on the current homepage markup)
   12. Reduced motion

   Section backgrounds alternate automatically (section 4b):
   About Us white → next section tint → white → tint …
   ========================================================= */

/* =========================================================
   1. HERO BANNER
   ========================================================= */
.centralimg { width: 100%; overflow: hidden; }
.carousel-inner,
.carousel-item,
.carousel-item img { border-radius: 0 !important; }
.carousel-inner { overflow: hidden; }
.centralimg img { display: block; width: 100%; height: auto; object-fit: cover; }
.centralimg iframe { width: 100% !important; height: 100% !important; }
@media (min-width: 990.5px) and (max-width: 1199.5px) {
  .centralimg { margin-top: 2px; }
}

/* Large white arrows on the banner */
#govBanner .carousel-control-prev,
#govBanner .carousel-control-next {
  width: 10% !important;
  opacity: 1 !important;
}
#govBanner .carousel-control-prev-icon,
#govBanner .carousel-control-next-icon {
  position: relative;
  display: inline-block;
  width: 6rem !important;
  height: 6rem !important;
  background-image: none !important;
  background-color: rgba(var(--dbim-shadow-rgb), .45);
  border-radius: 50%;
  opacity: 1 !important;
}
#govBanner .carousel-control-prev-icon::after,
#govBanner .carousel-control-next-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2rem;
  height: 2.2rem;
  border-top: 5px solid var(--dbim-white);
  border-right: 5px solid var(--dbim-white);
  border-radius: 2px;
}
#govBanner .carousel-control-prev-icon::after { transform: translate(-35%, -50%) rotate(-135deg); }
#govBanner .carousel-control-next-icon::after { transform: translate(-65%, -50%) rotate(45deg); }
#govBanner .carousel-control-prev:focus-visible .carousel-control-prev-icon,
#govBanner .carousel-control-next:focus-visible .carousel-control-next-icon {
  outline: 3px solid var(--dbim-white);
  outline-offset: 3px;
}
@media (max-width: 575.98px) {
  #govBanner .carousel-control-prev-icon,
  #govBanner .carousel-control-next-icon { width: 4.4rem !important; height: 4.4rem !important; }
  #govBanner .carousel-control-prev-icon::after,
  #govBanner .carousel-control-next-icon::after { width: 1.6rem; height: 1.6rem; border-width: 4px; }
}

/* =========================================================
   2. ANNOUNCEMENTS TICKER
   ========================================================= */
.news-ticker-horizontal {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  min-height: 8rem;
  padding: 1.2rem 16rem 1.2rem 12rem;
  overflow: hidden;
  background: var(--dbim-linen);
  border-top: 1px solid var(--dbim-grey-01);
  border-bottom: 1px solid var(--dbim-grey-01);
  box-sizing: border-box;
}
.news-ticker-horizontal h2 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: 0 1.2rem 0 0;
  color: var(--dbim-deep-earthy-brown);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.news-ticker-horizontal h2 img { width: 2rem; height: 2rem; }
.news-ticker-horizontal .ticker-window {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  height: 4.4rem;
  overflow: hidden;
}
.news-ticker-horizontal .ticker-track {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
/* Only the active notice shows; it moves right to left */
.news-ticker-horizontal .ticker-track a {
  display: none;
  width: 100%;
  overflow: hidden;
  color: var(--dbim-deep-earthy-brown);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.45;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-ticker-horizontal .ticker-track a.is-active {
  display: block;
  animation: announcementMoveLeft 14s linear both;
}
.news-ticker-horizontal .ticker-track a:hover {
  color: var(--dbim-deep-earthy-brown);
  text-decoration: underline;
}
.news-ticker-horizontal.is-paused .ticker-track a.is-active { animation-play-state: paused; }
@keyframes announcementMoveLeft {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

/* Pause / play button (44px touch target) */
.news-ticker-horizontal .ticker-toggle {
  position: absolute;
  top: 50%;
  right: 10.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-columbia-blue);
  border-radius: 50%;
  color: var(--dbim-wintergreen-dream);
  cursor: pointer;
  transform: translateY(-50%);
}
.news-ticker-horizontal .ticker-toggle img { width: 2rem; height: 2rem; }
.news-ticker-horizontal .ticker-toggle .material-symbols-outlined { font-size: 2.1rem; }
.news-ticker-horizontal .ticker-toggle:hover { background: var(--dbim-azureish-white); }
.news-ticker-horizontal .ticker-toggle:focus-visible {
  outline: 3px solid var(--dbim-info-blue);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .news-ticker-horizontal { gap: 1.2rem; padding-left: 3rem; padding-right: 7rem; }
  .news-ticker-horizontal .ticker-toggle { right: 2rem; }
}
@media (max-width: 767.98px) {
  .news-ticker-horizontal { min-height: 6.4rem; padding: 1rem 5.6rem 1rem 1.5rem; gap: .8rem; }
  .news-ticker-horizontal h2 { padding-right: .4rem; font-size: 1.4rem; }
  .news-ticker-horizontal .ticker-window { height: 4.2rem; }
  .news-ticker-horizontal .ticker-track a { font-size: 1.3rem; line-height: 1.35; }
  .news-ticker-horizontal .ticker-toggle { right: .7rem; }
}

/* =========================================================
   3. ABOUT US + LEADERSHIP
   ========================================================= */
.minister-profile {
  width: 100%;
  max-width: 34rem;
  height: 100%;
  margin: 0 auto;
  padding: .8rem 1.6rem 1.6rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-top: 4px solid var(--dbim-wintergreen-dream);
  border-radius: .4rem;
  text-align: center;
  box-sizing: border-box;
}
.minister-photo {
  width: 100%;
  height: 12.5rem;
  margin: 0 auto 1.2rem;
  overflow: hidden;
  background: var(--dbim-white);
}
.minister-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.minister-profile h3,
.minister-profile > p {
  margin: 0 0 .6rem;
  color: var(--dbim-deep-earthy-brown);
  font-weight: 700;
  line-height: 1.45;
}
.minister-profile small {
  display: block;
  color: var(--dbim-deep-earthy-brown);
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* Sit the leadership cards level with the About Us text */
@media (min-width: 769px) {
  #main-content section[aria-labelledby="about-heading"] > .row > .col-lg-4.col-md-5 { padding-top: 3rem; }
}
@media (max-width: 768px) {
  .minister-profile { padding: 1.2rem; }
  .minister-photo { height: 11.5rem; }
}
@media (max-width: 480px) {
  .minister-profile { max-width: 100%; padding: 1rem; }
  .minister-photo { height: 10rem; margin-bottom: 1rem; }
  .minister-profile h3,
  .minister-profile > p { font-size: 1.4rem; }
  .minister-profile small { font-size: 1.2rem; }
}

/* =========================================================
   4. SECTION HEADINGS — one style for every homepage section
   (About Us, What's New, Key Offerings, Our Organisations,
   Services for You, Online Services, Location, Important Links)
   ========================================================= */
.section-heading,
.intro-heading-box,
.map-section-heading,
.important-links-heading {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  width: 100%;
  margin: 0 0 1.6rem;
  padding: 0;
  background: transparent;
  border: 0;
}
.section-heading > img,
.intro-heading-box > img,
.map-section-heading > img,
.important-links-heading > img {
  display: block;
  flex: 0 0 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  margin: 0;
  object-fit: contain;
}
.section-heading h2,
.section-heading .section-title,
.intro-heading-box h2 {
  flex: 0 1 auto;
  margin: 0 !important;
  padding: 0;
  color: var(--dbim-powder-blue) !important;
  font-size: 2.4rem;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: left;
}
.intro-heading-box h2 a { color: inherit; text-decoration: none; }
.intro-heading-box h2 a:hover { text-decoration: underline; }
@media (max-width: 991.5px) {
  .section-heading h2,
  .section-heading .section-title,
  .intro-heading-box h2 { font-size: 2rem; }
}

/* =========================================================
   4b. ALTERNATING SECTION BACKGROUNDS
   Counts the <section> elements inside <main>, so it keeps working
   if you add, remove or reorder sections:
   Ticker (linen) → About Us (white) → tint → white → tint → white …
   ========================================================= */
/* Set explicitly, in page order, so nothing (like the banner carousel
   being counted, or personas.css) can break the pattern.
   If you add a section, give it the next colour in the sequence. */
#main-content > section.container                       { background: var(--dbim-white) !important; }       /* About Us   — white */
#main-content > section.news-section                    { background: var(--dbim-section-bg) !important; }  /* What's New — tint  */
#main-content > section.organisations-section           { background: var(--dbim-white) !important; }       /* Organisations — white */
#main-content > section.personas-section                { background: var(--dbim-section-bg) !important; }  /* Personas   — tint  */
#main-content > section.services-links-section          { background: var(--dbim-white) !important; }       /* Online Services — white */
#main-content > section.location-section                { background: var(--dbim-section-bg) !important; }  /* Visit Us   — tint  */
#main-content > section.important-links-slider-section  { background: var(--dbim-white) !important; }       /* Logo slider — white */

/* Sections that sit inside .container (like About Us) need their own
   vertical spacing because the background is the page's white */
#main-content > section.container { padding-top: 4rem; padding-bottom: 4rem; }


/* =========================================================
   5. WHAT'S NEW + KEY OFFERINGS
   ========================================================= */
.news-section { /* background set by the alternating rule in section 4 */ }

/* Shared small labels */
.badge-new {
  display: inline-block;
  margin-left: .6em;
  padding: .15em .6em;
  background: var(--dbim-coral-red);        /* red "New" label, as on megeducation */
  border: 1px solid var(--dbim-white);      /* keeps it distinct on the dark row */
  border-radius: .3rem;
  color: var(--dbim-white);                 /* 4.5:1 on coral red */
  font-size: .75em;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
  text-transform: uppercase;
  vertical-align: middle;
}
.file-type {
  color: #4A4A4A;                 /* 8.9:1 on white */
  font-size: .85em;
  white-space: nowrap;
}

.home-news { padding: 4rem 0; }
.home-news .section-heading { margin-bottom: 1.6rem; }

.home-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.4rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-radius: 1.2rem;
}
.home-panel .text-end { margin-top: auto !important; padding-top: 1.6rem; }
@media (max-width: 575.98px) { .home-panel { padding: 1.6rem; } }

/* What's New list: the 5 latest items (no scroll box) */
.wn-scroll { display: flex; flex-direction: column; flex: 1 1 auto; }
.wn-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each notice is a filled bar: darkest palette shade, white text */
.wn-item { display: flex; margin: 0; }
.wn-item a {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  padding: 1.2rem 1.6rem;
  background: var(--dbim-wintergreen-dream);   /* #5D3E00 — white text ≈11:1 */
  border-radius: .6rem;
  color: var(--dbim-white);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .2s ease;
}
.wn-item .wn-text { flex: 1 1 auto; min-width: 0; }
.wn-item a .file-type { color: var(--dbim-white); opacity: .9; }
/* Chevron before each item: white on the dark row */
.wn-item .wn-icon {
  flex: 0 0 1.6rem;
  width: 1.6rem;
  height: 1.6rem;
  filter: brightness(0) invert(1);   /* any icon colour → white */
}
.wn-item a:hover {
  background: var(--dbim-powder-blue);         /* #2D8686 — white text ≈7:1 */
  color: var(--dbim-white);
}
.wn-item a:hover .wn-text { text-decoration: underline; }
.wn-item a:focus-visible { outline: 3px solid var(--dbim-info-blue); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .wn-item a { padding: 1rem 1.2rem; font-size: 1.4rem; }
}

/* Key Offerings and What's New panels are the same height on desktop
   (the row stretches both columns; the list rows share out any extra space). */
@media (min-width: 992px) {
  .home-news .row > [class*="col-"] { display: flex; }
  .home-news .home-panel { flex: 1 1 auto; height: auto; }
  .ko-grid > .ko-card,
  .wn-list > .wn-item { flex: 1 1 0; }
}

/* Key Offerings tiles */
.ko-intro {
  margin: -.6rem 0 1.6rem;
  color: var(--dbim-grey-03);
  font-size: 1.4rem;
}
/* One offering per row (as on the Education site) */
.ko-grid {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ko-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem;
  background: var(--dbim-surface-tint);
  border: 1px solid var(--dbim-azureish-white-bg);
  border-radius: 1rem;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ko-icon {
  display: flex;
  flex: 0 0 4.4rem;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-radius: 50%;
  color: var(--dbim-wintergreen-dream);
  transition: background-color .2s ease, color .2s ease;
}
.ko-icon img { display: block; width: 2.8rem; height: 2.8rem; }
.ko-text { display: flex; flex-direction: column; min-width: 0; }
.ko-text a {
  color: var(--dbim-wintergreen-dream);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
/* whole tile is clickable; the link stays the accessible name */
.ko-text a::after { content: ""; position: absolute; inset: 0; border-radius: 1rem; }
.ko-text small {
  margin-top: .2rem;
  color: #3D4043;
  font-size: 1.25rem;
  line-height: 1.4;
}
.ko-card:hover {
  background: var(--dbim-white);
  border-color: var(--dbim-powder-blue);
  box-shadow: 0 4px 12px rgba(var(--dbim-shadow-rgb), .12);
}
.ko-card:hover .ko-icon { background: var(--dbim-section-bg-strong); border-color: var(--dbim-columbia-blue); }
.ko-card:hover .ko-text a { text-decoration: underline; }
.ko-card:focus-within { outline: 3px solid var(--dbim-info-blue); outline-offset: 2px; }
.ko-text a:focus-visible { outline: none !important; }

/* =========================================================
   6. OUR ORGANISATIONS
   One colour per wing of the Department.
   ========================================================= */
.organisations-section {
  --wing: var(--dbim-wintergreen-dream);
  position: relative;
  padding: 4.8rem 0;
}
@media (max-width: 991.5px) { .organisations-section { padding: 4.4rem 0 3.6rem; } }

/* Wing colours (non-text, all ≥ 3:1 against white) */
[data-wing="performing"] { --wing: var(--dbim-wintergreen-dream); }
[data-wing="heritage"]   { --wing: var(--dbim-powder-blue); }
[data-wing="library"]    { --wing: #8A4B08; }   /* rust */
[data-wing="research"]   { --wing: #1F3A5F; }

.org-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
  margin-bottom: 2.4rem;
}
.org-head .section-heading { margin-bottom: 0; }
.org-intro {
  margin: .8rem 0 0;
  color: var(--dbim-grey-03);
  font-size: 1.5rem;
}
.org-wings {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.org-wings li {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 1.2rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-radius: 99rem;
  color: var(--dbim-wintergreen-dream);
  font-size: 1.3rem;
  font-weight: 600;
}
.org-wings li::before {
  content: "";
  width: .9rem;
  height: .9rem;
  background: var(--wing);
  border-radius: 50%;
}

.org-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 991.98px) { .org-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .org-grid { grid-template-columns: 1fr; gap: 1.2rem; } }

.org-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  height: 100%;
  padding: 1.8rem 4.8rem 1.8rem 1.8rem;
  overflow: hidden;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-radius: 1.2rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* thin wing-coloured edge */
.org-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .4rem;
  background: var(--wing);
}
/* Icon circle — identical to the Key Offerings icons */
.org-tile-icon {
  display: flex;
  flex: 0 0 4.4rem;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-radius: 50%;
  transition: background-color .2s ease, border-color .2s ease;
}
.org-tile-icon img { display: block; width: 2.8rem; height: 2.8rem; }
.org-tile-body { display: block; min-width: 0; }
.org-kicker {
  display: block;
  margin-bottom: .2rem;
  color: var(--dbim-powder-blue);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.org-tile h3 {
  margin: 0;
  color: var(--dbim-dark-text);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.3;
}
.org-tile h3 a { color: inherit; text-decoration: none; }
.org-tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 1.2rem; }
.org-tile p {
  margin: .4rem 0 0;
  color: #3D4043;
  font-size: 1.35rem;
  line-height: 1.45;
}
.org-arrow {
  position: absolute;
  top: 50%;
  right: 1.6rem;
  width: 2rem;
  height: 2rem;
  color: var(--dbim-powder-blue);
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.org-tile:hover {
  border-color: var(--dbim-powder-blue);
  box-shadow: 0 8px 20px rgba(var(--dbim-shadow-rgb), .12);
  transform: translateY(-2px);
}
.org-tile:hover .org-tile-icon { background: var(--dbim-section-bg-strong); border-color: var(--dbim-columbia-blue); }
.org-tile:hover h3 a { text-decoration: underline; }
.org-tile:hover .org-arrow { transform: translate(4px, -50%); }
.org-tile:focus-within { outline: 3px solid var(--dbim-info-blue); outline-offset: 3px; }
.org-tile h3 a:focus-visible { outline: none !important; }

/* =========================================================
   7. SERVICES FOR YOU (personas — cards are styled in personas.css)
   ========================================================= */
.personas-section { padding: 4rem 0; }

/* personas.css paints its own background on this section (old colour
   scheme). Its colour is set in section 4b; this removes any
   leftover gradient or inner panels. */
#main-content > section.personas-section { background-image: none !important; }
.personas-section::before,
.personas-section::after,
.personas-section > .container::before,
.personas-section > .container::after {
  background: none !important;
}
.personas-section > .container,
.personas-section .pc-slider,
.personas-section .pc-track {
  background: transparent !important;
  background-image: none !important;
}
/* Slide card and image panel in the Cinnamon Red shades */
.personas-section .pc-slide {
  background: var(--dbim-white) !important;
  border-color: var(--dbim-azureish-white) !important;
}
.personas-section .pc-slide-img {
  background: var(--dbim-section-bg-strong) !important;
}

/* =========================================================
   8. ONLINE SERVICES (full width) + IMPORTANT LINKS (next to the personas)
   ========================================================= */
.services-links-section { padding: 4rem 0; }

/* Online Services: compact service rows */
.svc-list {
  display: grid;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px)  { .svc-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .svc-list { grid-template-columns: repeat(3, 1fr); } }
.svc-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 8.4rem;
  padding: 1.6rem 5.2rem 1.6rem 1.6rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-left: 4px solid var(--dbim-wintergreen-dream);
  border-radius: .8rem;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.svc-icon {
  display: flex;
  flex: 0 0 4.8rem;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  background: var(--dbim-section-bg-strong);
  border-radius: 50%;
  color: var(--dbim-wintergreen-dream);
  transition: background-color .2s ease, color .2s ease;
}
.svc-icon img { display: block; width: 3rem; height: 3rem; }
.svc-body { display: block; min-width: 0; }
.svc-item h3 {
  margin: 0;
  color: var(--dbim-powder-blue);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.3;
}
.svc-item h3 a { color: inherit; text-decoration: none; }
/* whole row clickable; the link stays the accessible name */
.svc-item h3 a::after { content: ""; position: absolute; inset: 0; border-radius: .8rem; }
.svc-item p {
  margin: .4rem 0 0;
  color: #3D4043;
  font-size: 1.35rem;
  line-height: 1.45;
}
.svc-arrow {
  position: absolute;
  top: 50%;
  right: 1.8rem;
  width: 2rem;
  height: 2rem;
  color: var(--dbim-powder-blue);
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.svc-item:hover {
  background: var(--dbim-surface-tint);
  border-color: var(--dbim-columbia-blue);
  border-left-color: var(--dbim-wintergreen-dream);
  box-shadow: 0 4px 12px rgba(var(--dbim-shadow-rgb), .10);
}
.svc-item:hover .svc-icon { background: var(--dbim-azureish-white-bg); }
.svc-item:hover h3 a { text-decoration: underline; }
.svc-item:hover .svc-arrow { transform: translate(4px, -50%); }
.svc-item:focus-within { outline: 3px solid var(--dbim-info-blue); outline-offset: 2px; }
.svc-item h3 a:focus-visible { outline: none !important; }

/* Important Links: panel next to the personas, same layout as megeducation.gov.in –
   each item is a small card with a title and its link(s). On desktop the panel is the
   same height as the persona card. */
.personas-links { display: flex; flex-direction: column; }
.personas-links .alerts-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 2.4rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-top: 4px solid var(--dbim-wintergreen-dream);
  border-radius: .8rem;
  box-shadow: 0 2px 8px rgba(var(--dbim-shadow-rgb, 0,0,0), .06);
}
.personas-links .important-links-heading { margin-bottom: 0; }
.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: .8rem 0 0;
  padding: 1.2rem 0 0;
  list-style: none;
  border-top: 1px solid var(--dbim-azureish-white);
}
.alert-item {
  position: relative;
  padding: 1.4rem 1.6rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-left: 4px solid var(--dbim-powder-blue);
  border-radius: .8rem;
  box-shadow: 0 1px 3px rgba(21, 2, 2, .06);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.alert-item:hover,
.alert-item:focus-within {
  background: var(--dbim-surface-tint);
  border-left-color: var(--dbim-wintergreen-dream);
  box-shadow: 0 4px 12px rgba(var(--dbim-shadow-rgb, 0,0,0), .10);
}
.alert-title {
  margin: 0 0 .6rem;
  color: var(--dbim-deep-earthy-brown);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
}
.alert-item a {
  display: inline-block;
  color: var(--dbim-powder-blue);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.alert-item a:hover { color: var(--dbim-wintergreen-dream); text-decoration-thickness: 2px; }
.alert-item a:focus-visible { outline: 3px solid var(--dbim-info-blue); outline-offset: 3px; border-radius: .4rem; }
.alert-item .file-type { font-weight: 400; }
.alert-links { display: flex; flex-direction: column; gap: .6rem; }
.personas-links .important-links-more { margin-top: auto; padding-top: 1.6rem; text-align: right; }

@media (max-width: 575.98px) {
  .personas-links .alerts-panel { padding: 1.6rem; }
  .alert-item { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .alert-item { transition: none; }
}

@media (max-width: 575.98px) {
  .services-links-section { padding: 2.8rem 0; }
  .svc-item { gap: 1.2rem; padding: 1.4rem 4.4rem 1.4rem 1.4rem; }
  .svc-icon { flex-basis: 4rem; width: 4rem; height: 4rem; }
}

/* Shared Important Links list */
.important-links { width: 100%; }
.important-links-list {
  width: 100%;
  height: 27rem;
  padding-right: 1.4rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--dbim-white);
  scrollbar-width: thin;
  scrollbar-color: var(--dbim-columbia-blue) transparent;
}
.important-links-list::-webkit-scrollbar { width: 4px; }
.important-links-list::-webkit-scrollbar-track { background: transparent; }
.important-links-list::-webkit-scrollbar-thumb { background: var(--dbim-powder-blue); border-radius: 4px; }
.important-links-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  min-height: 5.8rem;
  padding: .8rem .4rem;
  background: var(--dbim-white);
  border-bottom: 1px solid var(--dbim-azureish-white-bg);
  color: var(--dbim-deep-earthy-brown) !important;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease;
  box-sizing: border-box;
}
.important-links-list a:last-child { border-bottom: 0; }
.important-links-list a:hover {
  background: var(--dbim-surface-tint);
  color: var(--dbim-wintergreen-dream) !important;
}
.important-links-list a span:first-child { padding-right: 1.5rem; }
.important-links-list a img {
  display: block;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  transition: transform .2s ease;
}
.important-links-list a:hover img { transform: translateX(3px); }
.important-links-list a .material-symbols-outlined { flex-shrink: 0; font-size: 2.4rem; line-height: 1; }

/* =========================================================
   9. VISIT US (location)
   ========================================================= */
.location-section { padding: 4rem 0; }
.location-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: stretch;
  overflow: hidden;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-top: 4px solid var(--dbim-wintergreen-dream);
  border-radius: .8rem;
}
.location-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.8rem;
}
.location-text p {
  margin: 0 0 2rem;
  color: var(--dbim-dark-text);
  font-size: 1.6rem;
  line-height: 1.6;
}
.location-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Map preview */
.location-map {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 28rem;
  overflow: hidden;
  background: var(--dbim-surface-tint);
  text-decoration: none;
}
.location-map > img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.location-map .map-open-button {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1rem 1.6rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-powder-blue);
  border-radius: .4rem;
  color: var(--dbim-powder-blue);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.location-map .map-open-button img { width: 2rem; height: 2rem; object-fit: contain; }
.location-map:hover .map-open-button { background: var(--dbim-powder-blue); color: var(--dbim-white); }
.location-map:hover .map-open-button img { filter: brightness(0) invert(1); }
.location-map:focus-visible { outline: 3px solid var(--dbim-info-blue); outline-offset: -3px; }

@media (max-width: 767.98px) {
  .location-section { padding: 2.8rem 0; }
  .location-card { grid-template-columns: 1fr; }
  .location-text { padding: 2rem; }
  .location-map { min-height: 24rem; }
}

/* =========================================================
   10. GOVERNMENT PORTALS LOGO SLIDER
   (auto-scrolls; pauses on hover and keyboard focus)
   ========================================================= */
.important-links-slider-section {
  width: 100%;
  padding: 2.6rem 0;
  background: var(--dbim-white);
  border-top: 1px solid var(--dbim-azureish-white-bg);
}
.important-links-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
}
.important-links-slider-window {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 8rem);
  margin: 0 auto;
  padding: 0 4.8rem;
  overflow: hidden;
}
.important-links-slider-track {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  width: max-content;
  animation: importantLinksScroll 30s linear infinite;
  will-change: transform;
}
.important-links-slider:hover .important-links-slider-track,
.important-links-slider:focus-within .important-links-slider-track { animation-play-state: paused; }
@keyframes importantLinksScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.important-links-card {
  display: flex;
  flex: 0 0 14.2rem;
  align-items: center;
  justify-content: center;
  width: 14.2rem;
  height: 9rem;
  padding: 1rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-radius: .6rem;
  box-shadow: 0 2px 8px rgba(var(--dbim-shadow-rgb), .08);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.important-links-card:hover {
  border-color: var(--dbim-columbia-blue);
  box-shadow: 0 4px 12px rgba(var(--dbim-shadow-rgb), .16);
  transform: translateY(-2px);
}
.important-links-card:focus-visible { outline: 3px solid var(--dbim-info-blue); outline-offset: 2px; }
.important-links-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 6.5rem;
  object-fit: contain;
}
.important-links-slider-prev,
.important-links-slider-next {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  background: var(--dbim-azureish-white-bg);
  border: 0;
  border-radius: 50%;
  color: var(--dbim-wintergreen-dream);
  cursor: pointer;
  transform: translateY(-50%);
}
.important-links-slider-prev { left: 0; }
.important-links-slider-next { right: 0; }
.important-links-slider-prev img,
.important-links-slider-next img { width: 2.4rem; height: 2.4rem; }
.important-links-slider-prev .material-symbols-outlined,
.important-links-slider-next .material-symbols-outlined { font-size: 2.8rem; font-weight: 400; }
.important-links-slider-prev:hover,
.important-links-slider-next:hover { background: var(--dbim-azureish-white); }
.important-links-slider-prev:focus-visible,
.important-links-slider-next:focus-visible { outline: 3px solid var(--dbim-info-blue); outline-offset: 2px; }

@media (max-width: 991.98px) {
  .important-links-card { flex-basis: 13.5rem; width: 13.5rem; height: 8.6rem; }
}
@media (max-width: 575.98px) {
  .important-links-slider-section { padding: 2rem 0; }
  .important-links-slider-window { padding: 0 3.4rem; }
  .important-links-slider-track { gap: 1.2rem; animation-duration: 24s; }
  .important-links-card { flex-basis: 12.5rem; width: 12.5rem; height: 7.8rem; }
  .important-links-card img { max-height: 5.5rem; }
}

/* =========================================================
   11. OTHER HOMEPAGE BLOCKS
   Not used by the current homepage markup. Kept so older page
   templates still look right; safe to delete if nothing uses them.
   ========================================================= */

/* --- Headline boxes and department slider --- */
.homepage .leftbox {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(2, 49.4%);
  grid-row-gap: 4px;
}
@media (max-width: 1536px) {
  .homepage .leftbox { grid-template-rows: repeat(2, 49%); }
}
.homepage .leftbox .row { height: 100%; }

.headbox { position: relative; }
.headbox .card-img-overlay { padding: 0 10px; }
.headbox .card-img-overlay.w-60 { width: 60%; }
.headbox .card-img-overlay.rightside { left: auto; }
.headbox .card-img-overlay.bottomleftside { top: auto; right: auto; }
.headbox .card-img-overlay.bottomside { top: auto; left: auto; }
.headbox .card-img-overlay .quote {
  display: block;
  max-height: 40px;
  margin-bottom: 0;
  color: var(--dbim-dark-text);
  font-family: "Material Symbols Outlined";
  font-size: 4.4rem;
}
.headbox .card-img-overlay .headline p {
  color: var(--dbim-dark-text);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 29px;
  letter-spacing: -0.12px;
}
.headbox .card-img-overlay .headline b { font-weight: 700; }
.headbox .card-img-overlay .headline2 {
  width: 75%;
  margin-bottom: 0;
  color: var(--dbim-dark-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.7px;
  border-top: 1px solid var(--dbim-dark-text);
}
@media (max-width: 1537px) {
  .headbox .card-img-overlay .headline p {
    font-size: 1.4rem;
    line-height: normal;
  }
  .headbox .card-img-overlay .headline2 {
    font-size: 1.2rem;
    line-height: normal;
  }
}
.headbox img {
  background: var(--dbim-azureish-white-bg);
  border-radius: 12px;
}

/* Department slider */
.departmentboxslider {
  height: 100%;
  padding: 12px;
  background: var(--dbim-azureish-white-bg);
  border-radius: 12px;
}
.departmentboxslider .cntrdiv {
  position: relative;
  top: 50%;
  transform: translateY(-60%);
}
.departmentboxslider h3 {
  color: var(--dbim-dark-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}
.departmentboxslider .departmentbox { border-radius: 10px !important; }
.departmentboxslider .departmentbox .departmentbox-card-body {
  min-height: 45px;
  max-height: 45px;
}
.departmentboxslider .departmentbox .departmentbox-card-body .h4 {
  color: var(--dbim-dark-text);
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
}
.departmentboxslider .departmentbox .departmentbox-link-btn { color: var(--dbim-dark-text); }
.departmentboxslider .slick-prev,
.departmentboxslider .slick-next {
  top: calc(100% + 12px);
  bottom: 0 !important;
  z-index: 9;
}
.departmentboxslider .slick-prev { left: 33% !important; }
.departmentboxslider .slick-next { right: 33% !important; }
.departmentboxslider .slick-prev .material-symbols-outlined,
.departmentboxslider .slick-next .material-symbols-outlined { color: var(--dbim-dark-text); }
.departmentboxslider .slick-prev:before,
.departmentboxslider .slick-next:before {
  content: "";
  color: var(--dbim-dark-text);
}
.departmentboxslider .slick-dots {
  bottom: -24px;
  margin-bottom: 0;
}
.departmentboxslider .slick-dots li { margin: 0 -4px; }
.departmentboxslider .slick-active .sliderbox1 .img1 {
  transform: scale(1.3);
  background: var(--dbim-columbia-blue);
  border-radius: 50%;
  transition: all 0.5s ease;
}
.departmentboxslider .slick-active .sliderbox1 p {
  margin-top: 24px;
  font-size: 1.2rem;
  font-weight: 800;
}
.sliderbox1 a {
  margin-top: 12px;
  color: var(--dbim-powder-blue);
  font-weight: 800;
  text-decoration: none;
}
@media (max-width: 1537px) {
  .sliderbox1 a { font-size: 1.4rem; }
}

/* --- Slick persona sliders (older design; current personas use personas.css) --- */
.personslider {
  position: relative;
  width: 100%;
  height: 250px;
  padding-top: 12px;
  overflow: hidden;
  background: var(--dbim-azureish-white-bg);
  border-radius: 12px;
  box-sizing: border-box;
}
.personslider .cntrdiv {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
}
.personslider .slick-slider {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.personslider .slick-list {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.personslider .slick-track {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}
.personslider .slick-track::before,
.personslider .slick-track::after {
  display: table;
  content: "";
}
.personslider .slick-track::after { clear: both; }
.personslider .slick-slide {
  display: none;
  float: none;
  width: 100%;
  height: 100%;
  min-height: 1px;
}
.personslider .slick-slide.slick-active { display: block; }
.personslider .slick-slide > div,
.personslider .slick-slide .px-1 {
  display: block;
  width: 100%;
  height: 100%;
}
.personslider .slick-current { outline: none; }
.personslider .sliderbox1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 4px 0 48px;
  text-align: center;
  box-sizing: border-box;
}
.personslider .sliderbox1 img {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto 8px;
  object-fit: contain;
  background: var(--dbim-columbia-blue);
  border-radius: 50%;
  transform: scale(1);
}
.personslider .slick-active .sliderbox1 .img1 {
  transform: scale(1);
  background: var(--dbim-columbia-blue);
  border-radius: 50%;
}
.personslider .sliderbox1 a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--dbim-dark-text);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  text-decoration: none;
}
.personslider .sliderbox1 h3 {
  margin: 0;
  color: var(--dbim-dark-text);
  text-align: center;
  font-weight: 600;
  line-height: 26px;
}
.personslider .sliderbox1 h3 a { color: inherit; text-decoration: none; }
.personslider .slick-prev,
.personslider .slick-next {
  position: absolute;
  top: auto !important;
  bottom: 8px !important;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px !important;
  height: 25px !important;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.personslider .slick-prev { left: 32% !important; }
.personslider .slick-next { right: 32% !important; }
.personslider .slick-prev .material-symbols-outlined,
.personslider .slick-next .material-symbols-outlined {
  color: var(--dbim-dark-text);
  font-size: 24px;
}
.personslider .slick-prev:before,
.personslider .slick-next:before { content: ""; }
.personslider .slick-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px !important;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.personslider .slick-dots li {
  display: inline-block;
  margin: 0 -3px;
  padding: 0;
}
.personslider .slick-dots li button {
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0;
  cursor: pointer;
}
.personslider .slick-dots li button:before {
  content: "•";
  color: var(--dbim-azureish-white);
  font-size: 20px;
  line-height: 20px;
}
.personslider .slick-dots li.slick-active button:before { color: var(--dbim-powder-blue); }
@media (max-width: 767.5px) {
  .personslider { height: 240px; }
  .personslider .sliderbox1 img {
    width: 140px;
    height: 140px;
  }
  .personslider .slick-prev { left: 27% !important; }
  .personslider .slick-next { right: 27% !important; }
}

/* Persona slider 1 (stacked cards) */
.personslider1 {
  position: relative;
  height: 100%;
  padding: 0 0 0 15px;
  background: var(--dbim-azureish-white-bg);
  border-radius: 12px;
}
.personslider1 .cntrdiv {
  position: relative;
  top: 50%;
  height: calc(100% - 60px);
  transform: translateY(-50%);
}
@media (min-width: 1920px) {
  .personslider1 { padding: 0 0 0 35px; }
  .personslider1 .cntrdiv { height: 65%; }
}
.personslider1 .cntrdiv .cntrdiv1,
.personslider1 .cntrdiv .cntrdiv2 {
  position: absolute;
  z-index: 2;
  width: 80%;
  height: 100%;
  margin: 0 auto;
  background: var(--dbim-columbia-blue);
  border-radius: 10px;
  box-shadow: -5px 0 5px 0 rgba(0, 0, 0, 0.25);
}
.personslider1 .cntrdiv .cntrdiv1 { left: 0; }
.personslider1 .cntrdiv .cntrdiv2 { left: 24px; }
@media (max-width: 1537px) {
  .personslider1 .cntrdiv .cntrdiv2 { left: 12px; }
}
@media (max-width: 1199.5px) {
  .personslider1 .cntrdiv .cntrdiv1 { height: 85%; }
  .personslider1 .cntrdiv .cntrdiv2 {
    height: 85%;
    left: 55px;
  }
}
@media (max-width: 990.5px) {
  .personslider1 .cntrdiv .cntrdiv1 {
    height: 100%;
    left: 15px;
  }
  .personslider1 .cntrdiv .cntrdiv2 { height: 100%; }
}
@media (max-width: 768.5px) {
  .personslider1 .cntrdiv .cntrdiv2 {
    left: 32px;
    width: calc(100% - 100px);
  }
}
.personslider1 .slick-prev,
.personslider1 .slick-next {
  top: calc(100% + 17px);
  bottom: 0;
  z-index: 9;
  width: 25px !important;
  height: 25px !important;
}
.personslider1 .slick-dots {
  bottom: -26px;
  left: -10px;
  margin-bottom: 0;
}
@media (min-width: 1900px) {
  .personslider1 .slick-prev,
  .personslider1 .slick-next { top: calc(100% + 60px); }
  .personslider1 .slick-dots { bottom: -70px; }
}
.personslider1 .slick-dots li { margin: 0 -4px; }
.personslider1 .slick-dots li.slick-active button:before { color: var(--dbim-dark-text); }
.personslider1 .slick-prev { left: 26%; }
.personslider1 .slick-next { right: 26%; }
.personslider1 .slick-prev .material-symbols-outlined,
.personslider1 .slick-next .material-symbols-outlined { color: var(--dbim-dark-text); }
.personslider1 .slick-prev:before,
.personslider1 .slick-next:before {
  content: "";
  color: var(--dbim-dark-text);
}
.personslider1 .box,
.personslider1 .box1,
.personslider1 .box2 {
  position: absolute;
  top: 50%;
  height: 194px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: -5px 0 5px 0 rgba(0, 0, 0, 0.25);
}
.personslider1 .box {
  left: 54%;
  z-index: 3;
  width: 300px;
  background: var(--dbim-white);
}
.personslider1 .box1,
.personslider1 .box2 {
  width: 263px;
  background: var(--dbim-columbia-blue);
}
.personslider1 .box1 { left: 45%; z-index: 2; }
.personslider1 .box2 { left: 40%; z-index: 1; }
.personslider1 .slick-slider {
  z-index: 4;
  width: 80%;
  height: 100%;
  margin: 0 auto;
  background: var(--dbim-azureish-white-bg);
  border-radius: 10px;
  box-shadow: -5px 0 5px 0 rgba(0, 0, 0, 0.25);
}
.personslider1 .slick-slider .slick-list {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.personslider1 .sliderbox2 {
  margin: auto;
  padding: 8px;
  color: var(--dbim-dark-text);
  text-align: center;
}
.personslider1 .sliderbox2 .embedsvg,
.personslider1 .sliderbox2 .embedsvg svg,
.personslider1 .sliderbox2 .embedsvg svg path { fill: var(--dbim-powder-blue) !important; }
.personslider1 .sliderbox2 img {
  height: 64px;
  margin: 0 auto 10px;
  object-fit: contain;
}
.personslider1 .sliderbox2 .ptext {
  margin-bottom: 5px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.12px;
  text-transform: uppercase;
}
.personslider1 .sliderbox2 h3 {
  color: var(--dbim-dark-text);
  text-align: center;
  font-style: normal;
  font-weight: 700;
  line-height: 28px;
}
.personslider1 .sliderbox2 h3 a { color: inherit; text-decoration: none; }

/* Hero image */

/* --- "What we do" split block --- */
.waw {
  width: 100%;
  padding: 30px 0;
  background: var(--dbim-white);
}
.waw .custom-container { position: relative; }
.waw .waw-inner {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 20px;
  padding: 0;
}
.waw .waw-left {
  position: relative;
  flex: 1.5;
  padding: 10px 20px 25px;
  background: var(--dbim-white);
}
.waw .explore_head {
  position: relative;
  margin-bottom: 25px;
  padding-top: 10px;
  text-align: center;
}
.waw .explore_head span {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 20px;
  color: var(--dbim-powder-blue);
  font-weight: 600;
  line-height: 1.2;
}
.waw .explore_head span::before,
.waw .explore_head span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 70px;
  height: 2px;
  background-color: var(--dbim-powder-blue);
}
.waw .explore_head span::before {
  right: 100%;
  margin-right: 8px;
}
.waw .explore_head span::after {
  left: 100%;
  margin-left: 8px;
}
.waw .waw-right {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--dbim-azureish-white-bg);
  border-left: 1px solid var(--dbim-columbia-blue);
}
.waw .waw-right img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
}
.waw .waw-left .card,
.waw .waw-left .service-box {
  background: var(--dbim-white);
  border: 1px solid var(--dbim-columbia-blue);
  border-radius: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.waw .waw-left .card:hover,
.waw .waw-left .service-box:hover {
  border-color: var(--dbim-powder-blue);
  box-shadow: 0 4px 12px rgba(var(--dbim-shadow-rgb), 0.12);
}
.waw .waw-left a {
  color: var(--dbim-wintergreen-dream);
  text-decoration: none;
}
.waw .waw-left a:hover,
.waw .waw-left a:focus {
  color: var(--dbim-powder-blue);
  text-decoration: underline;
}
.waw .waw-left .btn,
.waw .view-all-btn {
  background-color: var(--dbim-powder-blue);
  border: 1px solid var(--dbim-powder-blue);
  color: var(--dbim-white);
}
.waw .waw-left .btn:hover,
.waw .waw-left .btn:focus,
.waw .view-all-btn:hover,
.waw .view-all-btn:focus {
  background-color: var(--dbim-wintergreen-dream);
  border-color: var(--dbim-wintergreen-dream);
  color: var(--dbim-white);
}
@media (max-width: 767px) {
  .waw { padding: 20px 0; }
  .waw .waw-inner {
    flex-direction: column;
    gap: 15px;
  }
  .waw .waw-left {
    width: 100%;
    padding: 10px 15px 20px;
  }
  .waw .waw-right {
    width: 100%;
    padding: 15px;
    border-left: 0;
    border-top: 1px solid var(--dbim-columbia-blue);
  }
  .waw .explore_head span {
    padding: 0 12px;
    font-size: 1.15rem;
  }
  .waw .explore_head span::before,
  .waw .explore_head span::after { width: 35px; }
}

/* --- Organisation link boxes --- */
.organisation-box {
  width: 100%;
  padding: 18px 20px 20px;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-columbia-blue);
  border-radius: 8px;
  box-sizing: border-box;
}
.organisation-box .section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.organisation-box .section-heading > img {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.organisation-box .section-title {
  margin: 0;
  color: var(--dbim-wintergreen-dream);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}
.organisation-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.organisation-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 87px;
  padding: 10px 42px 10px 20px;
  background: var(--dbim-azureish-white-bg);
  border-left: 5px solid var(--dbim-wintergreen-dream);
  border-radius: 6px;
  color: var(--dbim-dark-text);
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.organisation-link span {
  display: block;
  color: var(--dbim-dark-text);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
}
.organisation-link > img:last-child {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  object-fit: contain;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.organisation-link:hover {
  background: var(--dbim-white);
  color: var(--dbim-wintergreen-dream);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.organisation-link:hover span { color: var(--dbim-wintergreen-dream); }
.organisation-link:hover > img:last-child { transform: translate(3px, -50%); }
.organisation-link:focus-visible {
  outline: 3px solid var(--dbim-wintergreen-dream);
  outline-offset: 3px;
}
@media (max-width: 991.98px) {
  .organisation-box { padding: 18px; }
  .organisation-box .section-title { font-size: 1.4rem; }
  .organisation-links { gap: 10px; }
  .organisation-link {
    min-height: 64px;
    padding: 10px 40px 10px 18px;
  }
  .organisation-link span { font-size: 1.35rem; }
}
@media (max-width: 767.98px) {
  .organisation-box {
    padding: 16px;
    border-radius: 7px;
  }
  .organisation-box .section-heading { margin-bottom: 14px; }
  .organisation-box .section-heading > img {
    flex-basis: 26px;
    width: 26px;
    height: 26px;
  }
  .organisation-box .section-title { font-size: 1.3rem; }
  .organisation-links {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .organisation-link {
    min-height: 60px;
    border-left-width: 4px;
  }
  .organisation-link span { font-size: 1.3rem; }
  .organisation-link > img:last-child {
    right: 12px;
    width: 17px;
    height: 17px;
  }
}
@media (max-width: 480px) {
  .organisation-box { padding: 14px; }
  .organisation-box .section-title { font-size: 1.2rem; }
  .organisation-link {
    min-height: 68px;
    padding-left: 16px;
  }
  .organisation-link span { font-size: 1.2rem; }
}

/* Older What's New / Key Offerings markup (whats-new-box, key-offerings-tabs).
   Not used by the current homepage; kept for inner pages that may use it. */
.key-offerings-box,
.whats-new-wrapper { width: 100%; }
.key-offerings-tabs { display: flex; width: 100%; margin-bottom: .8rem; }
.key-offerings-tabs button {
  margin-right: .4rem;
  padding: .7rem 1.6rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-columbia-blue);
  color: var(--dbim-wintergreen-dream);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.key-offerings-tabs button:hover { background: var(--dbim-azureish-white-bg); }
.key-offerings-tabs button.active {
  background: var(--dbim-wintergreen-dream);
  border-color: var(--dbim-wintergreen-dream);
  color: var(--dbim-white);
}
.key-offerings-list { width: 100%; background: var(--dbim-white); border: 1px solid var(--dbim-azureish-white); }
.key-offering-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3.8rem;
  padding: .7rem 1.2rem;
  background: var(--dbim-white);
  border-bottom: 1px solid var(--dbim-azureish-white);
  color: var(--dbim-deep-earthy-brown);
  font-size: 1.3rem;
  line-height: 1.4;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
.key-offering-item:last-child { border-bottom: 0; }
.key-offering-item:hover { background: var(--dbim-azureish-white-bg); color: var(--dbim-wintergreen-dream); }
.key-offering-item .material-symbols-outlined { flex-shrink: 0; margin-left: 1.2rem; color: var(--dbim-wintergreen-dream); font-size: 2rem; }
.whats-new-box { width: 100%; padding: .4rem 1.2rem; background: var(--dbim-wintergreen-dream); }
.whats-new-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 4.8rem;
  padding: .8rem .4rem;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  color: var(--dbim-white) !important;
  font-size: 1.3rem;
  line-height: 1.35;
  text-decoration: none !important;
}
.whats-new-item:last-child { border-bottom: 0; }
.whats-new-item:hover { text-decoration: underline !important; }
.whats-new-item img { filter: brightness(0) invert(1); }
.whats-new-item .material-symbols-outlined { flex-shrink: 0; margin-left: 1rem; color: var(--dbim-white); font-size: 2rem; }
@media (max-width: 575.98px) {
  .key-offerings-tabs { overflow-x: auto; }
  .key-offerings-tabs button { white-space: nowrap; }
  .key-offering-item,
  .whats-new-item { font-size: 1.2rem; }
}

/* Photo placeholder (for a missing leadership photo) */
.commissioner-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: var(--dbim-azureish-white-bg);
  text-align: center;
  box-sizing: border-box;
}
.commissioner-photo-placeholder p {
  margin: 0;
  color: var(--dbim-deep-earthy-brown);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
}

/* =========================================================
   12. REDUCED MOTION — stop the ticker, logo slider and hover lifts
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .news-ticker-horizontal .ticker-track a.is-active { animation: none; transform: none; }
  .important-links-slider-track { animation: none; transform: none; }
  .ko-card, .ko-icon, .org-tile, .org-tile-icon, .org-arrow,
  .important-links-card, .important-links-list a img,
  .svc-item, .svc-icon, .svc-arrow { transition: none; }
  .org-tile:hover,
  .important-links-card:hover { transform: none; }
}