/* ============ Natural Discipleship — shared styles ============ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&display=swap');



:root {
  --navy: #0B2E58;
  --navy-2: #071a30;
  --navy-deep: #04162b;
  --navy-card: #0f2c4c;
  --navy-line: #22406b;
  --gold: #C69135;
  --gold-2: #bd831b;
  --gold-deep: #a97516;
  --cream: #f6f4ee;
  --cream-2: #f8f5ef;
  --paper: #ffffff;
  --ink: #0a2038;
  --muted: #6a7382;
  --muted-2: #8a929c;
  --line: #e6e1d5;
  --maroon: #7a1f28;
  --maroon-2: #5f1720;
  --green: #123a33;
  --shadow: 0 10px 30px rgba(4, 22, 43, .09);
  --shadow-lg: 0 24px 60px rgba(4, 22, 43, .18);
  --radius: 10px;
  --container: 1180px;
  --serif: 'Raleway', system-ui, sans-serif;
  --sans: 'Raleway', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

html {
  overflow-x: hidden
}

body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  color: var(--ink);
  overflow-x: hidden;
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  display: block
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Cormorant Garamond';
  margin: 0;
  line-height: 1.15;
  color: var(--navy);
  font-weight: 600;
  letter-spacing: .02em;
}

.hero h1,
.subhero h1,
.thero h1,
.shero h1,
.mhero h1 {
  color: #fff
}

p {
  margin: 0
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px
}

.eyebrow {
    /* font-family: var(--sans); */
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-size: 14px;
    color: var(--gold);
    margin-bottom: 16px;
}



.eyebrow.center {
  text-align: center
}

.gold {
  color: var(--gold)
}

.section {
  padding: 84px 0
}

.section-sm {
  padding: 60px 0
}

.center {
  text-align: center
}

.lead {
  color: var(--muted);
  font-size: 16.5px;
  max-width: 720px;
  margin: 0 auto
}

.h-sec {
    font-size: 40px;
    font-weight: 600;
}

.mt8 {
  margin-top: 8px
}

.mt16 {
  margin-top: 16px
}

.mt24 {
  margin-top: 24px
}

.mt40 {
  margin-top: 40px
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    padding: 10px 26px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: .22s ease;
    text-transform: none;
}

.btn-gold {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold)
}

.btn-gold:hover {
  background: var(--gold-2);
  transform: translateY(-2px)
}

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55)
}

.btn-outline-light:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff
}

.btn-navy {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy)
}

.btn-navy:hover {
  background: var(--navy-deep);
  transform: translateY(-2px)
}

.btn-outline-navy {
  background: #fff;
  color: var(--navy);
  border-color: var(--navy)
}

.btn-outline-navy:hover {
  background: var(--navy);
  color: #fff
}

.btn .arw {
  transition: transform .22s
}

.btn:hover .arw {
  transform: translateX(4px)
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #f4f3ee;
  border-bottom: 1px solid #e6e0d3
}

.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none
}

.logo img {
  height: auto;
  width: 190px;
  display: block;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px
}

.main-nav a {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #33404f;
  padding: 6px 0;
  position: relative;
  transition: .2s
}

.main-nav a:hover {
  color: var(--navy)
}

.main-nav a.active {
  color: var(--navy)
}

.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--gold)
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 18px
}

.header-cta .give {
  background: var(--gold);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 11px 24px;
  border-radius: 6px;
  transition: .2s
}

.header-cta .give:hover {
  background: var(--gold-2)
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
  transition: .2s
}

/* ---------- footer ---------- */
.site-footer {
  background: #f0ece6;
  color: var(--muted);
  padding: 52px 0 22px;
  font-size: 14px;
  border-top: 1px solid #e2dccf
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr auto;
  gap: 34px;
  align-items: start
}

.footer-brand .flogo {
  width: 210px;
  max-width: 100%;
  height: auto;
  display: block
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  transition: .18s
}

.footer-social a:hover {
  background: var(--gold)
}

.footer-social svg {
  width: 15px;
  height: 15px;
  fill: currentColor
}

