html,
body,
.wrapper {
  overflow-x: hidden;
}

/* ── Hero slider — bayangan lembut di bawah teks agar tetap terbaca
   di atas foto latar yang ramai/kontras tinggi ── */
.slider .slide__subtitle,
.slider .slide__title,
.slider .slide__desc {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.55);
}

body {
  font-size: 16px;
}

b,
strong {
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

nav a:hover {
  text-decoration: none;
}

.text-green,
h1.text-green,
h2.text-green,
h3.text-green,
h4.text-green {
  color: var(--green-dark);
}

.px-30 {
  padding-left: 30px;
  padding-right: 30px;
}

.px-60 {
  padding-left: 60px;
  padding-right: 60px;
}

.py-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.round-10 {
  border-radius: 10px;
}

.round-20 {
  border-radius: 20px;
}

.bg-light-grey {
  background-color: var(--grey-light);
}

.logo {
  max-height: 46px;
  margin-left: 30px;
  margin-top: 14px;
}

.logos.logo {
  max-height: 60px;
  margin-left: 0px;
  margin-top: 0px;
}

.logo-header-uw {
  margin-top: 0px;
  height: 60px;
}

.logo-separator {
  display: inline-block;
  width: 2px;
  height: 45px;
  margin-left: 15px;
  background-color: #000;
  margin-top: 20px;
  position: absolute;
}

@media only screen and (min-device-width: 576px) and (max-device-width: 1290px) {
  .logo {
    max-height: 23px;
    margin-left: 30px;
  }

  .logo .logos {
    max-height: 37px;
  }

  .logo-header-uw {
    margin-top: 0px;
    height: 40px;
  }

  .logo-separator {
    height: 45px;
    margin-left: 10px;
    margin-top: 20px;
  }

}


@media only screen and (min-device-width: 576px) and (max-device-width: 991px) {
  .logo-separator {
    height: 45px;
    margin-left: 10px;
    margin-top: 10px;
  }
}

.clickable {
  cursor: pointer;
}

.sticky-navbar.is-sticky .logo {
  max-height: 32px;
  margin-bottom: 12px;
  margin-left: 22px;
}

.sticky-navbar.is-sticky .logo.logos {
  max-height: 42px;
  margin-left: 0px;
  margin-top: 5px;
}

.sticky-navbar.is-sticky .logo-header-uw {
  margin-top: 0px;
  height: 40px;
}

.sticky-navbar.is-sticky .logo-separator {
  height: 45px;
  margin-left: 10px;
  margin-top: 10px;
}

.is-sticky {
  height: 96px !important;
  max-height: 96px !important;
}

.lang-selection {
  color: var(--grey);
}

.lang-selection a,
.lang-selection a:hover {
  color: var(--grey-dark);
}

.footer {
  background-color: white;
}

.logo-footer-garuda {
  margin-top: 10px;
  margin-right: 35px;
  height: 75px;
}

.logo-footer-canada {
  margin-top: 0px;
  margin-right: 35px;
  height: 70px;
}

.logo-footer-uw {
  margin-top: 31px;
  height: 40px;
}

.address-container {
  margin-top: 20px;
}

.navbar .dropdown-menu .nav__item .nav__item-link {
  text-transform: none;
  padding: 5px 0px;
  font-size: 18px;
}

.blog-author.widget,
.contact-panel .contact__panel-info,
.widget-categories {
  background-color: var(--grey);
}

.widget-categories ul li a {
  font-family: "Segoe Pro", sans-serif;
}

.portfolio-filter li a {
  font-family: "Segoe Pro", sans-serif;
  font-size: 17px;
  ;
}

.header {
  position: relative;
  z-index: 1000;
  border-top: none;
  border-bottom: solid 1px var(--grey);
}

.header-bar {
  height: 10px;
}

.page-title-layout3 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.page-title-layout3 h1 {
  color: #fff;
  font-size: 75px;
}

.portfolio-layout2 .portfolio-item .portfolio__body {
  padding: 15px 15px 16px 20px;
}

.portfolio-item .portfolio__cat {
  margin-bottom: 0px;
}

.fluid-yt {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: pink;
}

.fluid-yt>iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.card-register {
  border-radius: 10px;
  padding: 40px 60px;
  border-style: solid;
  border-color: var(--grey);
  border-width: 1px;
}

.btn {
  height: 50px;
}

.title-on-top {
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 300px;
}

@supports not (aspect-ratio: 16 / 9) {
  .fluid-yt {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }

  .fluid-yt>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.feature__logo {
  text-align: center;
}

.feature__logo img {
  height: 150px;
  margin-bottom: 40px;
}

.post-item.publication-item {
  background-color: none;
  padding: 0px 15px 15px 15px;
}

.post-item.publication-item .post__img {
  max-height: 340px;
  min-height: 340px;
  border-radius: 0px;
  padding: 20px;
}

.post-item.publication-item .post__img img {
  max-height: 300px;
  border-radius: 5px;
}

.post-item.publication-item .post__body {
  padding: 0px 15px;
}

.post-item.publication-item.small-item .post__img {
  max-height: 320px;
  min-height: 320px;
  padding: 0px 20px 20px 20px;
  text-align: center;
}

.post-item.publication-item.small-item .post__title {
  font-size: 17px;
}

/* Fincapes Publication Card — dedicated style, does not affect shared .post-item usage (e.g. News cards) */
.fincapes-publication-card {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 7px;
  padding: 0px 15px 15px 15px;
  transition: all 0.3s ease;
}

.fincapes-publication-card .post__img {
  position: relative;
  overflow: hidden;
  max-height: 320px;
  min-height: 320px;
  padding: 0px 20px 20px 20px;
  text-align: center;
}

.fincapes-publication-card .post__img img {
  max-height: 300px;
  border-radius: 5px;
  transition: all 0.9s ease;
}

.fincapes-publication-card:hover .post__img img {
  transform: scale(1.1);
}

.fincapes-publication-card .post__body {
  padding: 0px 15px;
}

.fincapes-publication-card .post__meta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fincapes-publication-card .post__cat a {
  position: relative;
  display: inline-block;
  min-width: 25px;
  color: #1c5f2e;
  padding: 7px 12px;
  margin-right: 5px;
  border-radius: 4px;
  border: solid 1px lightgray;
  margin-bottom: 5px;
}

.fincapes-publication-card .post__cat a:hover {
  color: #000;
}

.fincapes-publication-card .post__title {
  font-size: 17px;
  margin-bottom: 22px;
}

.fincapes-publication-card .post__title a {
  color: #000;
}

.fincapes-publication-card .post__title a:hover {
  color: #1c5f2e;
}

.fincapes-publication-card:hover {
  box-shadow: 0px 5px 83px 0px rgba(40, 40, 40, 0.11);
}

.footer-copyrights {
  padding-top: 22px;
  padding-bottom: 22px;
}

.post-item.for-events {
  border-style: solid;
  border-color: var(--grey);
  border-width: 1px;
}

.post-item.for-events h4 a {
  color: var(--green-dark);
}

.post-item.for-events a {
  color: #000;
}

.post-item.for-events .post__tgl {
  background-color: var(--grey);
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 17px;
  font-weight: 400;
  display: inline-block;
  margin-bottom: 20px;
}

.info-date .info-content {
  font-size: 25px;
  font-weight: 500;
}

.info-label {
  display: block;
  margin-top: 20px;
}

.info-content {}

ul.list-of-files {
  list-style-type: none;
  padding-left: 0px;
}

ul.list-of-files li {
  padding-left: 0px;
  margin-bottom: 10px;
}

ul.list-of-files li .fa {
  margin-right: 10px;
  opacity: 0.6;
}

.card-search-result {
  padding: 30px 60px;
  margin-bottom: 30px;
}

.card-search-result a {
  color: #000;
}

.minh170 {
  min-height: 170px;
}

.portfolio-layout3 .portfolio-item .portfolio__body {
  bottom: -186px;
  padding-top: 45px;
}

.portfolio-layout3 .portfolio-item {
  padding-bottom: 90px;
}

.icon-focus {
  width: 80px;
  margin-bottom: 30px;
}

.icon-project-highlights {
  height: 40px;
  width: auto;
  margin-bottom: 30px;
  display: block;
}

.icon-project-highlights img {
  height: 40px;
  width: auto;
}

.slide__icons {
  display: flex;
  gap: 24px;
  margin-top: 30px;
}

.slide__icon-link {
  position: relative;
  display: inline-block;
  width: 60px;
}

.slide__icon-link img {
  width: 100%;
  transition: transform 0.25s ease;
}

.slide__icon-link:hover img {
  transform: translateY(-5px);
}

.slide__icon-link::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 10px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.slide__icon-link:hover::after {
  opacity: 1;
}

.slick-dots li.slick-active {
  border-color: #fff;
}

.form-control {
  border: solid 1px #e0e0e0;
}

.nice-select {
  border: solid 1px #e0e0e0;
}

.navbar .navbar-collapse .navbar-nav .dropdown-toggle {
  display: none;
}

.portfolio-layout3.focus-thumbnail .portfolio-item .portfolio__body {
  bottom: -181px;
  padding-top: 37px;
}

#features a {
  text-decoration: underline;
}

#features ul li {
  line-height: 1.8;
  margin-bottom: 10px;
}

