.elementor-6461 .elementor-element.elementor-element-2cd70eb{--display:flex;}.elementor-6461 .elementor-element.elementor-element-5e08a76{width:100%;max-width:100%;}.elementor-6461 .elementor-element.elementor-element-5e08a76.elementor-element{--align-self:center;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-5e08a76 *//* =============================================================
   NDIFO COMMUNITY DEVELOPMENT FOUNDATION
   PROJECTS PAGE — EDITORIAL / FIELD-JOURNAL DESIGN
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Manrope:wght@400;500;600;700;800&display=swap');


/* =============================================================
   IMAGE SWAPS
   Change only these URLs when you have the exact Ndifo photos.

   HERO:
   Suggested: Tanzania landscape / Mount Meru / Kilimanjaro

   LIKAMBA:
   Suggested: children outside Likamba school

   SCHOOL PROJECT CARDS:
   Suggested: actual Hen House / Kitchen / Meal / Toilet / Art photos

   WATER:
   Suggested: families or students at Lovilokoi water point

   CLOSING:
   Suggested: students at sunset / looking toward future
   ============================================================= */

:root {

  --ndps-img-hero:
    url("https://www.ndifo.org/wp-content/uploads/2025/02/Likamba-primary-school-projects-2.jpg");

  --ndps-img-likamba:
    url("https://www.ndifo.org/wp-content/uploads/2026/06/mural_beginning.jpg");

  --ndps-img-henhouse:
    url("https://www.ndifo.org/wp-content/uploads/2026/08/hen_house1.jpg");

  --ndps-img-kitchen:
    url("https://www.ndifo.org/wp-content/uploads/2026/08/kitchen_build.png");

  --ndps-img-food:
    url("https://www.ndifo.org/wp-content/uploads/2026/08/kitchen_line.png");

  --ndps-img-toilets:
    url("https://www.ndifo.org/wp-content/uploads/2026/08/finished_toilet.png");

  --ndps-img-art:
    url("https://www.ndifo.org/wp-content/uploads/2026/06/mural_beginning.jpg");

  --ndps-img-water:
    url("https://www.ndifo.org/wp-content/uploads/2025/02/water-image-7.jpg");

  --ndps-img-closing:
    url("https://www.ndifo.org/wp-content/uploads/2026/06/DSC2110.jpg");

}


/* =============================================================
   BRAND
   ============================================================= */

:root {

  --ndps-ink: #263b2e;

  --ndps-green: #334b36;
  --ndps-green-mid: #274432;
  --ndps-green-deep: #1f3425;
  --ndps-green-dark: #172b1e;

  --ndps-gold: #c99151;
  --ndps-tan: #d49e64;
  --ndps-tan-light: #e3b578;
  --ndps-tan-dark: #a87033;

  --ndps-cream: #f7f0e3;
  --ndps-cream-deep: #eee2cf;
  --ndps-paper: #fbf6eb;
  --ndps-white: #fffdf7;

  --ndps-line: rgba(57,71,51,.17);

  --ndps-display:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  --ndps-body:
    "Manrope",
    Arial,
    sans-serif;

}


/* =============================================================
   GLOBAL / ELEMENTOR RESET
   ============================================================= */

html {
  scroll-behavior: smooth;
}

body:has(.ndifo-projects-story) {
  overflow-x: clip;
}

.ndifo-projects-story,
.ndifo-projects-story *,
.ndifo-projects-story *::before,
.ndifo-projects-story *::after {
  box-sizing: border-box;
}

.ndifo-projects-story {

  position: relative;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  overflow-x: clip;

  color: var(--ndps-ink);
  background: var(--ndps-paper);

  font-family: var(--ndps-body);
  font-size: 16px;
  line-height: 1.7;

  -webkit-font-smoothing: antialiased;
}

.ndifo-projects-story a {
  color: inherit;
  text-decoration: none;
}

.ndifo-projects-story p {
  margin-top: 0;
}

.ndifo-projects-story button {
  font: inherit;
}

.ndps-shell {
  width: min(1240px, calc(100% - 56px));
  margin-inline: auto;
}

.ndifo-projects-story h1,
.ndifo-projects-story h2,
.ndifo-projects-story h3 {

  margin-top: 0;

  font-family: var(--ndps-display) !important;
  text-transform: none !important;
}

.ndifo-projects-story h1 {

  font-size: clamp(64px, 7vw, 108px) !important;
  font-weight: 600 !important;
  line-height: .87 !important;
  letter-spacing: -.04em !important;
}

.ndifo-projects-story h2 {

  font-size: clamp(45px, 5vw, 70px) !important;
  font-weight: 600 !important;
  line-height: .95 !important;
  letter-spacing: -.03em !important;
}

.ndifo-projects-story h1 em,
.ndifo-projects-story h2 em {

  font-family: var(--ndps-display) !important;
  font-style: italic !important;
  font-weight: 600 !important;
}


/* =============================================================
   HIDE OLD THEME HEADER / TITLE
   ============================================================= */

body:has(.ndifo-projects-story)
[data-elementor-type="header"],

body:has(.ndifo-projects-story)
header.elementor-location-header,

body:has(.ndifo-projects-story)
.elementor-location-header,

body:has(.ndifo-projects-story)
.site-header:not(.ndps-header),

body:has(.ndifo-projects-story)
#site-header:not(.ndps-header),

body:has(.ndifo-projects-story)
.entry-header,

body:has(.ndifo-projects-story)
.page-header,

body:has(.ndifo-projects-story)
.page-title,

body:has(.ndifo-projects-story)
.page-title-bar,

body:has(.ndifo-projects-story)
.page-header-wrap,

body:has(.ndifo-projects-story)
.title-bar,

body:has(.ndifo-projects-story)
.inner-banner {

  display: none !important;

}

body:has(.ndifo-projects-story)
.elementor-widget-html:has(.ndifo-projects-story),

body:has(.ndifo-projects-story)
.elementor-widget-html:has(.ndifo-projects-story)
> .elementor-widget-container {

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

}


/* =============================================================
   HEADER / NAV
   ============================================================= */

.ndps-header {

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  width: 100%;

  padding: 20px 38px 12px;

  color: #fff;
}

.ndps-header-inner {

  width: min(1440px, 100%);
  max-width: 1440px;

  margin-inline: auto;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 35px;
}

.ndps-brand {

  display: block;

  width: 175px !important;
  max-width: 175px !important;

  flex: 0 0 175px !important;
}

.ndps-brand img {

  display: block !important;

  width: 175px !important;
  max-width: 175px !important;
  max-height: 125px !important;

  height: auto !important;

  object-fit: contain !important;
  object-position: left top !important;

  filter: brightness(0) invert(1);
}

.ndps-nav {

  flex: 0 1 auto;

  margin-left: auto;

  display: flex;
  align-items: center;

  gap: clamp(16px, 1.8vw, 30px);

  color: #fff;

  font-family: var(--ndps-body) !important;
}

.ndps-nav-link {

  position: relative;

  padding: 9px 0;

  color: #fff !important;

  font-family: var(--ndps-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;

  line-height: 1.1;
  letter-spacing: 0 !important;
  text-transform: none !important;

  white-space: nowrap;

  transition: color .2s ease;
}

.ndps-nav-link:hover,
.ndps-current {

  color: #e0ad6e !important;
}

.ndps-current::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 1px;

  height: 2px;

  border-radius: 999px;

  background: var(--ndps-tan);
}

.ndps-chevron {

  display: inline-block;

  margin-left: 6px;

  transition: transform .2s ease;
}

.ndps-dropdown:hover .ndps-chevron,
.ndps-dropdown:focus-within .ndps-chevron {

  transform: rotate(180deg);
}

.ndps-nav-donate {

  display: inline-flex;

  min-height: 52px;

  padding: 15px 28px;

  align-items: center;
  justify-content: center;

  border-radius: 999px;

  color: #fff !important;
  background: var(--ndps-gold);

  box-shadow: 0 12px 28px rgba(103,70,30,.18);

  font-family: var(--ndps-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;

  letter-spacing: .09em !important;
  text-transform: uppercase !important;

  white-space: nowrap;

  transition:
    transform .2s ease,
    background .2s ease;
}

.ndps-nav-donate:hover {

  background: #b57c3f;
  transform: translateY(-2px);
}


/* =============================================================
   DROPDOWNS
   ============================================================= */

.ndps-dropdown {
  position: relative;
}

.ndps-dropdown-menu {

  position: absolute;

  top: calc(100% + 16px);
  left: 50%;

  z-index: 110;

  width: 250px;

  padding: 10px;

  display: grid;
  gap: 2px;

  border: 1px solid rgba(255,255,255,.34);
  border-radius: 16px;

  background: rgba(248,241,229,.98);

  box-shadow: 0 16px 38px rgba(42,43,31,.17);

  opacity: 0;
  visibility: hidden;

  transform: translateX(-50%) translateY(8px);

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease;
}

.ndps-dropdown-menu::before {

  content: "";

  position: absolute;

  top: -7px;
  left: 50%;

  width: 14px;
  height: 14px;

  background: rgba(248,241,229,.98);

  transform: translateX(-50%) rotate(45deg);
}

.ndps-dropdown:hover .ndps-dropdown-menu,
.ndps-dropdown:focus-within .ndps-dropdown-menu {

  opacity: 1;
  visibility: visible;

  transform: translateX(-50%) translateY(0);
}

.ndps-dropdown-menu a {

  position: relative;
  z-index: 2;

  display: block;

  padding: 12px 14px;

  border-radius: 10px;

  color: var(--ndps-green-dark) !important;

  font-family: var(--ndps-body) !important;
  font-size: 14px;
  font-weight: 700;

  transition:
    color .2s ease,
    background .2s ease;
}

.ndps-dropdown-menu a:hover {

  color: var(--ndps-green) !important;
  background: rgba(49,95,80,.09);
}


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

.ndps-menu-toggle {

  display: none;

  margin-left: auto;

  width: 46px;
  height: 46px;

  padding: 8px;

  border: 1px solid rgba(255,255,255,.55);
  border-radius: 12px;

  background: rgba(255,255,255,.06);

  color: #fff;

  cursor: pointer;
}

.ndps-menu-toggle span {

  display: block;

  width: 24px;
  height: 2px;

  margin: 5px auto;

  background: currentColor;
}


/* =============================================================
   REUSABLE TYPOGRAPHY / LINKS
   ============================================================= */

.ndps-eyebrow {

  margin: 0 0 15px;

  color: var(--ndps-tan-dark) !important;

  font-family: var(--ndps-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;

  line-height: 1.2;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}

.ndps-eyebrow-light {

  color: #e9bf70 !important;
}

.ndps-gold-stroke {

  width: 90px;
  height: 3px;

  margin: 28px 0 0;

  border-radius: 999px;

  background: var(--ndps-gold);

  transform: rotate(-2deg);
}

.ndps-text-link {

  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-top: 12px;
  padding-bottom: 5px;

  border-bottom: 1px solid rgba(38,59,46,.42);

  color: var(--ndps-green-deep) !important;

  font-family: var(--ndps-body);
  font-size: 11px;
  font-weight: 800;

  letter-spacing: .07em;
  text-transform: uppercase;
}

.ndps-button {

  display: inline-flex;

  min-height: 54px;

  padding: 16px 29px;

  align-items: center;
  justify-content: center;

  border: 1px solid transparent;
  border-radius: 999px;

  font-family: var(--ndps-body);
  font-size: 11px;
  font-weight: 800;

  letter-spacing: .09em;
  text-transform: uppercase;

  transition:
    transform .2s ease,
    background .2s ease;
}

.ndps-button:hover {
  transform: translateY(-2px);
}

.ndps-button-gold {

  color: #fff !important;
  background: var(--ndps-gold);
}

.ndps-button-gold:hover {
  background: #b57c3f;
}

.ndps-button-outline {

  color: #fff !important;

  border-color: rgba(255,255,255,.72);

  background: rgba(17,31,22,.15);
}


/* =============================================================
   HERO
   ============================================================= */

.ndps-hero {

  position: relative;

  min-height: 760px;

  display: flex;
  align-items: center;

  overflow: hidden;

  color: #fff;

  background-image: var(--ndps-img-hero);
  background-size: cover;
  background-position: center;
}

.ndps-hero-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(15,27,20,.88) 0%,
      rgba(16,30,22,.70) 39%,
      rgba(17,29,21,.34) 69%,
      rgba(17,29,21,.20) 100%
    ),
    linear-gradient(
      0deg,
      rgba(17,27,19,.20),
      transparent 55%
    );
}

.ndps-hero-content {

  position: relative;

  z-index: 3;

  padding: 190px 0 180px;
}

.ndps-hero h1 {

  max-width: 850px;

  margin: 0;

  color: #fffdf8 !important;
}

.ndps-hero h1 em {

  color: #fffdf8 !important;
}

.ndps-hero-lead {

  max-width: 610px;

  margin: 28px 0 0;

  color: rgba(255,255,255,.92);

  font-size: 18px;
  line-height: 1.8;
}

.ndps-scroll-link {

  display: inline-flex;
  align-items: center;

  gap: 11px;

  margin-top: 27px;
  padding-bottom: 4px;

  border-bottom: 1px solid rgba(255,255,255,.5);

  color: #fff !important;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .08em;
  text-transform: uppercase;
}


/* HERO WAVE */

.ndps-hero-wave {

  position: absolute;

  z-index: 4;

  left: 0;
  right: 0;
  bottom: -2px;

  height: 165px;

  pointer-events: none;
}

.ndps-hero-wave svg {

  display: block;

  width: 100%;
  height: 100%;
}

.ndps-wave-fill {
  fill: var(--ndps-paper);
}

.ndps-wave-line {

  fill: none;

  stroke: rgba(212,158,100,.55);
  stroke-width: 2;
}


/* =============================================================
   APPROACH / MEANDERING PATH
   ============================================================= */

.ndps-approach {

  position: relative;

  padding: 95px 0 120px;

  overflow: hidden;

  background:
    radial-gradient(circle at 15% 22%, rgba(212,158,100,.06), transparent 30%),
    var(--ndps-paper);
}

.ndps-approach-intro {

  width: min(410px, 100%);
}

.ndps-approach-intro h2 {

  margin: 0 0 26px;

  color: var(--ndps-green-deep) !important;
}

.ndps-approach-intro h2 em {

  color: var(--ndps-green) !important;
}

.ndps-approach-intro > p:not(.ndps-eyebrow) {

  color: #5e6c64;

  font-size: 14px;
  line-height: 1.82;
}

.ndps-path-map {

  position: relative;

  min-height: 420px;

  margin-top: -30px;
}

.ndps-path-line {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}

.ndps-path-line path {

  fill: none;

  stroke: #5d8a73;
  stroke-width: 2.2;
  stroke-dasharray: 5 7;

  opacity: .8;
}

.ndps-path-point {

  position: absolute;

  width: 250px;

  text-align: center;
}

.ndps-path-one {
  left: 18%;
  bottom: 18px;
}

.ndps-path-two {
  left: 46%;
  top: 65px;
}

.ndps-path-three {
  right: 4%;
  top: 15px;
}

.ndps-path-number {

  position: absolute;

  top: -7px;
  right: 42px;

  display: grid;

  width: 25px;
  height: 25px;

  place-items: center;

  border-radius: 50%;

  color: #fff;
  background: var(--ndps-green);

  font-size: 10px;
  font-weight: 800;
}

.ndps-path-icon {

  width: 82px;
  height: 82px;

  margin: 0 auto 17px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(168,112,51,.4);
  border-radius: 50%;

  color: var(--ndps-green);

  background: rgba(238,226,207,.7);

  font-family: var(--ndps-display);
  font-size: 32px;

  box-shadow:
    0 0 0 13px rgba(238,226,207,.30);
}

.ndps-path-point h3 {

  margin: 0 0 9px;

  color: var(--ndps-green-deep);

  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
}

.ndps-path-point p {

  margin: 0;

  color: #5f6d65;

  font-size: 12px;
  line-height: 1.65;
}

.ndps-footprints {

  position: absolute;

  left: 2%;
  bottom: 42px;

  color: var(--ndps-green);

  font-size: 29px;

  letter-spacing: 8px;

  transform: rotate(-13deg);
}

.ndps-leaf-sketch {

  position: absolute;

  right: 0;
  top: 7px;

  width: 70px;
  height: 125px;

  opacity: .55;
}

.ndps-leaf-sketch::before {

  content: "";

  position: absolute;

  left: 32px;
  top: 0;

  width: 1px;
  height: 115px;

  background: var(--ndps-gold);

  transform: rotate(17deg);
}

.ndps-leaf-sketch span {

  position: absolute;

  width: 27px;
  height: 13px;

  border: 1px solid var(--ndps-gold);
  border-radius: 100% 0 100% 0;
}

.ndps-leaf-sketch span:nth-child(1) {
  top: 28px;
  left: 15px;
}

.ndps-leaf-sketch span:nth-child(2) {
  top: 56px;
  left: 36px;
  transform: rotate(180deg);
}

.ndps-leaf-sketch span:nth-child(3) {
  top: 83px;
  left: 12px;
}


/* =============================================================
   LIKAMBA — CINEMATIC
   ============================================================= */

.ndps-likamba {

  position: relative;

  min-height: 680px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: var(--ndps-green-dark);
}

.ndps-likamba-photo {

  position: absolute;

  inset: 0;

  background-image: var(--ndps-img-likamba);
  background-size: cover;
  background-position: center;
}

.ndps-likamba-shade {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(22,36,26,.25) 0%,
      rgba(22,36,26,.03) 48%,
      rgba(22,36,26,.10) 100%
    );
}

