/*=========================================================
    SUSTAINABILITY SECTION
    PART 1
=========================================================*/

:root{

    --sustainability-max-width:1280px;

    --grid-color:#dbe7ef;

    --text-color:#2d2d2d;

    --heading-color:#222;

    --orange:#e85b24;

    --card-bg:#ffffff;

    --border-radius:16px;

}

/*=========================================================
    SECTION
=========================================================*/

.sustainability-section{

    position:relative;

    overflow:hidden;

    width:100%;

    padding:120px 0;

    background-color:#fbf9f8;

    background-image:

        linear-gradient(var(--grid-color) 1px, transparent 1px),

        linear-gradient(90deg,var(--grid-color) 1px, transparent 1px);

    background-size:24px 24px;

}

/*=========================================================
    CONTAINER
=========================================================*/

.sustainability-container{

    position:relative;

    max-width:var(--sustainability-max-width);

    margin:auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:520px 1fr;

    gap:90px;

    align-items:center;

    z-index:2;

}

/*=========================================================
    FLOATING IMAGES
=========================================================*/

.floating-image{

    position:absolute;

    pointer-events:none;

    user-select:none;

    z-index:1;

    transition:

        transform .35s ease,

        opacity .35s ease;

}

/* Plastic Bottle */

.floating-top{

    width:340px;

    top:-40px;

    right:8%;

    transform:rotate(-12deg);

    animation:floatBottle 7s ease-in-out infinite;

}

/* Fabric */

.floating-bottom{

    width:420px;

    bottom:-120px;

    right:3%;

    transform:rotate(-10deg);

    animation:floatFabric 8s ease-in-out infinite;

}

/*=========================================================
    CONTENT
=========================================================*/

.sustainability-content{

    position:relative;

    z-index:5;

}

.section-label{

    display:inline-block;

    margin-bottom:24px;

    font-family:'League Spartan',sans-serif;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--orange);

}

.sustainability-content h2{

    font-family:'League Spartan',sans-serif;

    font-size:54px;

    font-weight:500;

    line-height:1.15;

    color:var(--heading-color);

    margin:0;

    letter-spacing:-1px;

    max-width:620px;

}

/*=========================================================
    BUTTON
=========================================================*/

.learn-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:34px;

    font-family:'League Spartan',sans-serif;

    font-size:18px;

    font-weight:600;

    color:var(--orange);

    text-decoration:none;

    transition:.3s;

}

.learn-more::after{

    content:"→";

    transition:.3s;

}

.learn-more:hover{

    color:#c84718;

}

.learn-more:hover::after{

    transform:translateX(8px);

}

/*=========================================================
    PLACEHOLDER FOR FEATURE CARD
=========================================================*/

.sustainability-card{

    position:relative;

    z-index:5;

}

/*=========================================================
    SUSTAINABILITY SECTION
    PART 2
=========================================================*/

/*=========================================================
    FEATURE CARD
=========================================================*/

.sustainability-card{

    background:var(--card-bg);

    border-radius:var(--border-radius);

    padding:55px;

    box-shadow:

        0 20px 60px rgba(0,0,0,.08);

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}

.sustainability-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 30px 70px rgba(0,0,0,.12);

}

/*=========================================================
    GOLD TITLE
=========================================================*/

.sustainability-card h3{

    font-family:'League Spartan',sans-serif;

    font-size:72px;

    font-weight:800;

    line-height:.95;

    margin:0 0 28px;

    color:#222;

    text-transform:uppercase;

    letter-spacing:-2px;

}

.highlight-description{

    font-family:'League Spartan',sans-serif;

    font-size:28px;

    line-height:1.25;

    font-weight:500;

    color:#333;

    margin-bottom:45px;

    max-width:520px;

}

/*=========================================================
    FEATURE LIST
=========================================================*/

.feature-list{

    display:flex;

    flex-direction:column;

    gap:26px;

}

/*=========================================================
    FEATURE ITEM
=========================================================*/

.feature-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    transition:.35s;

}

