/*--Custom CSS--*/
.woof_submit_search_form_container { display: flex; flex-direction: row; gap: 10px; }
.woof_submit_search_form {order: 1;}
.woof_reset_search_form {order: 2;}


 .testimonial {
        background: #fff;
        border-radius: 14px;
        padding: 35px;
        margin: 40px 0;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
      }

      .program {
        display: inline-block;
        background: #f4e6ef;
        color: #7d2b5b;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 13px;
        margin-bottom: 15px
      }

      .author {
        text-align: right;
        font-weight: bold;
        margin-top: 20px
      }
      
   /*  .inner-banner .banner-info .pageTitle h1,.breadcrumb-container ul li a,.breadcrumb-container ul li   {
    color: #ffffff !important;
}*/

/* Darkens whatever banner image is uploaded, so white text stays readable
   regardless of how bright/busy the photo is */
.inner-banner .inner-banner-image {
    position: relative;
}
.inner-banner .inner-banner-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.45) 100%);
    z-index: 1;
}

/* Your existing rule, plus a shadow for extra contrast against busy photos */
.inner-banner .banner-info .pageTitle h1,
.breadcrumb-container ul li a,
.breadcrumb-container ul li {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   Header — top info bar enabled on tablet / mobile
   Compacts .topHeader and re-syncs the fixed-header offset (.margin-container)
   and the MeanMenu panel height to the new header height.
   ========================================================================== */

/* ---- Tablet: 992px and below — keep info + icons on one row ---- */
@media screen and (max-width: 991.98px) {
    #pageHeaderWrapper .topHeader { font-size: 13px; }
    #pageHeaderWrapper .topHeader .row {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        --bs-gutter-y: 0;
        min-height: 52px; /* locks the bar height so the offset below stays exact */
    }
    #pageHeaderWrapper .topHeader .row > div { margin-top: 0; }
    #pageHeaderWrapper .topHeader .row > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    #pageHeaderWrapper .topHeader .topLeft-info {
        flex-wrap: wrap;
        row-gap: 2px;
        line-height: 1.4;
    }
    #pageHeaderWrapper .topHeader .topLeft-info img {
        max-width: 13px;
        margin-right: 7px !important;
    }
    #pageHeaderWrapper .topHeader .cart-icon { height: 42px; padding: 0 12px; }

    .margin-container { margin-top: 122px; }
    .mean-container .mean-nav.active { height: calc(100vh - 115px); }
}

/* ---- Mobile: 768px and below — stack info above the icon row ---- */
@media screen and (max-width: 767.98px) {
    #pageHeaderWrapper .topHeader { font-size: 12px; }
    #pageHeaderWrapper .topHeader .row { flex-wrap: wrap; justify-content: center; }
    #pageHeaderWrapper .topHeader .row > div:first-child {
        flex: 0 0 100%;
        max-width: 100%;
        padding-top: 6px !important;
        padding-bottom: 2px !important;
    }
    #pageHeaderWrapper .topHeader .topLeft-info {
        flex-direction: column;
        align-items: center;
        row-gap: 2px;
        line-height: 1.35;
    }
    #pageHeaderWrapper .topHeader .topLeft-info li { display: block; text-align: center; }
    #pageHeaderWrapper .topHeader .topLeft-info img { vertical-align: -2px; }
    #pageHeaderWrapper .topHeader .row > div + div { padding-bottom: 6px; }
    #pageHeaderWrapper .topHeader .row > div + div ul { justify-content: center; }
    #pageHeaderWrapper .topHeader .cart-icon { height: 34px; padding: 0 14px; }

    .margin-container { margin-top: 154px; }
    .mean-container .mean-nav.active { height: calc(100vh - 147px); }
}

/* ---- Small mobile: 576px and below (smaller logo = shorter header) ---- */
@media screen and (max-width: 575.98px) {
    .margin-container { margin-top: 152px; }
    .mean-container .mean-nav.active { height: calc(100vh - 145px); }
}

/* ---- 360px and below — keep the phone line on one row ---- */
@media screen and (max-width: 359.98px) {
    #pageHeaderWrapper .topHeader { font-size: 11px; }
    #pageHeaderWrapper .topHeader .topLeft-info img {
        max-width: 12px;
        margin-right: 6px !important;
    }
}


