/* =========================================================
   WAKHATI AGRI BUSINESS
   ABOUT PAGE
   DARK GREEN + EGG YELLOW
========================================================= */


:root{

    --green:#123d2b;
    --green-dark:#09291d;
    --green-light:#1d5940;

    --yellow:#e6c84f;
    --yellow-light:#f1dc72;

    --cream:#f7f5eb;
    --white:#ffffff;

    --text:#1c2821;
    --muted:#667168;

    --border:rgba(18,61,43,.12);

}


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


html{
    scroll-behavior:smooth;
}


body{

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

    background:var(--cream);

    color:var(--text);

    overflow-x:hidden;

}


a{
    text-decoration:none;
}


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


/* =========================================================
   GENERAL
========================================================= */


.section-kicker{

    display:inline-block;

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

    color:var(--green);

    margin-bottom:20px;

}


section{
    position:relative;
}


/* =========================================================
   HERO
========================================================= */


.about-hero{

    min-height:760px;

    background:
    var(--green);

    position:relative;

    display:grid;

    grid-template-columns:
    48% 52%;

    align-items:center;

    padding:
    100px 7% 100px;

    overflow:hidden;

}


.hero-background-shape{

    position:absolute;

    width:700px;

    height:700px;

    right:-300px;

    top:-250px;

    border-radius:50%;

    border:
    100px solid rgba(230,200,79,.08);

}


.about-hero-content{

    position:relative;

    z-index:5;

    max-width:650px;

}


.eyebrow{

    color:var(--yellow);

    font-size:13px;

    letter-spacing:4px;

    font-weight:800;

    display:block;

    margin-bottom:25px;

}


.about-hero h1{

    color:white;

    font-size:
    clamp(52px,6vw,88px);

    line-height:.98;

    letter-spacing:-4px;

    font-weight:800;

    margin-bottom:30px;

}


.about-hero h1 span{

    display:block;

    color:var(--yellow);

    font-style:italic;

    font-weight:500;

}


.about-hero-content > p{

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

    font-size:18px;

    line-height:1.8;

    max-width:570px;

    margin-bottom:35px;

}


.hero-actions{

    display:flex;

    align-items:center;

    gap:15px;

}


.about-btn{

    padding:15px 28px;

    border-radius:4px;

    font-size:14px;

    font-weight:700;

    transition:.3s ease;

}


.about-btn.primary{

    background:var(--yellow);

    color:var(--green-dark);

}


.about-btn.outline{

    color:white;

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

}


.about-btn:hover{

    transform:translateY(-4px);

}


/* =========================================================
   HERO VISUAL
========================================================= */


.hero-visual{

    position:relative;

    height:570px;

}


.hero-main-image{

    position:absolute;

    width:72%;

    height:500px;

    right:2%;

    top:20px;

    overflow:hidden;

    border-radius:
    150px 20px 20px 20px;

    box-shadow:
    0 35px 70px rgba(0,0,0,.3);

}


.hero-main-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}


.hero-small-image{

    position:absolute;

    width:230px;

    height:250px;

    left:5%;

    bottom:0;

    border:
    12px solid var(--green);

    overflow:hidden;

    border-radius:
    20px 20px 100px 20px;

    box-shadow:
    0 25px 50px rgba(0,0,0,.3);

    z-index:3;

}


.hero-small-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}


.hero-stat{

    position:absolute;

    right:0;

    bottom:35px;

    background:var(--yellow);

    width:145px;

    height:145px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    z-index:5;

    transform:rotate(8deg);

}


.hero-stat strong{

    font-size:35px;

    color:var(--green);

}


.hero-stat span{

    font-size:11px;

    line-height:1.5;

    font-weight:700;

    color:var(--green);

}


/* =========================================================
   STORY
========================================================= */


.about-story{

    background:white;

    padding:
    120px 9%;

    display:grid;

    grid-template-columns:180px 1fr;

    gap:60px;

}


.story-label{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding-top:8px;

}


.story-label span{

    color:var(--yellow);

    background:var(--green);

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:12px;

    font-weight:bold;

}