/* Mobile Language Selection */
.action__btn-search.mobile__nav {
  position: relative;
  top: 0%;
  right: 0px;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

.btn__lang_area {
  border-top: solid 1px lightgrey;
  border-bottom: solid 1px lightgrey;
  width: 95%;
  margin-left: 10px;
  margin-top: 20px;
}

.btn_lang {
  display: inline-block;
  padding: 15px;
  text-align: center;
  width: 32%;
}

.btn_lang {
  color: black;
}

/* Impact Section */
.impact-section {
  /*background: #31A44D ;*/
  background: rgb(40, 147, 67);
  /*background: linear-gradient(90deg,rgba(49, 164, 77, 1) 0%, rgb(45, 119, 65) 50%, rgba(49, 164, 77, 1) 100%);*/
}

.impact__heading {
  font-size: 14px;
  letter-spacing: 2px;
  color: #555;
  margin-bottom: 40px;
}

.impact-item {
  text-align: center;
  margin-bottom: 30px;
}

.impact__icon {
  margin-bottom: 15px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.impact__icon i {
  font-size: 60px;
}

.impact__number {
  font-size: 42px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px;
  font-family: inherit;
}

.impact__text {
  /*font-size: 14px;
  color: #666;*/
  line-height: 1.4;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

  .btn__lang_area {
    display: block !important;
  }

  .logo-footer-garuda {
    margin-top: 0px;
    margin-right: 10px;
    height: 65px;
  }

  .logo-footer-canada {
    margin-top: -10px;
    margin-right: 10px;
    height: 65px;
  }

  .logo-footer-uw {
    margin-top: 10px;
    height: 27px;
  }

  .slick-arrow {
    display: none !important;
  }

  .header-layout3 .navbar .navbar-brand {
    margin-left: 0px;
  }

  /*.header .navbar-brand .logo {
    max-width: 80px;
  }*/

  /*.header .navbar-brand .logos {
    max-width: 90px;
  }*/

  .logo-header-uw {
    max-width: 120px;
    height: auto;
  }

  .logo-separator {
    width: 1px;
    height: 30px;
    margin-left: 8px;
  }

  .header .navbar-brand .logo {
    max-width: 114px;
    /*max-height: 78px;*/
    margin-left: 12px;
    margin-bottom: 0px;
    margin-top: 5px;
  }

  .header .navbar-brand .logos {
    margin-left: 0px !important;
    max-width: 98px;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
  }

  .page-title-layout3 h1 {
    font-size: 35px;
  }

  .minh170 {
    min-height: 0px;
  }

  .portfolio-layout3 .portfolio-item .portfolio__body {
    bottom: 0px;
  }

  .portfolio-layout3 .portfolio-item .portfolio__desc {
    opacity: 1;
  }

  h1 {
    font-size: 40px;
  }

  .features-layout4 .feature-item .feature__title,
  .features-layout5 .feature-item .feature__title {
    font-size: 19px;
  }

  .heading__desc,
  .feature-item .feature__desc {
    font-size: 16px;
    line-height: 160%;
  }

  .footer-widget-nav li a,
  .footer__copyright-links li a {
    font-size: 16px;
  }

  .post-item .post__body {
    padding: 30px;
  }

  .contact-panel .contact__panel-info {
    padding: 30px;
  }

  .btn:not(.btn__link) {
    font-size: 15px;
    height: 50px;
  }

  .navbar .navbar-collapse .navbar-nav {
    padding: 50px 20px 20px 20px;
    width: 280px;
  }

  .navbar .navbar-collapse .navbar-nav .dropdown-toggle {
    display: inline;
  }

  .title-on-top {
    padding-top: 160px;
  }

  .card {
    margin-bottom: 20px;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .btn__lang_area {
    display: block !important;
  }

  .logo {
    max-height: 40px;
  }

  .header-layout3 .navbar .navbar-brand {
    margin-left: 0px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .btn__lang_area {
    display: block !important;
  }

  .logo {
    max-height: 40px;
  }

  .header-layout3 .navbar .navbar-brand {
    margin-left: 0px;
  }

  .logo-footer-canada {
    height: 65px;
    margin-right: 15px;
  }

  .logo-footer-garuda {
    height: 65px;
    margin-right: 15px;
  }

  .logo-footer-uw {
    height: 27px;
    margin-top: 19px;
  }


  .slider .slide__title {
    font-size: 50px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .slider .slide__title {
    font-size: 50px;
  }

  .navbar .nav__item .nav__item-link {
    padding-right: 0px;
    font-size: 16px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1365.98px) {
  .slider .slide__title {
    font-size: 50px;
  }

  .slide__body {
    padding-left: 60px;
  }

}

/* ── Where We Work map page ─────────────────────────────────── */

/* Full-screen layout (where-we-work page) — scoped to pages containing
   .map-wrapper only; an unscoped `html, body { height: 100% }` broke
   window scrolling site-wide (turned .wrapper into its own scroll
   container), which silently disabled the sticky navbar everywhere else. */
html:has(.map-wrapper), body:has(.map-wrapper) {
    height: 100%;
}

.map-wrapper {
    position: relative;
    display: flex;
    overflow: hidden;
    height: 100%;
}

#map {
    flex: 1 1 100%;
    transition: flex-basis 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar — desktop (pushes map to share the width 50/50) */
.map-sidebar {
    position: relative;
    top: 0;
    right: 0;
    width: 0;
    flex: 0 0 0%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    transition: flex-basis 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.18);
    padding: 30px 25px 40px;
}

.map-sidebar.active {
    flex: 0 0 50%;
    width: 50%;
}

/* Sidebar — mobile (slides from bottom, overlays the map) */
@media (max-width: 767px) {
    .map-sidebar {
        position: absolute;
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        flex-basis: auto;
        height: auto;
        max-height: 65%;
        transform: translateY(100%);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15);
        padding: 16px 16px 32px;
    }

    .map-sidebar.active {
        flex: 0 0 auto;
        width: 100%;
        transform: translateY(0);
    }

    .sidebar-drag-handle {
        display: block;
    }

    .stat-item {
        flex: 0 0 50%;
    }

    .pub-card {
        width: calc(25% - 8px);
    }
}

.sidebar-drag-handle {
    display: none;
    width: 40px;
    height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 14px;
}

.sidebar-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #555;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-close-btn:hover { color: #111; }

/* Location switcher */
.location-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.location-nav-btn {
    padding: 4px 12px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: none;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.location-nav-btn:hover:not(.active) {
    border-color: #2d9c6e;
    color: #2d9c6e;
}

.location-nav-btn.active {
    background: #2d9c6e;
    border-color: #2d9c6e;
    color: #fff;
}

#sidebar-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-right: 35px;
    color: #2d9c6e;
}

/* Stats Slider */
.stats-slider-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.stats-arrow {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 42px;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease, color 0.15s ease;
    user-select: none;
}

.stats-arrow:not([disabled]):hover { opacity: 1; color: #666; }
.stats-arrow[disabled] { opacity: 0.2; cursor: default; pointer-events: none; }

.stats-slider-viewport {
    flex: 1;
    overflow-x: hidden;
    overflow-y: visible;
}

.stats-slider-track {
    display: flex;
    will-change: transform;
}

.stat-item {
    position: relative;
    flex: 0 0 25%;
    text-align: center;
    padding: 6px 4px;
    cursor: default;
}

.stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 20px;
    background: #d9eddf;
    color: #2e7d52;
}

.stat-value {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
}

.stat-label {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
    line-height: 1.3;
}

/* Tooltip deskripsi — muncul saat hover/focus pada kartu */
.stat-desc {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
    width: 220px;
    background: #1b1a1a;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: left;
    padding: 10px 12px;
    border-radius: 6px;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.stat-desc::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1b1a1a transparent transparent transparent;
}

.stat-item:hover .stat-desc,
.stat-item:focus .stat-desc {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Sidebar sections */
.sidebar-section {
    margin-top: 20px;
}

.sidebar-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    margin-bottom: 14px;
}

/* Update Cards */
#sidebar-updates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.update-card {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 0;
}

.update-card img {
    width: 70px;
    height: 60px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 4px;
}

.update-card-text {
    font-size: 13px;
    color: #333;
    line-height: 1.45;
}

/* Publication Cards */
.pub-cards-grid {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.pub-card {
    width: calc(16.66% - 9px);
    text-align: center;
}

.pub-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 6px;
    display: block;
}

.pub-card-title {
    font-size: 11px;
    color: #444;
    line-height: 1.35;
}

.sidebar-view-all {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #2d9c6e;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.sidebar-view-all:hover {
    border-bottom-color: #2d9c6e;
    text-decoration: none;
}

/* Penanda peta */
.leaflet-marker-icon {
    cursor: pointer;
}

/* ================================================================
   OUR IMPACT — Auto-sliding carousel
   ================================================================ */


.impact-section .heading__subtitle {
    color: #e6aa29;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.impact-section .heading__title {
    color: #fff;
    margin-bottom: 0;
}

.impact-carousel-wrap {
    padding: 0 40px;
    /*overflow: hidden;*/
}

.impact-carousel .slick-list {
    overflow: visible;
}

/* Paksa semua slide setinggi slide tertinggi */
.impact-carousel .slick-track {
    display: flex;
}
.impact-carousel .slick-slide {
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 0 4px;
}
.impact-carousel .slick-slide > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Satu card */
.impact-card-wrap {
    padding: 8px 6px 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.impact-card {
    position: relative;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 30px 20px 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.00);
    text-align: center;
    flex: 1;
    transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
}

.impact-card:hover {
    background: #31a44d;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

/* Lingkaran ikon */
.impact-card__icon {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 26px;
    color: #fff;
}

.impact-card--flood .impact-card__icon,
.impact-card--nbs   .impact-card__icon,
.impact-card--finance .impact-card__icon { background-color: #31a44d; color: #fff; border: 2px solid #31a44d; }

.impact-card:hover .impact-card__icon { background-color: #f5c518; color: #000; border-color: #f5c518; }

/* Angka besar */
.impact-card__number {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    color: #31a44d;
    margin-bottom: 10px;
    transition: color 0.25s ease;
    /* font-family: "Optima", sans-serif; */
}

.impact-card:hover .impact-card__number { color: #fff; }

/* Label / judul metrik */
.impact-card__label {
    position: relative;
    font-size: 1.2rem;
    font-weight: 550;
    color: #1b1a1a;
    line-height: 1.4;
    margin-bottom: 10px;
    font-family: "Optima", sans-serif;
    cursor: default;
    transition: color 0.25s ease;
}

.impact-card:hover .impact-card__label { color: #fff; }

/* Deskripsi singkat — muncul sebagai tooltip saat hover/focus pada icon atau label */
.impact-card__desc {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
    width: 340px;
    background: #1b1a1a;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 12px 14px;
    border-radius: 6px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.impact-card__desc::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #1b1a1a transparent transparent transparent;
}

.impact-card:hover .impact-card__desc,
.impact-card:focus-within .impact-card__desc {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Titik navigasi carousel */

/* Panah kiri/kanan — diletakkan sejajar di samping titik navigasi
   (bawah carousel), bukan di tengah-tengah sisi seperti bawaan slick.
   slick dikonfigurasi (appendArrows/appendDots di index.php) untuk
   merender panah & titik sebagai sibling langsung di dalam
   .impact-carousel-nav, sehingga cukup dijadikan flex row. */
.impact-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.impact-carousel-nav .slick-arrow {
    position: static;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 14px;
    color: #fff;
    transform: none;
}

/* Urutan render slick di dalam .impact-carousel-nav selalu prev → next → dots.
   Paksa urutan tampil jadi prev → dots → next agar panah benar-benar
   mengapit titik navigasi. */
.impact-carousel-nav .slick-arrow.slick-prev { order: 1; }
.impact-carousel-nav .slick-dots            { order: 2; }
.impact-carousel-nav .slick-arrow.slick-next { order: 3; }

.impact-carousel-nav .slick-arrow:before {
    font-family: 'icomoon';
    font-size: 22px;
    color: inherit;
    opacity: 1;
}

.impact-carousel-nav .slick-arrow:hover {
    color: #f5c518;
}

.impact-carousel-nav .slick-arrow.slick-prev:before {
    content: "\e939";
}

.impact-carousel-nav .slick-arrow.slick-next:before {
    content: "\e93b";
}

.impact-carousel-nav .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    margin: 0;
}

.impact-section .slick-dots li {
    border: 3px solid #e9e9e9;
    background-color: #e9e9e9;
    opacity: .3;
}

.impact-section .slick-dots li.slick-active {
    border: 3px solid #e9e9e9;
    background-color: #e9e9e9;
    opacity: 1;
  }

.impact-section .slick-dots li button:before {
    font-size: 8px;
    color: #aaa;
    opacity: 1;
}

.impact-section .slick-dots li.slick-active button:before {
    color: #1c5f2e;
    opacity: 1;
}

/* Responsive: kurangi padding wrapper di layar kecil */
@media (max-width: 767px) {
    .impact-carousel-wrap {
        padding: 0 16px;
    }
    .impact-card {
        padding: 18px 14px 16px;
    }
    .impact-card__icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
        margin: 0 auto 10px;
    }
    .impact-card__number {
        font-size: 1.6rem;
        margin-bottom: 6px;
    }
    .impact-card__label {
        font-size: 1rem;
        margin-bottom: 4px;
    }
    /* Tooltip lebar tetap (340px) meluber keluar layar di mobile karena
       posisinya mengikuti pusat kartu, bukan viewport. Lebar dibatasi
       ke lebar layar, lalu JS (impact-tooltip-fit.js) menghitung offset
       geser horizontal (--desc-shift) agar tetap berada dalam layar
       sementara panah penunjuk (::after) tetap di tengah kartu. */
    .impact-card__desc {
        width: calc(100vw - 32px);
        max-width: 340px;
        transform: translateX(calc(-50% + var(--desc-shift, 0px))) translateY(6px);
    }
    .impact-card:hover .impact-card__desc,
    .impact-card:focus-within .impact-card__desc {
        transform: translateX(calc(-50% + var(--desc-shift, 0px))) translateY(0);
    }
    .impact-card__desc::after {
        left: calc(50% - var(--desc-shift, 0px));
    }
}

/* ================================================================
   Recent Updates / News — gambar kartu berita sama tinggi
   Scoped to `.news-grid` (not the generic `.post-grid`, which is
   reused by Publication/Stories/Articles/Events/Focus pages too —
   an unscoped rule here was force-cropping their card images and
   diverging from fincapesproject.com's reference styling).
   ================================================================ */
.news-grid .post-item .post__img {
    height: 220px;
}

.news-grid .post-item .post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================================================
   Banner Layout 2 — zoom background saat masuk viewport
   ================================================================ */

.banner-layout2 {
    overflow: hidden;
    position: relative;
}

/* Layer background yang bisa di-transform sendiri */
.banner-layout2 .banner-zoom-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transform: scale(1.18);
    transition: transform 10s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Zoom kembali ke normal saat section masuk viewport */
.banner-layout2.zoom-in-view .banner-zoom-bg {
    transform: scale(1);
}

/* Pastikan konten teks di atas layer background */
.banner-layout2 .container {
    position: relative;
    z-index: 1;
}

/* Di mobile, tinggi section mengikuti tinggi konten .text-block yang
   solid putih, sehingga gambar latar (.banner-zoom-bg) yang mengisi
   seluruh tinggi section jadi nyaris tidak terlihat (hanya terlihat
   celah kecil dari padding section). Beri jarak tetap di atas kartu
   teks agar sebagian gambar tetap tampil sebelum kartu dimulai. */
@media (max-width: 767px) {
    .banner-layout2 .text-block {
        margin-top: 180px;
        padding: 24px 24px 40px;
    }
}

/* ================================================================
   Map Banner Panel — animated location pins
   ================================================================ */

.map-banner-panel {
    position: relative;
    overflow: hidden;
}

/* Gradient overlay — darkens edges, lifts on hover */
.map-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.05) 45%,
        rgba(0, 0, 0, 0.40) 100%
    );
    transition: background 0.45s ease;
}

.map-banner-panel:hover .map-banner-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.02) 45%,
        rgba(0, 0, 0, 0.28) 100%
    );
}

/* Title */
.map-banner-title {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    letter-spacing: 0.5px;
}

/* CTA pill at the bottom */
.map-banner-cta {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 9px 22px;
    border-radius: 30px;
    white-space: nowrap;
    pointer-events: none;
    transition: background 0.35s ease, transform 0.35s ease;
}

.map-banner-panel:hover .map-banner-cta {
    background: rgba(255, 255, 255, 0.30);
    transform: translateX(-50%) translateY(-4px);
}

.map-banner-cta i {
    font-size: 0.78rem;
    transition: transform 0.35s ease;
}

.map-banner-panel:hover .map-banner-cta i {
    transform: translateX(5px);
}

/* Full-width modifier */
.map-banner-panel--full {
    width: 100%;
    height: 520px;
}

@media (max-width: 767px) {
    .map-banner-panel--full {
        height: 360px;
    }
}

/* ── Text block — tombol diposisikan tengah vertikal di dalam panel,
   bukan menempel di bawah — slide up tetap dipertahankan saat masuk viewport ── */
.map-text-block {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px;
    pointer-events: none;

    text-align: center;
    /* Initial hidden state */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.banner-layout4.in-view .map-text-block {
    opacity: 1;
    transform: translateY(0);
}

.map-text-heading {
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 8px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.map-text-desc {
    color: rgba(255,255,255,0.88);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 16px;
    max-width: 560px;
}

.map-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 1.5px solid rgba(255,255,255,0.5);
    padding-bottom: 2px;
    text-decoration: none !important;
    pointer-events: all;
    transition: border-color 0.25s ease, gap 0.25s ease;
}

.map-text-link:hover {
    color: #fff;
    border-color: #fff;
    gap: 12px;
    text-decoration: none !important;
}

/* Remove the standalone CTA pill (replaced by text block) */
.map-banner-panel--full .map-banner-cta {
    display: none;
}

/* ── Animated pins ── */
.map-pin {
    position: absolute;
    left: var(--mpx);
    top: var(--mpy);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Solid white centre dot */
.map-pin__core {
    position: relative;
    z-index: 2;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
    animation: pin-breathe 2.6s ease-in-out infinite;
}

/* Expanding pulse ring */
.map-pin__pulse {
    position: absolute;
    top: 50%; left: 50%;
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    animation: pin-pulse 2.4s ease-out infinite;
}

/* City label chip */
.map-pin__label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.60);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
}

/* Pulse keyframe: ring expands and fades out */
@keyframes pin-pulse {
    0%   { transform: scale(0.35); opacity: 0.85; }
    75%  { transform: scale(2.6);  opacity: 0; }
    100% { transform: scale(2.6);  opacity: 0; }
}

/* Core dot gently breathes */
@keyframes pin-breathe {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.3); }
}