/* ==========================================================================
   Home page fixes — banner wave, category buttons, banner CTA
   ========================================================================== */

/* (2) WAVE — crop the empty white strip under the sunflowers, and recolour
       the wave to the green of the section below it                        */
.BannerSection .main-slider .slick-slide figure img {
    height: 122.6%;
    object-position: center top;
}
.BannerSection .bannerShape {
    /*background: #84B193;*/
    background: #729F80;
    background: linear-gradient(270deg,rgba(114, 159, 128, 1) 0%, rgba(151, 192, 162, 1) 100%);
    -webkit-mask-image: url("../../images/shape11.png");
            mask-image: url("../../images/shape11.png");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
            mask-position: center bottom;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}
.BannerSection .bannerShape img {
    visibility: hidden;
    display: block;
    width: 100%;
}

/* (1) CATEGORY BUTTONS — 4 in one row on tablet + mobile, equal height */
@media screen and (max-width: 991.98px) {
    .homeCat-section .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .homeCat-section .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        max-width: 25%;
    }
    .homeCat-section .homeCat-box { flex: 1 1 auto; }
    .homeCat-section .homeCat-box a { padding: clamp(14px, 3.2vw, 34px) 6px; }
    .homeCat-section .homeCat-box h4 {
        font-size: clamp(11px, 2.8vw, 18px);
        line-height: 1.25;
    }
}

/* (3) "GIVE HOPE TODAY" — smaller on mobile */
@media screen and (max-width: 767.98px) {
    .BannerSection .banner-info .custom-button {
        height: 34px;
        font-size: 11px;
        padding: 0 6px 0 14px;
    }
    .BannerSection .banner-info .custom-button.has-icon::after {
        width: 26px;
        height: 26px;
        margin-left: 8px;
        background-size: 12px auto;
    }
}

/* ==========================================================================
   Get Support — Financial Assistance & Educational Support boxes
   ========================================================================== */

