:root {

    --dark: #34482c;
    --primary: #688557;
    --medium: #869d79;
    --light: #a4b69a;
    --pale: #c3cebc;
    --soft: #e1e7dd;

    --white: #ffffff;
    --black: #182018;
    --text: #5d6959;

    --shadow:
        0 20px 55px rgba(52,72,44,.13);

    --radius: 25px;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Inter,
        Segoe UI,
        Arial,
        sans-serif;

    color: var(--black);

    background:
        #f8faf6;

    line-height: 1.7;

    overflow-x: hidden;
}


a {
    text-decoration: none;
    color: inherit;
}


img {
    width: 100%;
    display: block;
}


.container {

    width: min(1160px, 92%);

    margin: auto;
}



/* NAVBAR */

.navbar {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(104,133,87,.15);
}


.nav-container {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 18px;

    font-weight: 800;

    color: var(--dark);

    letter-spacing: .5px;
}


.logo-icon {

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--dark),
            var(--primary)
        );

    box-shadow:
        0 8px 25px rgba(52,72,44,.25);
}


.nav-links {

    display: flex;

    align-items: center;

    gap: 27px;
}


.nav-links a {

    font-size: 14px;

    font-weight: 700;

    color: #43513f;

    position: relative;

    transition: .3s;
}


.nav-links a:hover {

    color: var(--primary);
}


.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background:
        var(--primary);

    transition: .3s;
}


.nav-links a:hover::after,
.nav-links a.active::after {

    width: 100%;
}


.menu-btn {

    display: none;

    border: 0;

    background: none;

    font-size: 28px;

    color: var(--dark);

    cursor: pointer;
}



/* HERO */

.hero {

    min-height: 720px;

    padding:
        150px 0 100px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(134,157,121,.35),
            transparent 28%
        ),

        linear-gradient(
            120deg,
            #f0f4ed,
            #dce6d7
        );
}


.hero-grid {

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    gap: 65px;

    align-items: center;

    position: relative;

    z-index: 2;
}


.eyebrow {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--primary);

    font-size: 12px;

    font-weight: 850;

    letter-spacing: 2px;

    margin-bottom: 15px;
}


.eyebrow::before {

    content: "";

    width: 28px;
    height: 2px;

    background:
        var(--primary);
}


.hero h1 {

    font-size:
        clamp(45px, 6vw, 78px);

    line-height: 1.02;

    letter-spacing: -3px;

    color: var(--dark);
}


.hero h1 span {

    color: var(--primary);

    display: block;
}


.hero p {

    max-width: 650px;

    margin:
        24px 0 30px;

    font-size: 18px;

    color: var(--text);
}


.hero-buttons {

    display: flex;

    gap: 13px;

    flex-wrap: wrap;
}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        13px 22px;

    border-radius: 12px;

    background:
        var(--dark);

    color: white;

    border:
        1px solid var(--dark);

    font-weight: 750;

    transition: .3s;

    cursor: pointer;
}


.btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 14px 30px rgba(52,72,44,.25);
}


.btn-outline {

    background:
        transparent;

    color:
        var(--dark);

    border-color:
        var(--light);
}


.hero-image {

    height: 490px;

    overflow: hidden;

    border-radius: 35px;

    box-shadow:
        var(--shadow);

    transform:
        rotate(1deg);
}


.hero-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s ease;
}


.hero-image:hover img {

    transform:
        scale(1.08);
}



/* ANIMATED BACKGROUND */

.animated-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(1px);

    opacity: .5;

    animation:
        floating 8s ease-in-out infinite;
}


.orb-one {

    width: 280px;
    height: 280px;

    right: -90px;
    top: 100px;

    background:
        var(--light);
}


.orb-two {

    width: 190px;
    height: 190px;

    left: -70px;
    bottom: 30px;

    background:
        var(--pale);

    animation-delay:
        2s;
}


.floating-leaf {

    position: absolute;

    color:
        rgba(104,133,87,.14);

    font-size: 150px;

    animation:
        leafFloat 12s ease-in-out infinite;
}


.leaf-one {

    right: 10%;
    top: 10%;
}


.leaf-two {

    left: 5%;
    bottom: 15%;

    animation-delay:
        4s;
}


@keyframes floating {

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

    50% {
        transform:
            translateY(-30px)
            scale(1.05);
    }

}


@keyframes leafFloat {

    0%,100% {
        transform:
            rotate(0)
            translate(0,0);
    }

    50% {
        transform:
            rotate(18deg)
            translate(-25px,25px);
    }

}



