/* Mobile-first editorial statements; native scroll and the seven pagination targets remain. */
.eko-home #kenapa .eko-why-heading { margin: 0 0 20px; text-align: left; }
.eko-home #kenapa .eko-why-heading h2 {
  margin: 0; color: var(--primary-color); font-size: 1.75rem !important;
  font-weight: 700 !important; line-height: 1.3; letter-spacing: normal;
}
.eko-home #kenapa .eko-why-track {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 28px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-padding-inline: 1px; -webkit-overflow-scrolling: touch;
  margin: 0; padding: 8px 1px 14px;
}
.eko-home #kenapa .eko-why-card {
  display: flex; position: relative; flex-direction: column; align-items: stretch; box-sizing: border-box;
  flex: 0 0 340px; width: 340px; min-width: 0; height: auto;
  margin: 0; padding: 20px; border: 0; border-radius: 4px;
  background: #fff; box-shadow: 0 3px 12px rgba(32,37,43,.075); scroll-snap-align: start;
}
.eko-home #kenapa .eko-why-card:not(:last-of-type)::after {
  content: none; position: absolute; top: 20px; bottom: 20px; right: -14px;
  width: 1px; background: #ebe7e3; pointer-events: none;
}
.eko-home #kenapa .eko-why-card-body {
  display: grid; grid-template-columns: 26px minmax(0,1fr); column-gap: 12px; row-gap: 18px;
  align-content: start; align-items: start; flex: 1; min-width: 0; padding: 0 !important;
}
.eko-home #kenapa .eko-why-icon {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 0; background: transparent; color: #dd141f;
}
.eko-home #kenapa svg.eko-why-outline {
  display: block; width: 26px; height: 26px; flex: 0 0 26px;
  margin: 0 !important; color: inherit; overflow: visible;
}
.eko-home #kenapa .eko-why-copy {
  grid-column: 2; grid-row: 1; align-self: center; min-width: 0; margin: 0;
}
.eko-home #kenapa .eko-why-copy h4 {
  display: flex; align-items: center; min-height: 26px; margin: 0 !important;
  color: #000; font-size: 15px !important; font-weight: 600 !important;
  line-height: 1.6 !important; letter-spacing: 0; text-transform: none;
}
.eko-home #kenapa .eko-why-card-body > p {
  grid-column: 1 / -1; min-width: 0;
  margin: 0 !important; color: #20252b !important;
  font-size: 15px !important; font-weight: 400 !important; line-height: 1.8 !important;
  letter-spacing: 0; text-align: left; overflow-wrap: break-word;
}
.eko-home #kenapa .eko-why-track[data-aos="fade-up"] {
  opacity: 1; transform: none; transition-property: opacity, transform;
  transition-duration: 450ms; transition-timing-function: ease;
}
.eko-home #kenapa .eko-why-track[data-aos="fade-up"].aos-init:not(.aos-animate) {
  opacity: 0; transform: translateY(8px);
}
.eko-home #kenapa .eko-why-track.eko-scroll-enhanced { scrollbar-width: none; }
.eko-home #kenapa .eko-why-track.eko-scroll-enhanced::-webkit-scrollbar { display: none; }
.eko-home #kenapa .eko-why-track.eko-scroll-enhanced::after {
  content: ''; display: block; flex: 0 0 max(0px, calc(100% - 340px - 28px));
  height: 1px; pointer-events: none;
}
.eko-home #kenapa .eko-why-track:focus-visible { outline: 2px solid #dd141f; outline-offset: 3px; }
@media (max-width: 991.98px) {
  .eko-home #kenapa.section-padding { padding: 16px 12px 40px !important; }
  .eko-home #kenapa > .container { width: 100%; max-width: none; padding-left: 0 !important; padding-right: 0 !important; }
  .eko-home #kenapa .eko-why-heading { text-align: center; }
  .eko-home #kenapa .eko-why-heading h2 { font-size: 22px !important; font-weight: 600 !important; line-height: 1.35 !important; }
  .eko-home #kenapa .eko-why-track { gap: 16px; }
  /* Reveal half of the following icon: 16px gap + 20px inset + 13px icon - 1px track padding. */
  .eko-home #kenapa .eko-why-card { flex-basis: calc(100% - 48px); width: calc(100% - 48px); }
  .eko-home #kenapa .eko-why-card:not(:last-of-type)::after { right: -8px; }
  .eko-home #kenapa .eko-why-card.is-peeking .eko-why-card-body > p { visibility: hidden; }
  .eko-home #kenapa .eko-why-track.eko-scroll-enhanced::after { flex-basis: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .eko-home #kenapa .eko-why-track[data-aos="fade-up"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .eko-home #kenapa .eko-why-page span { transition: none; }
}