:root{
  --cream: #F3ECDB;
  --sage:  #D8DDC3;
  --peach: #F7D9C1;
  --grey:  #CBCFD1;

  --navy:  #2E3652;
  --brown: #B57C47;
  --blue:  #8498C1;
  --coral: #EA7D5C;
} 

body {
  background: linear-gradient(180deg, var(--cream) 0%, #ffffff 55%, var(--sage) 120%);
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  color-scheme: dark;
}

/* Main site info */
.site-logo {
  height: 3rem;
}

/* Headings */
h1{
  color: var(--navy);
  letter-spacing: -0.02em;
}

h2{
  color: var(--brown);
  letter-spacing: -0.01em;
}

h3{
  color: var(--blue);
}

/* Paragraph text */
p{
  color: rgba(46, 54, 82, 0.86); /* navy softened */
}

.nest-points {
  font-size: 1.05rem;
  color: var(--navy);
}

.nest-point {
  padding: 10px 22px;
  margin: 6px;
  background: rgba(247,217,193,0.6); /* peach wash */
  border-radius: 40px;
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
  font-weight: 500;
  white-space: normal;
  text-align: center;
  max-width: 26rem;  
}

/* subtle alternates for visual interest */

.nest-point:nth-child(2){
  background: rgba(216,221,195,.6); /* sage */
}

.nest-point:nth-child(3){
  background: rgba(203,207,209,.6); /* soft grey */
}

.small-heading{
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8498C1;
  font-weight: 600;
}

/* SECTION BASE (optional but handy) */
.hero, .container1, .container2, .container3, .container4{
  padding: clamp(2rem, 4vw, 4rem) 0;
}

/* HERO */
.hero-eyebrow{
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}

.hero-title{
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.hero-desc{
  color: rgba(46, 54, 82, 0.86);
  font-size: 1.05rem;
  max-width: 38rem;
}

/* CTA buttons (theme-friendly) */
.hero-btn-primary{
  background: var(--coral);
  border: none;
  color: white;
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.hero-btn-primary:hover{
  opacity: .9;
  color: white;
}

.hero-btn-secondary{
  background: rgba(132,152,193,0.18);
  border: 1px solid rgba(46,54,82,0.18);
  color: var(--navy);
  border-radius: 999px;
  padding: 12px 22px;
}
.hero-btn-secondary:hover{
  background: rgba(132,152,193,0.26);
  color: var(--navy);
}

/* Hero image sizing */
.hero-image{
  max-width: 460px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.10));
}

.hero{
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: linear-gradient(
    180deg,
    var(--cream) 0%,
    #ffffff 55%,
    var(--sage) 120%
  );
  color: var(--navy);
}

.container1{
  background: var(--cream);
  color: var(--navy);
}

.container2{
  background: color-mix(in srgb, var(--sage) 40%, transparent);
  color: var(--navy);
}

.container3{
  background: color-mix(in srgb, var(--peach) 55%, transparent);
  color: var(--navy);
}

.container4{
  background: color-mix(in srgb, var(--grey) 45%, transparent);
  color: var(--navy);
}

.donation-card{
  background: color-mix(in srgb, var(--cream) 80%, white);
  color: var(--navy);
}

.donation-icon{
  color: var(--coral);
  font-size: 1.3rem;
}

.donation-category h2{
  margin: 0;
}


/* Mobile tweaks */
@media (max-width: 576px){
  .hero-desc{ font-size: 1rem; }
  .hero-image{ max-width: 320px; }
}