main {
    background-color: var(--off-white);
    color: black;
    padding-bottom: 160px;
    overflow-x: hidden;
}

#header {
    position: relative;
    background-image: url('/static/images/landfill_burning.webp');
    background-size: cover;
    background-position: 45% 30%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    margin: 0px;
    height: 82vh;
    padding-bottom: 150px;
    padding-top: 50px;
    max-height: 500px;
    overflow-y: visible;
}

#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.0); /* Adjust the opacity (0.5) for desired darkness */
    z-index: 1; /* Ensure it is layered below the content */
}

#header-content {
    position: relative; /* To ensure content appears above the overlay */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 120px;
    box-sizing: border-box;
    padding: 40px;
    border-radius: 20px;
}

#info-blocks {
    display: flex;
    flex-direction: row;
    width: 100%;
    column-gap: 24px;
    margin-top: 32px;
}

.info-block {
    box-sizing: border-box;
    flex: 1;
    color: white;
    min-height: 100%;
    border-radius: 10px;
    padding: 2em;
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--m-blue);
}

.info-block:hover {
    transform: scale(1.02);
}

#section-two {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    column-gap: 56px;
    box-sizing: border-box;
}

#sect-two-img {
    background-image: url('/static/images/textile_waste_landfill.jpeg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    min-height: 300px;
    border-radius: 20px;
}

#section-three {
    background-color: var(--m-blue);
    padding: 2em;
    border-radius: 10px;
    margin-top: 36px;
    color: white;
}


#column-text {
    column-count: 2;
}

#resource-files {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 12px;
    border-radius: 10px;
    margin-bottom: 48px;
}

.resource-file {
    padding: 1em 0em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-gap: 48px;
    color: black;
    border-top: 1px solid lightgrey;
    background-color: transparent;
}

.resource-file:nth-child(2) {
    border-top: none;
    background-color: transparent;
}

.resource-link {
    text-decoration: none;
    color: #055d18;
    font-weight: 500;
}

.resource-link:hover {
    text-decoration: underline;
}

.resource-file:nth-child(odd) {
    border-top: 1px solid lightgrey;
    background-color: transparent;
}

.resource-file:last-child {
    border-radius: 0px 0px 10px 10px;
}

.info-h3 {
  font-weight: 500;
  font-size: 22px;
}

.resource-file h3 {
    font-size: 18px;
    margin: 0px;
}

#resource-file-header {
    column-gap: 48px;
    background-color: transparent;
    color: rgb(55,55,55);
    width: 100%;
    padding: 0em 0em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    border-bottom: 1px solid lightgray;
}

#resource-file-header p {
    font-size: 16px;
    margin: 16px 0px;
}

.section-title {
    margin: 0px;
    margin-top: 80px;
}

#footer {
    margin-top: 0px;
}

#request-form {
    width: 960px;
    background: linear-gradient(to bottom right, var(--m-green), var(--m-blue));
    height: 100%;
    border-radius: 50px;
    margin-top: 56px;
    padding: 80px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

#request-form p {
  margin-top: 0px;
}