.ndps-likamba-layout {

  position: relative;

  z-index: 2;

  min-height: 680px;

  display: flex;
  align-items: center;
}

.ndps-likamba-story-card {

  width: min(440px, 42%);

  padding: 38px 38px 42px;

  border: 1px solid rgba(255,255,255,.55);
  border-radius: 18px;

  background: rgba(251,246,235,.95);

  box-shadow: 0 22px 55px rgba(36,39,30,.20);

  backdrop-filter: blur(3px);
}

.ndps-likamba-story-card h2 {

  margin: 0 0 24px;

  color: var(--ndps-green-deep) !important;
}

.ndps-likamba-story-card h2 em {

  color: var(--ndps-green-deep) !important;
}

.ndps-likamba-story-card > p:not(.ndps-eyebrow) {

  color: #5d6b63;

  font-size: 14px;
  line-height: 1.82;
}

.ndps-likamba-stats {

  position: absolute;

  right: 0;
  bottom: 90px;

  display: flex;
  align-items: flex-end;

  gap: 15px;
}

.ndps-stat-card {

  width: 150px;
  min-height: 165px;

  padding: 20px 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(224,173,110,.55);
  border-radius: 12px;

  color: #fff;
  background: rgba(24,57,39,.93);

  text-align: center;

  box-shadow: 0 17px 38px rgba(0,0,0,.20);
}

