html {
  scroll-behavior: smooth;
}

* {margin: 0;
   padding: 0;
   box-sizing: border-box;
}


:root {
  --primary-red: #FC4141;
  --primary-white: #F5F1EE;
  --green: #47AF8A;
  --yellow: #FED450;
  --blue: #2E91CF;
  --pink: #FE639B;
  --gray: #3D3D3D;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/INTER-VARIABLEFONT_OPSZ,WGHT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Antique';
    src: url('../fonts/ANTIQUE OLIVE NORD D REGULAR.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

button {
    cursor: pointer; 
}

hr{
    border: 1px solid white;
}

body{
    background-color:#F5F1EE;
    height: 100%;
    font-family: "Inter", sans-serif;
}


header{
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    z-index: 5;
    background-color: var(--primary-white);
    position: sticky;
    top: 0;
}


.logo {
    position: absolute;
    width: 114px;
    margin: 0px;
    margin-top: 15px;
    padding-left: 50px;
    z-index: 6
}

.navbar-item a{
    z-index: 7;
}

.hamburger-btn {
    display: none;
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 5;
    padding: 0;
}

.hamburger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--primary-red);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Animates into an X when the menu is open */
.hamburger-btn.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-btn.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


nav ul {
    list-style-type: none;
}
nav ul li {
    display: inline-flex;
    margin: 0.3em 1em;
}

.navbar-item a {
    font-family: "AntiqueOlive", sans-serif;
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: 16px;
   padding: 0 19.4px;
   padding-top: 40px;
   margin-bottom: 12px;
   cursor: pointer;
   text-decoration: none;
   list-style: none;
   color:#FC4141;
   transition: background-image 0.5s ease-in-out;
}

.donate-button {
    background-color: var(--green);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 18px 42px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.donate-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(71, 175, 138, 0.35);
}

nav ul li:first-child{
    margin-left: 190px;
}

.donate-button button{
    font-size: 16px;
}

.navbar-item.active, .navbar-item:hover {
   color: #FC4141; 
   text-decoration: underline;
   text-underline-offset: 8px;
   text-decoration-thickness: 4px
}

main{
    font-family: "Inter", sans-serif;
    padding-top: 34px;
}

main p{
    font-family: "Inter", sans-serif;
}

footer p{
    font-family: "Inter", sans-serif;
}

/* -----------------------------------------------------------------------------------MAIN HOME PAGE */

.main-sec{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: stretch;
    max-width: 100%;
    max-height: 634px;
    overflow: hidden;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-40%);
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

.banner-img {
    position: absolute;
    left: 25%;
    top: 60%;
    transform: translateY(-50%);
    width: 72%;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    animation: fadeIn 1.5s ease-in-out forwards;
}

.blurb-01-full{
    display: flex;
    width: 50%;
    padding-top: 5%;
    padding-bottom: 10%;
}

.blurb-01-content{
    width: 90%;
    position: relative;
    left: 15%;
    right: 50%;
    bottom: 50%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
}

.blurb-01-text h1{
    font-family: "Antique";
    line-height: 95%;
    font-size: 1.7em;
}


.blurb-01-text{
    font-size: 40px;
    color: #FC4141;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding-bottom: 10px;
    user-select: none;
}

.wipe-underline {
    position: relative;
    display: inline-block;
    margin-bottom: 4px;
}

.wipe-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; 
    height: 8px; 
    width: 0%;
    background-color: #FC4141;     
    animation: wipeIn 0.8s ease-out forwards;
    animation-delay: 0.3s; 
}

@keyframes wipeIn {
    to {
        width: 100%;
    }
}

.blurb-01-subtext{
    line-height: 130%;
}

.blurb-01-subtext p{
    font-family: "Inter", sans-serif;
    font-size: 16px;
    padding-bottom: 20px;
}

button{
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    background: none;
    border: none;
    color:var(--primary-white);
}

.blurb-01-button{
    background-color: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 15px;
    padding: 18px 42px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    float: right;
}

.blurb-01-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

#statistics{
    background-color: #FC4141;
    margin-top: 25px;
    padding-top: 25px;
    padding-bottom: 30px;
    opacity: 0;
    transform: translateY(30px);
}

.blurb-statistics{
    display: inline-flex;
    width: 100%;
    justify-content: center;
}

.divider{
    width: 2px;
    background-color: var(--primary-white);
    flex-shrink: 0;
    margin: 0px 20px;
    opacity: 0.5;
    border-radius: 50px;
    border: 2px solid white;
}

.statistics-text{
    display: flex;
    flex-direction: column;
    padding-right: 15px;
    color: #F5F1EE;
    width: 15%;
}

.statistics-text h1{
    font-weight: 800;
    font-size: 50px;
}

.statistics-text p{
    font-size: 16px;
}

.cite-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background-color: rgba(255,255,255,0.25);
    border: none;
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 3px;
    cursor: pointer;
    vertical-align: super;
    line-height: 1.6;
    font-family: inherit;
    transition: background-color 0.15s ease;
}

.cite-marker:hover,
.cite-marker:focus-visible,
.cite-marker.active {
    background-color: rgba(255,255,255,0.55);
    outline: none;
}

/* ---------------------------------- */
/* CITATION POPUP CARD */
/* Single shared element, repositioned via JS next to whichever
   marker triggered it — same pattern Wikipedia's reference
   tooltips use, rather than one popup per citation in the DOM. */
/* ---------------------------------- */
#citation-popup {
    position: fixed;
    z-index: 1000;
    max-width: 340px;
    background-color: var(--primary-white);
    color: #222;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    padding: 16px 18px;
    font-size: 13.5px;
    line-height: 1.55;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

#citation-popup.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#citation-popup .cite-title a {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 600;
}

#citation-popup .cite-title a:hover {
    text-decoration: underline;
}

#citation-popup .cite-publisher {
    font-style: italic;
}