/* GENERAL SECTIONS */

.section {

    padding:
        100px 0;
}


.section-heading {

    text-align: center;

    max-width: 720px;

    margin:
        0 auto 50px;
}


.section-heading h2 {

    font-size:
        clamp(34px,5vw,46px);

    line-height: 1.15;

    color:
        var(--dark);

    margin-bottom:
        15px;
}


.section-heading p {

    color:
        var(--text);
}



/* CARDS */

.cards {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        23px;
}


.card {

    background:
        white;

    padding:
        32px;

    border-radius:
        var(--radius);

    border:
        1px solid rgba(104,133,87,.12);

    box-shadow:
        0 10px 35px rgba(40,60,35,.07);

    transition:
        .35s;
}


.card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        var(--shadow);
}


.card-icon {

    width: 55px;
    height: 55px;

    display:
        grid;

    place-items: center;

    border-radius:
        16px;

    background:
        var(--soft);

    font-size:
        26px;

    margin-bottom:
        20px;
}


.card h3 {

    color:
        var(--dark);

    font-size:
        21px;

    margin-bottom:
        9px;
}


.card p {

    color:
        var(--text);
}



/* STATS */

.stats-section {

    background:
        var(--dark);

    padding:
        65px 0;

    color:
        white;
}


.stats-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    text-align:
        center;

    gap:
        20px;
}


.stat strong {

    display:
        block;

    font-size:
        42px;
}


.stat span {

    color:
        var(--soft);
}



/* SPLIT */

.split-section {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        60px;

    align-items:
        center;
}


.large-image {

    height:
        460px;

    overflow:
        hidden;

    border-radius:
        32px;

    box-shadow:
        var(--shadow);
}


.large-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .7s;
}


.large-image:hover img {

    transform:
        scale(1.06);
}


.split-content h2 {

    color:
        var(--dark);

    font-size:
        42px;

    line-height:
        1.15;

    margin-bottom:
        18px;
}


.split-content p {

    color:
        var(--text);

    margin-bottom:
        15px;
}


.checks {

    display:
        grid;

    gap:
        14px;

    margin:
        25px 0;
}


.checks div {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        #4f5b4c;

    font-weight:
        600;
}


.checks span {

    color:
        var(--primary);

    font-weight:
        900;
}



/* CTA */

.cta {

    padding:
        65px 35px;

    text-align:
        center;

    color:
        white;

    border-radius:
        35px;

    background:
        linear-gradient(
            135deg,
            var(--dark),
            var(--primary)
        );

    box-shadow:
        var(--shadow);
}


.cta h2 {

    font-size:
        42px;

    line-height:
        1.15;
}


.cta p {

    max-width:
        700px;

    margin:
        15px auto 28px;

    color:
        var(--soft);
}


.white-btn {

    display:
        inline-block;

    background:
        white;

    color:
        var(--dark);

    padding:
        13px 22px;

    border-radius:
        12px;

    font-weight:
        800;

    transition:
        .3s;
}


.white-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.2);
}



/* INNER PAGE HERO */

.page-hero {

    min-height:
        470px;

    padding:
        140px 0 80px;

    display:
        flex;

    align-items:
        center;

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            120deg,
            #eef3ea,
            #dce6d7
        );
}


.page-hero h1 {

    max-width:
        850px;

    font-size:
        clamp(42px,6vw,65px);

    line-height:
        1.05;

    color:
        var(--dark);

    letter-spacing:
        -2px;
}


.page-hero p {

    max-width:
        700px;

    font-size:
        18px;

    color:
        var(--text);

    margin-top:
        20px;
}



/* LIGHT SECTION */

.light-section {

    padding:
        100px 0;

    background:
        #edf2ea;
}



/* SERVICES */

.service-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        25px;
}


.service-card {

    overflow:
        hidden;

    background:
        white;

    border-radius:
        25px;

    box-shadow:
        0 10px 35px rgba(40,60,35,.08);

    transition:
        .35s;
}


.service-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow);
}


.service-card > img {

    height:
        230px;

    object-fit:
        cover;
}


.service-content {

    padding:
        28px;
}


.service-content h3 {

    color:
        var(--dark);

    margin-bottom:
        8px;
}


.service-content p {

    color:
        var(--text);
}



/* TEAM */

.team-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        25px;
}


.person-card {

    overflow:
        hidden;

    border-radius:
        25px;

    background:
        white;

    box-shadow:
        0 10px 35px rgba(40,60,35,.08);

    transition:
        .35s;
}


.person-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        var(--shadow);
}