.story-label p{

    writing-mode:vertical-rl;

    letter-spacing:3px;

    font-size:11px;

    font-weight:800;

    color:var(--green);

}


.story-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

}


.story-heading h2{

    font-size:
    clamp(42px,5vw,72px);

    line-height:1;

    letter-spacing:-3px;

    color:var(--green);

}


.story-heading h2 em{

    color:var(--yellow);

    font-style:normal;

}


.story-text{

    padding-top:20px;

}


.story-text p{

    font-size:17px;

    line-height:1.9;

    color:var(--muted);

    margin-bottom:25px;

}


.story-text .large-text{

    color:var(--green);

    font-size:23px;

    line-height:1.5;

    font-weight:600;

}


/* =========================================================
   VISUAL STATEMENT
========================================================= */


.visual-statement{

    min-height:650px;

    background:var(--cream);

    display:flex;

    align-items:center;

    padding:
    100px 9%;

}


.statement-image{

    width:65%;

    height:520px;

    overflow:hidden;

    border-radius:
    20px 150px 20px 20px;

}


.statement-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}


.statement-card{

    width:42%;

    background:var(--green);

    color:white;

    padding:65px;

    margin-left:-10%;

    position:relative;

    z-index:3;

    box-shadow:
    0 30px 70px rgba(0,0,0,.18);

}


.statement-card .section-kicker{

    color:var(--yellow);

}


.statement-card h2{

    font-size:48px;

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:25px;

}


.statement-card p{

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

    line-height:1.8;

    font-size:16px;

}


.yellow-line{

    width:70px;

    height:4px;

    background:var(--yellow);

    margin-top:30px;

}


/* =========================================================
   MISSION
========================================================= */


.mission-section{

    background:white;

    padding:
    120px 9%;

}


.mission-intro{

    max-width:700px;

    margin-bottom:70px;

}


.mission-intro h2{

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

    line-height:1;

    letter-spacing:-4px;

    color:var(--green);

}


.mission-intro h2 span{

    color:var(--yellow);

    font-style:italic;

    font-weight:500;

}


.mission-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}


.mission-card{

    min-height:370px;

    padding:50px;

    position:relative;

    overflow:hidden;

}


.vision-card{

    background:var(--cream);

}


.mission-card-main{

    background:var(--green);

    color:white;

}


.card-number{

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

    position:absolute;

    top:30px;

    right:35px;

}


.vision-card .card-number{

    color:var(--green);

}


.mission-card-main .card-number{

    color:var(--yellow);

}


.card-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:35px;

    margin-bottom:50px;

}


.vision-card .card-icon{

    background:var(--yellow);

    color:var(--green);

}


.mission-card-main .card-icon{

    background:rgba(230,200,79,.15);

    color:var(--yellow);

}


.mission-card h3{

    font-size:32px;

    margin-bottom:20px;

}


.mission-card p{

    max-width:500px;

    line-height:1.8;

    font-size:16px;

}


.vision-card p{

    color:var(--muted);

}


.mission-card-main p{

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

}


/* =========================================================
   VALUES
========================================================= */


.values-section{

    background:var(--green);

    color:white;

    padding:
    120px 9%;

    display:grid;

    grid-template-columns:35% 65%;

    gap:80px;

}


.values-heading .section-kicker{

    color:var(--yellow);

}


.values-heading h2{

    font-size:
    clamp(45px,5vw,70px);

    line-height:1;

    letter-spacing:-4px;

}


.values-heading h2 span{

    display:block;

    color:var(--yellow);

    font-style:italic;

}


.values-list{

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

}


.value-item{

    display:grid;

    grid-template-columns:60px 1fr 40px;

    gap:25px;

    align-items:center;

    padding:30px 0;

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

    transition:.3s;

}


.value-item:hover{

    padding-left:15px;

}


.value-number{

    color:var(--yellow);

    font-size:12px;

    font-weight:800;

}


.value-item h3{

    font-size:25px;

    margin-bottom:8px;

}


.value-item p{

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

    line-height:1.6;

    max-width:600px;

}


.value-arrow{

    color:var(--yellow);

    font-size:25px;

}


/* =========================================================
   APPROACH
========================================================= */


