/* ==========================================
        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;

}