.ndps-stat-one {
  transform: translateY(12px) rotate(-2deg);
}

.ndps-stat-two {
  transform: translateY(-13px) rotate(1deg);
}

.ndps-stat-three {
  transform: translateY(8px) rotate(2deg);
}

.ndps-stat-icon {

  margin-bottom: 8px;

  color: #e2b56e;

  font-size: 22px;
}

.ndps-stat-card strong {

  font-family: var(--ndps-display);
  font-size: 45px;
  font-weight: 600;
  line-height: 1;
}

.ndps-stat-card small {

  margin-top: 7px;

  color: rgba(255,255,255,.88);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}


/* =============================================================
   LIKAMBA FOCUS CARDS
   ============================================================= */

.ndps-likamba-focus {

  position: relative;

  z-index: 4;

  margin-top: -38px;
  padding-bottom: 70px;

  background: var(--ndps-paper);
}

.ndps-focus-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;
}

.ndps-focus-card {

  min-height: 125px;

  padding: 21px 24px;

  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;

  gap: 18px;

  border: 1px solid rgba(57,71,51,.12);
  border-radius: 13px;

  background: #fffdf8;

  box-shadow: 0 12px 28px rgba(44,48,36,.07);
}

.ndps-focus-icon {

  display: grid;

  width: 56px;
  height: 56px;

  place-items: center;

  border-radius: 50%;

  color: var(--ndps-green);

  background: var(--ndps-cream-deep);

  font-family: var(--ndps-display);
  font-size: 23px;
}