.feature-item:hover{

    transform:translateX(10px);

}

/*=========================================================
    ICON
=========================================================*/

.feature-icon{

    width:62px;

    height:62px;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.35s;

}

.feature-icon i{

    font-size:24px;

    color:var(--orange);

}

.feature-item:hover .feature-icon{

    background:var(--orange);

    transform:rotate(8deg);

}

.feature-item:hover .feature-icon i{

    color:#fff;

}

/*=========================================================
    TEXT
=========================================================*/

.feature-text{

    flex:1;

}

.feature-text h4{

    margin:0 0 8px;

    font-family:'League Spartan',sans-serif;

    font-size:24px;

    font-weight:700;

    color:#222;

}

.feature-text p{

    margin:0;

    font-family:'League Spartan',sans-serif;

    font-size:18px;

    line-height:1.6;

    color:#666;

}

/*=========================================================
    REVEAL ANIMATION
=========================================================*/

.sustainability-content,

.sustainability-card{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.sustainability-content.show,

.sustainability-card.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================================
    FLOAT ANIMATIONS
=========================================================*/

@keyframes floatBottle{

    0%{

        transform:

            translateY(0)

            rotate(-12deg);

    }

    50%{

        transform:

            translateY(-18px)

            rotate(-8deg);

    }

    100%{

        transform:

            translateY(0)

            rotate(-12deg);

    }

}

@keyframes floatFabric{

    0%{

        transform:

            translateY(0)

            rotate(-10deg);

    }

    50%{

        transform:

            translateY(16px)

            rotate(-14deg);

    }

    100%{

        transform:

            translateY(0)

            rotate(-10deg);

    }

}

/*=========================================================
    PARALLAX READY
=========================================================*/

.floating-top,

.floating-bottom{

    will-change:transform;

}

/*=========================================================
    LINK ANIMATION
=========================================================*/

.learn-more{

    position:relative;

}

.learn-more::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--orange);

    transition:.35s;

}

.learn-more:hover::before{

    width:100%;

}

/*=========================================================
    CARD BORDER EFFECT
=========================================================*/

.sustainability-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:

        linear-gradient(

            135deg,

            rgba(232,91,36,.25),

            transparent,

            rgba(0,0,0,.04)

        );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}

/*=========================================================
    IMAGE HOVER
=========================================================*/

.floating-image:hover{

    transform:scale(1.05);

}

/*=========================================================
    SMOOTH PERFORMANCE
=========================================================*/

.sustainability-card,

.feature-item,

.feature-icon,

.learn-more{

    will-change:transform;

}

/*=========================================================
    SUSTAINABILITY SECTION
    PART 3
    Responsive + Parallax + Final Polish
=========================================================*/

/*=========================================================
    LARGE DESKTOP
=========================================================*/

@media (min-width:1600px){

:root{

    --sustainability-max-width:1500px;

}

.sustainability-container{

    grid-template-columns:600px 1fr;

    gap:120px;

}

.sustainability-content h2{

    font-size:66px;

}

.sustainability-card{

    padding:70px;

}

.sustainability-card h3{

    font-size:86px;

}

.highlight-description{

    font-size:32px;

}

.floating-top{

    width:420px;

}

.floating-bottom{

    width:520px;

}

}

/*=========================================================
    DESKTOP
=========================================================*/

@media (max-width:1400px){

.sustainability-container{

    gap:70px;

}

.sustainability-content h2{

    font-size:48px;

}

.sustainability-card h3{

    font-size:64px;

}

}

/*=========================================================
    TABLET
=========================================================*/

@media (max-width:1024px){

.sustainability-section{

    padding:90px 0;

}

.sustainability-container{

    grid-template-columns:1fr;

    gap:60px;

}

.sustainability-content{

    text-align:center;

    max-width:720px;

    margin:auto;

}

.sustainability-content h2{

    max-width:100%;

}

.learn-more{

    justify-content:center;

}

.sustainability-card{

    max-width:760px;

    margin:auto;

}

.floating-top{

    width:260px;

    right:-30px;

    top:30px;

    opacity:.45;

}

.floating-bottom{

    width:320px;

    right:-80px;

    bottom:-60px;

    opacity:.35;

}

}

