*
{box-sizing:border-box;
    margin:0;padding:0
}
:root{
    --green:#12613d;
    --dark:#073b28;
    --orange:#f07832;
    --cream:#fff8ef;
    --text:#202923;
    --muted:#69746d;
    --line:#e2e7e3;
    --white:#fff;
    --max:1180px
}
html
{
    scroll-behavior:smooth
}
body{
    font-family:"DM Sans",sans-serif;
    color:var(--text);
    line-height:1.65
}
a{
    text-decoration:none;
    color:inherit
}
img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover
}
button,input,textarea{
    font:inherit
}
.container
{width:min(calc(100% - 40px),var(--max));
    margin:auto
}
.announcement{
    background:var(--dark);
    color:#dcece3;
    text-align:center;
    padding:7px;
    font-size:12px
}
.announcement a{color:#ffbf96;
    font-weight:700;
    margin-left:8px
}
header{
    position:sticky;
    top:0;
    z-index:100;
    background:#fff;
    border-bottom:1px solid var(--line)
}
.nav{
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.logo img{
    width:auto;
    height:55px;
    max-width:205px;
    object-fit:contain
}
.nav nav{
    display:flex;
    gap:24px;
    align-items:center;
    font-size:14px;
    font-weight:600
}
.nav nav a:hover{
    color:var(--green)
}
.support-btn{
    background:var(--orange);
    color:#fff!important;
    padding:11px 19px;
    border-radius:3px
}
.menu{
    display:none;
    border:0;
    background:none
}
.menu i{
    display:block;
    width:25px;
    height:2px;
    background:var(--text);
    margin:5px
}

/* Hero Section */

/* =========================================
   HERO IMAGE SLIDER
========================================= */

.hero {
    height: 660px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Slider container */
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Individual slides */
.hero-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition:
        opacity 1s ease-in-out,
        transform 6s ease-out;
}

/* Active slide */
.hero-slide.active {
    opacity: 0.5;
    transform: scale(1);
}

/* Dark overlay */
.hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            90deg,
            rgba(3, 42, 27, 0.88) 0%,
            rgba(3, 57, 37, 0.58) 50%,
            rgba(3, 57, 37, 0.18) 100%
        );
}

/* Content */
.hero-inner {
    height: 100%;
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
}

/* Hero text */
.hero-text {
    max-width: 760px;
}

/* Slider dots */
.hero-dots {
    position: absolute;
    z-index: 5;

    right: 40px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Dot */
.hero-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.8);

    background: transparent;

    padding: 0;
    cursor: pointer;

    transition: all 0.3s ease;
}

/* Active dot */
.hero-dot.active {
    background: #f07832;
    border-color: #f07832;

    transform: scale(1.35);
}

/* Bottom vision bar */
.hero-bottom {
    position: absolute;
    z-index: 4;

    bottom: 0;
    left: 0;

    width: 100%;

    background: rgba(7,59,40,0.92);

    color: #fff;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding:
        18px
        max(20px, calc((100% - 1180px) / 2));

    gap: 30px;
}

.hero-bottom div {
    display: flex;
    gap: 20px;
    align-items: center;
}

.hero-bottom b {
    font-size: 10px;
    letter-spacing: 0.15em;
    color: #ffc19b;
}

.hero-bottom span {
    font-size: 13px;
    color: #dceae2;
}

.hero-bottom > a {
    font-size: 12px;
    font-weight: 700;
}


/* Mobile */
@media (max-width: 760px) {

    .hero {
        height: 620px;
    }

    .hero-dots {
        right: 18px;
        top: 50%;
    }

    .hero-dot {
        width: 9px;
        height: 9px;
    }

    .hero-shade {
        background:
            linear-gradient(
                90deg,
                rgba(3,42,27,0.82),
                rgba(3,57,37,0.48)
            );
    }

    .hero-bottom {
        display: none;
    }
}


.buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    padding:13px 24px;
    min-height:48px;
    border-radius:3px;
    font-weight:800;
    cursor:pointer
}
.primary,.orange{
    background:var(--orange);
    color:#fff
}
.primary:hover,.orange:hover{
    background:#d96322
}
.light,.white{
    background:#fff;
    color:var(--green)
}
.hero-bottom{
    position:absolute;
    z-index:2;
    bottom:0;
    left:0;
    width:100%;
    background:#073b28e8;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px max(20px,calc((100% - 1180px)/2));
    gap:30px
}
.hero-bottom div{
    display:flex;
    gap:20px;
    align-items:center
}
.hero-bottom b{
    font-size:10px;
    letter-spacing:.15em;
    color:#ffc19b
}
.hero-bottom span{
    font-size:13px;
    color:#dceae2
}
.hero-bottom>a{
    font-size:12px;
    font-weight:700
}
    .section{
        padding:105px 0
    }
    .about-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:85px;
        align-items:center
    }
    .about-image{
        height:560px;
        position:relative
    }
    .about-image span{
        position:absolute;
        left:20px;
        bottom:20px;
        background:#fff;
        color:var(--green);
        padding:10px 16px;
        font-weight:800;
        font-size:13px
    }
    .about-copy label,.section-head label,.impact-title label,.feature-copy label,.join label,.trust label,.contact label{
        color:var(--green)
    }
        h2{
            font-family:Nunito,sans-serif;
            font-size:43px;
            line-height:1.15
        }
        .about-copy h2{
            margin:12px 0 20px
        }
        .about-copy h2 strong,.impact-title strong{
            color:var(--orange)
        }
        .about-copy p{
            color:var(--muted);
            margin:14px 0
        }
        .about-copy .lead{
            font-size:19px;
            color:var(--text)
        }
        .link{
            display:inline-block;
            color:var(--green);
            font-weight:800;
            margin-top:15px
        }
        .soft{
            background:var(--cream)
        }
        .section-head{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:70px;
            align-items:end;
            margin-bottom:48px
        }
        .section-head h2{
            margin-top:12px
        }
        .section-head>p{
            color:var(--muted)
        }
        .focus-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:18px
        }
        .focus-grid article{
            background:#fff;
            border:1px solid var(--line);
            padding:28px;
            min-height:245px;
            transition:.25s
        }
        .focus-grid article:hover{
            transform:translateY(-4px);
            box-shadow:0 15px 35px #073b2810
        }
        .icon{
            width:43px;
            height:43px;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:#e7f1eb;
            color:var(--green);
            font-size:11px;
            font-weight:900;
            margin-bottom:18px
        }
        .focus-grid h3,.project-card h3,.story-grid h3{
            font-family:Nunito;
            font-size:21px
        }
        .focus-grid p,.project-card p,.story-grid p{
            color:var(--muted);
            font-size:14px;
            margin:8px 0 15px
        }
        .focus-grid a,.project-card a,.story-grid a{
            font-size:13px;
            font-weight:800;
            color:var(--green)
        }
        .impact{
            background:var(--green);
            color:#fff
        }
        .impact-title{
            max-width:650px
        }
        .impact-title label{
            color:#b9dcc7
        }
        .impact-title h2{
            margin:12px 0
        }
        .impact-title p{
            color:#cce0d5
        }
        .numbers{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            margin-top:55px
        }
        .numbers>div{
            border-right:1px solid #ffffff35;
            padding:0 30px
        }
        .numbers>div:first-child{
            padding-left:0
        }
        .numbers>div:last-child{
            border:0
        }
        .numbers b{
            font-family:Nunito;
            font-size:50px
        }
        .numbers span{
            font-size:25px;
            color:#ffc19c
        }
        .numbers p{
            color:#d5e7dc;
            margin-top:4px
        }
        .projects{
            background:#fff
        }
        .project-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:20px
        }
        .project-card{
            border:1px solid var(--line);
            background:#fff
        }
        .project-card>img{
            height:285px
        }
        .project-card div{
            padding:25px
        }
        .project-card small,.story-grid small{
            color:var(--orange);
            font-size:10px;
            font-weight:900;
            letter-spacing:.12em
        }
        .project-card h3{
            margin:7px 0
        }
        .feature{
            background:#f1f7f3;
            padding:105px 0
        }
        .feature-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:85px;
            align-items:center
        }
        .feature-image{
            height:570px
        }
        .feature-copy h2{
            margin:12px 0 18px
        }
        .feature-copy p{
            color:var(--muted);
            margin-bottom:20px
        }
        .feature-copy ul{
            list-style:none;
            margin:20px 0 30px
        }
        .feature-copy li{
            padding:10px 0;
            border-top:1px solid var(--line);
            font-weight:700
        }
        .feature-copy li:before{
            content:"✓";
            color:var(--orange);
            font-weight:900;
            margin-right:12px
        }
        .stories{
            background:#fff
        }
        .story-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:20px
        }
        .story-grid article{
            border:1px solid var(--line)
        }
        .story-grid article>img{
            height:245px
        }
        .story-grid article>div{
            padding:23px
        }
        .story-grid h3{
            line-height:1.3;
            margin:8px 0
        }
        .join{
            background:var(--orange);
            padding:70px 0;
            color:#fff
        }
        .join-box{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:40px
        }
        .join label{
            color:#ffe0cd
        }
        .join h2{
            margin:10px 0;
            color:#fff
        }
        .join p{
            color:#fff0e7;
            max-width:650px
        }
        .join-actions{
            display:flex;
            gap:10px;
            flex-shrink:0
        }
        .gallery{
            background:var(--cream)
        }
        .gallery-grid{
            display:grid;
            grid-template-columns:2fr 1fr 1fr;
            grid-template-rows:245px 245px;
            gap:10px
        }
        .gallery-grid button{
            border:0;
            padding:0;
            overflow:hidden;
            cursor:pointer
        }
        .gallery-grid button:first-child{
            grid-row:span 2
        }
        .gallery-grid img{
            transition:.45s
        }
        .gallery-grid button:hover img{
            transform:scale(1.04)
        }
        .trust{
            background:#f4f7f4
        }
        .trust-inner{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:80px
        }
        .trust h2{
            margin-top:12px
        }
        .trust p{
            color:var(--muted)
        }
        .contact{
            background:#fff
        }
        .contact-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:85px
        }
        .contact h2{
            margin:12px 0 15px
        }
        .contact>div>p{
            color:var(--muted)
        }
        .contact-info{
            margin-top:30px;
            display:grid;
            gap:17px
        }
        .contact-info div{
            display:grid
        }
        .contact-info b{
            font-size:10px;
            letter-spacing:.13em;
            color:var(--green)
        }
        .contact-info span{
            color:var(--muted)
        }
        form{
            display:grid;
            gap:15px;
            padding:32px;
            background:#f6f8f6
        }
        form label{
            letter-spacing:0;
            color:var(--text);
            font-size:13px
        }
        input,textarea{
            display:block;
            width:100%;
            margin-top:6px;
            border:1px solid #d6ded8;
            padding:13px;
            background:#fff;
            outline:0
        }
        form small{
            color:#888
        }
        footer{
            background:var(--dark);
            color:black;
            padding-top:65px
        }
        .footer-grid{
            display:grid;
            grid-template-columns:2fr 1fr 1fr 1.2fr;
            gap:45px;
            padding-bottom:55px
        }
        .footer-grid img{
            width:190px;
            height:auto;
            max-height:65px;
            object-fit:contain;
            object-position:left
        }
        .footer-grid p,.footer-grid a{
            display:block;
            color:black;
            font-size:14px;
            margin:7px 0
        }
        .footer-grid h4{
            margin-bottom:15px
        }
        .copyright{
            border-top:1px solid #ffffff1c;
            padding:18px 0;
            color:#91aa9b;
            font-size:12px
        }
        .lightbox{
            display:none;
            position:fixed;
            inset:0;
            background:#000d;
            z-index:3000;
            align-items:center;
            justify-content:center;
            padding:30px
        }
        .lightbox.open{
            display:flex
        }
        .lightbox img{
            width:auto;
            height:auto;
            max-width:90%;
            max-height:90%
        }
        .lightbox button{
            position:absolute;
            right:25px;
            top:10px;
            border:0;
            background:none;
            color:#fff;
            font-size:45px
        }
        #center_sd{
            display: none;
        }