.fade-in-section {
    opacity: 0;               /* start transparent */
    transform: translateY(30px);  /* slide up effect */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  
  .fade-in-section.visible {
    opacity: 1;               /* fully visible */
    transform: translateY(0); /* no translation */
  }

/* Keyframes for the slow-moving conic gradient --------------------------- */
@keyframes spin-ring {
    from {
        transform: rotate(-180deg);
    }

    to {
        transform: rotate(180deg);
    }
}

.main-btn {
    /* layout */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    /* tweak to taste */
    font-weight: 300;

    /* look & feel */
    background: var(--yel);
    color: black;
    border: none;
    border-radius: 100px;
    font: 600 16px/1 var(--mont);
    overflow: hidden;
    /* keep the glow inside the pill */
    cursor: pointer;

    /* motion */
    transition: color .1s ease, transform .2s ease, font-weight .2s ease;
    z-index: 0;
    width: 360px;
    height: 80px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 500;
    margin-top: 24px;
}

.main-btn:hover {
    transform: scale(1.02);
    color: black;
    background: var(--yel);
    font-weight: 600;
}

/* ----------------------------------------------------------------------- */
/*  VIBRANT GRADIENT RING  ( ::before )                                    */
/* ----------------------------------------------------------------------- */
.main-btn::before {
    content: '';
    position: absolute;
    inset: -50%;
    /* make it much larger than btn   */
    background: conic-gradient(white 0%,
            var(--l-green) 20%,
            rgba(255, 255, 255, 0) 25% 360deg);
    /* seamless loop                  */
    border-radius: 50%;
    /* full circle so rotation is smooth */
    animation: spin-ring 8s linear infinite;
    filter: blur(15px);
    /* soft glow                      */
    z-index: -1;
    transition: opacity .4s ease;
    /* lets us “dissipate” on hover   */
}

/* Fade the ring away on hover */
.main-btn:hover::before {
    opacity: 0;
}

/* ----------------------------------------------------------------------- */
/*  INNER MASK  ( ::after )                                                */
/*  Creates a solid fill so only the 2-3 px rim shows the gradient         */
/* ----------------------------------------------------------------------- */
.main-btn::after {
    content: '';
    position: absolute;
    inset: 3px;
    /* width of the rim               */
    background-color: var(--yel);
    border-radius: inherit;
    z-index: -1;
    transition: background-color .4 ease;
}


@media (max-width: 980px) {
    .navbar__menu {
        backdrop-filter: blur(10px);         /* applies the blur */
        -webkit-backdrop-filter: blur(10px);
    }

    #header-content {
        max-width: 100vw;
    }

    #request-form {
        box-sizing: border-box;
        z-index: 100;
        width: 100%;
        margin: 0px;
        margin-top: 48px;
        padding: 3em 2em;
        height: auto;
    }

    #request-form-input {
        width: 100%;
        max-width: 420px;
    }
    
    #request-form-input input {
        width: 100%;
    } 

    #request-form-input {
        width: 80%;
    }

}


  

@media (max-width: 768px) {
    #header-content {
        flex-direction: column;
        width: 100%;
        margin-top: 20vh;
        z-index: 1;
    }

    #header-right #header-left {
        margin: 0px;
    }
    
    #header::before {
        z-index: 1; /* Ensure it is layered below the content */
    }

    #info-blocks {
        display: flex;
        flex-direction: column;
        width: 100%;
        row-gap: 24px;
        margin-top: 32px;
    }

    #section-two {
        flex-direction: column;
        row-gap: 36px;
    }

    #section-three p {
        column-count: 1;
    }

    #resource-files {
        box-sizing: border-box;
        overflow-x: none;
    }

    .resource-file {
      box-sizing: border-box;
        width: 100%;
        padding: 2em 0em;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        column-gap: 16px;
        color: black;
        background-color: rgb(215, 215, 215);
    }

    .resource-file:nth-child(2) {
      border-radius: 10px 10px 0px 0px !important;
    }

    .resource-file h3 {
      width: 100%;
      font-weight: 500;
    }


    .resource-file {
        border-top: 1px solid lightgrey;
        background-color: transparent;
    }
    .resource-file:nth-child(odd) {
        border-top: 1px solid lightgrey;
        background-color: transparent;
    }

    .resource-file:nth-child(2) {
        border-top: none;
        background-color: transparent;
    }

    .resource-link {
      color: #055d18 !important;
    }

    #resource-file-header {
      display: none;
    }

    #request-form-input {
        width: 80%;
    }

    .info-text {
        right: -60px;
    }

    .main-btn {
      width: 100%;
    }
}

/*─────────────────────────────────────────────────────────────────────────
  1) Header area (inside #header)
─────────────────────────────────────────────────────────────────────────*/

/* #header-content was inline-white text */
#header-content {
  color: white;
}