/* ================================================================
   Banner Layout 4 — cinematic entrance + background Ken Burns
   ================================================================ */

/* 1 ── Background: zoom out on scroll-in, then slow breathe */
.map-banner-panel--full .banner-zoom-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transform: scale(1.15);
    transition: transform 5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.banner-layout4.in-view .banner-zoom-bg {
    transform: scale(1);
    animation: map-ken-burns 22s ease-in-out 5s infinite alternate;
}

@keyframes map-ken-burns {
    from { transform: scale(1);    }
    to   { transform: scale(1.06); }
}

/* 2 ── Title: slide down + fade */
.map-banner-title {
    opacity: 0;
    transform: translateY(-18px);
    transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
}

.banner-layout4.in-view .map-banner-title {
    opacity: 1;
    transform: translateY(0);
}

/* 3 ── Pins: pop in with staggered delay */
.map-banner-panel--full .map-pin {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner-layout4.in-view .map-pin:nth-child(2) { opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: 0.35s; }
.banner-layout4.in-view .map-pin:nth-child(3) { opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: 0.52s; }
.banner-layout4.in-view .map-pin:nth-child(4) { opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: 0.68s; }
.banner-layout4.in-view .map-pin:nth-child(5) { opacity: 1; transform: translate(-50%,-50%) scale(1); transition-delay: 0.84s; }

/* 4 ── Map button: pointer events + entrance covered by map-text-block parent */
#map-button {
    pointer-events: all;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    width: 220px;
    padding: 9px 22px;
    border: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

#map-button:hover {
    transform: translateY(-2px) scale(1.1);
    text-decoration: none;
    border: none;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6);
}