#citation-popup .cite-meta {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
}

#citation-popup .cite-meta a {
    color: var(--primary-red);
    text-decoration: none;
}

#citation-popup .cite-meta a:hover {
    text-decoration: underline;
}

/* Small triangle pointer, flips depending on whether the popup
   is rendered above or below its marker */
#citation-popup::after {
    content: "";
    position: absolute;
    left: 20px;
    width: 12px;
    height: 12px;
    background-color: var(--primary-white);
    transform: rotate(45deg);
}

#citation-popup.pos-below::after {
    top: -6px;
    box-shadow: -2px -2px 3px rgba(0,0,0,0.04);
}

#citation-popup.pos-above::after {
    bottom: -6px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.04);
}

#mini-FAQs{
    background-color: #47AF8A;
    padding-top: 35px;
    padding-bottom: 66px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    opacity: 0;
    transform: translateY(60px);
}

#statistics.in-view,
#mini-FAQs.in-view {
    animation: fadeInUp 1s ease-out forwards;
}

#mini-FAQs h1{
    font-weight: 700;
    font-size: 50px;
    color: var(--primary-white);
}

.faq-sec{
    margin-top: 40px;
    display: inline-flex;
    justify-content: center;
}


.card {
  background-color: #F5F1EE;
  border-radius: 20px;
  padding: 30px;
  width: 250px;
  height: 400px;
  margin-right: 50px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-icon { order: 1; margin-bottom: 20px; width: 30px; }
.card-content { order: 2; flex-grow: 1; }

.arrow-link { 
  order: 3; 
  align-self: flex-end; 
  background-color: #F5F1EE; 
  color: #e54343;
  text-decoration: none;
  font-size: 44px;
  font-weight: bold;
}

.card:has(.arrow-link:hover) {
  transform: scale(1.05); 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
}

.card-content h2{
    font-family: "Inter", sans-serif;
    color: #FC4141;
    font-size: 32px;
    padding-bottom: 15px;
    }

.card-content p{
    color: #FC4141
}


#video-sec{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 50px;
    margin-left: 200px;
}

.video-caption{
    display: flex;
    flex-direction: column;
    width: 40%;
    padding-left: 20px;
}

.video-caption h1{
    font-family: "Antique";
    color: #FC4141;
    font-size: 45px;
    user-select: none;
}

.video-subcaption{
    padding-top: 15px;
    width: 90%;
    font-size: 20px;
}

.video{
    position: relative;
    max-width: 50%;
    height: 100%;
    z-index: 4;
    padding: 0%;
}

.video video{
    object-fit:cover;
    width: 72%;
    height: 72%;
}


#testimonials-sec{
    background-color: #FED450;
    color: #FC4141;
    margin-top: 50px;
    padding-top: 65px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    user-select: none;
}

#testimonials-sec h1{
    font-family: "Antique";
    font-size: 50px;
}

/* Container rules */
.scrolling-container {
  overflow: hidden;
  width: 100%;
  padding: 70px 0;
}

.scrolling-track {
  display: flex;
  width: max-content;
  /* animation is now set dynamically by JS once the real content width
     is measured — see the marquee script near the closing </body> tag */
}


.scrolling-group {
  display: flex;
  gap: 60px; 
  padding-right: 60px; 
}

.quote-card {
  display: flex;
  align-items: stretch;
  gap: 15px; 
}


.vertical-bar {
  width: 12px;
  background-color: #e54343; 
  flex-shrink: 0;
  /* no fixed height — stretches to match whatever height the
     wrapped quote text ends up taking, via align-items: stretch above */
}


.text-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  max-width: 320px;
  /* Flex items default to a min-width equal to their content's
     unwrapped intrinsic width, which silently defeats white-space:
     normal — this min-width: 0 is what actually lets the box
     "collapse" below that and wrap text within max-width instead */
  min-width: 0;
  padding-top: 15px;
}

.quote {
  font-size: 1.1rem;
  font-weight: 500;
  color: #c97913; 
  margin: 0;
  line-height: 1.4;
  white-space: normal;
}

.author {
  font-size: 0.95rem;
  font-weight: 800;
  color: #c97913;
  margin: 0;
  white-space: normal;
}


@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Falls back to -50% only if JS hasn't run yet (e.g. JS disabled) —
       otherwise --marquee-distance is set precisely by measuring the
       real width of one card group, so the loop stays seamless no
       matter how long or short the actual quotes turn out to be */
    transform: translateX(calc(-1 * var(--marquee-distance, 50%)));
  }
}


.scrolling-container:hover .scrolling-track {
  animation-play-state: paused;
}

.testimonials-button{
    position: relative;
    top: 70px;
    right: 80px;
    background-color: var(--yellow);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    float: right;
}

.testimonials-button button{
    font-size: 1.5rem;
    color: var(--primary-red);
}

.testimonials-button span{
    padding-left: 8px;
    font-size: 1.6rem;
}

.testimonials-button:hover{
    transform: translateY(-2px);
}

.testimonials-button button:hover{
    color: var(--pink);
}

#eligibility-sec{
    color: #FC4141;
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.eligibility-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 35%;
}

.eligibility-image{
    width: 45%;
}

.eligibility-image img{
    width: 100%;
}

.call2action h1{
    font-family: "Antique";
    color: var(--primary-red);
    font-size: 50px;
    max-width: 100%;
    padding-bottom: 30px;
}

.test-button{
    background-color: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 18px 42px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    float: left;
}

.test-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.call2action{
    user-select: none;
}


#bbl-sec{
    background-color: #47AF8A;
    color: #F5F1EE;
    padding-top: 25px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    background-image: url(../images/bblhero.png);
    background-size: cover;
    background-position: -125px -90px;
    background-repeat: no-repeat;
}

#bbl-sec h1{
    font-family: "Antique";
    font-size: 50px;
    padding-bottom: 20px;
    user-select: none;
}