.approach-section{

    background:var(--cream);

    padding:
    120px 9%;

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

}


.approach-image{

    height:560px;

    position:relative;

}


.approach-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:
    20px 20px 150px 20px;

}


.image-label{

    position:absolute;

    bottom:30px;

    left:-25px;

    background:var(--yellow);

    color:var(--green);

    padding:15px 30px;

    font-weight:900;

    letter-spacing:4px;

    font-size:13px;

}


.approach-content{

    background:white;

    padding:70px;

    margin-left:-8%;

    position:relative;

    z-index:2;

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

}


.approach-content h2{

    font-size:
    clamp(40px,4vw,60px);

    line-height:1;

    letter-spacing:-3px;

    color:var(--green);

    margin-bottom:25px;

}


.approach-content h2 span{

    color:var(--yellow);

    font-style:italic;

}


.approach-content > p{

    color:var(--muted);

    line-height:1.8;

    margin-bottom:35px;

}


.approach-points{

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

}


.approach-points div{

    display:flex;

    gap:20px;

    padding:18px 0;

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

    font-weight:700;

}


.approach-points strong{

    color:var(--yellow);

    background:var(--green);

    padding:5px 8px;

    font-size:11px;

}


/* =========================================================
   CTA
========================================================= */


.about-cta{

    background:var(--yellow);

    min-height:520px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

}


.cta-pattern{

    position:absolute;

    width:600px;

    height:600px;

    border:
    100px solid rgba(18,61,43,.06);

    border-radius:50%;

    right:-180px;

    top:-200px;

}


.cta-content{

    max-width:850px;

    position:relative;

    z-index:2;

}


.cta-content .section-kicker{

    color:var(--green);

}


.cta-content h2{

    font-size:
    clamp(48px,7vw,90px);

    line-height:.95;

    letter-spacing:-5px;

    color:var(--green);

    margin-bottom:25px;

}


.cta-content h2 span{

    display:block;

    font-style:italic;

    font-weight:500;

}


.cta-content p{

    max-width:650px;

    margin:0 auto 35px;

    color:rgba(18,61,43,.72);

    font-size:17px;

    line-height:1.8;

}


.cta-button{

    display:inline-flex;

    align-items:center;

    gap:20px;

    background:var(--green);

    color:white;

    padding:17px 28px;

    font-weight:700;

    transition:.3s;

}


.cta-button span{

    color:var(--yellow);

    font-size:22px;

}


.cta-button:hover{

    transform:translateY(-5px);

    box-shadow:
    0 15px 30px rgba(18,61,43,.2);

}


/* =========================================================
   RESPONSIVE
========================================================= */


@media(max-width:1100px){

    .about-hero{

        grid-template-columns:1fr;

        padding-top:80px;

        padding-bottom:80px;

    }


    .about-hero-content{

        margin-bottom:70px;

    }


    .hero-visual{

        height:500px;

    }


    .about-story{

        grid-template-columns:100px 1fr;

    }


    .story-content{

        gap:40px;

    }


    .values-section{

        grid-template-columns:1fr;

    }


    .approach-section{

        grid-template-columns:1fr;

    }


    .approach-content{

        margin-left:0;

        margin-top:-50px;

        width:90%;

        justify-self:center;

    }

}


@media(max-width:800px){

    .about-hero{

        min-height:auto;

        padding:
        90px 6% 70px;

    }


    .about-hero h1{

        font-size:52px;

        letter-spacing:-2px;

    }


    .hero-visual{

        height:430px;

    }


    .hero-main-image{

        width:78%;

        height:370px;

    }


    .hero-small-image{

        width:170px;

        height:190px;

    }


    .hero-stat{

        width:110px;

        height:110px;

    }


    .hero-stat strong{

        font-size:27px;

    }


    .about-story{

        display:block;

        padding:
        80px 7%;

    }


    .story-label{

        margin-bottom:50px;

    }


    .story-label p{

        writing-mode:initial;

    }


    .story-content{

        grid-template-columns:1fr;

    }


    .visual-statement{

        display:block;

        padding:
        70px 7%;

    }


    .statement-image{

        width:100%;

        height:400px;

        border-radius:20px 100px 20px 20px;

    }


    .statement-card{

        width:90%;

        margin:
        -70px auto 0;

        padding:45px;

    }


    .mission-section,
    .values-section,
    .approach-section{

        padding:
        80px 7%;

    }


    .mission-grid{

        grid-template-columns:1fr;

    }


    .approach-image{

        height:400px;

    }


    .approach-content{

        width:95%;

        padding:45px;

    }


    .cta-content{

        padding:0 7%;

    }

}


