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

.about-hero{
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: white;
    padding: 140px 7%;
}

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

.about-container{
    position: relative;
    z-index: 5;
    max-width: 1450px;
    width: 100%;
    margin: 0 auto;
}


/* ==========================================
        GRID BACKGROUND
========================================== */

.hero-grid{
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px);

    background-size: 52px 52px;

    pointer-events: none;

    z-index: 0;
}

/* ==========================================
        GREEN GLOW
========================================== */

.bg-circle{
    position: absolute;
    border-radius: 50%;
    filter: blur(170px);
    opacity: .12;
    z-index: 1;
}

.bg-circle-1{
    width: 500px;
    height: 500px;

    background: #b8d870;

    right: -180px;
    top: -120px;
}

.bg-circle-2{
    width: 350px;
    height: 350px;

    background: #d7ff89;

    left: -120px;
    bottom: -120px;
}

/* ==========================================
        TAG
========================================== */

.about-tag{
    display: inline-block;

    font-size: 15px;
    letter-spacing: 6px;
    text-transform: uppercase;

    color: #6D9F00;

    font-weight: 700;

    margin-bottom: 35px;
}

/* ==========================================
        HEADING
========================================== */

.about-title{

    font-size: clamp(80px,9vw,145px);

    line-height: .95;

    font-weight: 500;

    color: #111;

    margin-bottom: 45px;
}

.about-title span{
    color: #6D9F00;
}

/* ==========================================
        DESCRIPTION
========================================== */

.about-description{

    max-width: 700px;

    font-size: 20px;

    line-height: 1.9;

    color: #555;

    margin-bottom: 50px;
}

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

.primary-btn{

    display: inline-flex;

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

    padding: 18px 42px;

    border-radius: 60px;

    background: #B8D870;

    color: #111;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    transition: all .35s ease;
}

.primary-btn:hover{

    background: #111;

    color: #fff;

    transform: translateY(-6px);
}

/* ==========================================
        SCROLL INDICATOR
========================================== */

.scroll-indicator{

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 5;
}

.scroll-indicator span{

    width: 2px;

    height: 60px;

    background: #6D9F00;

    display: block;

    animation: scrollDown 2s infinite;
}

@keyframes scrollDown{

    0%{
        transform: scaleY(.2);
        transform-origin: top;
    }

    50%{
        transform: scaleY(1);
        transform-origin: top;
    }

    100%{
        transform: scaleY(.2);
        transform-origin: bottom;
    }

}







/*.hero-image{*/
/*    position:absolute;*/

/*    right:0;*/
/*    top:50%;*/

/*    transform:translateY(-50%);*/

/*    width:45%;*/

/*    display:flex;*/
/*    justify-content:flex-end;*/

/*    pointer-events:none;*/
/*}*/

/*.hero-image img{*/

/*    width:90%;*/
/*    max-width:650px;*/

/*    object-fit:contain;*/

/*    animation:float 6s ease-in-out infinite;*/

/*    filter:*/
/*        drop-shadow(0 50px 70px rgba(0,0,0,.35))*/
/*        contrast(1.1)*/
/*        brightness(.95);*/

/*}*/
/*.hero-image img{*/

/*    filter:contrast(1.2);*/

/*}*/

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

/*.hero-image{*/

/*    position:absolute;*/

/*    right:-220px;*/
/*    bottom:-10px;*/

/*    width:480px;*/
/*    height:480px;*/

/*    z-index:2;*/

/*    pointer-events:none;*/

/*    animation:powderFloat 8s ease-in-out infinite;*/

/*}*/


.hero-image{

    position:absolute;

    top:50%;

    right:-120px;

    transform:translateY(-50%);

    width:600px;

    z-index:2;

    pointer-events:none;

}

/* Green Glow */

.hero-image::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:#B8D870;

    filter:blur(150px);

    opacity:.12;

    right:180px;
    top:180px;

    z-index:-2;

}

/* Powder Image */

.hero-image img{

    width:100%;
    height:100%;

    object-fit:contain;

    display:block;

    filter:

        drop-shadow(0 60px 80px rgba(0,0,0,.30))
        contrast(1.08)
        brightness(.92);

    transition:.6s ease;

}

/* Hover */

.about-hero:hover .hero-image img{

    transform:scale(1.04);

}

/* Floating */

@keyframes powderFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}