/* 2 across on phones, 4 across from tablet up */
.getSupSection6 .row { align-items: stretch; }
.getSupSection6 .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    flex: 0 0 50%;
    max-width: 50%;
}
@media screen and (min-width: 768px) {
    .getSupSection6 .row > [class*="col-"] {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* Shorter box, equal height across the row */
.getSupSection6 .termSupport-box {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 16px 12px 14px;
}

/* Whole image — no cropping */
.getSupSection6 .termSupport-box .termSupp-icon {
    position: static;
    line-height: 0;
}
.getSupSection6 .termSupport-box .termSupp-icon img {
    width: clamp(56px, 6.5vw, 84px);
    max-width: 100% !important;
    height: auto;
    border-radius: 8px;
}

.getSupSection6 .termSupport-box .termSupp-caption {
    max-width: 100%;
    padding: 10px 0 0;
}
.getSupSection6 .termSupport-box .termSupp-caption h4 {
    padding-bottom: 0;
    font-size: clamp(13px, 1.25vw, 18px);
    line-height: 1.25;
}

/* ==========================================================================
   Read More — load & toggle a section from another page
   ========================================================================== */
.remote-panel {
    display: none;
    max-height: min(60vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
    padding-right: 15px;
    border-top: 1px solid #EDE6DC;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #C8A86F #F1EBE3;
}

/* Chrome / Safari / Edge */
.remote-panel::-webkit-scrollbar { width: 6px; }
.remote-panel::-webkit-scrollbar-track { background: #F1EBE3; border-radius: 10px; }
.remote-panel::-webkit-scrollbar-thumb { background: #C8A86F; border-radius: 10px; }

/* injected content */
.remote-panel > article.testimonial { margin-top: 0; }
.remote-panel .fullcontainer { background: transparent !important; }
.remote-panel .pageTitle {
    text-align: left !important;
    margin-bottom: 20px !important;
}
.remote-panel .panel-loading {
    padding: 20px 0;
    font-size: 14px;
    opacity: .7;
}

/* arrow rotates while open */
.caption-box a.custom-button.is-open.has-icon::after { transform: rotate(90deg); }

/* ==========================================================================
   Get Support — Helpful Resources boxes
   ========================================================================== */
#helpfulResources .row { align-items: stretch; }

#helpfulResources .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

#helpfulResources .joinComm-itemBox {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 28px 20px 26px;
}

#helpfulResources .joinComm-itemBox .headCaption {
    height: auto !important;   /* clears the theme's inline equal-height */
    width: 100%;
    margin-bottom: 20px;
}
#helpfulResources .joinComm-itemBox .headCaption h4 { padding-bottom: 0; }

#helpfulResources .joinComm-itemBox .text-center { width: 100%; }
#helpfulResources .joinComm-itemBox .custom-button { cursor: pointer; }

@media screen and (max-width: 767.98px) {
    #helpfulResources .joinComm-itemBox { padding: 20px 14px 18px; }
}


/* ==========================================================================
   Get Support — Community Activities & Events: smaller Read More buttons
   ========================================================================== */
.getSupSection7 .custom-button {
    height: 36px;
    font-size: 11px;
    padding: 0 4px 0 16px;
}
.getSupSection7 .custom-button.has-icon::after {
    width: 28px;
    height: 28px;
    margin-left: 8px;
    background-size: 9px auto;   /* only this shrinks the arrow */
}

/* ==========================================================================
   Get Support — WiShine Grief Support Programme: centred icon + text
   ========================================================================== */
#griefSupportProgramme .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

#griefSupportProgramme .homeSupport-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#griefSupportProgramme .caption-box { width: 100%; }

/* ==========================================================================
   Stories of Hope page: don't highlight "Events & News" in the top menu
   ========================================================================== */

body.page-id-24 .nav > ul > li.menu-item-973 > a {
    font-weight: 400;
    color: #666;
}
body.page-id-24 .nav > ul > li.menu-item-973 > a::before {
    opacity: 0;
}

/* same for the mobile burger menu */
body.page-id-24 .mean-container .mean-nav ul li.menu-item-973 > a {
    background: #fff;
    color: #666 !important;
}
/* ==========================================================================
   mobile banner: show the full photo, caption below it
   ========================================================================== */
@media screen and (max-width: 767.98px) {

    /* let the image set its own height, at its natural aspect — no cropping */
    .inner-banner .inner-banner-image:not(.alt) {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }
    .inner-banner .inner-banner-image:not(.alt) figure {
        position: static;
        inset: auto;
    }
    .inner-banner .inner-banner-image:not(.alt) figure img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: initial;
    }

    .inner-banner .inner-banner-image::before { display: none; }

    .inner-banner .banner_caption {
        position: static;
        height: auto;
        display: block;
        background: #2E7270;
        padding: 18px 0 20px;
    }
    .inner-banner .banner_caption .banner-info { padding-top: 0; }
    .inner-banner .banner_caption .pageTitle { margin-bottom: 6px; }

    .inner-banner .banner_caption .pageTitle h1,
    .inner-banner .breadcrumb-container ul li,
    .inner-banner .breadcrumb-container ul li a {
        text-shadow: none !important;
    }
}

/* Home - Taking The First Step: centre the support icons above each card.
   Added 18 Aug 2026. Scoped to 576px and up so the mobile layout is unchanged. */
@media (min-width: 576px) {
  .homeSection2 .homeSupport-box .homeSupport-icon {
    margin-left: auto;
    margin-right: auto;
  }
}


/* ================= Edits 18 Aug 2026 batch 2 ================= */

/* 1. Home featured event card: show the whole excerpt.
      The wrapper was clamped to 3 lines, so the extra paragraphs were
      hidden. Scoped to .mainEvent-box, so every other event card on the
      home and events pages keeps its 3-line clamp. */
.mainEvent-box .shortDes.text-ellipsis {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* 2. Testimonial author photos: double size, square crop, circular.
      They were 80px tall with object-fit scale-down, so each photo kept
      its own shape and the row looked uneven. */
/* 2b. The avatar wrapper is a fixed 80px box with overflow hidden, so the
      bigger image was being cut in half. Grow the box to match. */
.testimonial-itemBox .user-info .user-pic {
  width: 160px;
  height: 160px;
  padding-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-itemBox .user-info figure img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 3. WhatsApp chat avatar. The logo is a 298x26 wordmark and the plugin
      renders the avatar with object-fit fill, which squashed it into an
      unreadable block. Crop to the heart mark so it reads as the brand. */
#wcw-window .chat-header img {
  object-fit: cover;
  object-position: 12% 50%;
  background: #fff;
}

/* 4. Justify body copy across the site. No !important, so anything more
      specific still wins. */
p {
  text-align: justify;
}

/* 4b. Keep deliberately aligned blocks as they were. A rule on p beats
       alignment inherited from a wrapper, so these hand it back.
       If you spot a centred block that has gone justified, add its
       wrapper to this list. */
.text-center p,
.text-start p,
.text-end p,
.text-left p,
.text-right p,
.pageTitle p,
.testimonial-itemBox p,
.homeSection3 .shortDes p,
/* Icon/label lists (Get Support - Support for Parents & Children, and the
   same component elsewhere). These labels are 2-4 words and wrap onto two
   lines, so justifying them stretched the first line into big gaps. */
.elderlyListing p {
  text-align: inherit;
}


/* ================= Testimonials page - mobile only ================= */
/* Desktop is deliberately untouched: everything below sits inside a
   max-width 767.98px query. */
@media (max-width: 767.98px) {

  /* Quote headline was 27px on mobile while other pages drop their h3 to
     21-23px, so this page read noticeably larger. */
  article.testimonial h3 {
    font-size: 21px;
    line-height: 1.35;
  }

  /* Accordion. main-script.js wraps each h3 and the copy that follows it
     into its own .testimonial-item, so testimonials grouped under one
     category heading collapse independently rather than as a whole
     category. If JS fails, nothing is wrapped and nothing is hidden. */
  .testimonial-item > h3 {
    cursor: pointer;
    position: relative;
    padding-right: 34px;
    margin-bottom: 0;
  }

  .testimonial-item > h3::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 0.45em;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }

  .testimonial-item.is-open > h3::after {
    transform: rotate(-135deg);
  }

  .testimonial-item > .testimonial-panel {
    display: none;
  }

  .testimonial-item.is-open > .testimonial-panel {
    display: block;
    margin-top: 14px;
  }

}


/* About Us - Who We Are section. The background photo was removed by
   clearing the Background Image field on the page (ACF), so this section
   now takes a flat colour sampled from that photo. Keeping it dark means
   the existing white text still works - white on this gives 7.3:1. */
.aboutSection1 {
  background-color: #19454B;
}


/* Get Involved - Make a Difference Today (#donate_now). Same treatment as
   .aboutSection1 above: the background photo was removed by clearing the
   Background Image field on the page (ACF), so this section takes the same
   flat colour. The section already renders white text, which stays legible. */
.getInvSection2 {
  background-color: #19454B;
}


/* Home - support cards side by side on phones only, to cut scrolling.
   The icon sat above the text leaving dead space to its right; this puts
   the two next to each other and shrinks the icon to 80px.
   Phones only (under 576px). At 576px and up the cards are two or four
   across and keep the original stacked layout. */
@media (max-width: 575.98px) {

  .homeSection2 .homeSupport-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }

  .homeSection2 .homeSupport-box .homeSupport-icon {
    flex: 0 0 80px;
    width: 80px;
    padding-bottom: 80px;
    margin-bottom: 0;
  }

  .homeSection2 .homeSupport-box .caption-box {
    flex: 1 1 auto;
    min-width: 0;
  }

}


/* Home hero-strip background. The image is a green gradient (dark at the top,
   light at the bottom) and was set to repeat-y at background-size 100%, so on
   narrow screens it tiled and the light bottom of one copy met the dark top of
   the next - the hard two-tone band. cover fills the section at any width with
   no tiling. The colour behind matches the gradient midpoint. */
/* homeSection1 background seam fix */
.homeSection1 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-color: #91BDA0;
}

