:root {
  --base-color: #1E293B;
}

.base-img {
  -webkit-filter: brightness(0) saturate(100%) invert(42%) sepia(55%) saturate(2000%) hue-rotate(315deg) brightness(95%) contrast(95%);
          filter: brightness(0) saturate(100%) invert(42%) sepia(55%) saturate(2000%) hue-rotate(315deg) brightness(95%) contrast(95%);
}

/* Topbar + Header stacking: topbar is absolute, header needs offset */
.topbar--secondary {
  z-index: 100;
}
.header-secondary {
  top: 50px !important;
}

/* Nav text: white on dark background */
.header-secondary .navbar__menu .navbar__list .navbar__item > a,
.header-secondary .navbar__menu .navbar__list .navbar__item > .navbar__dropdown-label {
  color: #ffffff !important;
}

/* Contact section in header - white text */
.contact-btn .contact-content p,
.contact-btn .contact-content a {
  color: #ffffff !important;
}
.contact-btn .contact-icon i {
  color: #ffffff !important;
}

/* Fix: template media query sets nav to transparent at 1200-1400px */
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
  .header-secondary .navbar__menu-wrapper {
    background-color: var(--base-color) !important;
    border-radius: 60px !important;
  }
}

/* CTA buttons: vibrant pink that pops */
.btn--primary,
.donate-trigger {
  background-color: #E8447A !important;
  border-color: #E8447A !important;
  color: #ffffff !important;
}
.btn--primary:hover,
.donate-trigger:hover {
  background-color: #D6336C !important;
  border-color: #D6336C !important;
}
.btn--primary::before,
.btn--primary::after {
  background-color: #D6336C !important;
}

/* Tertiary button (outline style) */
.btn--tertiary {
  border-color: #ffffff !important;
  color: #ffffff !important;
}
.btn--tertiary:hover {
  background-color: #ffffff !important;
  color: #1E293B !important;
}

/* Topbar: dark bg for contrast */
.topbar--secondary .topbar__inner {
  background-color: #0F172A !important;
}
.topbar--secondary a,
.topbar--secondary p,
.topbar--secondary li {
  color: #F1F5F9 !important;
}

/* Page banner inner */
.banner-inner {
  padding: 160px 0 80px;
  background-color: #F1F5F9;
  background-size: cover;
  background-position: center;
  position: relative;
}
.banner-inner__content h2 {
  font-size: 42px;
  font-weight: 800;
  color: #1E293B;
}

/* Hero dark overlay for text readability */
.banner-two__slider-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
}
.banner-two__slider-content {
  position: relative;
  z-index: 2;
}
.banner-two__slider-content h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.banner-two__slider-content h1 span {
  color: #14B8A6 !important;
}
.banner-two__slider-content .sub-title {
  color: #E8447A !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Hero subtitle accent color */
.banner__content .subtitle {
  color: #14B8A6 !important;
}

/* Accent text (span in titles) */
.section__header .section-title span,
.banner__content-two .banner-title span {
  color: #E8447A !important;
}

/* ══════════════════════════════════════════
   RESPONSIVE — mobile only, does NOT affect desktop
   ══════════════════════════════════════════ */

/* Tablet and below: reduce section padding, hero gap */
@media only screen and (max-width: 1199.98px) {
  section {
    padding: 40px 0 !important;
  }
  .section__header {
    margin-bottom: 20px !important;
  }
  .banner-two .banner-two__slider-single {
    padding-top: 80px !important;
    min-height: 85vh !important;
  }
  .banner-two {
    margin-top: -1px !important;
    background: #ebebeb;
  }
}

/* Tablet and below: hide topbar, adjust header */
@media only screen and (max-width: 1199.98px) {
  .header-secondary {
    top: 0px !important;
    position: relative !important;
    padding: 12px 0;
  }
  .header-secondary .navbar-logo img {
    max-height: 50px;
  }
  .header-secondary .navbar__menu-wrapper {
    display: none !important;
  }
  .header-secondary .navbar__options {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .header-secondary .main-header__menu-box {
    padding: 0 !important;
  }
  .header-secondary .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .open-offcanvas-nav span {
    background-color: #1E293B !important;
  }
}

/* Small phones */
@media only screen and (max-width: 575.98px) {
  .header-secondary .navbar-logo img {
    max-height: 40px;
  }
  .banner-inner {
    padding: 100px 0 40px;
  }
  .banner-inner__content h2 {
    font-size: 28px;
  }
  /* Footer responsive */
  .footer-two .gutter-60 > [class*="col-"] {
    margin-bottom: 30px;
  }
}