.hero-image img{
    filter:
        grayscale(80%)
        brightness(1.08)
        contrast(0.82)
        drop-shadow(0 40px 60px rgba(0,0,0,.18));
}





/*section2*/



/*============================================

        STORY SECTION

=============================================*/

.story-wrapper{

    position:relative;

    height:120vh;

    background:#fff;

}

.story-sticky{

    position:sticky;

    top:0;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* subtle engineering grid */

.story-sticky::before{

    content:"";

    position:absolute;

    inset:0;

    /*background-image:*/

    /*    linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),*/
    /*    linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);*/

    background-size:60px 60px;

    pointer-events:none;

}

/*==============================*/



.story-scene{

    position:absolute;

    width:100%;

    max-width:1400px;

    padding:0 8%;

    opacity:0;

    transform:translateY(100px);

}
 

.story-scene.active{

    transform:translateY(0);

}

/*==============================*/

.story-scene h2{

    font-size:clamp(70px,8vw,145px);

    line-height:.95;

    font-weight:700;

    color:#111;

}

.story-scene span{

    color:#7BAE00;

}

.story-scene p{

    margin-top:60px;

    max-width:700px;

    font-size:24px;

    line-height:1.8;

    color:#555;

}





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

.story-section{

    position:relative;

    width:min(92%,1600px);

    margin:120px auto;

    padding:120px 7%;

    background:#050505;

    border-radius:48px;

    overflow:hidden;

    border:1px solid rgba(184,216,112,.12);

    box-shadow:
    0 40px 100px rgba(0,0,0,.45);

}


/*========================================
Background Glow
========================================*/

.story-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-250px;

    top:-250px;

    background:
    radial-gradient(circle,
    rgba(184,216,112,.12),
    transparent 70%);

    pointer-events:none;

}


/*========================================
Dot Grid Background
========================================*/

.story-section::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(circle,
    rgba(184,216,112,.12) 1px,
    transparent 1px);

    background-size:32px 32px;

    opacity:.22;

    pointer-events:none;

}


/*========================================
Heading
========================================*/

.story-heading{

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto;

    text-align:center;

    margin-bottom:120px;

}

.story-heading span{

    display:inline-block;

    color:#B8D870;

    letter-spacing:4px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:18px;

}

.story-heading h2{

    color:#fff;

    font-size:clamp(2.5rem,5vw,4.3rem);

    line-height:1.15;

    margin-bottom:25px;

}

.story-heading p{

    color:#a8a8a8;

    line-height:1.8;

    font-size:1.08rem;

}


/*========================================
Story Item
========================================*/

.story-item{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:58% 42%;

    gap:70px;

    align-items:center;

    margin-bottom:180px;

}

.story-item:last-child{

    margin-bottom:0;

}


.story-item.reverse{

    direction:rtl;

}

.story-item.reverse>*{

    direction:ltr;

}


/*========================================
Image
========================================*/

.story-image{

    overflow:hidden;

    border-radius:30px;

    position:relative;

}

.story-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    to top,
    rgba(0,0,0,.35),
    transparent);

    z-index:1;

}

.story-image img{

    width:100%;

    height:520px;

    object-fit:cover;

    transition:1s ease;

}

.story-item:hover img{

    transform:scale(1.08);

}


/*========================================
Content
========================================*/

.story-content{

    max-width:500px;

}

.story-number{

    display:inline-block;

    color:#B8D870;

    font-size:1rem;

    font-weight:700;

    margin-bottom:15px;

    letter-spacing:3px;

}

.story-content h3{

    color:#fff;

    font-size:clamp(2rem,4vw,3.3rem);

    line-height:1.15;

    margin-bottom:25px;

}

.story-content p{

    color:#b5b5b5;

    line-height:1.9;

    font-size:1.05rem;

    margin-bottom:35px;

}

.story-content a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:#B8D870;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.story-content a:hover{

    transform:translateX(8px);

}


/*========================================
Animation
========================================*/

.story-image,
.story-number,
.story-content h3,
.story-content p,
.story-content a{

    opacity:0;

    transform:translateY(60px);

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

}


.story-item.active .story-image{

    opacity:1;

    transform:none;

}

.story-item.active .story-number{

    opacity:1;

    transform:none;

    transition-delay:.15s;

}

.story-item.active h3{

    opacity:1;

    transform:none;

    transition-delay:.3s;

}

.story-item.active p{

    opacity:1;

    transform:none;

    transition-delay:.45s;

}