/* Category boxes: smaller and tighter from tablet up. The mobile and small
   tablet sizing is already handled in the block above (max-width 991.98px),
   so this only touches 992px and wider. */
@media screen and (min-width: 992px) {
  .homeCat-section .homeCat-box a {
    padding: 34px 20px;
  }
  .homeCat-section .homeCat-box h4 {
    font-size: 20px;
    line-height: 1.3;
  }

  /* The cards are pulled up by margin-top -290px so they straddle the green
     wave. Making them 85px shorter lifted their bottom edge clear of the
     green, so the pull is reduced by the same 85px to keep the original
     overlap. */
  .homeCat-section {
    margin-top: -175px;
  }
}


/* Helpful Resources cards (Get Support). The component ships its own
 rule .joinComm-itemBox a{position:relative}, which is more specific
 than .link-fix and stopped the overlay link from covering the card.
 This restores it so the whole box is clickable. */
.joinComm-itemBox a.link-fix {
  position: absolute;
}


/* ~~~~~~~~~~~~~ Testimonials - separating each quote ~~~~~~~~~~~~~ */
/* Quotes are grouped one article per category, so several sit inside
   the same white card and ran together visually. main-script.js wraps
   each into a .testimonial-item; these rules give that unit a shape.
   Colours are taken from the page palette - the cream section
   background #F3EBE2 and the white card - so nothing new is invented. */

