/*
WDS Externals Hackathon – annotated pass
Author notes (Reich): 
If something breaks, check the console first, then network panel for /api calls.
Design tokens up top; adjust vars, not ad-hoc values.
Reduced-motion is respected. Keep animations subtle and purposeful.
*/
/* ---------- Tokens ---------- */
:root{
  --font: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* Figma palette mapped to variables */
  --yellow: #FFD42E;
  --rose:   #D2479E;
  --grass:  #B0D1B2;
  --water:  #0D5C63;
  --ink:    #012C3D;
  --sand:   #654218;

  --bg-sky-1: #52dafc;       /* top sky (updated to match figma)*/
  --bg-sky-2: #d7f3fa;       /* bottom sky */

  --text: #0e1b2a;
  --text-inv:#ffffff;

  --card: rgba(255,255,255,0.9);
  --glass: rgba(255,255,255,0.08);

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.12);
  --maxw: 1080px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Prevent horizontal scroll caused by off-canvas decorative assets / transforms */
html, body{overflow-x:hidden; width:100%;}
body{
  font-family:var(--font);
  color:var(--text);
  background:solid transparent;
  line-height:1.55;
}
.container{max-width:var(--maxw);padding:0 20px;margin:0 auto}
.small{font-size:.9rem}
.dim{opacity:.7}
.center{text-align:center}
.max-600{max-width:600px;margin-inline:auto}

/* ---------- Header + progress ---------- */
.site-header{
  position:fixed;top:0;z-index:50;
  backdrop-filter:saturate(130%) blur(10px);
  background: linear-gradient(180deg,#52dafc , rgba(255, 255, 255, 0.952));
  border-bottom:1px solid transparent;
  width: 100%;
  transition:background .25s ease,border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{                    /* apply glass after scroll */
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.40));
  border-bottom-color:rgba(255,255,255,.3);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.nav{
  display:flex;align-items:center;justify-content:flex-start;
  height:64px;
}
.brand{font-weight:800;letter-spacing:.5px;color:#122;
  text-decoration:none;font-size:20px}
.brand span{color: #0b2850} /* wds logo color */
.links a{
  margin-left:20px;text-decoration:none;color:rgb(255, 255, 255);font-weight:600;
  position:relative;
}
.links a:after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,var(--yellow),#8fd9c8);
  transform:scaleX(0);transform-origin:0 50%;transition:.25s ease;
}
.links a:hover:after{transform:scaleX(1)}
.links .admin{opacity:.7}

.progress{height:4px;background:rgba(255,255,255,.28)}
.progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#8fd9c8,var(--yellow),#ff9f63);
  transform-origin:0 50%;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;border:none;cursor:pointer;font-weight:700;
  padding:12px 20px;border-radius:999px;text-decoration:none;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-soft);
}
.btn-primary{background:var(--yellow);color:#1f2a37}
.btn-peach{background:#F2BB6A;color:rgb(255, 255, 255)}
.btn:hover{transform:translateY(-1px);filter:saturate(105%)}
.btn:active{transform:translateY(0)}
.magnet{position:relative;overflow:hidden}
.btn::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-120%);transition:transform .45s ease;
}
.btn:hover::before{transform:translateX(120%)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:var(--text-inv)}
.hero .sky{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--bg-sky-1),var(--bg-sky-2));
}
.sun{
  position:absolute; top: 180px;left: 72%; z-index: 1;
  width:520px;height: 520px;border-radius:50%;
  background:#FFF2D3;
  filter:brightness(1.02) saturate(170%) blur(0px);opacity:1;
}
.cloud{
  position:absolute;
  width:280px;height:160px;
  border-radius:120px;
  filter:blur(.3px);
  /* Build fluffy shapes with layered gradients */
  background:
    radial-gradient(closest-side at 30% 50%, rgba(255,255,255,.95), rgba(255,255,255,.6) 60%, rgba(255,255,255,0) 62%) 0 0/65% 80% no-repeat,
    radial-gradient(closest-side at 70% 50%, rgba(255,255,255,.95), rgba(255,255,255,.60) 60%, rgba(255,255,255,0) 62%) 100% 20%/60% 70% no-repeat,
    radial-gradient(closest-side at 50% 40%, rgba(255,255,255,.95), rgba(255,255,255,.6) 60%, rgba(255,255,255,0) 62%) 50% 10%/90% 100% no-repeat;
}
.cloud.c1{right:3%;top:22%}
.cloud.c2{right:-6%;top:6%}
.cloud.c3{left:-6%;top:18%}
.cloud.c4{right:-6%;top:52%}