#bbl-sec p{
    padding-bottom: 20px;
}

.bbl-content{
    position: relative;
    right: 10%;
    width: 30%;
    padding: 30px;
}

.bbl-button{
    background-color: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 18px 42px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    float: left;
}

.bbl-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

#socials-sec{
    background-color:  #ff645d;
    color: #F5F1EE;
    padding-top: 25px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#socials-sec p{
    color: #F9B59C;
}

.instagram-embed{
    margin-top: 50px;
}


/* -----------------------------------------------------------------------------------FOOTER */ 


.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer {
  background-color: #ffffff;
  font-family: "Inter", sans-serif;
  width: 100%;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  gap: 30px;
}

.footer-column {
  flex: 1;
}

.footer-column h1 {
  font-size: 1rem;
  font-weight: 700;
  color: #3D3D3D;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.footer-column li {
  margin-bottom: 12px;
}

.footer-column a {
  font-size: 0.95rem;
  color: #888888; 
  text-decoration: none;
  transition: color 0.2s ease;
}


.footer-column a:hover {
  color: #e54343; 
  text-decoration: underline;
}


.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons img {
  width: 40px;
  height: auto;
  object-fit: cover;
  border-radius: 15px;
}

.social-icons img:hover{
    filter: brightness(150%);
}

.footer-logo img{
    width: 90px;
    object-fit: cover;
}

/* Bottom Bar Styling */
.footer-bottom {
  background-color: #FC4141;
  padding: 20px;
  text-align: center;
}

.footer-bottom p {
  color: #ffffff;
  margin: 0;
  font-size: 0.95rem;
}


@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    gap: 40px;
    padding: 40px 24px;
  }
}

/* -----------------------------------------------------------------------------------ABOUT */

.absec1{
    overflow: hidden;
    background-color: var(--primary-whiter);
    color: var(--primary-red);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

.absec1 img {
    position: relative;
    right: 10%;
    opacity: 0;
    width: 35%;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.absec1-text{
    width: 40%;
    display: flex;
    flex-direction: column;   
}

.absec1-text h1{
    font-family: 'Antique';
    font-size: 3rem;
}

.absec1-text p{
    line-height: 1.6;
    font-size: 16px;
}

#vision-mission {
    background-color: var(--primary-white);
    color: var(--primary-red);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    padding: 60px 80px;
}

.vm-column {
    flex: 1;
    max-width: 400px;
}

.vm-divider {
    width: 1px;
    background-color: var(--primary-red);
    align-self: stretch;
}

#vision-mission h2 {
    font-size: 40px;
    margin-bottom: 10px;
}

#vision-mission hr {
    border: none;
    border-top: 2px solid #fff;
    margin-bottom: 20px;
    border-color: var(--primary-red);
}

.fade-in-up-vm {
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up-vm.in-view {
    opacity: 1;
    transform: translateY(0);
}

#our-team {
    background-color: var(--primary-white);
    padding-bottom: 60px;
}

.team-heading {
    font-family: 'Antique';
    background-color: var(--green);
    color: var(--primary-white);
    text-align: center;
    font-size: 3rem;
    padding: 30px 0;
    margin: 0 0 40px 0;
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.team-card {
    width: 200px;
    text-align: center;
}

.team-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

.team-card h3 {
    color: var(--primary-red);
    font-size: 20px;
    margin: 0 0 4px 0;
}

.team-card p {
    color: var(--gray);
    font-size: 14px;
    margin: 2px 0;
}

/* Reused fade-in-up class */
.fade-in-up-ot {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up-ot.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------------------------------DONATIONS */

img.placeholder-icon {
    display: block;
    background-color: #ccc;
    opacity: 0.6;
}


#where-to-donate {
    background-color: var(--primary-white);
}

.wtd-header {
    background-color: var(--primary-red);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 40px;
}

.wtd-header img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.wtd-header h1 {
    font-family: "Antique";
    color: var(--primary-white);
    font-size: 3rem;
    padding: 20px 0px;
}

.wtd-grid {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 40px;
    flex-wrap: wrap;
}

.wtd-grid hr{
    border-color: #ccc;
    margin: 20px 0px;
}

.wb-redirect-button{
    border-style: solid;
    border-width: 2px;
    border-color: var(--primary-red);
    background-color: var(--primary-white);
    border-radius: 15px;
    padding: 14px 34px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.bbl-redirect-button button{
    font-size: 22px;
}

.wb-redirect-button button{
    color: var(--primary-red);
    font-size: 20px;
}


.wb-redirect-button:hover{
    transform: translateY(-2px);
}

.bbl-redirect-button{
    background-color: var(--primary-red);
    color: #fff;
    border: none;
    border-radius: 15px;
    padding: 14px 34px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bbl-redirect-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.wtd-card {
    max-width: 260px;
}

.wtd-card img {
    width: 64px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.wtd-card h1 {
    color: var(--primary-red);
    font-size: 34px;
    margin-bottom: 10px;
}

.wtd-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

.wtd-detail .icon-box {
    width: 18px;
    height: 18px;
    background-color: #FC4141;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 2px;
}

.wtd-detail img {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 2px;
}


.wtd-detail p {
    color: #FC4141;
    font-size: 18px;
    line-height: 1.4;
}

#qualifications {
    background-color: var(--primary-white);
}

.qual-header {
    background-color: var(--blue);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 40px;
}

.qual-header img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.qual-header h1 {
    font-family: "Antique";
    color: var(--primary-white);
    font-size: 3rem;
    padding: 20px 0px;
}

.qual-body {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    padding: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.qual-list h1 {
    color: var(--blue);
    font-size: 2rem;
    margin-bottom: 12px;
}

.qual-columns {
    display: flex;
    gap: 60px;
    border-bottom: 2px solid #ccc;
    border-top: 2px solid #ccc;
    padding-bottom: 16px;
    padding-top: 16px;
}

.qual-columns img{
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 2px;
    margin-right: 5px;
    padding: 10px;
    background-color: var(--green);
}

.qual-columns strong{
    color: var(--blue);
}

.qual-columns ul {
    list-style: none;
    font-size: 16px;
    line-height: 1.5;
    max-width: 220px;
}

.qual-columns li {
    margin-bottom: 25px;
}

.qual-cta {
    text-align: right;
    width: 290px;
}

.qual-cta p {
    font-weight: 700;
    margin-bottom: 14px;
    font-size: 2rem;
}


.faqs-button{
    background-color: var(--green);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 18px 42px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    float: right;
}

.faqs-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

#unsure-cta {
    background-image: url('../images/donation/qualibanner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 160px 160px 180px;
}

#unsure-cta h1 {
    font-family: "Antique";
    color: var(--primary-white);
    font-size: 3rem;
    width: 60%;
    margin-bottom: 30px;
    line-height: 1.2;
}

#unsure-cta button{
    color: var(--green);
}

.elig-button{
    background-color: var(--yellow);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 18px 42px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    float: left;
}

.elig-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

#reminders {
    background-color: var(--pink);
}

.rem-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 40px;
    border-bottom: 2px solid rgba(255,255,255,0.5);
}

