/* ===========================================
   Maskan Family — Site Enhancements CSS
   Animations, overlays, and UX improvements
   =========================================== */

/* ── Footer: force address icon to be identical circle to email/phone ── */
.get-in-touch .footer-address .icon {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  flex: 0 0 50px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.get-in-touch .footer-address .icon i {
  color: var(--theme-color-2) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: block !important;
}
@media (max-width: 1399px) {
  .get-in-touch .footer-address .icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
  }
  .get-in-touch .footer-address .icon i {
    font-size: 16px !important;
  }
}

/* ---- Smooth scroll ---- */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

.partner-marquee {
  max-width: 100%;
  overflow-x: clip;
  contain: paint;
}

/* Community Partners uses the same card, hover, and marquee system as Our Funders. */
.partner-marquee .community-partner-marquee-layout {
  animation-duration: 110s;
}

.community-partner-marquee-layout .partner-2 .logo-1,
.community-partner-marquee-layout .partner-2 .logo-2 {
  padding: 8px 10px;
}

.community-partner-marquee-layout .partner-2 img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100% !important;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .partner-marquee .community-partner-marquee-layout {
    animation-play-state: paused;
  }
}

/* ---- Hero Ken Burns zoom animation ---- */
@keyframes kenburns {
  0%   { transform: scale(1)    translateX(0)   translateY(0); }
  50%  { transform: scale(1.07) translateX(-1%) translateY(-1%); }
  100% { transform: scale(1)    translateX(0)   translateY(0); }
}

.hero-bg-kenburns {
  animation: kenburns 18s ease-in-out infinite;
  transform-origin: center center;
}

/* ---- Hero dark overlay for text readability ---- */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 69, 64, 0.62) 0%,
    rgba(0, 20, 18, 0.45) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ---- Global primary button colors (Info Palette match) ---- */
