/* ===================================
   HUMAN IMPACT WALL HERO
=================================== */

.impact-wall-hero{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    radial-gradient(
    circle at center,
    #eef7f0,
    #ffffff);

    padding:120px 0;
}

/* CONTENT */

.impact-wall-content{

    text-align:center;

    max-width:900px;

    position:relative;

    z-index:5;
}

.hero-label{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:#eef7f0;

    color:#0B7A3E;

    font-weight:700;

    margin-bottom:30px;
}

.impact-wall-content h1{

    font-size:
    clamp(4rem,10vw,9rem);

    line-height:.9;

    color:#14532D;

    margin-bottom:30px;

    font-weight:800;
}

.impact-wall-content p{

    max-width:700px;

    margin:auto;

    color:#64748b;

    line-height:2;

    font-size:18px;
}

/* FLOATING WORDS */

.floating-word{

    position:absolute;

    font-weight:800;

    color:
    rgba(11,122,62,.08);

    user-select:none;

    pointer-events:none;

    animation:
    drift 12s linear infinite;
}

.word-1{

    top:15%;
    left:10%;

    font-size:70px;
}

.word-2{

    top:25%;
    right:10%;

    font-size:50px;
}

.word-3{

    bottom:20%;
    left:12%;

    font-size:60px;
}

.word-4{

    bottom:15%;
    right:8%;

    font-size:55px;
}

.word-5{

    top:50%;
    right:20%;

    font-size:40px;
}

@keyframes drift{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }

    100%{
        transform:translateY(0);
    }
}

@media(max-width:768px){

    .floating-word{

        display:none;
    }

    .impact-wall-content h1{

        font-size:60px;
    }
}
/* ===================================
   TRANSFORMATION CASE STUDY
=================================== */

.case-study-section{

    padding:30px 0;

    background:#ffffff;
}

.case-header{

    text-align:center;

    margin-bottom:80px;
}

.case-header h2{

    font-size:
    clamp(2.5rem,4vw,4.5rem);

    color:#14532D;

    margin-top:25px;
}

/* JOURNEY */

.case-journey{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

    margin-bottom:90px;
}

.case-stage{

    width:240px;

    text-align:center;
}

.stage-icon{

    width:90px;
    height:90px;

    margin:auto auto 25px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #0B7A3E,
    #14532D);

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:28px;

    font-weight:700;
}

.case-stage h3{

    color:#14532D;

    margin-bottom:15px;

    font-size:26px;
}

.case-stage p{

    color:#64748b;

    line-height:1.8;
}

.journey-arrow{

    font-size:50px;

    color:#0B7A3E;

    font-weight:700;
}

/* IMAGE */

.case-image{

    max-width:1000px;

    margin:auto;

    border-radius:35px;

    overflow:hidden;

    box-shadow:
    0 25px 60px rgba(0,0,0,.12);
}

.case-image img{

    width:100%;

    height:500px;

    object-fit:cover;
}

/* MOBILE */

@media(max-width:991px){

    .journey-arrow{

        display:none;
    }

    .case-stage{

        width:100%;
    }

    .case-image img{

        height:350px;
    }
}
/* ===================================
   FACES OF CHANGE
=================================== */

.faces-section{

    padding:30px 0;

    background:
    linear-gradient(
    135deg,
    #f8fafc,
    #ffffff);

    overflow:hidden;
}

.faces-header{

    text-align:center;

    max-width:850px;

    margin:auto;

    margin-bottom:100px;
}

.faces-header h2{

    font-size:
    clamp(2.5rem,4vw,4.5rem);

    color:#14532D;

    margin:25px 0;
}

.faces-header p{

    color:#64748b;

    line-height:2;
}

/* WALL */

.faces-wall{

    position:relative;

    min-height:700px;

    max-width:1200px;

    margin:auto;
}

.face-card{

    position:absolute;

    width:280px;

    background:#fff;

    padding:25px;

    border-radius:30px;

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);

    transition:.4s;
}