.person-image {

    height:
        350px;

    overflow:
        hidden;
}


.person-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        .7s;
}


.person-card:hover img {

    transform:
        scale(1.06);
}


.person-info {

    padding:
        25px;
}


.person-info span {

    color:
        var(--primary);

    font-size:
        12px;

    letter-spacing:
        2px;

    font-weight:
        850;
}


.person-info h3 {

    color:
        var(--dark);

    font-size:
        24px;

    margin:
        4px 0;
}


.person-info p {

    color:
        var(--text);
}



/* GALLERY */

.gallery {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        18px;
}


.gallery img {

    height:
        270px;

    object-fit:
        cover;

    border-radius:
        22px;

    transition:
        .45s;
}


.gallery img:hover {

    transform:
        scale(1.035);
}



/* CONTACT */

.contact-grid {

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:
        30px;
}


.contact-box {

    padding:
        40px;

    border-radius:
        28px;

    color:
        white;

    background:
        var(--dark);
}


.contact-box h2 {

    font-size:
        36px;

    margin-bottom:
        12px;
}


.contact-box > p {

    color:
        var(--soft);
}


.contact-item {

    display:
        flex;

    gap:
        14px;

    margin:
        25px 0;
}


.contact-icon {

    font-size:
        25px;
}


.contact-item strong {

    display:
        block;

    color:
        white;
}


.contact-item p {

    color:
        var(--soft);
}


.contact-form {

    background:
        white;

    padding:
        38px;

    border-radius:
        28px;

    box-shadow:
        var(--shadow);
}


.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        18px;
}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin-bottom:
        18px;
}


.form-group label {

    color:
        var(--dark);

    font-weight:
        750;

    font-size:
        14px;
}


.form-group input,
.form-group textarea {

    width:
        100%;

    border:
        1px solid #d5ddd1;

    border-radius:
        12px;

    padding:
        13px 14px;

    font:
        inherit;

    outline:
        none;

    background:
        #fbfcfa;
}


.form-group input:focus,
.form-group textarea:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 4px rgba(104,133,87,.1);
}


.form-group textarea {

    min-height:
        150px;

    resize:
        vertical;
}



/* FOOTER */

footer {

    background:
        #182018;

    color:
        #c8d1c4;

    padding:
        55px 0 20px;
}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.4fr 1fr 1fr;

    gap:
        40px;
}


.footer-logo {

    color:
        white;

    font-size:
        20px;

    font-weight:
        850;

    margin-bottom:
        15px;
}


.footer-grid h4 {

    color:
        white;

    margin-bottom:
        14px;
}


.footer-grid a {

    display:
        block;

    margin:
        6px 0;

    transition:
        .3s;
}


.footer-grid a:hover {

    color:
        white;
}


.footer-grid p {

    margin:
        7px 0;
}


.copyright {

    border-top:
        1px solid rgba(255,255,255,.1);

    margin-top:
        40px;

    padding-top:
        20px;

    text-align:
        center;

    font-size:
        13px;
}



/* SCROLL ANIMATION */

.reveal {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.reveal.show {

    opacity:
        1;

    transform:
        translateY(0);
}



/* RESPONSIVE */

@media(max-width:900px) {

    .nav-links {

        display:
            none;

        position:
            absolute;

        top:
            78px;

        left:
            0;

        right:
            0;

        background:
            white;

        padding:
            22px;

        flex-direction:
            column;

        box-shadow:
            0 15px 30px rgba(0,0,0,.08);
    }


    .nav-links.open {

        display:
            flex;
    }


    .menu-btn {

        display:
            block;
    }


    .hero-grid,
    .split-section,
    .contact-grid {

        grid-template-columns:
            1fr;
    }


    .hero-image {

        height:
            350px;
    }


    .cards,
    .service-grid,
    .team-grid,
    .gallery {

        grid-template-columns:
            1fr 1fr;
    }


    .stats-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;
    }

}


@media(max-width:600px) {

    .hero {

        min-height:
            auto;

        padding:
            130px 0 70px;
    }


    .hero h1 {

        font-size:
            46px;
    }


    .page-hero {

        min-height:
            400px;
    }


    .cards,
    .service-grid,
    .team-grid,
    .gallery,
    .form-row,
    .footer-grid {

        grid-template-columns:
            1fr;
    }


    .large-image {

        height:
            320px;
    }


    .person-image {

        height:
            330px;
    }


    .section {

        padding:
            70px 0;
    }


    .cta {

        padding:
            45px 22px;
    }


    .cta h2 {

        font-size:
            32px;
    }

}