@media(max-width:550px){

    .about-hero h1{

        font-size:44px;

    }


    .hero-actions{

        flex-direction:column;

        align-items:flex-start;

    }


    .hero-visual{

        height:360px;

    }


    .hero-main-image{

        height:310px;

        width:82%;

    }


    .hero-small-image{

        width:135px;

        height:155px;

        border-width:8px;

    }


    .hero-stat{

        width:95px;

        height:95px;

        right:-5px;

    }


    .hero-stat span{

        font-size:9px;

    }


    .story-heading h2,
    .mission-intro h2{

        font-size:46px;

    }


    .statement-card h2{

        font-size:36px;

    }


    .mission-card{

        padding:35px;

    }


    .value-item{

        grid-template-columns:35px 1fr 25px;

        gap:12px;

    }


    .value-item h3{

        font-size:21px;

    }


    .value-item p{

        font-size:14px;

    }


    .approach-content{

        padding:35px 25px;

    }


    .approach-content h2{

        font-size:40px;

    }


    .cta-content h2{

        font-size:52px;

        letter-spacing:-3px;

    }

}


/* =========================================================
   WAKHATI STAFF SECTION
========================================================= */

.wakhati-team {
    position: relative;
    display: block;
    width: 100%;
    padding: 100px 7%;
    background: var(--white);
    color: var(--text);
    overflow: visible;
}

.wakhati-team .team-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.wakhati-team .team-label {
    display: inline-block;
    margin-bottom: 18px;
    padding: 9px 18px;
    border-radius: 30px;
    background: var(--yellow);
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.wakhati-team .team-heading h2 {
    margin: 0 0 20px;
    color: var(--green);
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.1;
    letter-spacing: -2px;
}

.wakhati-team .team-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
}

/* Staff cards layout */

.wakhati-team .team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.wakhati-team .team-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(9, 41, 29, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wakhati-team .team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(9, 41, 29, 0.14);
}

/* Photo area */

.wakhati-team .team-photo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px 20px;
    background: var(--green);
    border-bottom: 5px solid var(--yellow);
}

.wakhati-team img.team-photo {
    display: block;
    width: 165px;
    height: 165px;
    max-width: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center top;
    border: 5px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.wakhati-team .team-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 165px;
    height: 165px;
    border: 5px solid var(--white);
    border-radius: 50%;
    background: var(--yellow);
    color: var(--green);
    font-size: 52px;
    font-weight: 800;
}

/* Staff details */

.wakhati-team .team-info {
    flex: 1;
    padding: 30px 25px 35px;
    text-align: center;
}

.wakhati-team .team-info h3 {
    margin: 0 0 10px;
    color: var(--green);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.wakhati-team .team-position {
    margin: 0;
    color: var(--green-light);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.7;
}

.wakhati-team .team-divider {
    width: 50px;
    height: 4px;
    margin: 20px auto;
    border-radius: 5px;
    background: var(--yellow);
}

.wakhati-team .team-experience {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Tablet */

@media (max-width: 900px) {
    .wakhati-team {
        padding: 80px 6%;
    }

    .wakhati-team .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

/* Mobile */

@media (max-width: 550px) {
    .wakhati-team {
        padding: 60px 20px;
    }

    .wakhati-team .team-heading {
        margin-bottom: 35px;
    }

    .wakhati-team .team-heading h2 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .wakhati-team .team-heading p {
        font-size: 14px;
    }

    .wakhati-team .team-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .wakhati-team img.team-photo,
    .wakhati-team .team-photo-placeholder {
        width: 145px;
        height: 145px;
    }

    .wakhati-team .team-info {
        padding: 25px 22px 30px;
    }
}