.footer-col h5 {
    font-family: var(--sans);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    font-size: 15px;
    color: var(--navy);
    margin-bottom: 15px;
}

.footer-col a, .footer-col p {
    display: block;
    color: #0b2e58;
    padding: 4px 0 0;
    transition: .18s;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
}

.footer-col a:hover {
  color: var(--gold)
}

.footer-col .signup {
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .04em;
  padding-top: 10px
}

.footer-nations {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 150px
}

.footer-nations svg {
    width: 76px;
    height: 76px;
    stroke: var(--navy);
    fill: none;
    stroke-width: 3;
}

.footer-nations span {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.25
}

.footer-bottom {
  border-top: 1px solid #ece7db;
  margin-top: 38px;
  padding-top: 20px;
  text-align: center;
  color: #8a93a1;
  font-size: 13px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap
}

.footer-bottom a {
  color: #8a93a1;
  transition: .18s
}

.footer-bottom a:hover {
  color: var(--gold)
}

/* ---------- generic cards / chips ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #c69135;
    border-radius: 6px;
    padding: 9px 4px;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy);
}

.chip.dark {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: #fff
}

.flow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center
}

.flow .sep {
  color: var(--gold);
  font-weight: 700
}

.badge {
  display: inline-block;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-2);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 4px 9px
}

/* verse / small meta */
.verse {
  color: var(--gold-2);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em
}

.meta {
  color: var(--muted-2);
  font-size: 12.5px
}

.readlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--navy);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-top: 2px solid var(--gold);
  padding-top: 10px;
  margin-top: 14px;
  transition: .2s
}

.readlink:hover {
  gap: 11px;
  color: var(--gold-2)
}

/* placeholder photo blocks (reference uses silhouettes) */
.ph {
  position: relative;
  background: linear-gradient(135deg, #b9a98f, #8f8f8f);
  overflow: hidden
}

.ph.navy {
  background: linear-gradient(135deg, #274063, #3b5170)
}

.ph svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46%;
  opacity: .5;
  fill: #fff
}

.ph.play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: rgba(12, 36, 68, .35)
}

.ph.play::before {
  content: "";
  position: absolute;
  left: calc(50% + 3px);
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 12px solid var(--gold);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  z-index: 2
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.05s cubic-bezier(.22, .61, .36, 1), transform 1.05s cubic-bezier(.22, .61, .36, 1);
  /* will-change: opacity, transform */
}

.reveal.r-up {
  transform: translateY(34px)
}

.reveal.r-down {
  transform: translateY(-34px)
}

.reveal.r-left {
  transform: translateX(-48px)
}

.reveal.r-right {
  transform: translateX(48px)
}

.reveal.r-scale {
  transform: scale(.9)
}

.reveal.r-blur {
  filter: blur(8px)
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none
}

.reveal.d1 {
  transition-delay: .1s
}

.reveal.d2 {
  transition-delay: .2s
}

.reveal.d3 {
  transition-delay: .3s
}

.reveal.d4 {
  transition-delay: .4s
}

.reveal.d5 {
  transition-delay: .5s
}

.reveal.d6 {
  transition-delay: .6s
}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    transition: opacity .5s ease
  }

  .reveal.r-up,
  .reveal.r-down,
  .reveal.r-left,
  .reveal.r-right,
  .reveal.r-scale {
    transform: none
  }
}

/* ---------- responsive ---------- */
@media(max-width:980px) {

  .main-nav,
  .header-cta {
    display: none
  }

  .nav-toggle {
    display: block
  }

  .site-header.open .main-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fbfaf7;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 18px;
    border-bottom: 1px solid #efeade;
    box-shadow: var(--shadow)
  }

  .site-header.open .main-nav a {
    padding: 12px 0;
    border-bottom: 1px solid #efeade;
    width: 100%
  }

  .site-header.open .header-cta {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 150px
  }

  .site-header {
    position: relative
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px
  }

  .footer-brand,
  .footer-nations {
    grid-column: 1/-1
  }

  .footer-nations {
    align-items: flex-start;
    text-align: left
  }

  .h-sec {
    font-size: 25px
  }

  .section {
    padding: 60px 0
  }
}