/* “What is Textile Waste?” H1 */
.header-h1 {
  font-size: 64px;
  text-align: center;
  margin: 0;
  z-index: 1;
}

/* Subtitle H3 under the H1 */
.header-h3 {
  color: var(--yel);
  margin-bottom: 10px;
  text-align: center;
}

/* Copyright line at bottom-right of #header */
.header-copy {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 12px;
  color: white;
}


/*─────────────────────────────────────────────────────────────────────────
  2) “OVERVIEW” section in #waste-main-content
─────────────────────────────────────────────────────────────────────────*/

/* The first H2 (“Untangling Textile Waste…”) */
.mt24-zero-marb {
  margin: 0;
  margin-top: 24px;
}

/* Paragraph immediately after it */
.mt24-mb0 {
  margin-top: 24px;
  margin-bottom: 0;
}

/* “Below are three key challenges…” */
.mt24 {
  margin-top: 24px;
}

/*─────────────────────────────────────────────────────────────────────────
  3) The three .info-blocks (no inline styles to extract here)
─────────────────────────────────────────────────────────────────────────*/


/*─────────────────────────────────────────────────────────────────────────
  4) “ENVIRONMENTAL IMPACT” block
─────────────────────────────────────────────────────────────────────────*/

/* H2 under “ENVIRONMENTAL IMPACT” */
#section-two h2 {
  margin: 0;
  margin-top: 24px;
}

/* The two paragraphs under that H2 */
#section-two p {
  margin-top: 24px;
}

/* Left flex-child (was inline “flex: 2”) */
.flex-2 {
  flex: 2;
}

/* Right flex-child (#sect-two-img) */
#sect-two-img {
  flex: 1.5;
}


/*─────────────────────────────────────────────────────────────────────────
  5) “ECONOMIC & CIRCULAR ECONOMY IMPACT” block
─────────────────────────────────────────────────────────────────────────*/

/* H2 under “ECONOMIC & CIRCULAR ECONOMY IMPACT” */
#section-three + .fade-in-section h2 {
  /* In this markup, the next fade-in-section after #section-two is the economic block */
  margin: 0;
  margin-top: 24px;
}



/*─────────────────────────────────────────────────────────────────────────
  6) “Did you know?” row (inside #section-three)
─────────────────────────────────────────────────────────────────────────*/

/* Container should behave like flex-row */
.icon-row {
  display: flex;
  flex-direction: row;
}

/* Icon styling */
.icon-large {
  font-size: 32px;
  margin-right: 12px;
  padding-top: 4px;
}

/* The “Did you know?” H2 (just zero out margins) */
.mt0 {
  margin: 0;
}

/* The paragraph under “Did you know?” uses the same .mt24 as above */



/*─────────────────────────────────────────────────────────────────────────
  7) “OTHER RESOURCES” block
─────────────────────────────────────────────────────────────────────────*/

/* Intro paragraph at top of “OTHER RESOURCES” */
.resources-intro {
  margin-bottom: 56px;
  max-width: 660px;
}

/* “Resource” / “Brief Description” header flex cells */
#resource-file-header .flex-2 {
  flex: 2;
}

/* Each resource row: the H3 and P use .flex-2 */
.resource-file .flex-2 {
  flex: 2;
}

/* The small italic text inside each H3 */
.i-small {
  font-size: 14px;
}


/*─────────────────────────────────────────────────────────────────────────
  8) “Can we help pick up your textile waste?” form at the bottom
─────────────────────────────────────────────────────────────────────────*/

/* The ZIP-code input wrapper (was inline: position, display, margin, width) */
.zipcode-wrapper {
  position: relative;
  display: inline-block;
  margin: 0;
  width: 100%;
}

/* The ZIP-code <input> itself */
.zipcode-input {
  font-weight: 500;
  box-sizing: border-box;
}


/*─────────────────────────────────────────────────────────────────────────
  9) (No other inline styles left)
─────────────────────────────────────────────────────────────────────────*/