.face-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.12);
}

.face-card img{

    width:100px;
    height:100px;

    object-fit:cover;

    border-radius:50%;

    margin-bottom:20px;
}

.face-card p{

    color:#64748b;

    line-height:1.8;
}

/* POSITIONS */

.card-1{

    top:0;
    left:5%;
}

.card-2{

    top:120px;
    right:5%;
}

.card-3{

    bottom:60px;
    left:15%;
}

.card-4{

    bottom:0;
    right:15%;
}

/* MOBILE */

@media(max-width:991px){

    .faces-wall{

        min-height:auto;

        display:grid;

        gap:25px;
    }

    .face-card{

        position:relative;

        width:100%;

        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
    }
}
/* ===================================
   RIPPLE EFFECT OF IMPACT
=================================== */

.ripple-section{

    padding:30px 0;

    background:#ffffff;

    overflow:hidden;
}

.ripple-header{

    text-align:center;

    max-width:850px;

    margin:auto;

    margin-bottom:100px;
}

.ripple-header h2{

    font-size:
    clamp(2.5rem,4vw,4.5rem);

    color:#14532D;

    margin:25px 0;
}

.ripple-header p{

    color:#64748b;

    line-height:2;
}

/* RIPPLE */

.ripple-wrapper{

    position:relative;

    width:700px;
    height:700px;

    margin:auto;
}

/* CIRCLES */

.ripple-circle{

    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    font-weight:700;

    color:#14532D;

    border:2px dashed
    rgba(11,122,62,.15);

    animation:
    pulseRipple 6s infinite;
}

.circle-1{

    width:180px;
    height:180px;

    font-size:18px;
}

.circle-2{

    width:320px;
    height:320px;

    font-size:22px;
}

.circle-3{

    width:500px;
    height:500px;

    font-size:26px;
}

.circle-4{

    width:700px;
    height:700px;

    font-size:32px;
}

/* CENTER */

.ripple-center{

    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

    width:120px;
    height:120px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #0B7A3E,
    #14532D);

    color:#fff;

    display:flex;

    align-items:center;
    justify-content:center;

    text-align:center;

    font-weight:700;

    z-index:5;
}

@keyframes pulseRipple{

    0%{

        transform:
        translate(-50%,-50%)
        scale(1);
    }

    50%{

        transform:
        translate(-50%,-50%)
        scale(1.02);
    }

    100%{

        transform:
        translate(-50%,-50%)
        scale(1);
    }
}

/* MOBILE */

@media(max-width:768px){

    .ripple-wrapper{

        width:320px;
        height:320px;
    }

    .circle-1{

        width:80px;
        height:80px;
    }

    .circle-2{

        width:150px;
        height:150px;
    }

    .circle-3{

        width:230px;
        height:230px;
    }

    .circle-4{

        width:320px;
        height:320px;
    }

    .ripple-circle{

        font-size:12px;
    }

    .ripple-center{

        width:70px;
        height:70px;

        font-size:10px;
    }
}
/* ===================================
   COMMUNITY VOICES MOSAIC
=================================== */
.voices-section{

    position:relative;

    padding:30px 0;

    background:
    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.65)
    ),
    url("../images/community-bg.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    overflow:hidden;
}

.voices-header{

    text-align:center;

    max-width:850px;

    margin:auto;

    margin-bottom:100px;
}

.voices-header h2{

    font-size:
    clamp(2.5rem,4vw,4.5rem);
 color:#fff;
    margin:25px 0;
}

.voices-header p{

    color:rgba(255,255,255,.85);

    line-height:2;
}

/* MOSAIC */

.voices-mosaic{

    position:relative;

    min-height:700px;

    max-width:1200px;

    margin:auto;
}

.voice-note{

    position:absolute;

    width:280px;

    background:#fff;

    padding:30px;

    border-radius:25px;

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);

    transition:.4s;
}

.voice-note:hover{

    transform:
    rotate(0deg)
    translateY(-10px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.12);
}