@media(max-width:560px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .h-sec {
    font-size: 22px
  }
}

.site-footer2 .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr .9fr auto auto;
    gap: 34px;
    align-items: start;
}

.site-footer2 {
    background: #0b2e58;
}

.footer-social p {
    color: #fff;
}

.site-footer2 .footer-col h5 {
    font-weight: 600;
    color: #c69135;
}


.site-footer2 .footer-col a {
    display: block;
    color: #ffffff;
}

.site-footer2 .footer-bottom {
    color: #ffffff;
    font-size: 15px;
}

.site-footer2 .footer-bottom a {
    color: #ffffff;
    transition: .18s;
}

.site-footer2 .footer-brand h1 {
    color: #fff;
    font-size: 22px;
    font-weight: 400;
}

.site-footer2 .footer-brand h1 span {
    color: #c69135;
}

.site-footer2 .reveal.d1 {
    color: #0b2e58;
}

.lead-col h5 {
    color: #fff;
    font-size: 25px;
    margin: 20px 0 0;
}


.tcard {
    padding: 0 !important;
}

.traimg img {
    border-radius: 8px 8px 0 0;
}

.tcard .tno {
    margin-bottom: 0px !important;
}

.training-text {
    padding: 25px 15px 10px;
    position: relative;
}

.round-num {
    width: 32px;
    height: 32px;
    background: #c69135;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translate(-50%, 0px);
}


.round-num p
{
  margin-bottom: 0;
  color: #fff !important;
}

.orederimgblock {
    padding: 0px 0 260px;
}

.dna-list ul li {
    display: inline-block;
    padding: 0 10px;
    font-size: 15px;
}

.dna-list ul {
    text-align: center;
    position: relative;
    background-color: transparent;
    margin: 60px 0 0;
}

.dna-list ul:after {
    position: absolute;
    content: '';
    width: 40px;
    height: 1px;
    background: #c69135;
    left: 24%;
    top: 50%;
}

.dna-list ul:before {
    position: absolute;
    content: '';
    width: 40px;
    height: 1px;
    background: #c69135;
    right: 21%;
    top: 50%;
}

.writtnebox {
    text-align: left;
    width: 50%;
}

.goldband4.writtneblock p {
    max-width: 100%;
    color: #0b2e58;
    margin: 5px 0 0;
}

.writtnebox h2 {
    font-size: 40px !important;
}

.writtnebox h2 span {
    color: #c69135;
}

.writtnebox {
    text-align: center;
}

.writtnebox-list ul {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
}

.writtnebox-list ul li {
    list-style: none;
    border-right: 1px solid #c69135;
}

.writtnebox-list ul li:last-child {
    border-right: none;
}
.writtenicontext p {
    margin: 5px 0 0;
}

.writtenicon {
    width: 50px;
    height: 50px;
    background: #0b2e58;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
}
.writtenicon i {
  color: #fff;
}

.writtnebox-list ul li:nth-child(2) .writtenicon {
    background: #c69135;
}

.writtennbottom h4 {
    font-size: 23px;
    margin-bottom: 20px;
}

.writtennbottom {
    margin: 50px 0 0;
}


.dnatext {
    padding: 20px 20px 0;
}
.dnaboximg {
    position: absolute;
    width: 100%;
    bottom: 0;
}
.blocks-section .block
{
  position: relative;
}
.blocks-section .block:after {
    position: absolute;
    content: '';
    background: #0000008f;
    width: 100%;
    height: 100%;
    top: 0;
}

.giving-card button {
    cursor: pointer;
}















@media (max-width:1100px)
{
  .h-sec {
    font-size: 35px !important;
    font-weight: 600;
}
}

@media (max-width:1024px)
{
  .h-sec {
    font-size: 30px !important;
    font-weight: 600;
}
}


@media (max-width:991px)
{ 
  .appstores {
    justify-content: center !important;
    margin: 20px 0 !important;
}

.applist li::before {
  display: none;
}

.appright {
    margin: auto !important;
}

.trgrid h2 {
    font-size: 25px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
}

.gm h2 {
    font-size: 25px !important;
}

}