.rem-header img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.rem-header h1 {
    font-family: "Antique";
    color: var(--primary-white);
    font-size: 3rem;
    padding: 20px 0px;
}

.rem-body {
    display: flex;
    align-items: flex-start;
    gap: 100px;
    padding: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.rem-column h1 {
    color: var(--primary-white);
    font-size: 1.6rem;
    margin-bottom: 20px;
}

.rem-column ul{
    list-style: none;
}

.rem-column li {
    color: var(--primary-white);
    font-size: 16px;
    line-height: 1.5;
    max-width: 260px;
    margin-bottom: 25px;
}


.rem-column img{
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    margin-top: 2px;
    margin-right: 5px;
    padding: 10px;
    background-color: var(--primary-white);
}


.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fade-in-up {
        transition: none;
        opacity: 1;
        transform: none;
    }
}


/* -----------------------------------------------------------------------------------FAQs */

#faq-title {
    background-color: var(--primary-white);
    padding: 50px 60px 60px;
    display: inline-flex;
}

#faq-title h1 {
    font-family: 'Antique';
    color: var(--primary-red);
    font-size: 3.5rem;
    line-height: 1.15;
    max-width: 500px;
    margin-bottom: 30px;
}

.jump-label {
    color: #9d4242;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 16px;
}

.jump-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 760px;
}

.jump-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background-color: var(--primary-white);
    border: 2px solid var(--primary-red);
    border-radius: 14px;
    padding: 18px 22px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.25s ease, padding 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.jump-btn .jump-icon {
    width: 22px;
    height: 22px;
    background-color: var(--primary-red);
    border-radius: 4px;
    transition: background-color 0.25s ease;
}

.jump-btn span {
    color: var(--primary-red);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    transition: color 0.25s ease;
}

.jump-btn:hover,
.jump-btn:focus-visible {
    background-color: var(--primary-red);
    padding: 24px 30px;
    transform: scale(1.04);
    box-shadow: 0 8px 20px rgba(252, 65, 65, 0.35);
}

.jump-btn:hover .jump-icon,
.jump-btn:focus-visible .jump-icon {
    background-color: var(--primary-white);
}

.jump-btn:hover span,
.jump-btn:focus-visible span {
    color: var(--primary-white);
}

.jump-btn:active {
    transform: scale(0.98);
}

.faq-section {
    display: flex;
    align-items: stretch;
    scroll-margin-top: 20px
}

.faq-section:nth-of-type(even) {
    flex-direction: row-reverse;
}

.faq-image {
    overflow: hidden;
    flex: 1;
    display: flex;
    justify-content: center;
    background-color: #F4F1EA;
}

.faq-image img {
    width: 115%;
}

#myths {
    display: flex;
    flex-wrap: wrap;
    background-color: #FC4141;
}

.myths-content {
    flex: 1 1 600px;
    padding: 50px 60px;
}

.myths-content h1 {
    color: #fff;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.08;
    margin-bottom: 30px;
}

.myths-image {
    flex: 0 1 420px;
    background-color: #F4F1EA;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

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

.accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion-item {
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    overflow: hidden;
}

.accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    padding: 14px 18px;
    cursor: pointer;
}

.accordion-toggle strong {
    font-size: 16px;
    font-weight: 800;
}

.toggle-icon {
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.25s ease;
}

.accordion-item.open .toggle-icon {
    transform: rotate(45deg);
}

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.accordion-item.open .accordion-panel {
    grid-template-rows: 1fr;
}

.accordion-panel-inner {
    overflow: hidden;
}

.accordion-panel-inner p {
    padding: 0 18px 16px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 700px) {
    .myths-content {
        padding: 34px 24px;
    }
    .myths-image {
        flex: 1 1 100%;
        min-height: 220px;
    }
}

@media (max-width: 900px) {
    .faq-section,
    .faq-section:nth-of-type(even) {
        flex-direction: column;
    }
}

.faq-heading {
    padding: 28px 60px;
    width: 40%;
}

.faq-heading h1 {
    color: var(--primary-white);
    font-size: 4.2rem;
}


.faq-body {
    display: flex;
    align-items: stretch;
}

.faq-text {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 40px 60px;
}

.faq-text ul {
    list-style: none;
    font-size: 14px;
    line-height: 1.7;
    color: #fff;
}

.faq-text ul li {
    margin-bottom: 10px;
}

.faq-text ul li strong {
    font-weight: 700;
}


#procedure { 
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    background-color: var(--yellow); 
}

#donor-qualifications { 
    display: flex;
    flex-wrap: wrap;
    background-color: var(--green); 
}

#deferrals { 
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    background-color: var(--blue); 
}