.voice-note span{

    font-size:42px;

    color:#0B7A3E;

    display:block;

    margin-bottom:15px;
}

.voice-note p{

    color:#64748b;

    line-height:1.8;
}

/* RANDOM POSITIONS */

.note-1{

    top:0;
    left:5%;

    transform:rotate(-4deg);
}

.note-2{

    top:120px;
    right:8%;

    transform:rotate(3deg);
}

.note-3{

    top:320px;
    left:18%;

    transform:rotate(5deg);
}

.note-4{

    bottom:80px;
    right:18%;

    transform:rotate(-3deg);
}

.note-5{

    bottom:0;
    left:40%;

    transform:rotate(2deg);
}

/* MOBILE */

@media(max-width:991px){

    .voices-mosaic{

        min-height:auto;

        display:grid;

        gap:25px;
    }

    .voice-note{

        position:relative;

        width:100%;

        top:auto;
        left:auto;
        right:auto;
        bottom:auto;

        transform:none !important;
    }
}
/* ===================================
   IMPACT FOOTPRINT WALL
=================================== */

.footprint-section{

    padding:30px 0;

    background:#ffffff;
}

.footprint-wrapper{

    display:grid;

    grid-template-columns:
    .9fr 1.1fr;

    gap:80px;

    align-items:center;
}

.footprint-left{

    position:sticky;

    top:120px;
}

.footprint-left h2{

    font-size:
    clamp(3rem,5vw,5.5rem);

    line-height:1.05;

    color:#14532D;

    margin-top:30px;
}

.footprint-right{

    display:flex;

    flex-direction:column;

    gap:25px;
}

.footprint-item{

    display:flex;

    align-items:center;

    gap:30px;

    padding:35px;

    border-radius:24px;

    background:#f8fafc;

    transition:.35s;
}

.footprint-item:hover{

    transform:
    translateX(12px);

    background:#eef7f0;
}

.footprint-item span{

    font-size:48px;

    font-weight:800;

    color:#0B7A3E;

    min-width:90px;
}

.footprint-item h3{

    color:#14532D;

    font-size:28px;
}

@media(max-width:991px){

    .footprint-wrapper{

        grid-template-columns:1fr;
    }

    .footprint-left{

        position:relative;

        top:auto;
    }
}
/* ===================================
   LEGACY OF CHANGE
=================================== */

.legacy-section{

    position:relative;

    overflow:hidden;

    padding:30px 0;

    background:
    linear-gradient(
    135deg,
    #14532D,
    #0B7A3E);

    color:#fff;
}

/* BIG WORD */

.legacy-bg{

    position:absolute;

    top:50%;
    left:50%;

    transform:
    translate(-50%,-50%);

    font-size:15vw;

    font-weight:900;

    line-height:1;

    color:
    rgba(255,255,255,.05);

    pointer-events:none;

    user-select:none;

    white-space:nowrap;
}

/* CONTENT */

.legacy-content{

    position:relative;

    z-index:2;

    max-width:1000px;

    margin:auto;

    text-align:center;
}

.legacy-tag{

    display:inline-block;

    padding:14px 28px;

    border-radius:50px;

    background:
    rgba(255,255,255,.12);

    font-weight:700;

    margin-bottom:35px;
}

.legacy-content h2{

    font-size:
    clamp(3rem,6vw,6.5rem);

    line-height:1.05;

    margin-bottom:60px;
}

/* LINES */

.legacy-lines{

    display:flex;

    flex-direction:column;

    gap:24px;

    margin-bottom:60px;
}

.legacy-lines div{

    font-size:30px;

    font-weight:600;

    opacity:.95;
}

.legacy-content p{

    max-width:800px;

    margin:auto;

    font-size:18px;

    line-height:2;

    opacity:.9;
}

/* MOBILE */

@media(max-width:768px){

    .legacy-section{

        padding:120px 0;
    }

    .legacy-content h2{

        font-size:42px;
    }

    .legacy-lines div{

        font-size:20px;
    }
}