/* This applies to the containers your JS is targeting */

main > section {
  position: relative; 
  z-index: 10;        /* Higher than footer */
  width: 100%;
  min-height: 100vh;
  overflow: hidden;   /* Keeps the card sliding contained */
}

/* Important: The very last section needs a margin to 'uncover' the footer */
main > section:last-of-type {
  min-height: 100vh;
}

/* .main-content-wrapper { 
  position: relative;
  z-index: 2;
  background: white; 
} */

main::after {
  content: "";
  display: block;
  height: 100vh;     /* Match the footer height */
  background: transparent;
  pointer-events: none;
}

/* 3. Ensure main covers the footer until the very end */
main {
  position: relative;
  z-index: 2;
  /* Ensure the background of main isn't transparent 
     or the footer will show through early */
  /*background: white; */
}


.hero {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background: #f5f5f5; 
  z-index: 2;
}

.hero-inner {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  clip: rect(0, auto, auto, 0);
}
.hero-inner>div {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align:center;
}
.hero__subhead {
  color: white;
  font-family: 'Baskerserif', serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  letter-spacing: -0.125rem;
  text-align: center;
}


@supports (-webkit-overflow-scrolling: touch) {
  .hero-inner {
    clip: unset;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}


.hero__background-1 {
  background-color: red;
}
.hero__background-2 {
  background-color: pink;
}
.hero__background-3 {
  background-color: blue;
}
.hero__background-4 {
  background-color: lightblue;
}
@media (min-width: 1200px) {
  .hero__subhead {
    font-size: 8rem;
  }
}

.content__card {
  border-radius: calc(var(--radius)*2);
  margin: 0 auto;
  padding: 8rem;
  max-width:1400px;
  background-color: white;
}
.content__card p {
  color: charcoal;
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  line-height: 1.4em;
  text-align: left;
}
.content__card img{
  margin-bottom:4rem;
}
.content__card .icon-link {
  font-size: 2rem;
  border: 1px solid rgb(198, 194, 194);
  border-radius:100px;
  padding: 0.8rem;
  margin-bottom: 1.6rem;
}
.content__card .columns-single {
  text-align:center;
  width:70%;
  margin: 0 auto 10rem auto;
}
.content__card .columns-two {
  flex-direction: row;
  text-align:center;
  margin-bottom: 10rem;
  column-gap:6rem;
}
.content__card .heading-label {
  color: charcoal;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.2rem;
  }
.content__card .item-heading {
  color: charcoal;
  font-family: 'Baskerserif', serif;
  font-weight: 400;
  font-size: 3rem;
  margin-bottom:3rem;
}
.lead-paragraph{
  color: charcoal;
  font-family: 'Baskerserif', serif;
  font-size: 3rem;
  text-align:left;
  line-height: 1.4em;
  width:70%;
  margin: 10rem auto;
}

/* 1. Make the footer fill the whole screen */
.sticky-footer {
  position: fixed;
  top: 0;         /* Change from bottom: 0 to top: 0 */
  left: 0;
  width: 100%;
  height: 100vh;  /* Full viewport height */
  z-index: 1;     /* Sits behind everything */
  
  /* Layout for your footer content */
  display: grid;
  place-items: center;
  background: #f5f5f5;
}