.ndps-focus-card h3 {

  margin: 0 0 6px;

  color: var(--ndps-green-deep);

  font-size: 19px;
  font-weight: 600;
}

.ndps-focus-card p {

  margin: 0;

  color: #647169;

  font-size: 11px;
  line-height: 1.55;
}


/* =============================================================
   SCRAPBOOK
   ============================================================= */

.ndps-scrapbook {

  position: relative;

  padding: 48px 0 110px;

  overflow: hidden;

  background:
    radial-gradient(circle at 9% 60%, rgba(212,158,100,.09), transparent 24%),
    radial-gradient(circle at 90% 26%, rgba(51,75,54,.05), transparent 25%),
    var(--ndps-paper);
}

.ndps-scrapbook-heading {

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;

  text-align: center;
}

.ndps-scrapbook-heading h2 {

  margin: 0;

  color: var(--ndps-green-deep) !important;

  font-size: clamp(38px,4vw,58px) !important;
}

.ndps-hand-arrow {

  color: var(--ndps-gold);

  font-family: var(--ndps-display);
  font-size: 34px;

  transform: rotate(-7deg);
}

.ndps-hand-arrow-right {
  transform: rotate(7deg);
}

.ndps-scrapbook-subhead {

  margin: 12px 0 0;

  color: #738078;

  text-align: center;

  font-size: 12px;
  font-weight: 600;
}