#why-donate { 
    display: flex;
    flex-wrap: wrap;
    background-color: var(--pink); 
}

.faq-plain-text {
    padding: 0 18px 4px;
}

.faq-plain-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 14px;
}

.faq-plain-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 700px) {
    #faq-title { padding: 40px 24px; }
    .faq-heading, .faq-text, .faq-image { padding-left: 24px; padding-right: 24px; }
    .faq-body { flex-direction: column; }
}

.load-fade {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.load-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .load-fade {
        transition: none;
        opacity: 1;
        transform: none;
    }
}




/* -----------------------------------------------------------------------------------BLOOD BANK LOCATOR */ 


#locator-header {
    font-family: 'Antique';
    background-color: #FC4141;
    padding: 40px 40px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

#locator-header h1 {
    color: #fff;
    font-size: 3rem;
    margin-bottom: 6px;
}

#locator-header p {
    color: rgba(255,255,255,0.9);
    font-size: 14px;
    max-width: 640px;
}


.layout {
    display: flex;
    height: calc(100vh - 108px);
    min-height: 560px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}


.sidebar {
    width: 340px;
    flex-shrink: 0;
    background-color: #fff;
    border-right: 1px solid #e5e0d8;
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

.sidebar h2 {
    color: #FC4141;
    font-size: 18px;
}

.section-label {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field label {
    font-size: 13px;
    font-weight: 700;
    color: #444;
}

.optional-tag {
    display: inline-block;
    background-color: #FFEFC2;
    color: #8a6d00;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 4px;
    margin-left: 4px;
}

.field input[type="text"],
.field select {
    border: 1.5px solid #ddd;
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13px;
    color: #333;
    background-color: #fafafa;
}

.field input[type="text"]:focus,
.field select:focus {
    outline: none;
    border-color: #FC4141;
    background-color: #fff;
}

.checkbox-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    cursor: pointer;
}

.checkbox-field input {
    width: 16px;
    height: 16px;
    accent-color: #FC4141;
    cursor: pointer;
}

.btn-locate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #47AF8A;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 14px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn-locate:hover {
    background-color: #3a9977;
    transform: translateY(-1px);
}

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

.btn-locate.locating {
    background-color: #ccc;
    cursor: wait;
}

#locateStatus {
    font-size: 12px;
    color: #888;
    min-height: 16px;
}

.result-count {
    font-size: 12px;
    color: #888;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-card {
    border: 1.5px solid #eee;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.result-card:hover,
.result-card.active {
    border-color: #FC4141;
    background-color: #fff6f6;
}

.result-card h3 {
    font-size: 14px;
    color: #222;
    margin-bottom: 3px;
}

.result-card .rc-city {
    font-size: 12px;
    color: #FC4141;
    font-weight: 700;
    margin-bottom: 5px;
}

.result-card .rc-hours {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.status-open {
    background-color: #E4F5EE;
    color: #2f8c68;
}

.status-closed {
    background-color: #f2f2f2;
    color: #999;
}

.rc-types {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.type-chip {
    font-size: 10px;
    font-weight: 700;
    background-color: #FC4141;
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
}

.no-results {
    font-size: 13px;
    color: #999;
    padding: 20px 4px;
    text-align: center;
}


.map-wrap {
    flex: 1;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
}

.leaflet-popup-content h3 {
    color: #FC4141;
    font-size: 14px;
    margin-bottom: 4px;
}

.leaflet-popup-content .popup-hours {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.leaflet-popup-content .popup-types {
    font-size: 11px;
    color: #333;
}

.disclaimer {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-red);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 11px;
    color: var(--primary-white);
    z-index: 500;
    max-width: 90%;
    text-align: center;
}

@media (max-width: 800px) {
    .layout {
        flex-direction: column;
        height: auto;
    }
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e0d8;
        max-height: 420px;
    }
    .map-wrap {
        height: 420px;
    }
}

/* -----------------------------------------------------------------------------------RESOURCES */ 


.resources-header{
    text-align: center;
    color: var(--primary-red);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 34px;
}

.reshero{
    overflow: hidden;
    background-color: var(--pink);
    color: var(--yellow);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

.reshero p{
    color: var(--primary-white);
}

.reshero img {
    position: relative;
    right: 4%;
    opacity: 0;
    width: 50%;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.reshero-text{
    align-items: flex-end;
}

.res-button{
    background-color: var(--blue);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 18px 42px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    float: right;
}

.res-button:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reshero-text{
    width: 40%;
    display: flex;
    flex-direction: column;   
}

.reshero-text h1{
    font-size: 3.5rem;
    font-family: 'Antique';
    padding: 20px 0px;
}

.reshero-text p{
    line-height: 1.6;
    font-size: 1.1rem;
    padding: 10px 0px;
}

.resource-section {
    padding: 60px 60px;
}

.section-title {
    text-align: center;
    color: var(--primary-red);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 34px;
}

.section-title.with-bar {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
}

.section-title.with-bar::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 26px;
    background-color: var(--primary-red);
    border-radius: 3px;
}


.carousel-wrap {
    position: relative;
}

.carousel-track {
    display: flex;
    gap: 50px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--blue);
    background-color: #fff;
    color: var(--blue);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: stretch;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transition: background-color 0.2s ease, color 0.2s ease;
    z-index: 5;
}

.carousel-arrow:hover {
    background-color: var(--blue);
    color: #fff;
}

.carousel-arrow.next { right: -14px; }
.carousel-arrow.prev { left: -14px; }

.carousel-arrow[hidden] { display: none; }


.news-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

.news-card-media {
    display: block;
    height: 190px;
    overflow: hidden;
}

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

.news-card:hover .news-card-media img {
    transform: scale(1.05);
}

.news-card-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.news-date {
    color: var(--primary-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.news-card-body h1 {
    font-size: 16px;
    line-height: 1.35;
}

.news-card-body h1 a {
    color: #1c2a5e;
    text-decoration: none;
}

.news-card-body h1 a:hover {
    text-decoration: underline;
}

.news-card-body p {
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    flex: 1;
}

.btn-read-more {
    align-self: flex-start;
    background-color: var(--blue);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 6px;
    margin-top: 6px;
    transition: opacity 0.2s ease;
}

.btn-read-more:hover {
    opacity: 0.85;
}


.video-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas: "player sidebar";
    gap: 40px;
    align-items: start;
    padding: 0 60px 60px;
}

.player-band {
    grid-area: player;
    background-color: var(--primary-red);
    border-radius: 16px;
    padding: 40px;
}

.player-wrap {
    max-width: none;
    margin: 0;
}

#mainPlayer {
    width: 100%;
    border-radius: 12px;
    background-color: #000;
    display: block;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
}

.now-playing {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-white);
    text-align: center;
}

.more-videos-panel {
    grid-area: sidebar;
}

.more-videos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.video-thumb {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.thumb-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: border-color 0.2s ease;
}

.video-thumb.active .thumb-media {
    border-color: var(--primary-red);
}

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

.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--primary-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    pointer-events: none;
}