.e-primary-btn {
  background: var(--theme-color-3) !important;
  color: #ffffff !important;
  min-height: 48px;
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.e-primary-btn .icon-wrap {
  display: none !important;
}

.e-primary-btn.has-icon {
  padding: 16px 25px !important;
  gap: 0 !important;
}

.e-primary-btn:hover,
.e-primary-btn:focus-visible {
  background: #003833 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 56, 51, 0.28);
}

.e-primary-btn:active {
  transform: translateY(0);
}

/* Contrast treatment for CTA buttons placed directly on dark green panels.
   Keep the normal green CTA on light surfaces, and use the warm brand accent
   only where the button would otherwise merge into its container. */
.work-card .e-primary-btn,
.what-we-do-section-2 .section-top-3 .right .e-primary-btn {
  background: #ffe175 !important;
  color: #004540 !important;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}

.work-card .e-primary-btn:hover,
.work-card .e-primary-btn:focus-visible,
.what-we-do-section-2 .section-top-3 .right .e-primary-btn:hover,
.what-we-do-section-2 .section-top-3 .right .e-primary-btn:focus-visible {
  background: #fff2b3 !important;
  color: #003833 !important;
  border-color: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

/* ---- Floating hero thumbnail animation ---- */
@keyframes heroFloat {
  0%   { transform: translateY(0px);  }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px);  }
}

.hero-float-thumb {
  animation: heroFloat 5s ease-in-out infinite;
}

/* ---- Hero text styles ---- */
.hero-title h1,
.hero-sub-title,
.hero-text {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ---- Hero secondary (outline) button ---- */
.hero-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid #ffffff;
  border-radius: 50px;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
  white-space: nowrap;
}

.hero-secondary-btn:hover {
  background: #ffffff;
  color: #004540;
}

/* ---- Hero slider: cinematic cross-dissolve + Ken Burns slow zoom ---- */
/* Fade duration is `speed` in assets/js/script.js. To revert the zoom,  */
/* delete this block down to "Ken Burns end".                            */
.hero-slider-active-3 .swiper-slide {
  transition-timing-function: ease-in-out !important;
  overflow: hidden;
}
/* Photo slides rest at normal size (the video slide is left alone). */
.hero-slider-active-3 .swiper-slide .hero-slide-3:not(.hero-slide-video) {
  transform: scale(1);
  transform-origin: center center;
  transition: transform 0s;
  will-change: transform;
}
/* Incoming photo drifts in slowly while it is on screen... */
.hero-slider-active-3 .swiper-slide-active .hero-slide-3:not(.hero-slide-video) {
  transform: scale(1.1);
  transition: transform 7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* ...and the outgoing photo holds its zoom while it dissolves away,
   so it never snaps back to normal size mid-fade. */
.hero-slider-active-3 .swiper-slide-prev .hero-slide-3:not(.hero-slide-video) {
  transform: scale(1.1);
  transition: transform 0s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider-active-3 .swiper-slide .hero-slide-3:not(.hero-slide-video) {
    transform: none !important;
    transition: none !important;
  }
}
/* ---- Ken Burns end ---- */

/* ---- Hero section: remove original 160px top padding (content is image-only) ---- */
/* All breakpoints from main.css are overridden below so nothing is missed       */
.hero-slide-3 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;  /* image-only slide; no text to pad around     */
  min-height: 72vh !important;   /* keeps a tall full-screen look               */
  display: flex !important;
  align-items: flex-end !important; /* anchor any future content to the bottom  */
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-slide-3 { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 70vh !important; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slide-3 { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 68vh !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slide-3 { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 60vh !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero-slide-3 { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 55vh !important; }
}
@media (max-width: 767px) {
  .hero-slide-3 { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 50vh !important; }
}

/* Hero height chain:
   .swiper uses height:100% which REQUIRES an explicit height on the parent
   (not just min-height). Set height+min-height on the section so 100% resolves. */
.hero-slider-active-3 {
  height: 72vh !important;
  min-height: 72vh !important;
}
@media (min-width: 1400px) and (max-width: 1700px) { .hero-slider-active-3 { height: 70vh !important; min-height: 70vh !important; } }
@media (min-width: 1200px) and (max-width: 1399px) { .hero-slider-active-3 { height: 68vh !important; min-height: 68vh !important; } }
@media (min-width: 992px)  and (max-width: 1199px) { .hero-slider-active-3 { height: 60vh !important; min-height: 60vh !important; } }
@media (min-width: 768px)  and (max-width: 991px)  { .hero-slider-active-3 { height: 55vh !important; min-height: 55vh !important; } }
@media (max-width: 767px)                           { .hero-slider-active-3 { height: 50vh !important; min-height: 50vh !important; } }
.hero-slider-active-3 .swiper,
.hero-slider-active-3 .swiper-wrapper,
.hero-slider-active-3 .swiper-slide {
  height: 100% !important; /* now resolves correctly against explicit height above */
}

/* Hero intro video: fills the hero box exactly, then dissolves into the
   slide's own background image (hero-bg-1) for a seamless hand-off. */
.hero-slide-3.hero-slide-video {
  position: relative;
  overflow: hidden;
}
.hero-slide-3 .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 1;
  transition: opacity 1.4s ease-in-out;
  pointer-events: none;
  background: transparent;
}
.hero-slide-3 .hero-video.is-merging {
  opacity: 0;
}
.hero-slide-3.hero-slide-video > .container {
  position: relative;
  z-index: 1;
}

/* Consistent semantic bullets across program detail pages. */
.program-content--bullets ul {
  padding-left: 22px;
  color: #2f2f2f;
  font-size: 1.05rem;
  line-height: 1.85;
}
.program-content--bullets ul li {
  padding-left: 4px;
  margin-bottom: 4px;
}
.program-content--bullets ul li::marker {
  color: #004540;
}
.program-content--bullets ul li:last-child {
  margin-bottom: 0;
}

/* Volunteer application journey. */
.volunteer-process-section {
  background: #ffffff;
}
.volunteer-process-intro {
  max-width: 850px;
  margin: 0 auto;
  color: #3d4645;
  font-size: 17px;
  line-height: 1.75;
}
.volunteer-process-heading {
  margin: 48px 0 26px;
}
.volunteer-process-heading h3,
.volunteer-placement h3 {
  color: #004540;
  font-size: 28px;
  line-height: 1.3;
  margin: 0;
}
.volunteer-process-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.volunteer-process-steps > li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  min-width: 0;
  padding: 24px;
  background: #f8f7f0;
  border: 1px solid rgba(0, 69, 64, 0.14);
  border-radius: 8px;
}
.volunteer-process-steps > li:last-child {
  grid-column: 1 / -1;
}
.volunteer-process-number {
  display: inline-flex;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #004540;
  color: #ffe175;
  font-weight: 700;
  line-height: 1;
}
.volunteer-process-steps h4 {
  color: #004540;
  font-size: 20px;
  line-height: 1.35;
  margin: 1px 0 8px;
}
.volunteer-process-steps p,
.volunteer-placement p {
  color: #3d4645;
  line-height: 1.7;
  margin: 0;
}
.volunteer-placement {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: 36px;
  align-items: center;
  margin-top: 30px;
  padding: 30px 0 0;
  border-top: 2px solid rgba(0, 69, 64, 0.15);
}
.volunteer-placement h3 {
  margin-bottom: 10px;
}
.volunteer-placement-action {
  text-align: right;
}
.volunteer-placement-action p {
  margin-bottom: 12px;
  color: #004540;
  font-weight: 600;
}
@media (max-width: 767px) {
  .volunteer-process-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .volunteer-process-heading {
    margin-top: 36px;
  }
  .volunteer-process-heading h3,
  .volunteer-placement h3 {
    font-size: 23px;
  }
  .volunteer-process-steps {
    grid-template-columns: 1fr;
  }
  .volunteer-process-steps > li:last-child {
    grid-column: auto;
  }
  .volunteer-process-steps > li {
    gap: 14px;
    padding: 20px 18px;
  }
  .volunteer-process-number {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }
  .volunteer-placement {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .volunteer-placement-action {
    text-align: left;
  }
}

.community-partner-section {
  background: #ffffff;
}
.community-partner-intro {
  max-width: 880px;
  margin: 0 auto;
  color: #3d4645;
  font-size: 17px;
  line-height: 1.75;
}
.community-partner-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 45px;
}
.community-partner-content > div {
  padding: 30px;
  background: #f8f7f0;
  border-left: 4px solid #85bf18;
  border-radius: 8px;
}
.community-partner-section h3 {
  color: #004540;
  font-size: 25px;
  line-height: 1.35;
  margin-bottom: 14px;
}
.community-partner-section p {
  color: #3d4645;
  line-height: 1.7;
}
.community-partner-content p:last-child,
.community-partner-action p:last-of-type {
  margin-bottom: 0;
}
.community-partner-eligibility {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 2px solid rgba(0, 69, 64, 0.15);
}
.community-partner-eligibility ul {
  columns: 2;
  column-gap: 30px;
  margin: 0;
  padding-left: 22px;
  color: #3d4645;
  line-height: 1.7;
}
.community-partner-eligibility li {
  break-inside: avoid;
  margin-bottom: 7px;
}
.community-partner-eligibility li::marker {
  color: #004540;
}
.community-partner-action .e-primary-btn {
  margin-top: 8px;
}
@media (max-width: 991px) {
  .community-partner-content,
  .community-partner-eligibility {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .community-partner-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .community-partner-content {
    margin-top: 34px;
    gap: 18px;
  }
  .community-partner-content > div {
    padding: 24px 20px;
  }
  .community-partner-section h3 {
    font-size: 22px;
  }
  .community-partner-eligibility {
    gap: 30px;
    margin-top: 34px;
    padding-top: 28px;
  }
  .community-partner-eligibility ul {
    columns: 1;
  }
}

/* Ticker-to-nav gap: reduce header-bottom padding (was 20px each in main.css) */
.header-bottom {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Center logo between left page edge and first nav item; reduce whitespace on both sides */
.header-left {
  gap: 30px !important;
}
.header-left .logo-wrap {
  margin-left: 30px;
}
@media (min-width: 1400px) and (max-width: 1700px) {
  .header-left { gap: 20px !important; }
  .header-left .logo-wrap { margin-left: 20px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-left { gap: 10px !important; }
  .header-left .logo-wrap { margin-left: 10px; }
}

section.about-us-section {
  margin-top: 0 !important;
  padding-top: 20px !important;
  padding-bottom: 40px !important;
}

/* About section photo layering */
.shape-wrapped-thumb-2 {
  position: relative;
}
.shape-wrapped-thumb-2 .thumb-wrapper {
  position: relative;
  z-index: 1;
}
/* Picture 1: white border, overlaps picture 2 by 10%, sits above it */
.shape-wrapped-thumb-2 .thumb-wrapper img:first-child {
  border: 4px solid #fff !important;
  border-radius: 10px !important;
  position: relative;
  z-index: 2;
  margin-right: -10%;
}
/* Picture 2: white border, sits behind picture 1 */
.shape-wrapped-thumb-2 .thumb-wrapper img:last-child {
  border: 4px solid #fff !important;
  border-radius: 10px !important;
  position: relative;
  z-index: 1;
}
/* Picture 3: white border, on top of everything */
.shape-wrapped-thumb-2 .positioned-thumb {
  position: relative;
  z-index: 3 !important;
}
.shape-wrapped-thumb-2 .positioned-thumb > img {
  border: 4px solid #fff !important;
  border-radius: 10px !important;
}

.what-we-do-section-2 .we-do-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.what-we-do-section-2 .we-do-card .card-thumb {
  flex: 1;
  overflow: hidden;
}

.what-we-do-section-2 .we-do-card .card-thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.what-we-do-section-2 .whatwedo-slider-active .swiper-slide {
  height: auto;
}

/* ---- What We Do card image hover ---- */
.we-do-card-thumb img {
  transition: transform 0.4s ease;
}

.we-do-card-thumb img:hover {
  transform: scale(1.05);
}

/* Testimonial pagination: keep it inside section, above Project Funders */
.testimonial-slider-active-2 .testimonial-pagination-wrap {
  position: relative;
  z-index: 10;
  margin-top: 30px;
  margin-bottom: 10px;
  text-align: center;
}

/* ---- Team thumb hover ---- */
.volunteer-card-3 .thumb img {
  transition: transform 0.4s ease;
}

.volunteer-card-3:hover .thumb img {
  transform: scale(1.04);
}

/* ---- Crisis phone button pulse animation ---- */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0    rgba(133, 191, 24, 0.6); }
  70%  { box-shadow: 0 0 0 14px rgba(133, 191, 24, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(133, 191, 24, 0);   }
}

.crisis-phone-btn,
a[href^="tel:"].btn-pulse {
  animation: pulse 2.2s infinite;
}

/* ---- Staggered AOS fade-up for card grids ---- */
.we-do-card:nth-child(1)  { --aos-delay: 100ms; }
.we-do-card:nth-child(2)  { --aos-delay: 200ms; }
.we-do-card:nth-child(3)  { --aos-delay: 300ms; }
.we-do-card:nth-child(4)  { --aos-delay: 400ms; }
.we-do-card:nth-child(5)  { --aos-delay: 500ms; }
.we-do-card:nth-child(6)  { --aos-delay: 600ms; }

/* ---- Work card hover lift ---- */
.work-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 69, 64, 0.15);
}

/* ---- Statistics counter icon color ---- */
.counter-card .icon i {
  color: var(--theme-color, #85BF18);
}

@media (max-width: 991px) {
  html:not(.no-js) [data-aos][data-aos="fade-up"] {
    transform: translate3d(0, 28px, 0);
  }

  html:not(.no-js) [data-aos][data-aos="fade-down"] {
    transform: translate3d(0, -28px, 0);
  }

  html:not(.no-js) [data-aos][data-aos="fade-left"] {
    transform: translate3d(28px, 0, 0);
  }

  html:not(.no-js) [data-aos][data-aos="fade-right"] {
    transform: translate3d(-28px, 0, 0);
  }

  html:not(.no-js) [data-aos][data-aos="fade-up-left"] {
    transform: translate3d(28px, 28px, 0);
  }

  html:not(.no-js) [data-aos][data-aos="fade-up-right"] {
    transform: translate3d(-28px, 28px, 0);
  }

  html:not(.no-js) [data-aos][data-aos="fade-down-left"] {
    transform: translate3d(28px, -28px, 0);
  }

  html:not(.no-js) [data-aos][data-aos="fade-down-right"] {
    transform: translate3d(-28px, -28px, 0);
  }

  html:not(.no-js) [data-aos][data-aos="zoom-in"] {
    transform: scale(0.94);
  }

  html:not(.no-js) [data-aos][data-aos="zoom-out"] {
    transform: scale(1.06);
  }

  .news-letter .section-top-12 .common-title h2 {
    font-size: 3rem !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
}

@media (max-width: 767px) {
  .off-canvas-menubar .off-canvas-head {
    padding-top: 48px;
  }

  section.about-us-section {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
  }

  .about-us-section .common-title h2 {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
  }

  .about-us-section .common-subtitle span,
  .about-us-section .tab-content p {
    font-size: 1.1rem !important;
    line-height: 1.55 !important;
  }

  .testimonial-section-3 .major-partners.style-3 {
    margin-bottom: 0;
  }

  .testimonial-section-3 .major-partners + .major-partners {
    padding-top: 48px !important;
  }

  .major-partners .partners-title {
    gap: 10px;
  }

  .major-partners .partners-title h3 {
    width: auto;
    flex: 0 0 auto;
    font-size: 22px;
    white-space: normal !important;
  }

  .major-partners .partners-title .line-right,
  .major-partners .partners-title .line {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .partner-marquee .partner-marquee-layout .partner-2 {
    width: 150px;
    margin-right: 16px;
  }

  .partner-marquee .partner-2 {
    height: 96px;
    padding: 16px;
  }

  .partner-marquee .partner-2 img {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
  }

  .testimonial-section-3 .row.p-t-60.p-b-60 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .partner-btn {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .testimonial-section-3 .section-top-10 h2,
  .testimonial-section-3 .section-top-10 p,
  .what-we-do-section-2 .we-do-card h5,
  .news-letter .section-top-12 h2 {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .testimonial-section-3 .section-top-10 p {
    max-width: 100%;
  }

  .news-letter {
    margin-bottom: 0;
    padding: 48px 16px 72px;
    border-radius: 0;
  }

  .news-letter-content {
    max-width: 100%;
  }

  .news-letter .section-top-12 {
    margin-bottom: 28px;
  }

  .news-letter .section-top-12 .common-title h2 {
    display: block !important;
    font-size: 2.5rem !important;
    line-height: 1.15 !important;
  }

  .news-letter .form-2 {
    width: 100%;
  }

  .news-letter .subscribe-row {
    gap: 14px;
  }

  .news-letter .subscribe-row .input-wrap {
    flex: 0 0 auto;
  }

  .news-letter-content .shape {
    display: none;
  }
}