.ndps-scrapbook-board {

  position: relative;

  min-height: 390px;

  margin-top: 44px;
}

.ndps-scrapbook-trail {

  position: absolute;

  left: 0;
  right: 0;
  top: 80px;

  width: 100%;
  height: 250px;
}

.ndps-scrapbook-trail path {

  fill: none;

  stroke: #738a78;
  stroke-width: 1.5;
  stroke-dasharray: 4 6;

  opacity: .6;
}

.ndps-polaroid {

  position: absolute;

  width: 205px;

  padding: 12px 12px 17px;

  border: 0;

  color: var(--ndps-green-deep);
  background: #fffdf8;

  box-shadow: 0 15px 34px rgba(55,55,43,.13);

  text-align: left;

  cursor: pointer;

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.ndps-polaroid:hover,
.ndps-polaroid:focus-visible,
.ndps-polaroid.is-active {

  z-index: 8;

  box-shadow: 0 22px 44px rgba(55,55,43,.20);
}

.ndps-polaroid:focus-visible {

  outline: 3px solid var(--ndps-tan);
  outline-offset: 6px;
}

.ndps-polaroid-photo {

  display: block;

  width: 100%;
  aspect-ratio: 1.18 / 1;

  margin-bottom: 13px;

  background-size: cover;
  background-position: center;
}

.ndps-polaroid strong {

  display: block;

  font-family: var(--ndps-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.05;
}

.ndps-polaroid small {

  display: block;

  margin-top: 6px;

  color: #647168;

  font-size: 9px;
  line-height: 1.45;
}

.ndps-tape {

  position: absolute;

  top: -9px;
  left: 50%;

  width: 52px;
  height: 20px;

  background: rgba(210,160,77,.72);

  transform: translateX(-50%) rotate(-3deg);
}

.ndps-polaroid-one {
  left: 0;
  top: 70px;

  transform: rotate(-5deg);
}

.ndps-polaroid-two {
  left: 20.5%;
  top: 38px;

  transform: rotate(2deg);
}

.ndps-polaroid-three {
  left: 41%;
  top: 70px;

  transform: rotate(-1deg);
}

.ndps-polaroid-four {
  right: 20%;
  top: 42px;

  transform: rotate(3.5deg);
}

.ndps-polaroid-five {
  right: 0;
  top: 78px;

  transform: rotate(5deg);
}

.ndps-polaroid-one:hover,
.ndps-polaroid-one.is-active {
  transform: rotate(-2deg) translateY(-7px) scale(1.03);
}

.ndps-polaroid-two:hover,
.ndps-polaroid-two.is-active {
  transform: rotate(0deg) translateY(-7px) scale(1.03);
}

.ndps-polaroid-three:hover,
.ndps-polaroid-three.is-active {
  transform: rotate(1deg) translateY(-7px) scale(1.03);
}

.ndps-polaroid-four:hover,
.ndps-polaroid-four.is-active {
  transform: rotate(1deg) translateY(-7px) scale(1.03);
}

.ndps-polaroid-five:hover,
.ndps-polaroid-five.is-active {
  transform: rotate(2deg) translateY(-7px) scale(1.03);
}

.ndps-hen-photo {
  background-image: var(--ndps-img-henhouse);
}

.ndps-kitchen-photo {
  background-image: var(--ndps-img-kitchen);
}

.ndps-food-photo {
  background-image: var(--ndps-img-food);
}

.ndps-toilets-photo {
  background-image: var(--ndps-img-toilets);
}

.ndps-art-photo {
  background-image: var(--ndps-img-art);
}


/* PROJECT DRAWER */

.ndps-project-drawer {

  position: relative;

  width: min(930px, 100%);

  margin: 16px auto 0;
  padding: 35px 44px 38px;

  border: 1px solid rgba(57,71,51,.14);
  border-radius: 16px;

  background: #fffdf8;

  box-shadow: 0 18px 42px rgba(44,48,36,.08);
}

.ndps-project-drawer[hidden] {
  display: none !important;
}

.ndps-drawer-close {

  position: absolute;

  top: 14px;
  right: 17px;

  width: 35px;
  height: 35px;

  border: 1px solid var(--ndps-line);
  border-radius: 50%;

  color: var(--ndps-green);
  background: transparent;

  font-size: 22px;
  line-height: 1;

  cursor: pointer;
}

.ndps-drawer-panel h3 {

  margin: 0 0 13px;

  color: var(--ndps-green-deep);

  font-size: 38px;
  font-weight: 600;
}

.ndps-drawer-panel > p:not(.ndps-eyebrow) {

  max-width: 750px;

  margin: 0;

  color: #5d6b64;

  font-size: 14px;
  line-height: 1.8;
}

.ndps-tags {

  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 20px;
}

.ndps-tags span {

  padding: 7px 11px;

  border-radius: 999px;

  color: var(--ndps-green-deep);
  background: var(--ndps-cream-deep);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .06em;
  text-transform: uppercase;
}


/* =============================================================
   DARK RIPPLE TRANSITION
   ============================================================= */

.ndps-ripple-transition {

  padding: 68px 0;

  overflow: hidden;

  color: #fff;
  background:
    radial-gradient(circle at 18% 110%, rgba(212,158,100,.09), transparent 35%),
    var(--ndps-green-dark);
}

.ndps-ripple-inner {

  display: grid;

  grid-template-columns: .8fr 1.2fr;

  align-items: center;

  gap: 65px;
}

.ndps-ripple-copy h2 {

  margin: 0 0 10px;

  color: #fffdf8 !important;

  font-size: clamp(42px,4vw,58px) !important;
}

.ndps-ripple-copy p {

  margin: 0;

  color: rgba(255,255,255,.76);

  font-size: 14px;
}

.ndps-ripple-art {

  min-height: 130px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  color: #d8aa61;
}

.ndps-book-symbol,
.ndps-leaf-symbol,
.ndps-people-symbol {

  font-family: var(--ndps-display);
  font-size: 42px;
}

.ndps-art-arrow {

  color: rgba(216,170,97,.55);

  font-size: 26px;
}

.ndps-ripple-lines {

  position: relative;

  width: 140px;
  height: 80px;

  margin-left: 20px;
}

.ndps-ripple-lines i {

  position: absolute;

  left: 50%;
  top: 50%;

  display: block;

  border: 1px solid #d8aa61;
  border-radius: 50%;

  transform: translate(-50%,-50%);
}

.ndps-ripple-lines i:nth-child(1) {
  width: 70px;
  height: 28px;
}

.ndps-ripple-lines i:nth-child(2) {
  width: 105px;
  height: 45px;
}

.ndps-ripple-lines i:nth-child(3) {
  width: 140px;
  height: 66px;
}


/* =============================================================
   LOVILOKOI WATER PROJECT
   ============================================================= */

.ndps-water {

  position: relative;

  min-height: 650px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background: var(--ndps-cream);
}

.ndps-water-image {

  position: absolute;

  right: 0;
  top: 0;
  bottom: 0;

  width: 68%;

  background-image: var(--ndps-img-water);
  background-size: cover;
  background-position: center;
}

.ndps-water-layout {

  position: relative;

  z-index: 2;

  min-height: 650px;

  display: flex;
  align-items: center;
}

.ndps-water-story {

  width: 39%;

  padding: 40px 42px 43px;

  border: 1px solid rgba(57,71,51,.13);
  border-radius: 16px;

  background: rgba(251,246,235,.97);

  box-shadow: 0 18px 42px rgba(44,48,36,.12);
}

.ndps-water-story h2 {

  margin: 0;

  color: var(--ndps-green-deep) !important;
}

.ndps-water-story h2 em {

  color: var(--ndps-green-deep) !important;
}

.ndps-water-lead {

  margin: 24px 0 12px !important;

  color: var(--ndps-green-deep) !important;

  font-family: var(--ndps-display);
  font-size: 24px !important;
  font-weight: 600;
}

.ndps-water-story > p:not(.ndps-eyebrow):not(.ndps-water-lead) {

  margin: 0;

  color: #5d6b64;

  font-size: 13px;
  line-height: 1.75;
}

.ndps-water-flow {

  position: absolute;

  left: 36%;
  right: 2%;
  bottom: 28px;

  display: grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr auto 1fr;

  align-items: center;

  gap: 10px;

  padding: 19px 20px;

  border: 1px solid rgba(57,71,51,.14);
  border-radius: 13px;

  background: rgba(255,253,248,.96);

  box-shadow: 0 14px 35px rgba(44,48,36,.12);
}

.ndps-water-flow > div {

  display: flex;
  align-items: center;

  gap: 10px;
}

.ndps-flow-icon {

  display: grid;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  place-items: center;

  border-radius: 50%;

  color: var(--ndps-green);
  background: var(--ndps-cream-deep);

  font-size: 19px;
}

.ndps-water-flow strong {

  color: var(--ndps-green-deep);

  font-family: var(--ndps-body);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.ndps-flow-arrow {

  color: var(--ndps-gold);

  font-size: 18px;
}


/* =============================================================
   HOW WE WORK
   ============================================================= */

.ndps-process {

  padding: 105px 0 115px;

  background:
    radial-gradient(circle at 95% 50%, rgba(212,158,100,.06), transparent 25%),
    var(--ndps-paper);
}

.ndps-process-layout {

  display: grid;

  grid-template-columns: .65fr 1.35fr;

  gap: 55px;

  align-items: end;
}

.ndps-process-intro h2 {

  margin: 0;

  color: var(--ndps-green-deep) !important;
}

.ndps-process-intro h2 em {

  color: var(--ndps-green) !important;
}

.ndps-process-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 13px;
}

.ndps-process-card {

  min-height: 280px;

  padding: 24px 20px 26px;

  border: 1px solid rgba(57,71,51,.13);
  border-radius: 14px;

  background: rgba(255,253,248,.72);

  text-align: center;
}

.ndps-process-number {

  display: grid;

  width: 26px;
  height: 26px;

  margin: 0 auto 18px;

  place-items: center;

  border-radius: 50%;

  color: #fff;
  background: var(--ndps-green);

  font-size: 10px;
  font-weight: 800;
}

.ndps-process-icon {

  display: grid;

  width: 54px;
  height: 54px;

  margin: 0 auto 17px;

  place-items: center;

  color: var(--ndps-gold);

  font-family: var(--ndps-display);
  font-size: 28px;
}

.ndps-process-card h3 {

  margin: 0 0 9px;

  color: var(--ndps-green-deep);

  font-size: 22px;
  font-weight: 600;
}

.ndps-process-card p {

  margin: 0;

  color: #66736c;

  font-size: 10px;
  line-height: 1.6;
}


/* =============================================================
   CLOSING CTA
   ============================================================= */

.ndps-closing {

  position: relative;

  min-height: 570px;

  display: flex;
  align-items: center;

  overflow: hidden;

  color: #fff;

  background-image: var(--ndps-img-closing);
  background-size: cover;
  background-position: center 55%;
}

.ndps-closing-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(18,34,24,.87) 0%,
      rgba(18,34,24,.61) 48%,
      rgba(18,34,24,.24) 100%
    );
}