.thumb-title {
    font-size: 13px;
    font-weight: 700;
    color: #1c2a5e;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 700px) {
    .resource-section {
        padding: 44px 20px;
    }
    .carousel-arrow {
        display: none;
    }
    .video-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "player"
            "sidebar";
        padding: 0 20px 44px;
        gap: 30px;
    }
    .player-band {
        padding: 24px;
    }
}

#testimonial-stories{
    background-color: var(--yellow);
    display: flex;
    flex-direction: column;
    padding-bottom: 150px;
    padding-top: 70px;
}

.testi01{
    overflow: hidden;
    background-color: var(--yellow);
    color: var(--yellow);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
    padding-bottom: 90px;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

.testi02{
    background-color: var(--yellow);
    color: var(--yellow);
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

.testi01 p, .testi02 p{
    color: #dd4732;
}

.testi01 img{
    position: relative;
    left: 5%;
    opacity: 0;
    width: 40%;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.testi02 img{
    position: relative;
    right: 5%;
    width: 40%;
    transform: translateY(30px);
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.testi01-text, .testi02-text{
    padding: 30px;
    width: 45%;
    display: flex;
    flex-direction: column;   
}

.testi01-text h1, .testi02-text h1{
    font-size: 5rem;
}

.testi01-text p, .testi02-text p{
    line-height: 1.6;
    font-size: 1.1rem;
}

/* -----------------------------------------------------------------------------------ELIGIBILITY TEST */ 

#quiz-app {
    position: relative;
    width: 100%;
    height: 100vh;
}

.progress-track {
    position: sticky;
    top: 105px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: rgba(0, 0, 0, 0.08);
    z-index: 5;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background-color: rgba(255,255,255,0.85);
    transition: width 0.4s ease;
}


.slide {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    padding: 60px 80px;
    overflow: hidden;
}

.slide.active {
    display: flex;
}

.slide.text-light { 
    color: var(--primary-white); 
}

.slide.text-dark { 
    color: var(--text-dark); 
}

.slide.yellow-slide {
    color: #e54343;
}

.yellow-slide {
    color: #e54343;
}

.yellow-slide .option-btn.selected .radio-circle {
    background-color: #e54343;
    border-color: #e54343;
}

.yellow-slide .radio-circle svg path {
    stroke: var(--yellow);
}

.yellow-slide .btn-next {
    background-color: #e54343;
    border-color: #e54343;
    color: var(--accent, var(--yellow));
}

.fade-in-up {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.fade-in-up.in-view {
    opacity: 1;
    transform: translateY(0);
}


.intro-content {
    position: relative;
    z-index: 2;
    max-width: 560px;
}

.intro-content h1 {
    font-family: 'Antique';
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 800;
    margin-bottom: 26px;
    line-height: 1.05;
}

.intro-content p {
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 30px;
}

.btn-start {
    background-color: var(--blue);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 18px 42px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}


.blip-decor {
    position: absolute;
    z-index: 1;
    opacity: 0.95;
}

.blip-decor.large {
    right: -8%;
    top: 50%;
    transform: translateY(-50%);
    width: 55vw;
    max-width: 900px;
}

.blip-decor.small {
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    width: 420px;
}


.question-slide {
    justify-content: space-between;
    gap: 60px;
}

.question-inner {
    max-width: 640px;
    flex: 1;
}

.q-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    margin-bottom: 30px;
}

.q-label::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 1em;
    background-color: currentColor;
    border-radius: 3px;
}

.q-text {
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 40px;
}

.q-text .subtle {
    font-weight: 500;
    opacity: 0.85;
    font-size: 0.75em;
}

.q-options {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.btn-next {
    margin-top: 34px;
    background-color: var(--primary-white);
    color: var(--accent, var(--blue));
    border: 2px solid var(--accent, var(--blue));
    border-radius: 50px;
    padding: 14px 38px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.2s ease;
}

.btn-next.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.btn-next:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.option-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 4px 0;
}

.option-btn span.option-label {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.radio-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.option-btn.selected .radio-circle {
    background-color: var(--primary-white);
    border-color: var(--accent, var(--blue));
}

.radio-circle svg {
    width: 22px;
    height: 22px;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.radio-circle svg path {
    stroke: var(--accent, var(--blue));
    transition: stroke 0.3s ease;
}

.option-btn.selected .radio-circle svg {
    opacity: 1;
    transform: scale(1);
}

.question-media {
    flex: 0 0 420px;
    display: none;
}

.question-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 900px) {
    .question-media {
        display: block;
    }
}


.outcome-slide {
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    gap: 24px;
}

.outcome-inner {
    max-width: 720px;
    position: relative;
    z-index: 2;
}

.outcome-inner h2 {
    font-family: 'Antique';
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 40px;
}

.outcome-inner h2 strong {
    font-weight: 800;
}

.outcome-inner h2 em {
    font-weight: 800;
    font-style: italic;
}

.outcome-body {
    text-align: left;
    font-size: 18px;
    line-height: 1.6;
}

.outcome-body .lead {
    font-size: 20px;
    margin-bottom: 14px;
}

.outcome-divider {
    border: none;
    border-top: 2px solid currentColor;
    border-color: var(--primary-white);
    opacity: 0.6;
    margin: 16px 0;
    width: 320px;
}

.outcome-body a {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
}

.btn-restart {
    margin-top: 30px;
    background-color: transparent;
    border: 2px solid currentColor;
    color: inherit;
    border-radius: 50px;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.outcome-slide.text-light .btn-restart:hover {
    background-color: var(--primary-white);
    color: var(--text-dark);
}


.back-btn {
    position: absolute;
    top: 84px;
    left: 30px;
    z-index: 3;
    background: none;
    border: none;
    color: inherit;
    font-size: 32px;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.back-btn:hover {
    opacity: 1;
}

@media (max-width: 700px) {
    .slide {
        padding: 40px 26px;
    }
    .question-slide {
        flex-direction: column;
        justify-content: center;
    }
    .outcome-slide {
        align-items: flex-start;
        text-align: left;
    }
    .outcome-divider {
        width: 100%;
    }
    .blip-decor.large {
        width: 90vw;
        opacity: 0.5;
    }
}

/* -----------------------------------------------------------------------------------CONTACT */

#contact-hero {
    background-color: var(--blue);
    padding: 60px 60px 80px;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

.gt-bubble-wrap {
    flex: 0 1 480px;
    padding-bottom: 30px; /* room for the tail */
}

.gt-bubble {
    font-family: 'Antique';
    position: relative;
    background-color: var(--green);
    border-radius: 10px;
    padding: 44px 44px 70px;
}

.gt-bubble h1 {
    color: var(--primary-white);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.15;
}

.gt-bubble::after {
    content: "";
    position: absolute;
    left: 44px;
    bottom: -26px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 50px solid transparent;
    border-top: 34px solid var(--green);
}

.contact-form {
    flex: 1 1 460px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.form-field {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary-white);
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
}

.form-field .field-icon {
    color: var(--green);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.form-field input,
.form-field select {
    border: none;
    background: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
    width: 100%;
}

.form-field input::placeholder {
    color: var(--green);
    opacity: 0.85;
}

.form-field select {
    appearance: none;
    cursor: pointer;
}

.select-wrap {
    position: relative;
}

.select-wrap::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--green);
    transform: translateY(-30%);
    pointer-events: none;
}

.form-field.invalid {
    outline: 2px solid var(--primary-red);
}

.message-field {
    background-color: var(--primary-white);
    border-radius: 8px;
    padding: 16px;
}

.message-field label {
    display: block;
    color: var(--green);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.message-field textarea {
    width: 100%;
    min-height: 180px;
    border: none;
    outline: none;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    color: #333;
    background: none;
}

.form-error {
    color: #fff;
    background-color: rgba(252, 65, 65, 0.85);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    display: none;
}

.form-error.visible {
    display: block;
}

.form-success {
    color: var(--green);
    background-color: var(--primary-white);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    display: none;
    text-align: center;
}

.form-success.visible {
    display: block;
}

.btn-submit {
    align-self: center;
    margin-top: 10px;
    background-color: var(--pink);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 12px 40px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

#before-contact {
    background-color: var(--yellow);
    padding: 70px 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 60px;
}

#before-contact h1 {
    font-family: 'Antique';
    color: var(--primary-red);
    font-size: 3rem;
    font-weight: 800;
    width: 100%;
    margin-bottom: 20px;
}

.bc-image {
    flex: 0 1 340px;
}

.bc-image img {
    width: 100%;
    height: auto;
    display: block;
}

.bc-text {
    width: 40%;
}

.bc-text h2 {
    color: var(--primary-red);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 18px;
}

.bc-text p {
    color: var(--muted-orange);
    font-size: 1rem;
    line-height: 1.6;
    padding-bottom: 100px;
}

#contact-footer {
    display: flex;
    flex-wrap: wrap;
}

.cf-inquiries,
.cf-social {
    flex: 1 1 380px;
    padding: 70px 60px;
}

.cf-inquiries {
    background-color: var(--primary-red);
    color: var(--primary-white);
}

.cf-inquiries h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 40px;
}

.cf-inquiries a {
    text-decoration: underline;
    color: var(--primary-white);
}

.cf-inquiries a:hover{
    color: #fff;
}

.tube-graphic {
    position: relative;
    max-width: 260px;
}

.tube-graphic img {
    width: 100%;
    display: block;
    margin-bottom: -6px;
}

.cf-social {
    background-color: var(--primary-white);
    color: var(--primary-red);
}

.cf-social h1 {
    font-family: 'Antique';
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 30px;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 2.3rem;
    font-weight: 800;
    text-decoration: none;
    margin-bottom: 22px;
    color: var(--primary-red);
}

.social-link img {
    width: 80px;
    flex-shrink: 0;
}

.cf-social a:hover{
    text-decoration: underline;
}

@media (max-width: 700px) {
    #contact-hero, #before-contact, .cf-inquiries, .cf-social {
        padding: 40px 24px;
    }
}

/* -----------------------------------------------------------------------------------ARTICLES */ 

.article-divider{
    border: 2px solid grey;
    margin-top: 20px;
}

#article-alt01{
    background-color: var(--primary-white);
    display: flex;
    flex-direction: column;
    padding-bottom: 150px;
    padding-top: 5px;
}

