/* PIOUS Foundation assets/css/fixes.css */


/* ============================================================
   GLOBAL SAFETY
   ============================================================ */

html, body {
  overflow-x: hidden !important;
}

img {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   TEAM CARDS
   ============================================================ */

.team-one__content {
  background-color: var(--color-primary) !important;
}

.team-one__name a {
  color: var(--color-white) !important;
}

.team-one__name a:hover {
  color: var(--color-accent) !important;
}

.team-one__sub-title {
  color: var(--color-accent) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
}

.team-one__social {
  background-color: var(--color-accent) !important;
}

.team-one__social a {
  color: var(--color-primary) !important;
}

.team-one__social a:hover {
  color: var(--color-white) !important;
}


/* ============================================================
   FEATURE CARDS CONTRAST
   ============================================================ */

.feature-one__single .feature-one__top-icon {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

.feature-one__single .feature-one__title a,
.feature-one__single .feature-one__text {
  color: rgba(255, 255, 255, 0.90) !important;
}

.feature-one__single--two .feature-one__title a,
.feature-one__single--two .feature-one__text {
  color: var(--color-accent) !important;
}

.feature-four__single .feature-four__text {
  color: rgba(255, 255, 255, 0.80) !important;
}


/* ============================================================
   COUNTER SECTION
   ============================================================ */

.counter-one__count-box .odometer,
.counter-one__text {
  color: var(--color-white) !important;
}

.counter-one__letter {
  color: var(--color-accent) !important;
}


/* ============================================================
   CTA / VOLUNTEER SECTION
   ============================================================ */

.become-volunteer-one__title {
  color: #fff;
  text-shadow: 2px 2px 5px #000;
}

.become-volunteer-one p {
  color: #fff;
  font-size: 20px;
  text-shadow: 2px 2px #000;
}


/* ============================================================
   SCRIPTURE / QUOTE SECTION
   ============================================================ */

.scripture-section .scripture-section__quote {
  color: var(--color-primary) !important;
  font-style: italic;
  font-size: var(--text-2xl) !important;
  line-height: 1.5 !important;
}

.scripture-section .scripture-section__ref {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}


/* ============================================================
   PAGE HEADER / BREADCRUMBS
   ============================================================ */

.page-header__inner h2 {
  color: var(--color-white) !important;
}

.thm-breadcrumb li,
.thm-breadcrumb li a {
  color: rgba(255, 255, 255, 0.80) !important;
}

.thm-breadcrumb li.active {
  color: var(--color-accent) !important;
}


/* ============================================================
   TESTIMONIAL SECTION (gold bg)
   ============================================================ */

.testimonial-two {
  background-color: var(--color-accent) !important;
}

.testimonial-two .section-title__tagline,
.testimonial-two .section-title__title,
.testimonial-two__text,
.testimonial-two__client-name {
  color: var(--color-primary) !important;
}


/* ============================================================
   DARK/PRIMARY BACKGROUND SECTIONS — generic sweep
   ============================================================ */

.bg-primary .section-title__tagline,
.bg-dark .section-title__tagline {
  color: var(--color-accent) !important;
}

.bg-primary .section-title__title,
.bg-dark .section-title__title {
  color: var(--color-white) !important;
}

.bg-primary .section-title__text,
.bg-dark .section-title__text {
  color: rgba(255, 255, 255, 0.80) !important;
}


/* ============================================================
   DONATION DETAILS
   ============================================================ */

.donation-details__donate.bg-primary {
  background-color: var(--color-primary) !important;
}

.donation-details__donate.bg-primary h3,
.donation-details__donate.bg-primary p,
.donation-details__donate.bg-primary li {
  color: var(--color-white) !important;
}

.donation-details__donate.bg-primary .icon span {
  color: var(--color-accent) !important;
}


/* ============================================================
   CAUSES / PROGRESS
   ============================================================ */

.causes-one__progress-bar {
  background-color: var(--color-accent) !important;
}


/* ============================================================
   EVENTS DATE BADGE
   ============================================================ */

.events-one__date {
  background-color: var(--color-accent) !important;
}

.events-one__date h4,
.events-one__date span {
  color: var(--color-primary) !important;
}


/* ============================================================
   NEWS / BLOG CARDS
   ============================================================ */

.news-one__title a {
  color: var(--color-heading) !important;
}

.news-one__title a:hover {
  color: var(--color-accent) !important;
}

.news-one__meta a,
.news-one__meta span {
  color: var(--color-body) !important;
}

.news-one__meta a:hover {
  color: var(--color-accent) !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar__title {
  color: var(--color-heading) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

.sidebar-tags-list a {
  background-color: var(--color-light) !important;
  color: var(--color-heading) !important;
  border: 1px solid var(--color-border) !important;
}

.sidebar-tags-list a:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  border-color: var(--color-accent) !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-dark-footer) !important;
}

.footer-widget__title {
  color: var(--color-white) !important;
  font-family: var(--font-heading) !important;
}

.footer-widget__about-text,
.footer-widget__links-list li a,
.footer-widget__contact-list li .content p,
.footer-widget__contact-list li .content a {
  color: rgba(255, 255, 255, 0.70) !important;
}

.footer-widget__links-list li a:hover,
.footer-widget__contact-list li .content a:hover {
  color: var(--color-accent) !important;
}

.footer-widget__contact-list li .icon span {
  color: var(--color-accent) !important;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.site-footer__bottom p,
.site-footer__bottom-text {
  color: rgba(255, 255, 255, 0.60) !important;
}

.site-footer__bottom-menu li a {
  color: rgba(255, 255, 255, 0.60) !important;
}

.site-footer__bottom-menu li a:hover {
  color: var(--color-accent) !important;
}


/* ============================================================
   FORMS — global
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
  font-family: var(--font-body) !important;
  color: var(--color-heading) !important;
  border-color: var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(2, 1, 73, 0.10) !important;
}

::placeholder {
  color: var(--color-body) !important;
  opacity: 0.6 !important;
}


/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.faq-one__single .accrodion-title h4 {
  color: var(--color-heading) !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

.faq-one__single.active-item .accrodion-title h4 {
  color: var(--color-primary) !important;
}

.faq-one__single .accrodion-content p {
  color: var(--color-body) !important;
}


/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
  .section-padding-top    { padding-top: 60px !important; }
  .section-padding-bottom { padding-bottom: 60px !important; }

  .section-title__title {
    font-size: clamp(1.5rem, 5vw, 2.25rem) !important;
    line-height: 1.3 !important;
  }

  h1 { font-size: clamp(1.75rem, 6vw, 2.75rem) !important; }
  h2 { font-size: clamp(1.5rem, 5vw, 2.25rem) !important; }
  h3 { font-size: clamp(1.25rem, 4.5vw, 1.875rem) !important; }

  .page-header {
    padding: 60px 0 !important;
  }
}

.main-slider__nav .swiper-button-prev, .main-slider__nav .swiper-button-next {
    min-height: 48px !important;
}

.main-slider .swiper-slide::before {
    background: linear-gradient(100deg, rgb(2 1 73 / 62%) 0%, rgb(2 1 73 / 31%) 55%, rgba(2, 1, 73, 0.25) 100%) !important;
}
.become-volunteer-one__title {
    color: #fff;
    text-shadow: 2px 2px 5px #000;
}