/* Desktop: a hairline between consecutive quotes. */
@media (min-width: 768px) {
  .testimonial-item + .testimonial-item {
    margin-top: 34px;
    padding-top: 34px;
    border-top: 1px solid #E9E2D9;
  }
}

/* Mobile: each quote becomes its own tappable card inside the category
   box. The article padding is eased so the nested cards do not end up
   double-inset on a narrow screen. */
@media (max-width: 767.98px) {
  article.testimonial {
    padding: 20px;
  }

  .testimonial-item {
    background: #FBF8F4;
    border: 1px solid #EFE7DC;
    border-radius: 12px;
    padding: 14px 16px;
  }

  .testimonial-item + .testimonial-item {
    margin-top: 12px;
  }

  /* Justified copy leaves big word gaps in a column this narrow, so the
     quotes read left-aligned on mobile. */
  .testimonial-item .testimonial-panel p {
    text-align: left;
  }
}


/* WordPress core image alignment classes — missing from theme, images from post content were not floating/wrapping text */
.entry-content .alignleft, .siDetailsSection1 .alignleft, article .alignleft {
  float: left;
  margin: 0 1.5em 1.5em 0;
}
.entry-content .alignright, .siDetailsSection1 .alignright, article .alignright {
  float: right;
  margin: 0 0 1.5em 1.5em;
}
.entry-content .aligncenter, .siDetailsSection1 .aligncenter, article .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  clear: both;
}