#article-sec{
    background-color: var(--primary-white);
    display: flex;
    flex-direction: column;
    padding-bottom: 150px;
    padding-top: 5px;
}

.article-content-alt01{
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
    padding-bottom: 90px;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

.article-content{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.4s;
}

#article-alt01 img{
    position: relative;
    left: 5%;
    opacity: 0;
    width: 30em;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

#article-sec img{
    padding-bottom: 20px;
    padding-top: 20px;
}

.article-sec img{
    position: relative;
    right: 5%;
    width: 40%;
    transform: translateY(30px);
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.1s;
}

.article-text-alt01{
    padding: 30px;
    width: 45%;
    display: flex;
    flex-direction: column;   
}

.article-text{
    padding: 30px;
    width: 55%;
    display: flex;
    flex-direction: column;   
}

.article-text-alt01 h1{
    color: var(--primary-red);
}

.article-text-alt01 p{
    color: #3D3D3D;
}

.article-text-alt01 h1{
    font-family: 'Antique';
    font-size: 3rem;
    padding-bottom: 40px;
}

.article-text h1{
    font-family: "Antique";
    color: var(--primary-red);
    font-size: 3rem;
    padding: 10px 0px;
}

.article-text p{
    color: #3D3D3D;
    line-height: 1.6;
    font-size: 1.1rem;
}

