p.tertiary-b,
p.category {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tertiary);
}

span {
    color: var(--black);
    font-weight: bold;
}

.title {
    background-image:
        linear-gradient(to top,
            var(--black-50),
            /* Black, 70% opaque at the bottom */
            var(--black-50))
        /* Black, 0% opaque (transparent) at the top */
        ,
        /* 2. List your image URL SECOND */
        url(../images/header-ethical-sourcing.jpg);
}


h2.green,
h6.green {
    color: var(--tertiary);
}

div.dark {
    border-radius: 30px;
}

p.blacktxt {
    color: var(--black);
}

/*----------------------------*/
/*Section 1: Trade Containers*/
/*----------------------------*/
.trade h4 {
    margin-bottom: 30px;
}

.white-card {
    position: relative;
}

.green-sqr {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

img.trade-icon {
    aspect-ratio: 1/1;
    object-fit: contain;
    height: 5vh;
}




/*----------------------------*/
/*Section 2: Eco-farming*/
/*----------------------------*/
div.eco-farming {
    position: static;
    z-index: 0;
}

div.upperpart {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

div.welfare-textblock {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

div.welfare-textblock h4 {
    margin-bottom: 15px;
}

div.welfare-textblock>p.desc {
    margin-bottom: 137px;
}

img.eco-farming-img {
    width: 50%;
    height: 50%;
}

div.eco-farming-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 30px;
    column-gap: 15px;
}

div.eco-farming-textblock {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

div.eco-farming-textblock p.desc,
div.eco-farming-textblock h4 {
    margin-bottom: 15px;
}

div.list>img.checklist {
    height: 3vw;
}

div.list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

img.ecofarming-deco {
    margin-top: 73px;
    margin-bottom: 73px;
}



/*----------------------------*/
/*Section 3: Worker Welfare*/
/*----------------------------*/
div.welfare-textblock>p.category {
    margin-top: 100px;
}

img.deco {
    width: 50%;
    top: 2090px;
    right: 0px;
    position: absolute;
    z-index: 1;
}

img.welfare {
    position: absolute;
    width: 30%;
    top: 2100px;
    right: 0px;
    z-index: 1;
}

div.welfare-textblock {
    width: 50%;
}

div.support {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    z-index: 2;
    position: relative;
    margin-bottom: clamp(50px, 10.4vw, 150px);
}

div.support-container {
    display: flex;
    flex-direction: row;
    background-color: var(--white);
    border: 1px solid var(--grey-dark);
    border-radius: 20px;
    padding: 30px;
    gap: 12px;
    height: 100%;
    transition: transform 0.3s;
}

div.support-container:hover {
    transform: scale(1.02);
}

div.support-container-textblock {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.support-container:first-child {
    grid-column: span 2;
}

.support-container:nth-child(2) {
    grid-column: span 2;
}

.support-container:nth-child(3) {
    grid-column: span 2;
}

.support-container:nth-child(4) {
    grid-column: span 2;
}

.support-container:nth-child(5) {
    grid-column: span 2;
}

.support-container:last-child {
    grid-column: span 2;
}

img.round-deco {
    width: 50%;
    position: absolute;
    left: 0px;
    top: 2500px;
    z-index: -1;
}

/*----------------------------*/
/*Section 4: Eco System Care*/
/*----------------------------*/
div.ecosystem-care {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

div.ecosystem-care>p.category {
    display: flex;
    justify-content: center;
}

div.ecosystem-img {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 60%;
    justify-content: center;
    margin: auto;
}

img.eco-img {
    width: 40%;
    border-radius: 10px;
}

img.eco-deco {
    height: 10%;
    width: 10%;
}

div.ecosystem-img-card {
    position: relative;
}

div.ecosystem-img-card>div.wrapper>div.dark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
    padding: 250px 50px 100px 50px;
    text-align: center;
    gap: 51px;
    top: -150px;
    z-index: -1001;
    position: relative;
}

div.ecosystem-img-card>div.wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
}

div.ecosystem-textblock {
    display: flex;
    flex-direction: row;
    gap: 80px;
    justify-content: center;
    align-items: center;
}

div.ecosystem-textblock p {
    width: 90%;
}

/*----------------------------*/
/*Section 5: Traceable Supply*/
/*----------------------------*/
img.supply-img {
    width: 50%;
    position: relative;
    left: -200px;
}

div.traceable-supply>div.wrapper {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

div.traceable-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

div.list-item>img.checklist {
    width: 10%;
}

div.list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

div.supply-textblock {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

div.supply-textblock h4 {
    margin-bottom: 15px
}

div.supply-textblock>p.desc {
    margin-bottom: clamp(20px, 6vh, 60px);
}

div.traceable-supply>div.wrapper {
    padding-top: 0px;
}

@media(max-width: 1300px) {

    /*----------------------------*/
    /*Section 1: Trade Containers*/
    /*----------------------------*/
    .green-sqr {
        bottom: 35%;
        right: 10%;
    }


}

@media(max-width: 1130px) {

    /*----------------------------*/
    /*Section 1: Trade Containers*/
    /*----------------------------*/
    .green-sqr {
        bottom: 40%;
        right: 12%;
    }

}

@media(max-width: 1025px) {

    /*----------------------------*/
    /*Section 1: Trade Containers*/
    /*----------------------------*/
    img.trade-icon {
        width: 30px;
        height: 30px;
    }

    /*----------------------------*/
    /*Section 2: Eco-farming*/
    /*----------------------------*/

    /*----------------------------*/
    /*Section 3: Worker Welfare*/
    /*----------------------------*/
    img.deco {
        top: 2500px;
    }

    img.welfare {
        top: 2450px;
        width: 40%;
    }

    /*----------------------------*/
    /*Section 4: Eco System Care*/
    /*----------------------------*/

    div.support {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    img.eco-deco {
        display: none;
    }

    div.ecosystem-img {
        display: none;
    }

    /* The Gallery and Slides */

    .store-gallery-section {
        text-align: center;
        padding: 50px 0;
        overflow: hidden;
        /* Important to keep the side images visible but contained */
        position: relative;
        /* To position the arrows */
    }

    .gallery-wrapper {
        overflow: hidden;
        position: relative;
        /* CRITICAL: Set width to 100% and remove max-width/centering. */
        width: 100%;
        /* Use viewport width to span the whole screen */
        margin: 0;
        /* Ensure no margin/padding is inherited from a parent wrapper */

        /* REMOVE: max-width: 1200px; */
        /* REMOVE: margin: 0 auto; */
    }

    .slides-container {
        display: flex;
        overflow-x: scroll;
        scroll-behavior: smooth;

        /* CRITICAL: Use viewport width units for padding to match the screen edge */
        /* Remove the fixed padding: 0 15%; from the previous version. */
        /* Instead, we set the initial scroll offset using a large negative margin */
        /* Note: If you want the center slide to be the second one, you may need JS
       to set the initial scroll position after the page loads. */

        /* To push the first element off the left edge and center the second element
       We apply padding equal to half the visible slide width to the left.
       (If the slide is 70vw, the visible space is 30vw, so half is 15vw) */
        padding-left: 15vw;
        padding-right: 15vw;
        /* Keep this to ensure proper snapping on the last slide */

        /* Optional: Hide the scrollbar */
        -ms-overflow-style: none;
        scrollbar-width: none;
    }


    .slide {
        flex: 0 0 70vw;
        height: 50vh;
        /* CRITICAL: Define a height for the slide container. 
    Using 'vh' (viewport height) is common for hero sections. */
        scroll-snap-align: center;
        border-radius: 10px;
        overflow: hidden;
        /* CRITICAL: Ensures the image crops cleanly to the border-radius */
        margin: 0 10px;
    }

    .slide img {
        display: block;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* ---------------------------------- */
    /* Navigation Arrows */
    /* ---------------------------------- */

    .nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        font-size: 3rem;
        color: white;
        cursor: pointer;
        z-index: 10;
        padding: 20px;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }

    div.ecosystem-img-card>div.wrapper>div.dark {
        padding: 200px 50px 50px 50px;
    }

    /*----------------------------*/
    /*Section 5: Traceable Supply*/
    /*----------------------------*/
    img.supply-img {
        width: 50%;
        position: relative;
        left: -100px;
    }

}

@media(max-width: 768px) {

    /*----------------------------*/
    /*Section 1: Trade Containers*/
    /*----------------------------*/
    .green-sqr {
        width: 70px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    img.trade-icon {
        aspect-ratio: 1/1;
    }

    /*----------------------------*/
    /*Section 2: Eco-farming*/
    /*----------------------------*/
    div.upperpart {
        display: flex;
        flex-direction: column;
    }

    img.eco-farming-img-responsive {
        border-radius: 20px;
    }

    div.eco-farming-list {
        display: flex;
        flex-direction: column;
    }

    div.label {
        display: flex;
        gap: 50px;
        align-items: center;
        flex-direction: column;
        align-content: center;

    }

    div.list>img.checklist {
        height: 10vw;
    }

    div.label-list {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    div.label-list p {
        text-align: center;
    }

    img.eco-farming-img {
        display: none;
    }

    img.eco-farming-img-responsive {
        height: 100%;
    }

    /*----------------------------*/
    /*Section 3: Worker Welfare*/
    /*----------------------------*/
    div.support {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    img.welfare {
        display: none;
    }

    div.welfare-textblock {
        width: 100%;
    }

    div.welfare-textblock>p.desc {
        margin-bottom: 30px;
    }

    img.round-deco {
        display: none;
    }

    /*----------------------------*/
    /*Section 4: Eco System Care*/
    /*----------------------------*/
    div.ecosystem-img {
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        justify-content: center;
    }

    div.ecosystem-img-gallery {
        display: none;
    }




    /*----------------------------*/
    /*Section 5: Traceable Supply*/
    /*----------------------------*/
    div.traceable-supply>div.wrapper {
        display: flex;
        flex-direction: column;
        left: 100px;
    }

    img.supply-img {
        display: none;
    }

}


/*min-width*/
@media(min-width: 1025px) {
    div.icon-base-responsive {
        display: none;
    }

    div.ecosystem-img-gallery {
        display: none;
    }
}

@media(min-width: 768px) {
    img.eco-farming-img-responsive {
        display: none;
    }
}