/* Newsletters page: narrower/centered listing, 2-column split when a year has more than 6 months */
.newsletter-columns.one-col {
  max-width: 640px;
  margin: 0 auto;
}
.newsletter-columns.two-col {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 30px;
}
.newsletter-columns.two-col .annualReport-listing {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 767px) {
  .newsletter-columns.two-col {
    flex-direction: column;
    gap: 0;
  }
}
.newsletter-title-sub {
  display: block;
  font-size: 0.5em;
  text-transform: none;
}
/* Shop grid: .products.columns-4 (a Bootstrap-style .row) was shrinking to fit its content instead of filling .product-list-holder, so the col-lg-4/col-sm-6 percentage widths on the cards had no definite parent width to resolve against and fell back to content size, leaving a large gap on the right. */
.products.columns-4 { width: 100%; }
/* Item 4: "Read More"/"Read Less" toggle buttons (Distinctive Programme Features and similar) inherit .custom-button's responsive font-size, which drops to 12px under 1600px viewport width against a 46px-tall pill -- text reads too small for the button. Bump just the read-more variant back up; other .custom-button variants (nav Volunteer/Donate etc.) are unaffected. */
.custom-button.read-more { font-size: 20px; }
/* Item 9: slick carousel arrows (hero banner, testimonial and video sliders) use a near-white background at 80% opacity with no shadow, so they're barely visible against both photos and the light/white sections the same component also appears in. Solid fill + a soft shadow reads clearly in both contexts (checked hero photo, cream #F3EBE2 testimonial section, and pure-white video slider). */
.slick-arrow { background-color: #fff; border-color: rgba(32, 54, 95, 0.25); box-shadow: 0 2px 10px rgba(32, 54, 95, 0.15); }
/* Item 21: footer social icons were a flat light-blue circle with a white glyph for every platform, so Facebook/YouTube/Instagram all looked identical. Use each platform's real brand colour on a white circle instead, going solid brand colour on hover. Scoped to the footer only -- .social-icons.icon-rounded may be reused elsewhere with the original grey style intact. */
footer .social-icons.icon-rounded a { background: #fff; border-color: #e2e2e2; }
footer .social-icons.icon-rounded a:has(.fa-facebook-f) { color: #1877F2; }
footer .social-icons.icon-rounded a:has(.fa-youtube) { color: #FF0000; }
footer .social-icons.icon-rounded a:has(.fa-instagram) { color: #E4405F; }
footer .social-icons.icon-rounded a:has(.fa-facebook-f):hover { background: #1877F2; border-color: #1877F2; color: #fff; }
footer .social-icons.icon-rounded a:has(.fa-youtube):hover { background: #FF0000; border-color: #FF0000; color: #fff; }
footer .social-icons.icon-rounded a:has(.fa-instagram):hover { background: #E4405F; border-color: #E4405F; color: #fff; }
/* Item 25: newsletter page banner (the fanned-out cover graphic) was stretched/distorted on mobile -- the sitewide .inner-banner-image:not(.alt) rule switches to object-fit:initial (= fill) and auto height below 768px, which works for plain photo banners but distorts this composited graphic. Scoped back to cover + a fixed height just for the newsletters page. */
@media (max-width: 767.98px) {
  .page-template-template-newsletters .inner-banner .inner-banner-image:not(.alt) {
    height: 200px !important;
  }
  .page-template-template-newsletters .inner-banner .inner-banner-image:not(.alt) figure img {
    height: 100%;
    object-fit: cover;
  }
}

/* Item 20: Thank You to Our Supporters description -- client asked for the description text to render in a smaller font than the default paragraph size. */
#thank-you-supporters .pageTitle p { font-size: 14px; }
.main-slider .slick-slide .item.video, .main-slider .slick-slide .item.image { min-height: auto !important; padding-bottom: 54.47 !important%; }
@media (max-width: 991.98px) {
  #pageHeaderWrapper { animation-name: slideDown !important; }
}



/* Helpful Resources - PDF Downloads section: stacked icon-above-title cards, centered, like the homeSupport icon boxes but with a plain PDF icon (no circle background). */
#pdf_resources .pdfDownload-box { display: flex; flex-direction: column; align-items: center; text-align: center; }
#pdf_resources .pdfDownload-box a { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
#pdf_resources .pdfDownload-icon { width: 90px; padding-bottom: 90px; margin: 0 0 20px; }
#pdf_resources .pdfDownload-icon img { object-fit: contain; }
#pdf_resources .caption-box h3 { font-size: 20px; margin: 0; }


/* WhatsApp chat widget: "Send Enquiry" button text goes an unreadable tan/gold (theme's default a:visited color) once the visitor's browser has ever visited the wa.me link, because a:visited and .chat-footer a have equal specificity and :visited wins. Force it to stay white regardless of visited state, with a higher-specificity selector so load order can't flip it back. */
.chat-window .chat-footer a,
.chat-window .chat-footer a:visited,
.chat-window .chat-footer a:hover,
.chat-window .chat-footer a:active {
  color: #fff;
}


/* Our Supports page: each donor-acknowledgement group's name list flows into 3 columns like a print acknowledgement page, rather than a single stacked bullet list. */
.ourSupportSection1 .supportGroup-list {
  column-count: 3;
  column-gap: 60px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ourSupportSection1 .supportGroup-list li {
  padding: 6px 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
@media screen and (max-width: 991.98px) {
  .ourSupportSection1 .supportGroup-list { column-count: 2; column-gap: 40px; }
}
@media screen and (max-width: 575.98px) {
  .ourSupportSection1 .supportGroup-list { column-count: 1; }
}

/**/
#pageHeaderWrapper .bottomHeader .top-right>.row>.col-auto:nth-child(2) .custom-button { background: #e00404; border-color: #e00404; }
#pageHeaderWrapper .bottomHeader .top-right>.row>.col-auto:nth-child(2) .custom-button:hover { border-color: #394E5A; }
@media screen and (max-width: 991.98px) {
  .main-slider .slick-slide .item::after { opacity: 0; }
}

@media screen and (max-width: 767.98px) {
  .main-slider .slick-dots { bottom: 30px; }
}