.story-item.active a{

    opacity:1;

    transform:none;

    transition-delay:.6s;

}


/*========================================
Responsive
========================================*/

@media(max-width:992px){

.story-section{

padding:80px 6%;

border-radius:28px;

}

.story-item{

grid-template-columns:1fr;

gap:35px;

margin-bottom:100px;

}

.story-item.reverse{

direction:ltr;

}

.story-image img{

height:320px;

}

.story-heading{

margin-bottom:70px;

}

.story-heading h2{

font-size:2.3rem;

}

.story-content{

max-width:100%;

}

.story-content h3{

font-size:2rem;

}

}


/*==================================
OUR CORE VALUES
===================================*/

.values-section{

    background:#fff;

    padding:120px 8%;

}

.values-heading{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}

.values-heading span{

    display:inline-block;

    color:#8fb43b;

    letter-spacing:3px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:15px;

}

.values-heading h2{

    font-size:3.2rem;

    color:#111;

    line-height:1.2;

    margin-bottom:20px;

}

.values-heading p{

    color:#666;

    line-height:1.8;

    font-size:1.05rem;

}

/*=====================*/

.values-grid{

    max-width:1400px;

    margin:auto;

    display:grid;

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

}

/*=====================*/

.value-item{

    padding:20px 55px 10px;

    position:relative;

}

.value-item:not(:last-child){

    border-right:1px solid #e9e9e9;

}

/*=====================*/

.value-icon{

    width:72px;

    height:72px;

    border-radius:50%;

    background:#f4f7ef;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    transition:.35s;

}

.value-icon i{

    color:#8fb43b;

    font-size:30px;

}

/*=====================*/

.value-item h3{

    font-size:2rem;

    color:#111;

    margin-bottom:18px;

    transition:.35s;

}

.value-item p{

    color:#666;

    line-height:1.9;

    font-size:1rem;

}

/*=====================*/

.value-item::after{

    content:"";

    position:absolute;

    left:55px;

    bottom:-20px;

    width:0;

    height:3px;

    background:#B8D870;

    transition:.45s;

}

.value-item:hover::after{

    width:120px;

}

.value-item:hover h3{

    color:#8fb43b;

}

.value-item:hover .value-icon{

    background:#B8D870;

    transform:translateY(-6px);

}

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

    color:#111;

}

/*=====================
Responsive
======================*/

@media(max-width:992px){

.values-grid{

grid-template-columns:1fr;

}

.value-item{

padding:45px 0;

border-right:none !important;

border-bottom:1px solid #ececec;

}

.value-item:last-child{

border-bottom:none;

}

.values-heading h2{

font-size:2.3rem;

}

}


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

.team-section{

    padding:120px 8%;

    background:#fff;

}

.team-heading{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;

}

.team-heading span{

    color:#8fb43b;

    letter-spacing:3px;

    font-size:.9rem;

    font-weight:600;

}

.team-heading h2{

    margin:20px 0;

    font-size:3.4rem;

    color:#111;

}

.team-heading p{

    color:#666;

    line-height:1.8;

}

/*==============================*/

.team-grid{

    display:grid;

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

    gap:45px;

    max-width:1400px;

    margin:auto;

}

/*==============================*/

.team-member{

    text-align:center;

}

/*==============================*/

.team-image{

    width:320px;

    height:320px;

    margin:auto;

    border-radius:50%;

    overflow:hidden;

    position:relative;

    border:2px solid #f2f2f2;

    transition:.5s;

}

.team-image::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:3px solid transparent;

    transition:.5s;

    z-index:2;

}

.team-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:grayscale(100%);

    transition:.6s;

}

/*==============================*/

.team-member:hover img{

    filter:grayscale(0);

    transform:scale(1.08);

}

.team-member:hover .team-image{

    border-color:#B8D870;

}

.team-member:hover .team-image::before{

    inset:8px;

    border-color:#B8D870;

}

/*==============================*/

.team-member h3{

    margin-top:28px;

    font-size:1.5rem;

    color:#111;

}

.team-member span{

    display:block;

    margin-top:10px;

    color:#777;

    font-size:1rem;

}

/*==============================
Responsive
==============================*/

@media(max-width:1200px){

.team-grid{

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

row-gap:70px;

}

}

@media(max-width:768px){

.team-grid{

grid-template-columns:1fr;

}

.team-heading h2{

font-size:2.4rem;

}

.team-image{

width:200px;

height:200px;

}

}