#landing-content {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

#hero {
  position: relative;
  height: 70vh;
  min-height: 700px;
  max-height: 800px;
  overflow: hidden;
}

#hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  z-index: 0;
}

#hero-content {
    transform: translateX(-900px);
    opacity: .3;
    animation: hero-fade-in 1s ease forwards;
    max-height: 700px;
    max-width: 80%;
    position: relative;
    z-index: 1;
    padding-left: 3em;
    background: linear-gradient(to right, #FFFFFF 60%, #ffffff61 100%);
    box-sizing: border-box;
    border-radius: 30px 1000px 1000px 30px;
    padding-right: 300px;
}

@keyframes hero-fade-in {
    from {
        transform: translateX(-900px);
        opacity: 0.3;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

#hero-content-container {
    max-width: 450px;
}

#hero-content-container h4 {
    font-size: 1.2rem;
}

.hero-num-section {
    gap: 3em;
    position: relative;
    opacity: 1;
    transition: opacity .5s ease, transform 500ms ease;
}

.hero-num-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(
    circle at center,
    var(--m-green) 0%,
    #055d1830 50%
    );
    opacity: 0.3;
    filter: blur(50px);
}

.hero-num-section > * {
    position: relative;
    z-index: 1;
}

.hero-num-section {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

@keyframes heroSectionIn {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Your existing .hero-num styles + a couple extras */
.hero-num {
  font-size: 5.5em;
  margin: 0;
  text-align: center;
  padding: .7em .5em;

  width: 900px;          /* ← adjust once, then forget it */
  max-width: 100%;
  box-sizing: border-box;

  border-radius: 30px;
  font-weight: 700;
  background: linear-gradient(to right, var(--m-green), var(--m-blue));
  color: white;

  display: flex;
  align-items: baseline;
  justify-content: center;   /* centers number + unit */

  gap: 0.15em;

  transform-origin: center;
  will-change: transform, letter-spacing;
transform: scale(0.92);
}


.hero-num-unit {
  font-size: 0.55em;
  opacity: 0.8;
  margin-left: 10px;
}

/* The number itself: we "roll" it by translating a few px each update */
.hero-num-value {
  display: inline-block;
  will-change: transform, filter;
  transform: translateY(var(--roll-y, 0px));
  filter: blur(var(--roll-blur, 0px));
}

/* Applied while counting to slowly “expand” */
.hero-num.is-counting {
  animation: heroNumGrow 2000ms ease-out forwards;
}

@keyframes heroNumGrow {
  from { transform: scale(0.92); letter-spacing: 0px; }
  to   { transform: scale(1.00); letter-spacing: 1px; }
}

.hero-num.is-done {
  transform: scale(1);
  letter-spacing: 1px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-num-section,
  .hero-num-section.is-visible,
  .hero-num.is-counting,
  .hero-num-value {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}




#textile-waste {
    background-image: url('/static/images/landfill_burning.webp');
    background-size: cover;
    height: 80vh;
}

#waste-center-content {
    max-width: 750px;

    background: radial-gradient(circle, white 70%, var(--l-blue) 100%);
}

.carousel-container {
    position: relative;
    overflow-x: hidden;
    height: fit-content;
    height: 100px;
    margin-top: 20px;

}

.carousel-container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
            white 0%,
            transparent 15%,
            transparent 85%,
            white 100%);
    z-index: 1;
}

/* Ensure the track is under the overlay */
.carousel-track {
    display: flex;
    width: max-content;
    animation: scroll 26s linear infinite;
    position: relative;
    z-index: 0;
    height: 100%;
    align-items: center;
}

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