@media (max-width:980px)
{
  .site-header.open .header-cta {
    display: block !important;
    position: unset !important;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0 !important;
}

.main-nav a.active::after {
    bottom: -1px !important;
}
}

@media (max-width:767px)
{
  .hero h1 {
    font-size: 30px !important;
}

.move {
    padding: 40px 0 40px !important;
}

.app {
    margin: 56px 0 0 !important;
}
.gm h2 {
    font-size: 23px !important;
}

.stc .imgw {
    position: relative;
    height: auto!important;
}

.stc .imgw img {
    position: relative !important;
}

.footer-brand .flogo {
    width: 180px;
}

.tfrm .fa {
    padding: 10px !important;
}

.pathway-h {
    font-size: 25px !important;
}

.block {
    padding: 34px 20px !important;
}

.goldband2 h2 {
    font-size: 20px !important;
}

.site-footer2 .footer-grid {
    grid-template-columns: auto !important;
    gap: 25px !important;
}


.chero h1 {
    font-size: 35px !important;
}

.h-sec {
    font-size: 30px !important;
    font-weight: 600;
}

.book {
    width: 100% !important;
}
.deepc .cbook {
    max-width: 100% !important;
}

.goldband3 h2 {
    font-size: 24px !important;
}

}

@media (max-width:640px)
{
  .hero h1 {
    font-size: 25px !important;
    line-height: 30px !important;
}

.btn {
    font-weight: 600;
    padding: 8px 15px !important;
}

.hero-cta {
    flex-wrap: nowrap !important;
}

.hf span {
    font-size: 11.5px !important;
}

.hf .ic svg {
    width: 40px !important;
    height: 40px !important;
}

.move h2 {
    font-size: 23px !important;
    font-weight: 600 !important;
    text-align: center;
    letter-spacing: .02em;
}

.move .subttl {
    font-weight: 500 !important;
    margin: 10px 0 0 !important;
}

.steps8 {
    grid-template-columns: repeat(1, 1fr) !important;
}

.st8 p {
    font-size: 15px !important;
    color: var(--muted);
    line-height: 1.4;
}

.st8 .v {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.m5 {
    grid-template-columns: repeat(1, 1fr) !important;
}

.m5 .c a {

    font-weight: 600 !important;
    font-size: 15.5px !important;
}

.trgrid h2 {
    font-size: 20px !important;
}
.move h2 {
    font-size: 22px !important;
}

.stc .loc {
    font-weight: 600 !important;
}

.thero h1 {
    font-size: 28px;
    line-height: 35px !important;
}

.tfrm .fa {
    padding: 15px !important;
    border-radius: 5px !important;
}

.acct {
    padding: 34px 20px !important;
}

.pathway-h {
    font-size: 22px !important;
}

.block {
    padding-top: 0 !important;
}

.section {
    padding: 30px 0 30px !important;
}

.chero h1 {
    font-size: 30px !important;
}

.h-sec {
    font-size: 26px !important;
}


.donation-box {
    padding: 20px !important;
}

.giving-section {
    padding: 25px 0 50px !important;
}


}

@media (max-width:480px)
{
  .chero h1 {
    font-size: 25px !important;
}

.h-sec {
    font-size: 21px !important;
}

.curc h3 {
    font-size: 20px !important;
}

.curc .btns a {
    padding: 10px 10px !important;
    display: block !important;
    margin: 10px 0 0 !important;
}

.curc .btns {
    display: block !important;
}

.appsec .navybox {
    padding: 0 !important;
}

.cultc .top {
    display: block !important;
}

.cultur3 {
    margin: 20px 0 0;
}

.goldband3 h2 {
    font-size: 21px !important;
}

.thero h1 {
    font-size: 25px !important;
}

.move h2 {
    font-size: 20px !important;
}

.fpo .cell .ic svg {
    width: 40px !important;
    height: 40px !important;
}

.startrow .big .sic svg {
    width: 40px !important;
    height: 42px !important;
}

.startrow .big {
    line-height: 20px !important;
}

.startrow {
    gap: 15px !important;
}

.startrow .acts .bic svg {
    width: 40px !important;
    height: 40px !important;
}

.multiply h3 {
    font-size: 20px !important;
}

.m5 .c p {
    height: auto !important;
}

.m5 .c .ic svg {
    width: 50px !important;
    height: 50px !important;
}

.m5 .c h4 br {
    display: none !important;
}

.app h2 {
    font-size: 22px !important;
    margin-bottom: 10px !important;
}

.applist li {
    padding: 6px 0 6px 0px !important;
}

.trgrid h2 {
    font-size: 18px !important;
    line-height: 27px !important;
}

.pobh {
    height: auto !important;
}

.footer-grid {
    grid-template-columns: 1fr !important;
}

.pobh img {
    width: 170px !important;
    object-fit: cover;
    padding-top: 10px !important;
}
.pathway-h {
    font-size: 20px !important;
}

.block {
    padding-top: 20px !important;
}

.applist2 {
    grid-template-columns: 1fr !important;
}

.shero h1 {
    font-size: 21px !important;
}

.bannertextsto {
    background: #0b2e5859 !important;
    padding: 10px !important;

}

.bannertextsto {
    top: 30px !important;
    bottom: auto !important;
}

.linktext p {
    margin-left: 10px;
}

.gen .lt h2 {
    font-size: 23px !important;
}

.numbersbox h2 {
    font-size: 20px m !important;
}

.vision .g {
    font-size: 17px !important;
    line-height: 25px !important;
}
.visionbox {
    padding: 15px 20px !important;
}
.partner {
    padding: 30px 0 !important;
}

.partc {
    padding: 10px 22px 20px !important;
}

.partc .ic {
    margin-bottom: 0 !important;
}

.partc h4 {
    font-size: 19px !important;
}
.lefttexts h1 br {
    display: none;
}
.subhero h1 {
    font-size: 22px !important;
    line-height: 30px !important;
}
.goldband {
    padding: 30px 0 !important;
}
.goldband .three {
    font-size: 16px !important;
    line-height: 23px !important;
}
.dna {
    margin-top: 20px !important;
}
.italine {
    font-size: 18px !important;
    max-width: 100% !important;
    line-height: 25px !important;
}
.disc-p {
    width: 100% !important;
    max-width: 100% !important;
}
.goldband5 {
    padding: 30px 0 !important;
}
.mhero {
    padding: 30px 0 !important;
}

.thero h1 {
    font-size: 22px !important;
    line-height: 28px !important;
}

.thero {
    padding: 30px 0 0 !important;
}
.block h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
}
.block.block-navy h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
}
.block .lead-col .num {
    font-size: 30px !important;
    margin-bottom: 10px !important;
}
.chero {
    padding: 30px 0 !important;
}
.chero h1 {
    font-size: 22px !important;
    line-height: 28px !important;
}
.mhero .card {
    padding: 15px !important;
}
}