@media(max-width:950px){
    .nav nav{
        gap:13px
    }
    .about-grid,.feature-grid,.contact-grid{
        gap:45px
    }
    .focus-grid{
        grid-template-columns:1fr 1fr
    }
    .numbers{
        grid-template-columns:1fr 1fr;
        gap:30px
    }
    .numbers>div{
        border-right:0;
        border-bottom:1px solid #ffffff35;
        padding:0 0 25px
    }
    .project-grid,.story-grid{
        grid-template-columns:1fr 1fr
    }
    .footer-grid{
        grid-template-columns:1.5fr 1fr 1fr
    }
    .footer-grid>div:last-child{
        grid-column:2
    }
    #center_pc{
        display: none;
    }
    #center_sd{
            display: block;
        }
}
@media(max-width:760px)
{
    .container{
        width:min(calc(100% - 28px),var(--max))
    }
    .nav{
        height:68px
    }
    .menu{
        display:block
    }
    .nav nav{
        display:none;
        position:absolute;
        top:106px;
        left:14px;
        right:14px;
        background:#fff;
        padding:12px;
        box-shadow:0 12px 35px #0002;
        flex-direction:column;
        align-items:stretch
    }
    .nav nav.open{
        display:flex
    }
    .nav nav a{
        padding:11px
    }
    .support-btn{
        text-align:center
    }
    .hero{
        height:620px
    }
    .hero h1{
        font-size:30px
    }
    .hero p{
        font-size:16px
    }
    .hero-bottom{
        display:none
    }
    .section{
        padding:75px 0
    }
    .about-grid,.section-head,.feature-grid,.trust-inner,.contact-grid{
        grid-template-columns:1fr;
        gap:35px
    }
    .about-image,.feature-image{
        height:390px
    }
    .focus-grid,.project-grid,.story-grid{
        grid-template-columns:1fr
    }
    .numbers{
        margin-top:40px
    }
    .join-box{
        display:block
    }
    .join-actions{
        margin-top:25px
    }
    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:190px 190px 190px
    }
    .gallery-grid button:first-child{
        grid-row:span 1;
        grid-column:span 2
    }
    .footer-grid{
        grid-template-columns:1fr 1fr
    }
    .footer-grid>div:last-child{
        grid-column:auto
    }
}
@media(max-width:450px)
{
    .buttons .btn{
        width:100%
    }
    .numbers{
        grid-template-columns:1fr
    }
    .gallery-grid{
        grid-template-columns:1fr;
        grid-template-rows:210px
    }
    .gallery-grid button:first-child{
        grid-column:auto
    }
    .join-actions{
        flex-direction:column
    }
    .footer-grid{
        grid-template-columns:1fr
    }
}