.ndps-closing-content {

  position: relative;

  z-index: 2;

  padding: 90px 0;
}

.ndps-closing h2 {

  max-width: 650px;

  margin: 0;

  color: #fffdf8 !important;
}

.ndps-closing h2 em {

  color: #e5b679 !important;
}

.ndps-closing-content > p:not(.ndps-eyebrow) {

  max-width: 610px;

  margin: 27px 0 0;

  color: rgba(255,255,255,.80);

  font-size: 16px;
  line-height: 1.82;
}

.ndps-closing-actions {

  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 32px;
}


/* =============================================================
   BACK TO TOP
   ============================================================= */

.ndps-back-to-top {

  position: fixed !important;

  z-index: 2147483000 !important;

  right: 28px !important;
  bottom: 28px !important;

  display: flex !important;

  width: 60px !important;
  height: 60px !important;

  padding: 0 !important;

  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;

  border: 1px solid rgba(255,255,255,.48) !important;
  border-radius: 50% !important;

  color: #fff !important;
  background: #a87033 !important;

  box-shadow: 0 13px 30px rgba(0,0,0,.22) !important;

  font-family: var(--ndps-body) !important;

  cursor: pointer !important;

  transition:
    background .2s ease,
    transform .2s ease;
}

.ndps-back-arrow {

  display: block;

  margin-top: -2px;

  font-size: 25px;
  line-height: .85;
}