.carousel-item {
    white-space: nowrap;
    font-size: 1.25rem;
    text-decoration: none;
    color: black;
    height: fit-content;
    font-weight: 600;
    margin-right: 1.5em;
    border: 1px solid var(--border-grey);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.carousel-item:hover {
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
    cursor: pointer;
    background-color: var(--off-white);
}

.carousel-item h4 {
    font-weight: 600;
    font-size: 16px;
}

.carousel-item img {
    height: 24px;
    width: auto;
}

.btn-group {
    flex-wrap: wrap;
}

/* For 3 repeated sets: move by -33.333% */
@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 960px) {
    .content-gap {
        gap: 120px;
    }
    #landing-content{
        padding-top: 0px;
    }

    #hero-carousel-wrapper {
        width: 100vw;
    }
    #hero {
        max-width: unset;
        min-height: unset;
        height: fit-content;
        background-position: center;
        width: 100vw !important;
        padding: 50px;
        border-radius: 0px;
    }

    #hero-content {
        align-items: center;
        text-align: center;
        width: 100%;
        opacity: 1 !important;
        transform: translateX(0) !important;
        max-width: 100%;
        padding: 60px 40px;
        border-radius: 30px;
        background: rgba(255, 255, 255, 0.8);
        /* add a background blur */
        backdrop-filter: blur(4px);
        animation: none;
    }

    #hero-content h4 {
        max-width: 550px;
    }

    #hero-content .btn-group {
        justify-content: center;
    }

    #hero-content-container {
        max-width: 100%;
        align-items: center;
    }

    .reverse-order {
        flex-direction: column-reverse;
    }
    #waste-center-content {
        max-width: 90%;
        padding: 40px;
    }
}

@media (max-width: 900px) {
    .hero-num {
        font-size: 4.5em;
        padding: .7em .2em;
    }
}

@media (max-width: 600px) {
    #hero {
        padding: 30px 20px;
    }

    .carousel-container::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to right,
                white 0%,
                transparent 10%,
                transparent 90%,
                white 100%);
        z-index: 1;
    }
    .hero-num {
        font-size: 3.5em;
        padding: .7em .2em;
    }
}

@media (max-width: 420px) {

    #hero {
        padding: 0px;
        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
        background-image: none;
        background-color: white; /* fallback base color */
;    }
    #hero::before {
        content: "";
        position: absolute;
        inset: -35%;
        z-index: 0;

        background:
            /* soft circle blob */
            radial-gradient(circle at 15% 25%, #055d18cc 0%, #055d1880 35%, transparent 60%),

            /* triangle-ish shape */
            conic-gradient(from 250deg at 85% 20%, #EAB308cc 0deg, #EAB308cc 75deg, transparent 76deg),

            /* diamond (rotated square) */
            radial-gradient(circle at 50% 50%, #104378cc 0%, #1042786a 40%, transparent 41%),

            /* second blob */
            radial-gradient(circle at 75% 80%, #055d18cc 0%, #055d1880 40%, transparent 60%);

        background-size: 300% 300%;
        background-repeat: repeat;

        filter: blur(20px);
        opacity: 1;

        transform: scale(1.3);
        transform-origin: center;

        will-change: transform, opacity, background-position;

        animation:
            heroIntro 3s ease forwards,                 /* fade + zoom in once */
            heroGradientShift 30s ease-in-out infinite alternate,
            heroSpin 60s linear infinite 3s;    
        transform-origin: center;
    }
    #hero-content {
        border-radius: 0px;
        padding: 80px 20px;
        background: rgba(255, 255, 255, 0);
        backdrop-filter: blur(0px);
        animation: backgroundFade 12s ease-in-out infinite alternate;
    }

    #waste-center-content h2 {
        font-size: 1.6em !important;
    }
    #waste-center-content h4 {
        font-size: 1em !important;
    }

    #waste-center-content .mt-lg {
        margin-top: 15px !important;
    }

}

@keyframes heroGradientShift {
    0% {
        background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
    }
    50% {
        background-position: 100% 50%, 0% 100%, 100% 0%, 0% 50%;
    }
    100% {
        background-position: 0% 100%, 100% 50%, 0% 0%, 100% 0%;
    }
}

@keyframes heroSpin {
    0% {
        transform: scale(1.3) rotate(0deg);
    }
    100% {
        transform: scale(1.3) rotate(360deg);
    }
}

@keyframes backgroundFade {
    0% {
        opacity: 0 !important;
        transform: translateX(0px) !important;
        background: rgba(255, 255, 255, 0.86);
        backdrop-filter: blur(0px);
    }
    100% {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(7px);
    }
}

@keyframes heroIntro {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    100% {
        opacity: 1;      /* tweak to taste */
        transform: scale(1.2);
    }
}