/*=========================================================
    MOBILE
=========================================================*/

@media (max-width:768px){

.sustainability-section{

    padding:70px 0;

    background-size:18px 18px;

}

.sustainability-container{

    padding:0 20px;

    gap:45px;

}

.section-label{

    font-size:13px;

    letter-spacing:1.5px;

}

.sustainability-content h2{

    font-size:34px;

    line-height:1.22;

}

.learn-more{

    margin-top:26px;

    font-size:17px;

}

.sustainability-card{

    padding:32px 26px;

}

.sustainability-card h3{

    font-size:48px;

    line-height:1;

}

.highlight-description{

    font-size:22px;

    margin-bottom:35px;

}

.feature-list{

    gap:22px;

}

.feature-item{

    gap:16px;

}

.feature-icon{

    width:54px;

    height:54px;

}

.feature-icon i{

    font-size:20px;

}

.feature-text h4{

    font-size:20px;

}

.feature-text p{

    font-size:16px;

    line-height:1.5;

}

.floating-top{

    width:170px;

    top:20px;

    right:-35px;

    opacity:.30;

}

.floating-bottom{

    width:210px;

    right:-70px;

    bottom:-70px;

    opacity:.25;

}

}

/*=========================================================
    SMALL MOBILE
=========================================================*/

@media (max-width:480px){

.sustainability-section{

    padding:55px 0;

}

.sustainability-container{

    padding:0 16px;

}

.sustainability-content h2{

    font-size:28px;

}

.learn-more{

    font-size:16px;

}

.sustainability-card{

    padding:26px 20px;

    border-radius:14px;

}

.sustainability-card h3{

    font-size:40px;

}

.highlight-description{

    font-size:18px;

}

.feature-item{

    flex-direction:column;

    align-items:flex-start;

}

.feature-icon{

    margin-bottom:6px;

}

.feature-text h4{

    font-size:19px;

}

.feature-text p{

    font-size:15px;

}

}

/*=========================================================
    TOUCH DEVICES
=========================================================*/

@media (hover:none){

.feature-item:hover{

    transform:none;

}

.sustainability-card:hover{

    transform:none;

}

.learn-more:hover::after{

    transform:none;

}

.floating-image{

    animation-duration:10s;

}

}

/*=========================================================
    PARALLAX SUPPORT
=========================================================*/

.floating-top,

.floating-bottom{

    transform-style:preserve-3d;

    backface-visibility:hidden;

    will-change:transform;

}

/*=========================================================
    SMOOTH TRANSITIONS
=========================================================*/

.sustainability-content,

.sustainability-card,

.feature-item,

.feature-icon,

.learn-more,

.floating-image{

    transition:

        all .35s ease;

}

/*=========================================================
    ACCESSIBILITY
=========================================================*/

.learn-more:focus{

    outline:2px solid var(--orange);

    outline-offset:4px;

    border-radius:4px;

}

.feature-item:focus-within{

    outline:2px solid rgba(232,91,36,.3);

    border-radius:10px;

}

/*=========================================================
    REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}

/*=========================================================
    PRINT
=========================================================*/

@media print{

.floating-image{

    display:none;

}

.sustainability-section{

    background:#fff;

}

.sustainability-card{

    box-shadow:none;

    border:1px solid #ddd;

}

}

/*=========================================================
    FINAL POLISH
=========================================================*/

.sustainability-section *{

    box-sizing:border-box;

}

.sustainability-card{

    position:relative;

    overflow:hidden;

}

.sustainability-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);

}

.feature-text{

    min-width:0;

}

.feature-text p{

    word-break:break-word;

}

.floating-image{

    filter:drop-shadow(0 25px 35px rgba(0,0,0,.12));

}

.sustainability-content{

    position:relative;

    z-index:5;

}

.sustainability-card{

    z-index:5;

}