.ndps-back-label {

  display: block;

  margin-top: 3px;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: .12em;
}

.ndps-back-to-top:hover {

  background: #33777a !important;
  transform: translateY(-3px);
}


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

@media (max-width: 980px) {

  .ndps-header {
    padding: 18px 22px 12px;
  }

  .ndps-brand {

    width: 150px !important;
    max-width: 150px !important;

    flex-basis: 150px !important;
  }

  .ndps-brand img {

    width: 150px !important;
    max-width: 150px !important;
    max-height: 108px !important;
  }

  .ndps-menu-toggle {
    display: block;
  }

  .ndps-nav {

    position: absolute;

    top: calc(100% + 4px);

    left: 20px;
    right: 20px;

    display: none;

    padding: 12px;

    align-items: stretch;
    flex-direction: column;

    gap: 3px;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;

    background: rgba(19,40,33,.98);

    box-shadow: 0 18px 45px rgba(0,0,0,.24);
  }

  .ndps-nav.is-open {
    display: flex;
  }

  .ndps-nav-link {

    width: 100%;

    padding: 13px 10px;

    text-align: left;
  }

  .ndps-current::before {
    display: none;
  }

  .ndps-nav-donate {
    margin-top: 8px;
  }

  .ndps-dropdown-menu {

    position: static;

    width: 100%;

    display: grid;

    margin: 2px 0 10px;

    padding: 6px;

    opacity: 1;
    visibility: visible;

    transform: none;

    border: 0;
    border-radius: 12px;

    box-shadow: none;

    background: rgba(255,255,255,.07);
  }

  .ndps-dropdown-menu::before {
    display: none;
  }

  .ndps-dropdown-menu a {
    color: #fff !important;
  }

  .ndps-chevron {
    display: none;
  }

  .ndps-path-map {

    min-height: 720px;

    margin-top: 30px;
  }

  .ndps-path-line {
    display: none;
  }

  .ndps-path-point {

    position: relative;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: min(560px, 100%);

    margin: 0 auto 42px;
  }

  .ndps-footprints,
  .ndps-leaf-sketch {
    display: none;
  }

  .ndps-likamba-layout {
    align-items: flex-start;

    padding-top: 75px;
    padding-bottom: 200px;
  }

  .ndps-likamba-story-card {
    width: min(500px, 70%);
  }

  .ndps-likamba-stats {

    left: 50%;
    right: auto;
    bottom: 45px;

    transform: translateX(-50%);
  }

  .ndps-focus-grid {
    grid-template-columns: 1fr;
  }

  .ndps-scrapbook-board {

    min-height: 750px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 30px;

    padding-top: 20px;
  }

  .ndps-scrapbook-trail {
    display: none;
  }

  .ndps-polaroid {

    position: relative;

    left: auto !important;
    right: auto !important;
    top: auto !important;

    width: min(280px, 100%);

    margin: 0 auto;
  }

  .ndps-polaroid-five {
    grid-column: 1 / -1;
  }

  .ndps-ripple-inner {

    grid-template-columns: 1fr;

    text-align: center;
  }

  .ndps-water-image {

    width: 100%;

    opacity: .58;
  }

  .ndps-water-layout {

    align-items: flex-start;

    padding-top: 65px;
    padding-bottom: 180px;
  }

  .ndps-water-story {
    width: min(500px, 72%);
  }

  .ndps-water-flow {

    left: 5%;
    right: 5%;
    bottom: 35px;
  }

  .ndps-process-layout {

    grid-template-columns: 1fr;
  }

  .ndps-process-grid {

    grid-template-columns: repeat(2, 1fr);
  }

}


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