.article-text strong{
    font-size: 1.4rem;
}


/* DO NOT USE */

.momo-trust-display-regular {
  font-family: "Momo Trust Display", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.plus-jakarta-sans-<uniquifier> {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.chango-regular {
  font-family: "Chango", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* -----------------------------------------------------------------------------------WORDPRESS MIGRATION OVERRIDES */

/* The "DONATE NOW" pill is now a plain <a> (see header.php) instead of
   wrapping a <button> inside an <a>, which Hello Elementor/Elementor's
   own default button styling was overriding (that purple hover). The
   base pill look (green background, rounded corners, padding) still
   comes from .donate-button above, unchanged — this just styles the
   link itself and pins its color/hover states with enough specificity
   and !important to survive any parent-theme or plugin CSS that loads
   after this stylesheet. */
header nav ul li.donate-button a {
    display: block;
    width: 100%;
    height: 100%;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    color: #fff !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

header nav ul li.donate-button a:hover,
header nav ul li.donate-button a:focus,
header nav ul li.donate-button a:active,
header nav ul li.donate-button a:visited {
    color: #fff !important;
    text-decoration: none !important;
    background: none !important;
}

/* The rest of the nav links (Home, About, Resources, Eligibility Test,
   Find A Bank, FAQs, Contact) already have color:#FC4141 set explicitly
   in .navbar-item a above — that's not the problem. What's winning
   instead is almost certainly Hello Elementor's/Elementor's own default
   link color applying on :hover/:visited specifically, since unvisited
   vs. visited/hovered are separate browser states and a parent-theme or
   plugin rule only needs to target one of them to show through. The
   indigo you're seeing is the classic default "visited link" purple.
   Pinning every link state down explicitly, with !important, closes
   that gap for good. By design this makes hover look like "no color
   change, just the underline" — color stays the same red at rest,
   hover and active; only text-decoration changes — matching the
   original static site's behavior. */
header nav ul li.navbar-item a,
header nav ul li.navbar-item a:link,
header nav ul li.navbar-item a:visited,
header nav ul li.navbar-item a:hover,
header nav ul li.navbar-item a:focus,
header nav ul li.navbar-item a:active {
    color: #FC4141 !important;
}

header nav ul li.navbar-item a {
    text-decoration: none !important;
}

header nav ul li.navbar-item.active a,
header nav ul li.navbar-item:hover a,
header nav ul li.navbar-item a:hover,
header nav ul li.navbar-item a:focus {
    text-decoration: underline !important;
    text-underline-offset: 8px;
    text-decoration-thickness: 4px;
}

/* Same invalid-nesting bug as the DONATE NOW button (an interactive
   <button> isn't allowed inside an <a>, and the orphaned <button> was
   what let Hello Elementor's/Elementor's own button defaults paint over
   these pills instead of the site's own CSS), now fixed on the other
   four CTA pills in homepage-content.html: "FIND OUT MORE",
   "READ MORE" (testimonials), "Check if you're eligible!", and
   "Find a Blood Bank Now". Each <a> now carries its own text directly,
   with the same text styling the old inner <button> used to provide,
   pinned with !important so nothing else can repaint them. The pill
   shape itself (background, border-radius, padding) still comes from
   .blurb-01-button / .testimonials-button / .test-button / .bbl-button
   further up in this file, unchanged. */
.blurb-01-button a,
.test-button a,
.bbl-button a {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none !important;
    color: #fff !important;
    background: none !important;
    border: none !important;
}

.blurb-01-button a:hover,
.blurb-01-button a:focus,
.blurb-01-button a:active,
.blurb-01-button a:visited,
.test-button a:hover,
.test-button a:focus,
.test-button a:active,
.test-button a:visited,
.bbl-button a:hover,
.bbl-button a:focus,
.bbl-button a:active,
.bbl-button a:visited {
    color: #fff !important;
    text-decoration: none !important;
    background: none !important;
}

/* .testimonials-button is styled differently from the three above — red
   text on a yellow pill, turning pink on hover (see .testimonials-button
   button / button:hover further up) — carried over the same way. */
.testimonials-button a {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none !important;
    color: var(--primary-red) !important;
    background: none !important;
    border: none !important;
}

.testimonials-button a:hover,
.testimonials-button a:focus,
.testimonials-button a:active,
.testimonials-button a:visited {
    color: var(--pink) !important;
    text-decoration: none !important;
    background: none !important;
}

/* Safety net against horizontal overflow (something on the page wider
   than the viewport, which pushes the whole document — including the
   full-width footer — sideways so its right edge runs off-screen). This
   doesn't fix whatever the oversized element is, it just stops it from
   dragging the rest of the page along with it. If the footer still
   looks cut off after this, the real culprit needs to be found with
   DevTools (see the migration notes) rather than papered over here. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}