.subhero::after {
  display: none !important;
}

.subhero h1 {
    font-size: 40px !important;
}

.frm .faaa {
    background: var(--gold);
    color: #fff;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12.5px;
    width: 100%;
}

.intro-grid.ministryboxs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 30px 0 70px;
}

.ministry-summary {
    text-align: center;
    background: #ffffff;
    border-radius: 10px;
}

.summary-logo img {
    width: 190px;
}

.summary-logo {
    height: 130px;
}

.summary-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 23px;
    letter-spacing: 2px;
}

.ministry-summary p {
    font-size: 14px;
    line-height: 1.5;
    color: #0b2e58;
}

.intro-text, .ministry-summary {
    padding: 30px;
}

.ministry-summary h3 {
    margin: 20px 0;
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 17px;
    color: #c98a18;
    line-height: 23px;
}







    :root{
      --navy:#06264A;
      --gold:#C98A18;
      --text:#13233c;
      --line:#ece8df;
    }

    *{box-sizing:border-box}

    html{scroll-behavior:smooth}

    body
    {
      margin:0;
      font-family:"DM Sans",sans-serif;
      color:var(--text);
      background:#fff;
    }

    .container
    {
      width:min(1180px,calc(100% - 48px));
      margin-inline:auto;
    }

    .ministry-card .card-body p 
    {
      margin-bottom: 10px !important;
      height: 150px;
    }

    .stories-hero 
    {
        position: relative;
        min-height: 100%;
        overflow: unset;
        border-top: none;
        /* background: #faf9f6; */
        /* isolation: isolate; */
        background-image: url(../assets/more-stories-banner.webp);
        background-position: center;
        background-size: cover;
        padding: 100px 0;
    }
    .stories-hero::before
    {
      content:"";
      position:absolute;
      inset:0 0 0 41%;
      background:
        linear-gradient(90deg,#faf9f6 0%,rgba(250,249,246,.95) 7%,rgba(250,249,246,.28) 32%,rgba(250,249,246,0) 58%),
        url("assets/story-banner.jpg") center right/cover no-repeat;
      z-index:-2;
    }

    .stories-hero::after
    {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 50%,rgba(255,255,255,.10));
      z-index:-1;
      pointer-events:none;
    }

    .hero-content
    {
      width:390px;
      padding:38px 0 34px;
    }

    .eyebrow
    {
      margin:0 0 17px;
      font-size:13px;
      line-height:1;
      font-weight:700;
      letter-spacing:.06em;
      text-transform:uppercase;
      color:#cc7900;
    }

    .mini-line
    {
      display:block;
      width:34px;
      height:4px;
      border-radius:8px;
      margin-bottom:14px;
      background:#d28a09;
    }

    .stories-hero h1
    {
      margin:0;
      font-family:"Playfair Display",serif;
      font-size:52px;
      line-height:1.03;
      letter-spacing:-.025em;
      color:#112a49;
      font-weight:600;
    }

    .stories-hero h1 span
    {
      display:block;
      color:#c98209;
    }

    .hero-copy
    {
      max-width:335px;
      margin:22px 0 0;
      font-size:14px;
      line-height:1.7;
      font-weight:500;
      color:#173157;
    }

    .stories-filter 
    {
        border-top: 1px solid #eeece7;
        border-bottom: none;
        background: #fff;
    }

    .tab-row
    {
      min-height:74px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:0;
      overflow-x:auto;
      scrollbar-width:none;
    }

    .tab-row::-webkit-scrollbar
    {
      display:none
    }

   .tab-btn {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #0d2648;
    font: 500 14px/1 "DM Sans",sans-serif;
    text-transform: uppercase;
    padding: 14px 24px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: .2s ease;
}

    .tab-btn + .tab-btn::before
    {
      content:"";
      position:absolute;
      left:0;
      top:50%;
      width:1px;
      height:20px;
      background:#dedbd4;
      transform:translateY(-50%);
    }

    .tab-btn.active
    {
      color:#fff;
      background:var(--navy);
      border-radius:999px;
      margin-right:15px;
      padding-inline:26px;
    }

    .tab-btn.active + .tab-btn::before{display:none}

    .stories-section{
      background:#fff;
      padding:2px 0 18px;
    }

    .stories-grid{
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:12px;
    }

    .story-card{
      grid-column:span 3;
      position:relative;
      min-height:390px;
      border:1px solid var(--line);
      border-radius:10px;
      background:linear-gradient(145deg,#fffefb,#fff);
      padding:22px 16px 20px;
      box-shadow:0 1px 5px rgba(38,43,53,.025);
      transition:transform .2s ease, box-shadow .2s ease;
      display: block;
    }

    .story-card:hover{
      transform:translateY(-3px);
      box-shadow:0 10px 24px rgba(17,39,70,.08);
    }

    .story-card.large{
      grid-column:span 4;
      min-height:408px;
    }

    .story-card.wide{
      grid-column:1/-1;
      min-height:auto;
      padding:22px 28px;
    }

    .story-card.is-hidden{display:none}

    .quote-mark{
      font-family:Georgia,serif;
      font-size:48px;
      line-height:.78;
      font-weight:700;
      color:#d48b0a;
      margin:2px 0 10px;
    }

    .story-icon{
      position:absolute;
      right:16px;
      top:16px;
      width:44px;
      height:44px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--navy);
      color:#fff;
      font-size:20px;
      box-shadow:0 7px 18px rgba(8,43,83,.13);
    }

  .story-card h3 {
    margin: 0 52px 4px 0;
    color: #0b2a4e;
    font: 600 20px/1.25 "Playfair Display",serif;
}

    .country{
      margin:0;
      color:#d17f00;
      font-size:12px;
      font-weight:600;
    }

    .card-line{
      width:26px;
      height:2px;
      margin:15px 0 12px;
      background:#d58b07;
    }

    .story-text {
        margin: 0;
        font-size: 15px !important;
        line-height: 1.54;
        color: #111d32;
    }

    .wide-wrap{
      display:grid;
      grid-template-columns:82px 1fr;
      gap:26px;
      align-items:start;
    }

    .wide-left{
      position:relative;
      min-height:75px;
    }

    .wide-left .quote-mark{
      margin:0;
      padding-top:6px;
    }

    .wide-left .story-icon{
      top:0;
      right:0;
    }

    .wide-head{
      display:flex;
      align-items:baseline;
      gap:15px;
      flex-wrap:wrap;
      margin-bottom:7px;
    }

    .wide-head h3{
      margin:0;
      font-size:17px;
    }

    .wide-head .country{font-size:11.5px}

    .wide .story-text{
      font-size:12px;
      max-width:790px;
    }

   .donation-wrap {
    padding: 10px 0 16px;
    background: #fff;
}

    .donation-banner{
      position:relative;
      overflow:hidden;
      min-height:145px;
      border-radius:10px;
      background:linear-gradient(110deg,#082c55,#092d56 60%,#0d365f);
      color:#fff;
      display:grid;
      grid-template-columns:120px 1fr 1px 270px;
      align-items:center;
      gap:26px;
      padding:28px 55px;
    }

    .donation-banner::after{
      content:"";
      position:absolute;
      inset:0 0 0 58%;
      opacity:.13;
      pointer-events:none;
      background:
        radial-gradient(circle at 30% 30%,rgba(255,255,255,.55) 0 1px,transparent 1.4px) 0 0/9px 9px,
        linear-gradient(40deg,transparent 48%,rgba(255,255,255,.13) 49% 51%,transparent 52%);
      mask-image:linear-gradient(90deg,transparent,#000);
    }

    .donation-icon{
      font-size:58px;
      color:#e29a14;
      text-align:center;
      position:relative;
      z-index:1;
    }

    .donation-text{
      position:relative;
      z-index:1;
    }

   .donation-text h2 {
    margin: 0 0 7px;
    font: 600 26px/1.1 "Playfair Display",serif;
    color: #fff;
}

    .donation-text p{
      margin:0;
      max-width:420px;
      font-size:13px;
      line-height:1.6;
    }

    .donation-separator{
      width:1px;
      height:86px;
      background:rgba(255,255,255,.72);
      position:relative;
      z-index:1;
    }

    .give-btn{
      justify-self:center;
      position:relative;
      z-index:1;
      display:inline-flex;
      align-items:center;
      gap:14px;
      min-width:190px;
      justify-content:center;
      text-decoration:none;
      color:#fff;
      background:linear-gradient(90deg,#d68b05,#eaa51c);
      padding:15px 24px;
      border-radius:6px;
      font-weight:600;
      font-size:14px;
      box-shadow:0 10px 22px rgba(0,0,0,.12);
      transition:.2s ease;
    }

    .give-btn:hover{
      transform:translateY(-2px);
      filter:brightness(1.04);
    }

    @media (max-width:1100px){
      .container{width:min(100% - 32px,1180px)}
      .story-card{grid-column:span 6}
      .story-card.large{grid-column:span 6}
      .stories-hero::before{inset:0 0 0 35%}
      .donation-banner{grid-template-columns:90px 1fr 1px 220px;padding:26px 30px}
    }

    @media (max-width:760px){
      .container{width:min(100% - 24px,1180px)}
      .stories-hero{min-height:520px}
      .stories-hero::before{
        inset:250px 0 0 0;
        background:
          linear-gradient(180deg,#faf9f6 0%,rgba(250,249,246,.1) 22%,rgba(250,249,246,0) 45%),
          url("assets/story-banner.jpg") center/cover no-repeat;
      }
      .hero-content{width:100%;padding:34px 0 20px}
      .stories-hero h1{font-size:44px}
      .tab-row{justify-content:flex-start;padding:0 10px}
      .story-card,.story-card.large{grid-column:1/-1;min-height:auto}
      .story-card.wide{padding:20px 16px}
      .wide-wrap{grid-template-columns:1fr;gap:4px}
      .wide-left{min-height:54px}
      .wide-left .story-icon{right:auto;left:55px}
      .donation-banner{
        grid-template-columns:1fr;
        gap:17px;
        padding:30px 24px;
        text-align:center;
      }
      .donation-icon{font-size:52px}
      .donation-separator{display:none}
      .donation-text p{margin-inline:auto}
      .give-btn{justify-self:center}
    }

    @media (max-width:420px){
      .stories-hero h1{font-size:38px}
      .hero-copy{font-size:13px}
    }

    .goldband4.writtneblock {
        padding: 100px 0;
    }


    .english-spenish a
    {
      cursor: pointer;
    }

    .btns.english-spenish {
    position: relative;
}

  .english-spenish ul {
    position: absolute;
    right: 14px;
    background: #fff;
    padding: 0px;
    border-radius: 5px;
    box-shadow: 0 0 3px 1px rgba(0,0,0,.1);
    top: 30px;
    display: none;
}

    .english-spenish ul li {
        list-style: none;
    }

    .btns.english-spenish ul li {
    padding-top: 4px;
    padding-bottom: 4px;
}

.btns.english-spenish ul li a {
    padding: 20px !important;
}


.smalltext {
    margin: 20px 0 0;
    text-align: center;
}

.smalltext p {
    font-size: 12px;
}

.othersmalltext p {
    color: #c5c5c5;
}

.contact-banner-block {
    padding: 180px 0;
}
.contact-banner-block
{
  position: relative;
}
.contact-banner-block::after {
    content: "";
    background: linear-gradient(to right, rgb(0, 0, 0) 0%,rgb(0, 0, 0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.contact-banner-box {
    z-index: 9;
    position: relative;
}

.contact-banner-box h3 {
    color: #c98a18;
    font-size: 35px;
    margin-bottom: 20px;
}

.contact-banner-box h1 {
    color: #fff;
    font-size: 50px;
}
.contactform-block {
    padding: 60px 0;
}

.formbox {
    width: 100%;
    max-width: 80%;
    margin: auto;
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.form-group .formcontrol {
    width: 100%;
    padding: 15px;
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    outline: none;
}
.form-group.subbtn {
    grid-column: 1 / -1;
    text-align: center;
}
.messagebox
{
  grid-column: 1 / -1;
} 

.form-group.messagebox textarea {
    height: 120px;
}

.submitbtn {
    padding: 12px 30px;
    background: #c98a18;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
}

.contactdetails-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    background: #fff;
    /* box-shadow: 0 0 3px 1px rgba(0,0,0,.1); */
}

.contactdetails_boxs {
    box-shadow: 0 0 3px 1px rgba(0,0,0,.1);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
}

.contactdetails_boxs svg {
    font-size: 30px;
    color: #c98a18;
    margin-bottom: 30px;
}

.contactdetails_boxs h3 {
    margin-bottom: 10px;
}

#contactdetails {
    padding-bottom: 80px;
}

.contactdetails_boxs h3 {
    margin-bottom: 10px;
    color: #c98a18;
}

.privacy-policy-box {
    padding: 30px;
    background: #fff;
    box-shadow: 0 0 3px 0px rgba(0,0,0,.1);
    margin: 30px 0;
    border-radius: 10px;
}

.privacy-policy-box h1 {
    margin-bottom: 20px;
}

.privacy-policy-box p {
    margin: 20px 0;
}

.privacy-policy-box h4 {
    font-size: 20px;
    color: #c98a18;
}
.privacy-policy-box ul li {
    padding-bottom: 8px;
}
.privacy-policy-block {
    padding: 50px 0;
}

.privacy-policy-box p a {
    color: #c98a18;
}