/* =========================================================
   OCIA — OUR CAUSES & PROGRAMS
   Clean horizontal carousel
   ========================================================= */


#ocia-programs-showcase {

  --ocia-program-accent: #f4a01f;
  --ocia-program-ink: #171717;
  --ocia-program-muted: #687078;

  position: relative;

  width: 100%;

  padding:
    86px 0 82px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 72%,
      #fbf8f2 100%
    );
}


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

#ocia-programs-showcase
.ocia-programs-showcase__header {

  width:
    min(900px, calc(100% - 40px));

  margin:
    0 auto 44px;

  text-align:
    center;
}


#ocia-programs-showcase
.ocia-programs-showcase__eyebrow {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    14px;

  margin:
    0 0 13px;

  color:
    var(--ocia-program-accent);

  font-family:
    "Open Sans",
    sans-serif;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    .28em;

  text-transform:
    uppercase;
}


#ocia-programs-showcase
.ocia-programs-showcase__eyebrow::after {

  content: "";

  display:
    block;

  width:
    60px;

  height:
    2px;

  background:
    var(--ocia-program-accent);
}


#ocia-programs-showcase
.ocia-programs-showcase__title {

  margin:
    0 0 12px !important;

  padding:
    0 !important;

  color:
    var(--ocia-program-ink) !important;

  font-family:
    "Raleway",
    sans-serif !important;

  font-size:
    46px !important;

  font-weight:
    800 !important;

  line-height:
    1.12 !important;

  letter-spacing:
    -.025em !important;

  text-transform:
    none !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__title span {

  color:
    var(--ocia-program-accent);
}


#ocia-programs-showcase
.ocia-programs-showcase__lead {

  max-width:
    720px;

  margin:
    0 auto !important;

  color:
    var(--ocia-program-muted) !important;

  font-family:
    "Open Sans",
    sans-serif !important;

  font-size:
    15px !important;

  font-weight:
    400 !important;

  line-height:
    1.7 !important;
}


/* =========================================================
   CAROUSEL FRAME
   ========================================================= */

#ocia-programs-showcase
.ocia-programs-showcase__carousel {

  position:
    relative;

  width:
    100%;

  padding:
    0 72px;

  box-sizing:
    border-box;
}


#ocia-programs-showcase
.ocia-programs-showcase__viewport {

  position:
    relative;

  width:
    100% !important;

  max-width:
    none !important;

  overflow:
    hidden !important;
}


/* =========================================================
   HORIZONTAL TRACK
   ========================================================= */

#ocia-programs-showcase
.ocia-programs-showcase__track {

  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    nowrap !important;

  align-items:
    stretch !important;

  justify-content:
    flex-start !important;

  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    16px 4px 32px !important;

  gap:
    24px !important;

  overflow-x:
    auto !important;

  overflow-y:
    hidden !important;

  scroll-behavior:
    smooth;

  scroll-snap-type:
    x mandatory;

  -webkit-overflow-scrolling:
    touch;

  overscroll-behavior-x:
    contain;

  scrollbar-width:
    none;
}


#ocia-programs-showcase
.ocia-programs-showcase__track::-webkit-scrollbar {

  display:
    none;
}


/* =========================================================
   CARD — DESKTOP 5 ACROSS
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card {

  position:
    relative !important;

  display:
    block !important;

  flex:
    0 0 calc(20% - 19.2px) !important;

  width:
    calc(20% - 19.2px) !important;

  min-width:
    calc(20% - 19.2px) !important;

  max-width:
    calc(20% - 19.2px) !important;

  height:
    410px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    1px solid rgba(0,0,0,.06);

  border-radius:
    12px;

  overflow:
    hidden;

  background:
    #242424;

  box-sizing:
    border-box;

  scroll-snap-align:
    start;

  box-shadow:
    0 12px 30px rgba(0,0,0,.10);

  transform:
    translateY(0)
    scale(1);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}


#ocia-programs-showcase
.ocia-program-card:hover {

  z-index:
    5;

  border-color:
    var(--ocia-program-accent);

  transform:
    translateY(-8px)
    scale(1.025);

  box-shadow:
    0 22px 48px rgba(0,0,0,.18);
}


/* =========================================================
   CARD LINK
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__link {

  position:
    absolute !important;

  inset:
    0 !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  text-decoration:
    none !important;
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__media {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  overflow:
    hidden;

  background:
    #252525;
}


#ocia-programs-showcase
.ocia-program-card__media img {

  display:
    block;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    none !important;

  object-fit:
    cover !important;

  object-position:
    center center;

  transform:
    scale(1.001);

  transition:
    transform .55s
    cubic-bezier(.22,.61,.36,1);
}


#ocia-programs-showcase
.ocia-program-card:hover
.ocia-program-card__media img {

  transform:
    scale(1.09);
}


/* =========================================================
   FALLBACK FOR PROGRAM WITHOUT IMAGE
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__placeholder {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(244,160,31,.24),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #30463d,
      #101c17 58%,
      #080d0b
    );
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__shade {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.02) 15%,
      rgba(0,0,0,.12) 42%,
      rgba(0,0,0,.76) 76%,
      rgba(0,0,0,.94) 100%
    );

  pointer-events:
    none;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__content {

  position:
    absolute !important;

  z-index:
    2;

  left:
    0;

  right:
    0;

  bottom:
    0;

  width:
    100%;

  padding:
    26px 23px 22px !important;

  box-sizing:
    border-box;

  color:
    #ffffff !important;

  transform:
    translateY(54px);

  transition:
    transform .35s ease;
}


#ocia-programs-showcase
.ocia-program-card:hover
.ocia-program-card__content,
#ocia-programs-showcase
.ocia-program-card.is-active
.ocia-program-card__content {

  transform:
    translateY(0);
}


/* =========================================================
   ICON
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__icon {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    46px;

  height:
    46px;

  margin:
    0 0 13px;

  border:
    2px solid rgba(255,255,255,.88);

  border-radius:
    50%;

  background:
    var(--ocia-program-accent);

  color:
    #ffffff !important;

  font-size:
    17px;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__title {

  margin:
    0 0 9px !important;

  padding:
    0 !important;

  color:
    #ffffff !important;

  font-family:
    "Raleway",
    sans-serif !important;

  font-size:
    21px !important;

  font-weight:
    800 !important;

  line-height:
    1.18 !important;

  letter-spacing:
    -.01em !important;

  text-transform:
    none !important;

  text-shadow:
    0 2px 12px rgba(0,0,0,.25);
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__description {

  margin:
    0 0 14px !important;

  padding:
    0 !important;

  color:
    rgba(255,255,255,.84) !important;

  font-family:
    "Open Sans",
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1.55 !important;

  opacity:
    0;

  transform:
    translateY(10px);

  transition:
    opacity .3s ease,
    transform .3s ease;
}


#ocia-programs-showcase
.ocia-program-card:hover
.ocia-program-card__description,
#ocia-programs-showcase
.ocia-program-card.is-active
.ocia-program-card__description {

  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   LEARN MORE
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__more {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  color:
    #ffffff !important;

  font-family:
    "Open Sans",
    sans-serif !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


#ocia-programs-showcase
.ocia-program-card__more i {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  border:
    1px solid rgba(255,255,255,.78);

  border-radius:
    50%;

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}


#ocia-programs-showcase
.ocia-program-card:hover
.ocia-program-card__more i {

  border-color:
    var(--ocia-program-accent);

  background:
    var(--ocia-program-accent);

  transform:
    translateX(3px);
}


/* =========================================================
   ARROWS
   ========================================================= */

#ocia-programs-showcase
.ocia-programs-showcase__arrow {

  position:
    absolute;

  z-index:
    20;

  top:
    50%;

  width:
    48px;

  height:
    48px;

  margin-top:
    -24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    #ffffff;

  color:
    #292929;

  font-size:
    22px;

  cursor:
    pointer;

  box-shadow:
    0 7px 24px rgba(0,0,0,.13);

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}


#ocia-programs-showcase
.ocia-programs-showcase__arrow:hover {

  background:
    var(--ocia-program-accent);

  color:
    #ffffff;

  transform:
    scale(1.08);
}


#ocia-programs-showcase
.ocia-programs-showcase__arrow--prev {

  left:
    14px;
}


#ocia-programs-showcase
.ocia-programs-showcase__arrow--next {

  right:
    14px;
}


/* =========================================================
   VIEW ALL BUTTON
   ========================================================= */

#ocia-programs-showcase
.ocia-programs-showcase__footer {

  margin-top:
    22px;

  text-align:
    center;
}


#ocia-programs-showcase
.ocia-programs-showcase__all {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    16px;

  min-width:
    240px;

  min-height:
    54px;

  padding:
    13px 25px;

  border:
    1px solid
    var(--ocia-program-accent);

  background:
    #ffffff;

  color:
    #242424 !important;

  font-family:
    "Open Sans",
    sans-serif;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;

  text-decoration:
    none !important;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;
}


#ocia-programs-showcase
.ocia-programs-showcase__all:hover {

  background:
    var(--ocia-program-accent);

  color:
    #ffffff !important;

  transform:
    translateY(-2px);
}


/* =========================================================
   LAPTOP — 4 CARDS
   ========================================================= */

@media only screen and (max-width: 1399px) {

  #ocia-programs-showcase
  .ocia-program-card {

    flex-basis:
      calc(25% - 18px) !important;

    width:
      calc(25% - 18px) !important;

    min-width:
      calc(25% - 18px) !important;

    max-width:
      calc(25% - 18px) !important;
  }

}


/* =========================================================
   TABLET — 3 CARDS
   ========================================================= */

@media only screen and (max-width: 1099px) {

  #ocia-programs-showcase
  .ocia-program-card {

    flex-basis:
      calc(33.333333% - 16px) !important;

    width:
      calc(33.333333% - 16px) !important;

    min-width:
      calc(33.333333% - 16px) !important;

    max-width:
      calc(33.333333% - 16px) !important;
  }

}


/* =========================================================
   MOBILE — HORIZONTAL SWIPE
   ========================================================= */

@media only screen and (max-width: 767px) {

  #ocia-programs-showcase {

    padding:
      60px 0 58px;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__title {

    font-size:
      31px !important;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__carousel {

    padding:
      0 18px;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__track {

    gap:
      16px !important;

    padding:
      12px 3px 26px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card {

    flex:
      0 0 84% !important;

    flex-basis:
      84% !important;

    width:
      84% !important;

    min-width:
      84% !important;

    max-width:
      84% !important;

    height:
      390px !important;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__arrow {

    display:
      none !important;
  }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media only screen and (max-width: 479px) {

  #ocia-programs-showcase
  .ocia-programs-showcase__title {

    font-size:
      27px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card {

    flex-basis:
      88% !important;

    width:
      88% !important;

    min-width:
      88% !important;

    max-width:
      88% !important;

    height:
      370px !important;
  }

}


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

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

  #ocia-programs-showcase *,
  #ocia-programs-showcase
  .ocia-programs-showcase__track {

    scroll-behavior:
      auto !important;

    transition:
      none !important;
  }

}


/* =========================================================
   OCIA PROGRAMS — COMPACT HOME PROPORTIONS
   ========================================================= */


/* ---------------------------------------------------------
   SECTION SPACING
   --------------------------------------------------------- */

#ocia-programs-showcase {

  padding:
    48px 0 56px !important;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

#ocia-programs-showcase
.ocia-programs-showcase__header {

  margin-bottom:
    28px !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__eyebrow {

  margin-bottom:
    10px !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__title {

  margin-bottom:
    9px !important;
}


/* ---------------------------------------------------------
   CARDS
   Desktop
   --------------------------------------------------------- */

#ocia-programs-showcase
.ocia-program-card {

  height:
    360px !important;
}


/* Slightly tighter content */

#ocia-programs-showcase
.ocia-program-card__content {

  padding:
    21px 20px 19px !important;

  transform:
    translateY(46px);
}


#ocia-programs-showcase
.ocia-program-card__icon {

  width:
    42px;

  height:
    42px;

  margin-bottom:
    10px;

  font-size:
    15px;
}


#ocia-programs-showcase
.ocia-program-card__title {

  margin-bottom:
    7px !important;

  font-size:
    19px !important;
}


#ocia-programs-showcase
.ocia-program-card__description {

  margin-bottom:
    11px !important;

  font-size:
    12px !important;

  line-height:
    1.48 !important;
}


/* ---------------------------------------------------------
   VIEW ALL
   --------------------------------------------------------- */

#ocia-programs-showcase
.ocia-programs-showcase__footer {

  margin-top:
    12px !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__all {

  min-height:
    50px;

  padding:
    11px 23px;
}


/* =========================================================
   LAPTOP
   ========================================================= */

@media only screen and (max-width: 1399px) {

  #ocia-programs-showcase
  .ocia-program-card {

    height:
      350px !important;
  }

}


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

@media only screen and (max-width: 1099px) {

  #ocia-programs-showcase {

    padding:
      44px 0 52px !important;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__header {

    margin-bottom:
      25px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card {

    height:
      345px !important;
  }

}


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

@media only screen and (max-width: 767px) {

  #ocia-programs-showcase {

    padding:
      38px 0 46px !important;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__header {

    margin-bottom:
      22px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card {

    height:
      350px !important;
  }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media only screen and (max-width: 479px) {

  #ocia-programs-showcase
  .ocia-program-card {

    height:
      340px !important;
  }

}


/* =========================================================
   OCIA PROGRAMS — FINAL REFERENCE STYLE
   September 2026
   ========================================================= */


/* =========================================================
   1. SECTION / DECORATIVE BACKGROUND
   ========================================================= */

#ocia-programs-showcase {

  position:
    relative;

  isolation:
    isolate;

  padding:
    40px 0 46px !important;

  overflow:
    hidden;

  background:
    radial-gradient(
      ellipse at 8% 96%,
      rgba(244,160,31,.075) 0,
      rgba(244,160,31,.035) 22%,
      transparent 48%
    ),
    radial-gradient(
      ellipse at 88% 88%,
      rgba(244,160,31,.06) 0,
      rgba(244,160,31,.025) 24%,
      transparent 50%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffefa 100%
    ) !important;
}


#ocia-programs-showcase::before {

  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  left:
    -150px;

  bottom:
    -185px;

  width:
    620px;

  height:
    330px;

  border:
    32px solid rgba(244,160,31,.045);

  border-radius:
    54% 46% 63% 37% /
    58% 43% 57% 42%;

  transform:
    rotate(-9deg);

  pointer-events:
    none;
}


#ocia-programs-showcase::after {

  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  right:
    -90px;

  top:
    15px;

  width:
    350px;

  height:
    430px;

  opacity:
    .72;

  background:
    radial-gradient(
      ellipse at 70% 15%,
      rgba(244,160,31,.10) 0 8%,
      transparent 9%
    ),
    radial-gradient(
      ellipse at 45% 34%,
      rgba(244,160,31,.075) 0 10%,
      transparent 11%
    ),
    radial-gradient(
      ellipse at 79% 53%,
      rgba(244,160,31,.055) 0 12%,
      transparent 13%
    );

  transform:
    rotate(10deg);

  pointer-events:
    none;
}


/* =========================================================
   2. HEADER
   ========================================================= */

#ocia-programs-showcase
.ocia-programs-showcase__header {

  width:
    min(880px, calc(100% - 40px));

  margin:
    0 auto 22px !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__eyebrow {

  margin:
    0 0 8px !important;

  font-size:
    11px !important;

  letter-spacing:
    .34em !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__eyebrow::after {

  width:
    58px;

  height:
    2px;
}


#ocia-programs-showcase
.ocia-programs-showcase__title {

  margin:
    0 0 8px !important;

  font-size:
    41px !important;

  line-height:
    1.08 !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__lead {

  max-width:
    760px;

  font-size:
    14px !important;

  line-height:
    1.55 !important;
}


/* =========================================================
   3. CAROUSEL
   ========================================================= */

#ocia-programs-showcase
.ocia-programs-showcase__carousel {

  padding:
    0 66px !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__track {

  gap:
    22px !important;

  padding:
    9px 4px 21px !important;
}


/* =========================================================
   4. SHORTER PROGRAM CARDS
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card {

  height:
    340px !important;

  border:
    1px solid rgba(20,20,20,.12) !important;

  border-radius:
    10px !important;

  box-shadow:
    0 9px 24px rgba(0,0,0,.08) !important;

  transform:
    translateY(0)
    scale(1) !important;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease !important;
}


#ocia-programs-showcase
.ocia-program-card:hover {

  z-index:
    5;

  transform:
    translateY(-4px)
    scale(1.012) !important;

  border-color:
    rgba(244,160,31,.75) !important;

  box-shadow:
    0 17px 34px rgba(0,0,0,.13) !important;
}


/* =========================================================
   5. ACTIVE CENTER CARD
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card.is-active {

  z-index:
    6;

  border:
    2px solid #f4a01f !important;

  transform:
    translateY(-3px)
    scale(1.012) !important;

  box-shadow:
    0 17px 38px rgba(244,160,31,.16) !important;
}


/* =========================================================
   6. IMAGE TREATMENT
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__media img {

  filter:
    saturate(.98)
    contrast(.98)
    brightness(1.03);

  transform:
    scale(1.002);
}


#ocia-programs-showcase
.ocia-program-card:hover
.ocia-program-card__media img,
#ocia-programs-showcase
.ocia-program-card.is-active
.ocia-program-card__media img {

  transform:
    scale(1.055);
}


/* Lighter than previous black overlay */

#ocia-programs-showcase
.ocia-program-card__shade {

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.01) 8%,
      rgba(0,0,0,.06) 34%,
      rgba(0,0,0,.42) 61%,
      rgba(0,0,0,.82) 82%,
      rgba(0,0,0,.94) 100%
    ) !important;
}


/* =========================================================
   7. CONTENT — ALWAYS VISIBLE
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__content {

  display:
    flex !important;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    flex-end;

  min-height:
    62%;

  padding:
    20px 19px 18px !important;

  transform:
    none !important;

  transition:
    none !important;
}


#ocia-programs-showcase
.ocia-program-card:hover
.ocia-program-card__content,
#ocia-programs-showcase
.ocia-program-card.is-active
.ocia-program-card__content {

  transform:
    none !important;
}


/* =========================================================
   8. ICONS
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card {

  --ocia-card-icon:
    #f4a01f;
}


#ocia-programs-showcase
.ocia-program-card__icon {

  width:
    45px !important;

  height:
    45px !important;

  flex:
    0 0 45px;

  margin:
    0 0 10px !important;

  border:
    2px solid rgba(255,255,255,.88) !important;

  background:
    var(--ocia-card-icon) !important;

  color:
    #ffffff !important;

  font-size:
    16px !important;

  box-shadow:
    0 6px 18px rgba(0,0,0,.14);
}


/* ---------------------------------------------------------
   Program-specific icon colors
   --------------------------------------------------------- */

#ocia-programs-showcase
.ocia-program-card[data-program-slug="education-back-to-school"] {

  --ocia-card-icon:
    #2d9bf0;
}


#ocia-programs-showcase
.ocia-program-card[data-program-slug="health-support"] {

  --ocia-card-icon:
    #19b96b;
}


#ocia-programs-showcase
.ocia-program-card[data-program-slug="child-sponsorship"] {

  --ocia-card-icon:
    #f4a01f;
}


#ocia-programs-showcase
.ocia-program-card[data-program-slug="community-outreach"] {

  --ocia-card-icon:
    #7557df;
}


#ocia-programs-showcase
.ocia-program-card[data-program-slug="r4w-women-empowerment"] {

  --ocia-card-icon:
    #dc6279;
}


#ocia-programs-showcase
.ocia-program-card[data-program-slug="save-another-life"] {

  --ocia-card-icon:
    #e35454;
}


/* Fallback cards also receive varied colors */

#ocia-programs-showcase
.ocia-programs-showcase__track
> .ocia-program-card:nth-child(1) {

  --ocia-card-icon:
    #2d9bf0;
}


#ocia-programs-showcase
.ocia-programs-showcase__track
> .ocia-program-card:nth-child(2) {

  --ocia-card-icon:
    #19b96b;
}


#ocia-programs-showcase
.ocia-programs-showcase__track
> .ocia-program-card:nth-child(3) {

  --ocia-card-icon:
    #f4a01f;
}


#ocia-programs-showcase
.ocia-programs-showcase__track
> .ocia-program-card:nth-child(4) {

  --ocia-card-icon:
    #7557df;
}


#ocia-programs-showcase
.ocia-programs-showcase__track
> .ocia-program-card:nth-child(5) {

  --ocia-card-icon:
    #dc6279;
}


#ocia-programs-showcase
.ocia-programs-showcase__track
> .ocia-program-card:nth-child(6) {

  --ocia-card-icon:
    #e35454;
}


/* =========================================================
   9. TITLES
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__title {

  margin:
    0 0 7px !important;

  color:
    #ffffff !important;

  font-size:
    18px !important;

  font-weight:
    800 !important;

  line-height:
    1.16 !important;
}


/* =========================================================
   10. DESCRIPTION — ALWAYS VISIBLE
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__description {

  display:
    -webkit-box !important;

  margin:
    0 0 11px !important;

  padding:
    0 !important;

  color:
    rgba(255,255,255,.84) !important;

  font-size:
    12px !important;

  line-height:
    1.48 !important;

  opacity:
    1 !important;

  transform:
    none !important;

  overflow:
    hidden;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    3;
}


#ocia-programs-showcase
.ocia-program-card:hover
.ocia-program-card__description,
#ocia-programs-showcase
.ocia-program-card.is-active
.ocia-program-card__description {

  opacity:
    1 !important;

  transform:
    none !important;
}


/* =========================================================
   11. LEARN MORE
   ========================================================= */

#ocia-programs-showcase
.ocia-program-card__more {

  margin-top:
    1px;

  gap:
    9px;

  color:
    #ffffff !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  letter-spacing:
    .08em;
}


#ocia-programs-showcase
.ocia-program-card__more i {

  width:
    29px;

  height:
    29px;

  border:
    1px solid rgba(255,255,255,.82);

  background:
    rgba(0,0,0,.12);

  color:
    #ffffff;

  font-size:
    13px;
}


/* Active card gets filled orange arrow */

#ocia-programs-showcase
.ocia-program-card.is-active
.ocia-program-card__more i {

  width:
    34px;

  height:
    34px;

  border-color:
    #f4a01f !important;

  background:
    #f4a01f !important;

  color:
    #ffffff !important;

  box-shadow:
    0 5px 14px rgba(244,160,31,.28);
}


/* Hover behaves like active */

#ocia-programs-showcase
.ocia-program-card:hover
.ocia-program-card__more i {

  border-color:
    #f4a01f !important;

  background:
    #f4a01f !important;

  color:
    #ffffff !important;

  transform:
    translateX(2px);
}


/* =========================================================
   12. SOFTER SIDE ARROWS
   ========================================================= */

#ocia-programs-showcase
.ocia-programs-showcase__arrow {

  width:
    46px;

  height:
    46px;

  margin-top:
    -23px;

  border:
    1px solid rgba(0,0,0,.035);

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

  color:
    #51565a;

  font-size:
    19px;

  box-shadow:
    0 5px 18px rgba(0,0,0,.07);
}


#ocia-programs-showcase
.ocia-programs-showcase__arrow:hover {

  background:
    #f4a01f;

  color:
    #ffffff;

  box-shadow:
    0 7px 20px rgba(244,160,31,.19);

  transform:
    scale(1.05);
}


#ocia-programs-showcase
.ocia-programs-showcase__arrow--prev {

  left:
    13px;
}


#ocia-programs-showcase
.ocia-programs-showcase__arrow--next {

  right:
    13px;
}


/* =========================================================
   13. VIEW ALL PROGRAMS
   ========================================================= */

#ocia-programs-showcase
.ocia-programs-showcase__footer {

  margin-top:
    7px !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__all {

  min-width:
    225px;

  min-height:
    47px;

  padding:
    9px 22px;

  gap:
    20px;

  border:
    1px solid #f4a01f;

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

  font-size:
    10px;

  letter-spacing:
    .13em;
}


/* =========================================================
   14. LAPTOP
   ========================================================= */

@media only screen and (max-width: 1399px) {

  #ocia-programs-showcase
  .ocia-program-card {

    height:
      335px !important;
  }

}


/* =========================================================
   15. TABLET
   ========================================================= */

@media only screen and (max-width: 1099px) {

  #ocia-programs-showcase {

    padding:
      38px 0 44px !important;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__title {

    font-size:
      36px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card {

    height:
      330px !important;
  }

}


/* =========================================================
   16. MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

  #ocia-programs-showcase {

    padding:
      34px 0 40px !important;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__header {

    margin-bottom:
      18px !important;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__title {

    font-size:
      29px !important;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__lead {

    font-size:
      13px !important;
  }


  #ocia-programs-showcase
  .ocia-programs-showcase__carousel {

    padding:
      0 18px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card {

    height:
      330px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card__content {

    min-height:
      64%;

    padding:
      18px 17px 17px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card__title {

    font-size:
      18px !important;
  }

}


/* =========================================================
   17. SMALL PHONE
   ========================================================= */

@media only screen and (max-width: 479px) {

  #ocia-programs-showcase
  .ocia-programs-showcase__title {

    font-size:
      26px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card {

    height:
      320px !important;
  }


  #ocia-programs-showcase
  .ocia-program-card__icon {

    width:
      41px !important;

    height:
      41px !important;

    flex-basis:
      41px;

    font-size:
      14px !important;
  }

}


/* =========================================================
   OCIA PROGRAMS — TIGHT INTRO TRANSITION
   ========================================================= */

#ocia-programs-showcase {

  margin-top:
    0 !important;

  padding-top:
    22px !important;
}


/* Remove accidental top space inside first child */

#ocia-programs-showcase
> .container-fluid {

  margin-top:
    0 !important;

  padding-top:
    0 !important;
}


#ocia-programs-showcase
.ocia-programs-showcase__header {

  margin-top:
    0 !important;
}


/* Tablet */

@media only screen and (max-width: 1099px) {

  #ocia-programs-showcase {

    padding-top:
      20px !important;
  }

}


/* Mobile */

@media only screen and (max-width: 767px) {

  #ocia-programs-showcase {

    padding-top:
      18px !important;
  }

}