/* Reset defaults */
body,
ul {
  margin: 0;
  padding: 0;
}

/* Base styles */
html,
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fff;
  overflow-x: hidden;
  /* 👈 this is the fix */
}

/* ============================================
   TOP NEWS BAR – Responsive & Cross-Browser
   ============================================ */

/* Container */
.top-news-bar {
    display: flex;
    width: 100%;
    max-height: 20px;
    height: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #005f73; /* Primary Deep Blue */
    background: transparent;
    user-select: none;
    overflow: hidden;
}

/* Left & Right Gradient Sections */
.top-news-bar .left-gradient,
.top-news-bar .right-gradient {
    flex: 0 0 15%;
    height: 20px;
}

.top-news-bar .left-gradient {
    background: linear-gradient(to right, #ee6c4d, transparent);
}

.top-news-bar .right-gradient {
    background: linear-gradient(to left, #ee6c4d, transparent);
}

/* Center News Container */
.top-news-bar .news-container {
    flex: 1 0 auto;
    height: 20px;
    background: #fff; /* Clean white */
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 0 12px; /* Extra padding to avoid clashing with separators */
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Vertical Line Separators */
.news-separator {
    width: 2px;
    height: 14px;
    background-color: #ee6c4d; /* Accent coral */
    align-self: center;
}

.news-separator.left-sep {
    margin-right: 8px;
}

.news-separator.right-sep {
    margin-left: 8px;
}

/* News Ticker Animation */
.news-ticker {
    color: red;
    white-space: nowrap;
    display: inline-block;
    padding-right: 100%; /* Space for infinite loop */
    animation: scrollLeft 15s linear infinite;
}

/* Keyframes for Smooth Continuous Scroll */
@keyframes scrollLeft {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* ============================================
   RESPONSIVE FIXES
   ============================================ */
@media (max-width: 768px) {
    .top-news-bar {
        font-size: 0.7rem;
    }
    .top-news-bar .left-gradient,
    .top-news-bar .right-gradient {
        flex: 0 0 8%; /* Reduce gradient width for narrow screens */
    }
    .top-news-bar .news-container {
        padding: 0 8px;
    }
    .news-ticker {
        animation-duration: 12s; /* Faster scroll on smaller screens */
    }
}

@media (max-width: 480px) {
    .top-news-bar {
        font-size: 0.65rem;
    }
    .top-news-bar .left-gradient,
    .top-news-bar .right-gradient {
        display: none; /* Hide gradients on very small screens */
    }
    .top-news-bar .news-container {
        flex: 1;
        padding: 0 6px;
    }
}


/* =========================
   HERO SECTION
========================= */
.hero {
    height: 100svh;              /* Exactly one viewport height */
                /* No vertical padding to avoid overflow */
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;      /* Include padding in height calculation */
}

.hero__content {
    display: flex;
    width: 100%;                   /* Fluid width */
    max-width: 85rem;              /* ~1200px cap for readability */
    gap: 4%;                       /* Fluid gap between text & image */
    align-items: center;
    animation: fadeInUp 1s ease forwards;
    opacity: 0;                    /* Start hidden for fade-in */
}

.hero__text {
    flex: 1 1 50%;
}

.hero__headline {
    font-size: 2.5rem;
    color: #005f73;
    margin-bottom: 1.25rem;
    line-height: 1.2;
}

.hero__subheadline {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 2rem;
    font-weight: 500;
}

.hero__buttons {
    display: flex;
    gap: 1rem;
}

/* =========================
   BUTTON STYLES
========================= */
.btn {
    cursor: pointer;
    border-radius: 30px;
    padding: 0.75rem 1.875rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    user-select: none;
}

.btn-primary {
    background-color: #ee6c4d;
    color: #fff;
    animation: pulse 2.5s infinite;
    box-shadow: 0 0 15px rgba(238, 108, 77, 0.6);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #d04e39;
    box-shadow: 0 0 20px rgba(208, 78, 57, 0.8);
    transform: scale(1.05);
    outline: none;
}

.btn-secondary {
    background-color: #fff;
    color: #005f73;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #005f73;
    color: #fff;
    box-shadow: 0 0 12px rgba(0, 95, 115, 0.7);
    transform: scale(1.05);
    outline: none;
}

/* =========================
   HERO IMAGE / CAROUSEL
========================= */
.hero__image {
    flex: 1 1 80%;
    max-width: 50%;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    animation: fadeInRight 1.2s ease forwards;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-wrapper {
    width: 100%;
    margin: 0;
    padding: 0%;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-track img {
    width: 100%;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 12px;
}

.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.carousel-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.carousel-dots .dot.active {
    background-color: #333;
}

/* =========================
   ANIMATIONS
========================= */
@keyframes fadeInUp {
    0%   { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
    0%   { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(238,108,77,0.6); }
    50%      { box-shadow: 0 0 25px rgba(238,108,77,0.9); }
}
@keyframes scrollLeft {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@media (max-width: 900px) {
    .hero {
        align-items: flex-start; /* Push content to the top */
        padding-top: 2rem;       /* Add breathing room from the top */
    }
    .hero__content {
        flex-direction: column;
        max-width: 90%;
        gap: 2rem;
        margin: 0;
    }
    .hero__image {
        max-width: 100%;
        padding: 0;
    }
    .hero__text {
        max-width: 100%;
        text-align: center;
    }
    .hero__headline {
        font-size: 2rem;
    }
    .hero__subheadline {
        font-size: 1.1rem;
    }
    .hero__buttons {
        justify-content: center;
    }
}


/* =========================
   SERVICES SPLIT SECTION
========================= */
.services-split {
  max-width: 90%;
  margin: 0 auto 80px;
  padding: 0 20px;
  box-sizing: border-box;
}

.services-split .section-title {
  font-size: 2.25rem;
  color: #005f73;
  text-align: center;
  margin-bottom: 40px;
}

/* Main container flex */
.services-split__container {
  display: flex;
  gap: 40px;
  min-height: 400px;
  flex-wrap: wrap; /* prevents overflow on smaller desktops */
}

/* =========================
   LEFT LIST
========================= */
.services-list {
  flex: 1;
  max-width: 400px;
  overflow-y: auto;
  border-radius: 12px;
  background: #fff;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: #ee6c4d transparent;
}

.services-list::-webkit-scrollbar {
  width: 8px;
}

.services-list::-webkit-scrollbar-thumb {
  background-color: #ee6c4d;
  border-radius: 4px;
}

/* Service item buttons */
.service-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background: transparent;
  border: none;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  color: #005f73;
  cursor: pointer;
  user-select: none;
  text-align: left;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  outline-offset: 3px;
  border-left: 4px solid transparent;
  background-clip: padding-box;
}

.service-thumb {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  background-color: #e0f2f1;
  box-shadow: 0 4px 10px rgba(0, 95, 115, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #005f73;
  flex-shrink: 0;
}

/* Icons */
.education-icon::before { content: "\1F393"; }
.healthcare-icon::before { content: "\2695"; }
.awareness-icon::before { content: "\1F4E2"; }
.family-icon::before { content: "\1F46A"; }

/* Hover & active states */
.service-item:hover,
.service-item:focus {
  background-color: #fbeaea;
  box-shadow: inset 0 0 0 1.5px #ee6c4d;
  outline: none;
}

.service-item.active {
  background-color: #ee6c4d;
  color: white;
  border-left-color: #ee6c4d;
  box-shadow: 0 4px 15px rgba(238, 108, 77, 0.4);
}

.service-item.active .service-thumb {
  background-color: #ffffff;
  color: #ee6c4d;
  box-shadow: 0 0 15px rgba(238, 108, 77, 0.6);
}

/* =========================
   RIGHT DETAIL PANEL
========================= */
.service-detail {
  flex: 2;
  background: #fff;
  border-radius: 12px;
  padding: 30px 40px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: fadeInUp 0.6s ease forwards;
  box-sizing: border-box;
}

.service-detail__image img {
  width: 100%;
  max-height: 250px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 25px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.service-detail__title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #005f73;
  margin-bottom: 16px;
}

.service-detail__description {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #444;
  max-height: 3.3em;
  overflow-y: auto;
  padding-right: 10px;

  scrollbar-width: thin;
  scrollbar-color: #ee6c4d transparent;
}

.service-detail__description::-webkit-scrollbar {
  width: 6px;
}

.service-detail__description::-webkit-scrollbar-thumb {
  background-color: #ee6c4d;
  border-radius: 4px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .services-split__container {
    flex-direction: column;
    gap: 20px;
  }

  .services-list {
    max-width: 100%;
    max-height: 240px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    padding: 10px;
  }

  .services-list::-webkit-scrollbar {
    height: 8px;
    width: auto;
  }

  .service-item {
    flex: 0 0 auto;
    border-left: none;
    border-bottom: 4px solid transparent;
    padding: 10px 20px;
    font-size: 0.95rem;
  }

  .service-item.active {
    border-bottom-color: #ee6c4d;
    box-shadow: none;
  }

  .service-detail {
    max-width: 100%;
    padding: 20px;
  }
}

/* =========================
   TESTIMONIALS SECTION
========================= */

.testimonials {
  background: linear-gradient(135deg, #fef9f4 0%, #f0f2f0 100%);
  padding: 20px 20px 80px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.testimonials .section-title {
  font-size: 2.25rem;
  color: #005f73;
  text-align: center;
  margin-bottom: 10px;
}

/* Container for nav positioning */
.testimonial-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Carousel */
.testimonial-carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  width: 100%;
  max-width: 1200px;
  height: 380px;
  align-items: center;
  gap: 40px;
  scroll-snap-type: x mandatory;
  box-sizing: border-box;

  /* Hide scrollbars (cross-browser) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.testimonial-carousel::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Cards */
.testimonial-card {
  flex: 0 0 500px;
  max-width: 500px;
  height: 320px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  padding: 30px 25px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.5;
  transform: scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
  user-select: none;
  scroll-snap-align: center;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.testimonial-card.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Photo */
.testimonial-photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(238, 108, 77, 0.6);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text */
blockquote {
  font-style: italic;
  color: #444;
  font-size: 1.1rem;
  margin: 0 0 20px;
  max-width: 550px;
  line-height: 1.5;
  text-align: center;
  word-wrap: break-word;
}

cite {
  font-weight: 600;
  color: #ee6c4d;
  font-size: 1rem;
}

/* Navigation buttons */
.testimonial-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none; /* so carousel scroll works */
}

.testimonial-nav .prev,
.testimonial-nav .next {
  position: absolute;
  background-color: #005f73;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 95, 115, 0.7);
  transition: background-color 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto; /* clickable */
  z-index: 10;
}

.testimonial-nav .prev {
  left: 10px;
}

.testimonial-nav .next {
  right: 10px;
}

.testimonial-nav button:hover,
.testimonial-nav button:focus {
  background-color: #ee6c4d;
  outline: none;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .testimonial-carousel {
    height: auto;
    padding-bottom: 10px;
    gap: 20px;
  }

  .testimonial-card {
    flex: 0 0 85vw;
    max-width: 85vw;
    height: auto;
    padding: 25px 20px 30px;
  }

  blockquote {
    max-width: 90vw;
  }

  .testimonial-nav .prev {
    left: 5px;
  }

  .testimonial-nav .next {
    right: 5px;
  }
}

/* =========================
   CTA SECTION - FULL HEIGHT RESPONSIVE
========================= */
.cta {
  background: linear-gradient(135deg, #ee6c4dcc 0%, #005f7380 100%);
  min-height: 100vh;        /* Full viewport height */
  min-height: 100svh;       /* Mobile safe viewport height */
  width: 100%;
  box-sizing: border-box;
  padding: 5% 4%;           /* Scales with container */
  color: #fff;

  display: flex;            /* Center content vertically & horizontally */
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* =========================
   CONTAINER
========================= */
.cta__container {
  width: 100%;
  max-width: 68.75rem;      /* 1100px cap */
  margin: 0 auto;
}

/* =========================
   CONTENT
========================= */
.cta__content {
  max-width: 43.75rem; /* 700px cap for large screens */
  width: 90%;          /* fluid inside container */
  margin: 0 auto;
  animation: fadeInUp 1s ease forwards;
  opacity: 0;
  position: relative;
  z-index: 5; /* ensure over background visuals */
}

/* =========================
   TYPOGRAPHY
========================= */
.cta__headline {
  font-size: 2.5rem;               /* scalable text */
  margin-bottom: 1.25rem;          /* ~20px */
  font-weight: 700;
  text-shadow: 0.0625rem 0.0625rem 0.25rem rgba(0, 0, 0, 0.5); /* px for sharp shadow */
}

.cta__text {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;           /* ~40px */
  line-height: 1.5;
  text-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0,0,0,0.4);
}

/* =========================
   BUTTONS LAYOUT
========================= */
.cta__buttons {
  display: flex;
  gap: 2%; /* fluid gap between buttons */
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 5; /* on top of background media */
}

/* =========================
   BASE BUTTON STYLE
========================= */
.cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;                  /* 10px */
  font-weight: 600;
  padding: 0.875rem 1.625rem;     /* 14px 26px */
  font-size: 1rem;
  border: none;
  border-radius: 30px;            /* px for consistent corners */
  cursor: pointer;
  transition: background-color 0.3s ease, 
              box-shadow 0.3s ease, 
              transform 0.2s ease;
  user-select: none;
  text-decoration: none;
}

/* CTA Section */

.cta {
  background: linear-gradient(135deg, #ee6c4dcc 0%, #005f7380 100%);
  padding: 60px 20px;
  color: #fff;
  width: 100vw;
  box-sizing: border-box;
  max-height : 50vh;
}

.cta__container {
  max-width: 1100px;
  margin: 0 auto;
}

.cta__content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  animation: fadeInUp 1s ease forwards;
  opacity: 0;
}

/* Headline */
.cta__headline {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Paragraph */
.cta__text {
  font-size: 1.2rem;
  margin-bottom: 40px;
  line-height: 1.5;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Buttons container */
.cta__buttons {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Base button styles */
.cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  padding: 14px 26px;
  font-size: 1rem;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  user-select: none;
  text-decoration: none;
}

/* Primary button */
.btn-primary {
  background-color: #ff6f4a;
  color: white;
  box-shadow: 0 0 18px rgba(238, 108, 77, 0.75);
  animation: pulse 2.5s infinite;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #e6603b;
  box-shadow: 0 0 25px rgba(230, 96, 59, 0.9);
  transform: scale(1.05);
  outline: none;
}

/* Secondary button */
.btn-secondary {
  background-color: #ff6f4a;
  color: white;
  box-shadow: 0 0 18px rgba(238, 108, 77, 0.75);
  animation: pulse 2.5s infinite;
  background-color: #fff;
  color: #005f73;
  box-shadow: 0 0 12px rgba(0, 95, 115, 0.4);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #e6603b;
  box-shadow: 0 0 25px rgba(230, 96, 59, 0.9);
  transform: scale(1.05);
  outline: none;
}

/* Outline button */
.btn-outline {
  background-color: #ff6f4a;
  color: white;
  box-shadow: 0 0 18px rgba(238, 108, 77, 0.75);
  animation: pulse 2.5s infinite;
  background-color: #fff;
  color: #005f73;
  box-shadow: 0 0 12px rgba(0, 95, 115, 0.4);
}

.btn-outline:hover,
.btn-outline:focus {
  background-color: #e6603b;
  box-shadow: 0 0 25px rgba(230, 96, 59, 0.9);
  transform: scale(1.05);
  outline: none;
}

/* Button icon */
.btn-icon {
  flex-shrink: 0;
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
}

/* Animation pulse for primary button */
@keyframes pulse {

  0%,
  100% {
    box-shadow: 0 0 18px rgba(238, 108, 77, 0.75);
  }

  50% {
    box-shadow: 0 0 28px rgba(238, 108, 77, 1);
  }
}

/* Fade in up (reuse in all animated sections) */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 700px) {
  .cta__buttons {
    flex-direction: row;
    gap: 16px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .cta__headline {
    font-size: 2rem;
  }

  .cta__text {
    font-size: 1rem;
  }
}
/* =========================
   TESTIMONIAL NAVIGATION
========================= */
.testimonial-container {
  position: relative; /* anchor nav buttons */
  
}

.testimonial-nav {
  position: absolute;
  top: 50%; /* vertically center relative to container */
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 50; /* above cards but below any top overlays */
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* nav container doesn't block clicks */
}

.testimonial-nav button {
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-radius: 50%;
  pointer-events: auto; /* make buttons clickable */
  z-index: 999; /* above pop animations */
  transition: opacity 0.3s ease;
}

/* Show/hide when no more slides */
.testimonial-nav button[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* Mobile positioning: half inside / half outside */
@media (max-width: 700px) {
  .testimonial-nav .prev { transform: translate(-50%, -50%); }
  .testimonial-nav .next { transform: translate(50%, -50%); }
}



/* Partners & Collaborators Section */

.partners {
  padding: 60px 20px 100px;
  background: #f8fafb;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 100px;
}

.partners .section-title {
  font-size: 2.25rem;
  color: #005f73;
  font-weight: 700;
  margin-bottom: 50px;
}

/* Grid for partner logos */
.partners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 40px;
  align-items: center;
  justify-items: center;
}

/* Individual partner logo links */
.partner-logo {
  display: inline-block;
  width: 140px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 95, 115, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-logo img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  vertical-align: middle;
  user-select: none;
}

/* Hover and focus effects */
.partner-logo:hover,
.partner-logo:focus {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 95, 115, 0.15);
  outline: none;
}

/* Responsive */
@media (max-width: 700px) {
  .partners__grid {
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .partner-logo {
    width: 120px;
    padding: 16px;
  }

  .partner-logo img {
    max-height: 60px;
  }
}

/* =========================
   IMPACT STORIES / CASE STUDIES SECTION
========================= */
.impact-stories {
  padding: 2% 0 8%;          /* fluid top & bottom space */
  background: #ffffff;
  max-width: 68.75rem;       /* 1100px cap */
  margin: 0 auto;            /* centered */
  text-align: center;
}

.impact-stories .section-title {
  font-size: 2.25rem;        /* scalable text */
  font-weight: 700;
  color: #005f73;
  margin-bottom: 1.875rem;   /* ~30px */
}

/* =========================
   STORIES CONTAINER
========================= */
.stories__container {
  display: flex;
  overflow-x: auto;          /* horizontal scroll on mobile */
  gap: 3%;                   /* fluid gap */
  padding-bottom: 0.625rem;  /* 10px */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* =========================
   STORY CARD
========================= */
.story-card {
  background-color: #f0f7f9;
  border-radius: 14px;       /* px for precise shape */
  box-shadow: 0 0.625rem 1.875rem rgba(0, 95, 115, 0.08); /* 10px 30px */
  width: 20.625rem;          /* 330px in rem converted */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  text-align: left;
  outline-offset: 0.1875rem; /* 3px */
  flex: 0 0 20.625rem;       /* fixed card width for horizontal scroll */
  scroll-snap-align: start;
}

.story-card:hover,
.story-card:focus {
  box-shadow: 0 1.25rem 2.5rem rgba(0, 95, 115, 0.15); /* 20px 40px */
  transform: translateY(-0.5rem); /* 8px */
  outline: none;
}

/* =========================
   STORY IMAGE
========================= */
.story-image {
  flex-shrink: 0;
  height: 11.25rem;          /* 180px */
  overflow: hidden;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.story-card:hover .story-image img,
.story-card:focus .story-image img {
  transform: scale(1.05);
}

/* =========================
   STORY CONTENT
========================= */
.story-content {
  padding: 1.25rem 1.5625rem 1.875rem; /* 20px 25px 30px */
}

.story-content h3 {
  font-size: 1.3rem;
  color: #005f73;
  margin-bottom: 0.75rem;     /* 12px */
  font-weight: 700;
}

.story-content p {
  font-size: 1rem;
  color: #333333;
  margin-bottom: 1.25rem;     /* 20px */
  line-height: 1.45;
}

.story-content .btn {
  align-self: flex-start;
  padding: 0.625rem 1.5rem;   /* 10px 24px */
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 56.25rem) { /* 900px */
  .stories__container {
    justify-content: center; /* center cards on tablet */
    gap: 5%;
  }
  .story-card {
    width: 90%;
    max-width: 25rem;          /* 400px */
    flex: 0 0 90%; 
  }
}



/* =========================
   EVENTS & CAMPAIGNS SECTION
========================= */
.events-campaigns {
  background: #eef8f6;               /* Light mint background */
  padding: 5% 4%;                     /* Fluid spacing */
  text-align: center;
}

.events-campaigns .section-title {
  font-size: 2.5rem;                  /* Scalable typography */
  font-weight: 700;
  margin-bottom: 3.125rem;            /* 50px */
  color: #003d4d;                     /* Dark teal heading */
}

/* =========================
   CONTAINER
========================= */
.events-container {
  display: flex;
  flex-wrap: nowrap;                  /* Keep cards in one row */
  gap: 2%;                             /* Fluid horizontal space */
  overflow-x: auto;                    /* Horizontal scroll */
  padding: 2%;                         /* Internal padding */
  scroll-behavior: smooth;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;   /* Smooth iOS scroll */
}

.events-container::-webkit-scrollbar {
  height: 0.5rem;                      /* 8px */
}
.events-container::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* =========================
   EVENT CARD
========================= */
.event-card {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  width: 40%;                           /* Fluid % so 2 fit on desktop */
  flex: 0 0 auto;
  border-radius: 12px;
  box-shadow: 0 0.625rem 1.5625rem rgba(0,0,0,0.1); /* 10px 25px */
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.event-card:hover,
.event-card:focus {
  box-shadow: 0 0.9375rem 2.1875rem rgba(0,0,0,0.15); /* 15px 35px */
  transform: translateY(-0.3125rem); /* 5px */
}

/* Left image */
.event-image {
  flex: 0 0 12.5rem;                    /* 200px fixed for image area */
  height: 100%;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   EVENT CONTENT
========================= */
.event-content {
  padding: 1.25rem;                     /* 20px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;                         /* 10px */
  text-align: left;
}

.event-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #003d4d;
  margin: 0;
}

.event-content p {
  font-size: 0.95rem;
  color: #333;
  margin: 0;
  line-height: 1.5;
}

.event-meta {
  font-size: 0.85rem;
  color: #555;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem; /* 3px */
}

/* =========================
   BUTTON
========================= */
.event-content .btn {
  align-self: flex-start;
  margin-top: 0.625rem;                  /* 10px */
  padding: 0.625rem 1.25rem;             /* 10px 20px */
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  background-color: #ee6c4d;             /* Coral accent */
  color: white;
  box-shadow: 0 0 0.625rem rgba(238, 108, 77, 0.5);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.event-content .btn:hover,
.event-content .btn:focus {
  background-color: #d04e39;
  transform: scale(1.05);
}

/* =========================
   RESPONSIVE
========================= */
/* =========================
   EVENTS & CAMPAIGNS SECTION
========================= */
.events-campaigns {
  background: #eef8f6;               /* Light mint background */
  padding: 5% 4%;                     /* Fluid spacing */
  text-align: center;
}

.events-campaigns .section-title {
  font-size: 2.5rem;                  /* Scalable typography */
  font-weight: 700;
  margin-bottom: 3.125rem;            /* 50px */
  color: #003d4d;                     /* Dark teal heading */
}

/* =========================
   CONTAINER
========================= */
.events-container {
  display: flex;
  flex-wrap: nowrap;                  /* Keep cards in one row */
  gap: 2%;                             /* Fluid horizontal space */
  overflow-x: auto;                    /* Horizontal scroll */
  padding: 2%;                         /* Internal padding */
  scroll-behavior: smooth;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;   /* Smooth iOS scroll */
}

.events-container::-webkit-scrollbar {
  height: 0.5rem;                      /* 8px */
}
.events-container::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* =========================
   EVENT CARD
========================= */
.event-card {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  width: 40%;                           /* Fluid % so 2 fit on desktop */
  flex: 0 0 auto;
  border-radius: 12px;
  box-shadow: 0 0.625rem 1.5625rem rgba(0,0,0,0.1); /* 10px 25px */
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.event-card:hover,
.event-card:focus {
  box-shadow: 0 0.9375rem 2.1875rem rgba(0,0,0,0.15); /* 15px 35px */
  transform: translateY(-0.3125rem); /* 5px */
}

/* Left image */
.event-image {
  flex: 0 0 12.5rem;                    /* 200px fixed for image area */
  height: 100%;
}

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   EVENT CONTENT
========================= */
.event-content {
  padding: 1.25rem;                     /* 20px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;                         /* 10px */
  text-align: left;
}

.event-content h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #003d4d;
  margin: 0;
}

.event-content p {
  font-size: 0.95rem;
  color: #333;
  margin: 0;
  line-height: 1.5;
}

.event-meta {
  font-size: 0.85rem;
  color: #555;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem; /* 3px */
}

/* =========================
   BUTTON
========================= */
.event-content .btn {
  align-self: flex-start;
  margin-top: 0.625rem;                  /* 10px */
  padding: 0.625rem 1.25rem;             /* 10px 20px */
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  background-color: #ee6c4d;             /* Coral accent */
  color: white;
  box-shadow: 0 0 0.625rem rgba(238, 108, 77, 0.5);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.event-content .btn:hover,
.event-content .btn:focus {
  background-color: #d04e39;
  transform: scale(1.05);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 600px) {
  .events-container {
    gap: 5vw;                     /* Slightly tighter gaps */
    padding: 3vw 2vw;
  }
  .event-card {
    width: 80vw;                  /* Reduced card width for mobile */
    min-width: 70vw;
    max-width: 85vw;
    flex: 0 0 80vw;
    border-radius: 10px;
    flex-direction: column; 
  }
  .event-image {
    flex: 0 0 32vw;               /* Make image area smaller */
  }
  .event-content {
    padding: 0.75rem 0.8rem;      /* Less padding for content */
    gap: 0.4rem;
  }
  .event-content h3 {
    font-size: 1rem;              /* Smaller title */
  }
  .event-content p {
    font-size: 0.87rem;           /* Smaller description */
    line-height: 1.35;
    margin-bottom: 0.5rem;
  }
  .event-meta {
    font-size: 0.78rem;
    gap: 2px;
  }

.event-content .btn {
  font-size: 0.85rem;
  margin-top: 20px;
  padding: 0.75rem 0rem;
  text-align: center;
}

  .event-card {
    max-height: 78vh;             /* Cap card height on mobile */
    overflow-y: auto;
  }
}


.impact-section {
  background: rgba(0, 95, 115, 0.6); /* same color with transparency */
  padding: 56px 0;
  text-align: center;
}


.impact-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.impact-card {
  flex: 0 1 220px;
  display: flex;
  flex-direction: column;
  background: #0a7085; /* slightly lighter */
  align-items: center;
  min-width: 180px;
  color: #ffffff;
  outline: none;
  border-radius: 16px; /* curved corners */
  padding: 20px; /* optional for spacing */
}


.impact-icon svg {
  width: 48px;
  height: 48px;
  fill: #fff;
  margin-bottom: 16px;
}

.impact-number {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.impact-label {
  font-size: 1.07rem;
  opacity: 0.9;
  font-family: inherit;
}

/* Responsive (stack on small screens) */
@media (max-width: 700px) {
  .impact-grid {
    flex-direction: column;
    gap: 28px;
    align-items: center;
  }

  .impact-card {
    width: 90vw;
  }
}