@media (max-width: 620px) {

  .ndps-shell {
    width: min(100% - 30px, 1240px);
  }

  .ndifo-projects-story h1 {
    font-size: clamp(52px,15vw,72px) !important;
  }

  .ndifo-projects-story h2 {
    font-size: clamp(40px,11vw,54px) !important;
  }

  .ndps-header {
    padding: 15px;
  }

  .ndps-brand {

    width: 135px !important;
    max-width: 135px !important;

    flex-basis: 135px !important;
  }

  .ndps-brand img {

    width: 135px !important;
    max-width: 135px !important;
    max-height: 100px !important;
  }

  .ndps-hero {

    min-height: 660px;

    background-position: 60% center;
  }

  .ndps-hero-content {
    padding: 160px 0 145px;
  }

  .ndps-hero-wave {
    height: 115px;
  }

  .ndps-approach {
    padding: 75px 0;
  }

  .ndps-path-map {
    min-height: 780px;
  }

  .ndps-likamba {

    min-height: 900px;
  }

  .ndps-likamba-layout {

    min-height: 900px;

    padding-top: 55px;
    padding-bottom: 330px;
  }

  .ndps-likamba-story-card {

    width: 100%;

    padding: 30px 24px;
  }

  .ndps-likamba-stats {

    width: 100%;

    left: 0;
    bottom: 50px;

    padding: 0 15px;

    justify-content: center;

    transform: none;
  }

  .ndps-stat-card {

    width: 31%;
    min-height: 145px;

    padding: 15px 8px;
  }

  .ndps-stat-card strong {
    font-size: 34px;
  }

  .ndps-stat-card small {
    font-size: 8px;
  }

  .ndps-likamba-focus {

    margin-top: 0;

    padding: 30px 0 60px;
  }

  .ndps-focus-card {

    grid-template-columns: 48px 1fr;

    padding: 18px;
  }

  .ndps-focus-icon {

    width: 46px;
    height: 46px;
  }

  .ndps-scrapbook {

    padding: 45px 0 75px;
  }

  .ndps-scrapbook-heading {

    gap: 8px;
  }

  .ndps-hand-arrow {
    display: none;
  }

  .ndps-scrapbook-board {

    min-height: 0;

    grid-template-columns: 1fr;

    gap: 26px;

    margin-top: 32px;
  }

  .ndps-polaroid,
  .ndps-polaroid-five {

    grid-column: auto;

    width: min(300px, 90%);

    transform: none !important;
  }

  .ndps-polaroid:nth-child(odd) {
    transform: rotate(-2deg) !important;
  }

  .ndps-polaroid:nth-child(even) {
    transform: rotate(2deg) !important;
  }

  .ndps-project-drawer {

    padding: 30px 22px;
  }

  .ndps-ripple-transition {

    padding: 70px 0;
  }

  .ndps-ripple-art {

    transform: scale(.78);
    transform-origin: center;
  }

  .ndps-water {

    min-height: 920px;
  }

  .ndps-water-layout {

    min-height: 920px;

    padding-top: 50px;
    padding-bottom: 380px;
  }

  .ndps-water-story {

    width: 100%;

    padding: 30px 24px;
  }

  .ndps-water-flow {

    left: 15px;
    right: 15px;
    bottom: 35px;

    grid-template-columns: 1fr;

    gap: 8px;

    padding: 18px;
  }

  .ndps-water-flow > div {

    justify-content: center;
  }

  .ndps-flow-arrow {

    transform: rotate(90deg);

    text-align: center;
  }

  .ndps-process {

    padding: 80px 0;
  }

  .ndps-process-grid {

    grid-template-columns: 1fr;
  }

  .ndps-process-card {

    min-height: 0;

    padding: 25px 22px;
  }

  .ndps-closing {

    min-height: 620px;

    background-position: 65% center;
  }

  .ndps-closing-content {

    padding: 85px 0;
  }

  .ndps-closing-actions {

    align-items: stretch;
    flex-direction: column;
  }

  .ndps-button {
    width: 100%;
  }

  .ndps-back-to-top {

    right: 18px !important;
    bottom: 18px !important;

    width: 54px !important;
    height: 54px !important;
  }

}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {

  .ndifo-projects-story *,
  .ndifo-projects-story *::before,
  .ndifo-projects-story *::after {

    scroll-behavior: auto !important;

    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: .001ms !important;
  }

}/* End custom CSS */