/* I made the hero-inner relative to ensure the content is above the decorative elements */
.hero-inner{
  padding:96px 0 84px;
  position: relative;
  z-index: 1;
}
.hero-slim .hero-inner{padding:72px 0 110px}
.eyebrow{font-size: 30px; font-family: Inter, sans-serif; letter-spacing:.02em;;font-weight:700;opacity:.9; left: -180px; position: relative; top: -20px; }
.hero h1{font-size:90px;line-height:1.1;margin:.2rem 0 .5rem; top: -60px; left: -200px; position: relative; font-weight: 800; text-decoration-color: linear-gradient(#FFFFFF, #6FCFF8);}
.spark-head{
  /* Gradient text for the "Spark" headline */
  background: linear-gradient(180deg, #FFFFFF 0%, #6FCFF8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  border-color: #FFFFFF;
}
.subtitle{opacity:.95;font-size:18px; font-weight: bold; top: -60px; left: -195px; position: relative; }
.cta-row{margin-top:18px; top: -50px; left: 0px; position: relative; }

.sparkles, .about-stars{position:absolute;inset:0;pointer-events:none}

/* Clouds: softer, behind text, responsive */
.hero .cloud{ z-index:-1; pointer-events:none; }
.cloud{
  width: clamp(180px, 28vw, 320px);
  height: clamp(110px, 16vw, 180px);
  border-radius: 120px;
  filter: blur(.4px);
  background:
    radial-gradient(closest-side at 28% 52%, rgba(255,255,255,.95), rgba(255,255,255,.10) 60%, rgba(255,255,255,0) 62%) 0 0/64% 82% no-repeat,
    radial-gradient(closest-side at 68% 48%, rgba(255,255,255,.96), rgba(255,255,255,.55) 60%, rgba(255,255,255,0) 62%) 100% 22%/58% 72% no-repeat,
    radial-gradient(closest-side at 50% 42%, rgba(255,255,255,.94), rgba(255,255,255,.10) 60%, rgba(255,255,255,0) 62%) 50% 12%/90% 100% no-repeat;
}
.eyebrow{
  left: 5px;
}
.subtitle{
  left: 5px;
}
@media (max-width: 640px){
  .cloud.c1{ right:2%; top:26%; transform:scale(.8); }
  .cloud.c2{ right:-10%; top:10%; transform:scale(.75); }
}

/* Optional: slightly tone down pad shadows so the 4 cards pop */
.pads .pad{ box-shadow: inset 0 10px 18px rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.03); }

/* ---------- Waves (section separators)  each wave is mapped to match the gradient of the section below it---------- */
.wave{position:absolute;left:0;right:0;height:110px;pointer-events:none}
.wave-bottom{bottom:-1px}

/* → Pond (top of .pond = #1b5648) */
.wave-to-pond{
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path fill='%231b5648' d='M0,40 C240,120 480,0 720,40 C960,80 1200,20 1440,40 L1440,120 L0,120 Z'/></svg>") center/100% 100% no-repeat;
}

/* Wave ABOVE Sponsor section – blend into .water-to-grass gradient */
.wave-to-grass{
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path fill='%237fb235' d='M0,40 C240,120 480,0 720,40 C960,80 1200,20 1440,40 L1440,120 L0,120 Z'/></svg>") center/100% 100% no-repeat;
}


/* → FAQ (top of .faq = #a9cff0) */
.wave-to-faq{
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path fill='%233996c3' d='M0,40 C240,120 480,0 720,40 C960,80 1200,20 1440,40 L1440,120 L0,120 Z'/></svg>") center/100% 100% no-repeat;
}

/* → Water (top of .water-to-grass = #0e6e6d) – only if needed */
.wave-to-water{
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path fill='%238ec442' d='M0,40 C240,120 480,0 720,40 C960,80 1200,20 1440,40 L1440,120 L0,120 Z'/></svg>") center/100% 100% no-repeat;
}

/* ---------- Section backgrounds ---------- */
.section{position:relative;padding:80px 0}
.water-to-grass{background:#8ec442}
.sponsor-cta-grass{background:#7fb235}
.pond{background:#135551}
.grass{background:#8ec442}
.faq{background:linear-gradient(180deg, #3996c3, #81c7e3); overflow:hidden;}

.footer{
  padding:28px 0;
  color:#ffffff;
  background:linear-gradient(180deg, #39280E, #271C0A);
  text-align:center;
}
.footer .container-small{
  position:relative;
  z-index:1;
}



/* Gives the section a bit more space */
#about {
  padding-bottom: 0px; /* Note: I think each section should have this padding */
}

/* ---------- About split ---------- */
/*.split{display:grid;gap:40px;grid-template-columns:2fr 1fr;align-items:start}*/

.split {
  display: grid;
  grid-template-columns: 520px minmax(450px, 1fr);
  gap: 200px;
  align-items: start;
}
.about-copy {
  align-self: start;
  margin-top: -170px;
  padding-bottom: 120px;
}

.about-copy h2 {
  font-size: 50px;
  margin-bottom: 1rem;
  color: #fff;
}

.about-copy p {
  max-width: 450px;
  font-size: 18px;
  line-height: 1.65;
  margin-bottom: 1rem;
  color: #fff;
  text-align: justify;
  overflow-wrap: anywhere;
}
/*.about-copy {
  outline: 2px solid red;
}*/
.about-copy .what-is-spark{
  margin-top: 85px;
  margin-left: -150px;
}
.about-copy .what-is-spark-1 {
  margin-top: 20px;
  margin-left: 20px;
}
.about-copy .what-is-spark-2{
  margin-left: -56px;
}
.about-copy .what-is-spark-3{
  margin-top: 50px;
  margin-left: -30px;
}
.about-copy .what-is-spark-4{
  margin-top: 20px;
  margin-left: -30px;
}
/*.about-copy h2
{
  color: #ffffff;
  font-size:50px;
  margin:.4rem 0 1rem; 
  margin-left: -60px;
  z-index: 3 ;
}

.about-copy p
{
  color: #ffffff;
  font-size:18px;
  z-index: 3 ;
  max-width: 1000px;
  text-align: justify;
}
.about-copy .what-is-spark{
  transform: translateX(-250px) translateY(-160px);
  width: 600px;
}
.about-copy .what-is-spark-1{
  transform: translateX(-170px) translateY(-130px);
}
.about-copy .what-is-spark-2{
  transform: translateX(-260px) translateY(-100px);
}
.about-copy .what-is-spark-3{
  transform: translateX(-60px) translateY(-70px);
}
.about-copy .what-is-spark-4{
  transform: translateX(-60px) translateY(-30px);
} */


.about-copy p:first-of-type
{
  margin-left: -60px; /* Shift first paragraph left */
  z-index: 2 ;
}

.badges{margin-top:12px}
.chip{
  display:inline-block;background:#e6f4ee;color:#07323b;padding:7px 10px;
  border-radius:999px;margin:4px 6px 0 0;font-weight:600;font-size:.9rem
}

.about-flowers {
  position: absolute;
  inset: 0; /* Covers the entire about section */
  pointer-events: none; /* Prevents flowers from blocking clicks */
  z-index: 1; /* Above background, below content */
}

/* 2×2 collage */
.about-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  justify-items: center;
  z-index: 2;
}

.photo-card {
  border-radius: 14px;
  border-color: #FFFFFF;
  backdrop-filter: blur(6px);
  background:transparent;
  border: 10px solid rgba(255,255,255,.3); /* Added a thicker opaque border */
  box-shadow:var(--shadow-soft);
  background-image: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.03));
}

/* I gave each photo card a different height to make the collage more interesting */

.photo-card:nth-child(1) {
  height: 250x;
  width: 350px;
  transform: translateX(-170px) translateY(-50px);
  justify-self: end; /* This aligns the photo card to the right of its cell */
  align-self: end; /* This aligns the photo card to the bottom of its cell */
}

.photo-card:nth-child(2) {
  height: 350px;
  max-width: 100%;
  transform: translateX(-170px) translateY(0px); 
}

.photo-card:nth-child(3) {
  height: 250px;
  width: 350px;
  transform: translateX(-170px) translateY(-30px);
}

.photo-card:nth-child(4) {
  height: 300px;
  width: 450px;
  transform: translateX(-170px) translateY(0px);
}

/* ---------- Pond visuals ---------- */
.pads{position:absolute;inset:0;pointer-events:none}
.pad{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
  transform:translate(-50%,-50%);border-radius:50%;
  background: radial-gradient(120% 120% at 30% 30%, #d7efdd, #7caf7e);
  box-shadow: inset 0 12px 20px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.3);
}
.pad:after{
  /* leaf cut */
  content:'';position:absolute;left:34%;top:12%;width:0;height:0;border-left:18px solid transparent;border-right:60px solid transparent;border-top:80px solid rgba(0,0,0,.18);transform:rotate(12deg);filter:blur(.1px);opacity:.5
}
.bubbles{position:absolute;inset:0;pointer-events:none}
.bubble{
  position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #cfe9ef 70%, rgba(255,255,255,0) 70%);
  opacity:.9;box-shadow:0 2px 6px rgba(0,0,0,.2)
}

/* Testimonials grid */
.t-grid{
  display:grid;gap:20px;margin-top:28px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.t-card{
  background:rgba(255,255,255,.96);border-radius:14px;padding:18px 18px 16px;
  box-shadow:var(--shadow-soft);backdrop-filter:blur(4px)
}
.t-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.avatar{
  width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#e8eef2,#c9d9e3);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.15)
}
.t-name{font-weight:800}
.t-quote{opacity:.9}

/* ---------- Sponsor rail ---------- */
#sponsors.section{
  padding: 300px 0 120px; /* extra bottom padding for visual balance */
  position: relative;
}

#sponsors .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;

}
#sponsors h2{
  margin-bottom:6px;
  transform: translateY(20px);
}
#sponsors .max-600{
  margin:0 auto 6px;
  transform: translateY(90px);
}
#sponsors .btn{
  margin-top:6px;
  margin-bottom:5px;
  padding:12px 28px;
  bottom: -90px;
}
.sponsor-carousel{
  position:relative;
  overflow:hidden;
  width:min(960px,100%);
  margin:0 auto 30px;
  padding:18px 0;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-soft);
}
.sponsor-carousel:before,
.sponsor-carousel:after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:80px;
  pointer-events:none;
  z-index:1;
}
.sponsor-carousel:before{
  left:0;
  background:linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.sponsor-carousel:after{
  right:0;
  background:linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.carousel-track{
  display:flex;
  gap:32px;
  align-items:center;
  animation:sponsor-scroll 32s linear infinite;
  padding:0 20px;
}
.carousel-track img{
  width:180px;
  height:90px;
  object-fit:contain;
  filter:saturate(.92) brightness(.95);
  transition:filter .3s ease, transform .3s ease;
}
.carousel-track img:hover{
  filter:saturate(1.1) brightness(1.05);
  transform:translateY(-4px) scale(1.02);
}
@keyframes sponsor-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (max-width:640px){
  .sponsor-carousel{padding:14px 0;margin-bottom:24px;}
  .carousel-track{gap:22px;}
  .carousel-track img{width:140px;height:70px;}
}
@media (prefers-reduced-motion: reduce){
  .carousel-track{animation:none;}
}
.logo-rail{
  margin-top:12px;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.logo-item{display:flex;flex-direction:column;align-items:center;gap:8px}
.logo-box{
  height:64px;width:100%;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-soft)
}
.logo-caption{font-weight:800;color:#334}

/* ---------- Forms ---------- */
.form-wrap{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:30px 0 60px;
}
.form-card{
  width:min(800px,100%);
  padding:32px 36px;
  border-radius:22px;
  background:var(--card);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:18px;
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
label{font-weight:700;color:#0b2e33;display:flex;flex-direction:column;gap:6px}
input,select,textarea{
  border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:10px 12px;font:inherit;
  background:#fff;outline:none
}
input:focus,select:focus,textarea:focus{border-color:#6fd6c5;box-shadow:0 0 0 3px rgba(111,214,197,.25)}
.agree{flex-direction:row;align-items:center;gap:10px}
.form-card .btn{align-self:flex-start;margin-top:4px}
.success{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:#e8fbf4;
  color:#0a3a34;
  font-weight:700;
  align-self:stretch;
}

/* ---------- FAQ ---------- */
#faq.section{
  padding: 280px 0 320px; /* extra top/bottom padding for visual balance */
  position: relative;

}
.faq.container{
  bottom: -100px;
}
.faq-list{
  max-width:800px;
  bottom: -200px;
  margin:50px auto 0;
  border-top:1px solid rgba(255,255,255,.55);
}
.faq-q{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.55);
  border-radius:0;
  padding:18px 0;
  margin:0;
  cursor:pointer;
  position:relative;
  box-shadow:none;
  color:#ffffff;
  font-size:18px;
  font-weight:700;
}
.faq-q:after{
  content:'+';
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-weight:800;
}
.faq-q[aria-expanded="true"]:after{content:'–'}
.faq-a{
  /* JS drives max-height; keep layout minimal like the Figma / reference screenshot */
  background:transparent;
  border-radius:0;
  margin:0;
  padding:0 0 16px;
  box-shadow:none;
  color:#ffffff;
  font-size:15px;
  line-height:1.6;
}
.faq-a.open{padding:0 0 18px;}



/* ---------- Responsive ---------- */
@media (max-width: 1020px){
  .split{grid-template-columns:1fr}
}
@media (max-width: 920px){
  .grid-2{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .logo-rail{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

/* Mobile: keep the same layout intent (centered hero, tidy collage) without breaking desktop */
@media (max-width: 820px){
  .hero-inner{
    padding:72px 0 220px !important; /* overrides the inline padding-bottom on the hero container */
    text-align:center;
  }
  .eyebrow,
  .subtitle,
  .hero h1{
    position:relative;
    left:auto;
    top:auto;
  }
  .eyebrow{
    font-size:18px;
    margin:0 0 8px;
  }
  .hero .spark-head{
    font-size:clamp(54px, 15vw, 84px);
    margin:0 0 10px;
  }
  .subtitle{
    font-size:14px;
    margin:0;
  }
  .about-copy h2,
  .about-copy p:first-of-type{ margin-left:0; }
}



/* General smooth scroll as fallback */
html { scroll-behavior: smooth; }

/* Hero — push sun further into top-right corner */
.sun{
  right: -3vw;      /* was closer to center — push out */
  top:   4vh;
}
@media (max-width: 640px){
  .sun{ right:-24vw; top:-6vh; }
}

/* Clouds stay behind hero text and scale down on phones */
.hero .cloud{ z-index:-1; pointer-events:none; }
@media (max-width: 640px){
  .cloud.c1{ right:2%;  top:26%; transform:scale(.8); }
  .cloud.c2{ right:-8%; top:10%; transform:scale(.75); }
}

/* Testimonials: make 2-up layout look balanced */
#testimonial-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px;
}
@media (max-width: 820px){
  #testimonial-grid{ grid-template-columns: 1fr; }
}

/* Hide sponsor logo strip if JS adds .hidden */
.hidden{ display:none !important; }

/* FAQ — move content up a bit to sit more central */
.section.faq .container{
  margin-top: -22px;   /* pulls section upward slightly */
}

/* FAQ accordion smoother animation */
.faq-a{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:
    max-height 480ms cubic-bezier(.19,.7,.3,1),
    opacity    360ms ease;
}
.faq-a.open{
  opacity:1;
}

/* Sponsor stars layer is already absolutely positioned via .sparkles */
.sparkles{
  position:absolute;
  inset:0;
  pointer-events:none;
}

@media (max-width: 480px){
  .hero-logo{
    position: relative;
    width: 200px;
    height: auto;
    margin-top: 80px;
    margin-left: 230px;
  }

  img.redf-hero{
    right: 90px !important;
    bottom: 60px !important;
    transform: translate(0,0);
    scale: 0.6;
  }
  img.pinkf-hero{
    right: -10px !important;
    bottom: 120px !important;
    transform: translate(0,0);
    scale: 0.6;
  }
  img.orangef-hero{
    right: 240px !important;
    bottom: 20px !important;
    transform: translate(0,0);
    scale: 0.6;
  }
  img.pinkf-hero2{
    right: 370px !important;
    bottom: 70px !important;
    transform: translate(0,0);
    scale: 0.6;
  }

  .mountain-divider{
    position:fixed;
    height: 60vw !important;
    width: 100%;
  }
  .sun{
    width: 400px !important;
    height: 400px !important;
    top: 120px !important;
    margin-right: 200px !important;
  }
  .header-cloud{
    width:300px !important;
    height: 300px !important;
    right: 50px !important;
    top: 190px !important;
  }
  .eyebrow{
    left: -130px !important;
    top: 40px !important;
    font-size: 24px;
  }
  .subtitle{
    font-size: 16px;
    max-width: 200px;
    left:20px !important;
    top: -35px !important;
    z-index: 3;
  }

  .photo-card:nth-child(1) {
    transform: scale(0.48) translateY(-370px) translateX(-220px) !important;
  }
  .photo-card:nth-child(2) {
    transform: scale(0.45) translateY(-300px) translateX(-730px) !important;
  }
  .photo-card:nth-child(3) {
    transform: scale(0.55) translateY(-550px) translateX(-150px) !important;
  }
  .photo-card:nth-child(4) {
    transform: scale(0.40) translateY(-810px) translateX(-780px) !important;
  }
  img.hero-logo{
    left:-216px !important;
  }



  .what-is-spark{
    font-size: 40px !important;
    transform: translateY(-380px) translateX(170px) !important;
  }
  .about-copy p{
    font-size: 25px !important;
    transform: translateY(-400px) !important;
    max-width: 360px !important;
    text-justify: inter-word;
    hyphens: auto;
  }

  img.redf-about{
    right: 173px !important;
    bottom: 1295px !important;
    transform: translate(0,0);
    scale: 0.8;
    z-index: 3;
  }
  img.orangef-about{
    right: 350px !important;
    bottom: 160px !important;
    transform: translate(0,0);
    z-index: 3;
  }
  img.greenf-about{
    right: 20px !important;
    bottom: 660px !important;
    transform: translate(0,0);
    scale: 0.8;
    z-index: 3;
  }

  .about-copy .what-is-spark-1{
    font-size: 18px !important;
    transform: translateY(-350px) !important;
  }
  .about-copy .what-is-spark-2{
    font-size: 18px !important;
    transform: translateY(-340px) translateX(55px) !important;
  }
  .about-copy .what-is-spark-3{
    font-size: 18px !important;
    transform: translateY(-310px) translateX(35px) !important;
  }
  .about-copy .what-is-spark-4{
    font-size: 18px !important;
    transform: translateY(-260px) translateX(35px) !important;
  }

  .sponsor-hill{
    height:40vw !important;
    transform: translateY(-420px);
  }

  #about {
  padding-bottom: 0px; /* Note: I think each section should have this padding */
  }
  #sponsors {
  padding: 0px 0 0px;
  padding-bottom: 0px;
  padding-top: 0px; /* Note: I think each section should have this padding */
  }
  .sponsor-faq{
    transform: translateY(159px);
    height: 130vw !important;
  }
  #sponsors h2{
    transform: translateY(-130px) !important;
  }
  #sponsors .max-600{
    transform: translateY(-70px) !important;
  }
  #sponsors .btn{
    bottom: 30px !important;
  }
  img.redf-sponsor{
    right: 20px !important;
    bottom: 650px !important;
    transform: translate(0,0);
  }
  img.redf-sponsor2{
    right: 350px !important;
    bottom: 230px !important;
    transform: translate(0,0);
  }
  img.leaf-sponsor{
    right: 30px !important;
    bottom: 230px !important;
    transform: translate(0,0);
  }
  img.leaf-sponsor2{
    right: 350px !important;
    bottom: 20px !important;
    transform: translate(0,0);
    z-index: 3;
  }

  .faq-top-left{
    height: 350px !important;
  }

  .faq-bottom-right{
    height: 300px !important;
  }
  .faq-hill{
    height: 25vw !important;
    transform: translateY(-115px) !important;
  }

  img.footer-middle-1{
    position: absolute !important;
    z-index: 1;
    width: 95px !important;  /* smaller than desktop */
    top: 10px !important;   /* adjust vertical position */
    left: 150px !important;      /* center horizontally */
  }
  img.footer-middle-2{
    position: absolute !important;
    z-index: 1;
    height: 15px !important;
    width: 55px !important;  /* smaller than desktop */
    top: 23px !important;   /* adjust vertical position */
    left: 165px !important; 
  }
  img.footer-middle-3{
    position: absolute !important;
    z-index: 1;
    width: 95px !important;  /* smaller than desktop */
    top: 30px !important;   /* adjust vertical position */
    left: 150px !important; 
  }
  img.footer-middle-4{
    position: absolute !important;
    z-index: 1;
    height: 10px !important;
    width: 65px !important;  /* smaller than desktop */
    top: 10px !important;   /* adjust vertical position */
    left: 0px !important; 
  }
  img.footer-middle-5{
    position: absolute !important;
    z-index: 1;
    height: 12px !important;
    width: 50px !important;  /* smaller than desktop */
    top: 10px !important;   /* adjust vertical position */
    left: 83px !important; 
  }
  img.footer-middle-6{
    position: absolute !important;
    z-index: 1;
    height: 12px !important;
    width: 100px !important;  /* smaller than desktop */
    top: 22px !important;   /* adjust vertical position */
    left: 10px !important; 
  }
  img.footer-middle-7{
    position: absolute !important;
    z-index: 1;
    height: 12px !important;
    width: 50px !important;  /* smaller than desktop */
    top: 39px !important;   /* adjust vertical position */
    left: 0px !important; 
  }
  img.footer-middle-8{
    position: absolute !important;
    z-index: 1;
    height: 12px !important;
    width: 50px !important;  /* smaller than desktop */
    top: 48px !important;   /* adjust vertical position */
    left: 75px !important; 
  }
  img.footer-middle-9{
    position: absolute !important;
    z-index: 1;
    height: 10px !important;
    width: 50px !important;  /* smaller than desktop */
    top: 10px !important;   /* adjust vertical position */
    right: 0px !important; 
  }
  img.footer-middle-10{
    position: absolute !important;
    z-index: 1;
    height: 10px !important;
    width: 20px !important;  /* smaller than desktop */
    top: 22px !important;   /* adjust vertical position */
    left: 125px !important; 
  }
  img.footer-middle-11{
    position: absolute !important;
    z-index: 1;
    height: 10px !important;
    width: 50px !important;  /* smaller than desktop */
    top: 10px !important;   /* adjust vertical position */
    right: 66px !important; 
  }
  img.footer-middle-12{
    position: absolute !important;
    z-index: 1;
    height: 12px !important;
    width: 85px !important;  /* smaller than desktop */
    top: 29px !important;   /* adjust vertical position */
    right: 0px !important; 
  }
  img.footer-middle-13{
    position: absolute !important;
    z-index: 1;
    height: 10px !important;
    width: 50px !important;  /* smaller than desktop */
    top: 47px !important;   /* adjust vertical position */
    right: 0px !important; 
  }
  img.footer-middle-14{
    position: absolute !important;
    z-index: 1;
    height: 10px !important;
    width: 50px !important;  /* smaller than desktop */
    top: 47px !important;   /* adjust vertical position */
    right: 66px !important; 
  }
  img.footer-middle-15{
    position: absolute !important;
    z-index: 1;
    height: 10px !important;
    width: 50px !important;  /* smaller than desktop */
    top: 58px !important;   /* adjust vertical position */
    right: 92px !important; 
  }
  img.footer-middle-16{
    position: absolute !important;
    z-index: 1;
    height: 10px !important;
    width: 20px !important;  /* smaller than desktop */
    top: 22px !important;   /* adjust vertical position */
    right: 115px !important; 
  }
  img.footer-middle-17{
    position: absolute !important;
    z-index: 1;
    height: 10px !important;
    width: 30px !important;  /* smaller than desktop */
    top: 55px !important;   /* adjust vertical position */
    left: 30px !important; 
  }
}