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

.about-hero{

    padding-top:180px;
    padding-bottom:0px;

    background:
        radial-gradient(circle at right,
        rgba(168,205,88,.18),
        transparent 45%),

        linear-gradient(
        to bottom,
        #FFFDF7,
        #FFFFFF);

    overflow:hidden;

    position:relative;

}

.about-container{

    position:relative;

    min-height:528px;

    max-width:1320px;

    margin:auto;

    margin-top: -5%!important;;

}

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

.about-content{

    position:relative;

    z-index:20;

    width:43%;

    left:4%;

    padding-top:30px;

}

.about-content h1 {
  font-size: 63px;
  font-weight: 800;
  line-height: .95;
  color: #104A2A;
  margin-bottom: 8px;
  width: 500px;
}

.about-content h2{

    font-size:33px;

    line-height:1.35;

    color:#527131;

    margin-bottom:30px;

}

.about-content p{

    font-size:17px;

    line-height:1.9;

    color:#555;

    max-width:560px;

    margin-bottom:42px;

}

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:#176E34;

    color:#fff;

    padding:18px 34px;

    border-radius:999px;

    font-weight:700;

    box-shadow:0 15px 35px rgba(23,110,52,.18);

    transition:.35s;

}

.about-btn:hover{

    transform:translateY(-4px);

}

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

.about-image{

    position:absolute;

    right:-1%;

    top:-4%;

    width:62%;

    height:620px;

    overflow:hidden;

}

.about-photo{

    position:absolute;

    width:120%;

    height:100%;

    left:-140px;

    object-fit:cover;

    border-radius:40px;

}

.about-fade{

    position:absolute;

    left:-17px;

    top:0;

    width:110%;

    height:100%;

    z-index:3;
}

.about-image > img:first-child{

    position:relative;

    width:115%;

    height:100%;

    object-fit:cover;

    object-position:center;

    left:-120px;

    border-radius:0;

}

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

.organic-badge,
.organic-card,
.leaf{

    position:absolute;

    z-index:5;

}

.about-image::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    left:50%;

    transform:translate(-50%,-50%);

    background:

    radial-gradient(circle,

    rgba(177,213,90,.35),

    transparent 72%);

    z-index:-1;

}

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

.organic-badge{

    position:absolute;

    right:-41px;

    top:14px;

    width:180px;

    height:180px;

    z-index:5;

}

.organic-badge img{

    width:60%;
    display:block;

}

.organic-badge img{

    width:60%;

}

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

.organic-card {
  position: absolute;
  top: 31%;
  right: 5px;
  transform: translateY(-64%);
  width: 152px;
  padding: 17px 24px;
  background: rgba(255, 248, 225, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 20;
}
.organic-card p{

    margin:0;

    font-size:11px;

    line-height:1.6;

    font-weight:700;

    color:#1E3E20;
}

/*============================*/
.leaf{

    position:absolute;

    width:90px;

    z-index:7;

}

.leaf-top{

    top:-18px;

    left:120px;

}

.leaf-bottom{

    left:0px;

    bottom:35px;

}

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

@keyframes leafFloat{

    0%{

        transform:
        translateY(0)
        rotate(-8deg);

    }

    50%{

        transform:
        translateY(-8px)
        rotate(3deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(-8deg);

    }

}

/*========================================
TABLET
========================================*/

@media(max-width:1100px){

.about-container{

    grid-template-columns:1fr;

    gap:60px;

}

.about-content{

    text-align:center;

}

.about-content p{

    margin:auto auto 35px;

}

.about-image{

    margin:auto;

}

.organic-badge{

    width:190px;
    height:190px;

    right:-10px;

    bottom:-25px;

}

.organic-card{

    right:10px;

}

}

/*========================================
MOBILE
========================================*/

@media(max-width:768px){

.about-hero{

    position:relative;

    padding:120px 0 70px;

    overflow:hidden;

}

.about-photo{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    left:0;

    object-fit:cover;

    object-position:center;

    border-radius:0;

}

.about-image::after{

    content:"";

    position:absolute;

    inset:0;

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

    z-index:2;

}

.about-fade{

    display:none;

}

.about-content{

    position:relative;

    z-index:10;

    width:100%;

    text-align:center;

    padding:0 25px;

}

.about-content h1{

    width:auto;

    font-size:46px;

}

.about-content h2{

    font-size:28px;

}

.about-content p{

    max-width:500px;

    margin:25px auto 35px;

}

.about-btn{

    width:auto;

    padding:16px 34px;

}

.organic-card,
.organic-badge,
.leaf,
.about-fade{

    display:none;

}

.about-content h1{

    font-size:46px;

}

.about-content h2{

    font-size:28px;

}

.about-content p{

    font-size:16px;

}

.about-btn{

    width:100%;

    justify-content:center;

}

.about-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    margin:0;

    right:auto;

    top:0;

    overflow:hidden;

}

.organic-badge{

    width:140px;
    height:140px;

    right:-5px;

    bottom:-10px;

}

.organic-card{

    position:relative;

    top:auto;

    right:auto;

    transform:none;

    width:100%;

    margin-top:20px;

}

.leaf{

    width:50px;

}

.about-container{

    min-height:650px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.about-image > img:first-child {
  position: relative;
  width: 115%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  left: -56px;
  border-radius: 0;
  top: 46px;
}

}

.about-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.about-btn i{
    font-size: 22px;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

/*=====================================
WHO WE ARE
=====================================*/

.about-story{

    padding:31px 0;

    background:
    linear-gradient(
        to right,
        #FFFDF7,
        #FFF7DD);

}

.about-story-container{

    width:min(1320px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:46% 54%;

    gap:60px;

    align-items:center;

}

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

.story-image{

    overflow:hidden;

    border-radius:24px;

    box-shadow:

    0 18px 45px rgba(0,0,0,.08);

}

.story-image img{

    width:100%;

    display:block;

    transition:.5s;

}

.story-image:hover img{

    transform:scale(1.04);

}

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

.story-content{
    position: relative;
    padding-right:20px;
    right:3%;
}

.section-heading{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

}

.section-heading h2{

    font-size:46px;

    font-weight:800;

    color:#104A2A;

    margin:0;

}

.section-heading i{

    font-size:28px;

    color:#7FBF3A;

    transform:rotate(-15deg);

    margin-top:4px;

}
.heading-line{

    width:45px;

    height:3px;

    border-radius:99px;

    background:#9BC23A;

    margin-bottom:30px;

}

.story-content p{

    font-size:18px;

    line-height:2;

    color:#555;

}

/*=============================
TABLET
=============================*/

@media(max-width:992px){

.about-story{

    padding:70px 0;

}

.about-story-container{

    grid-template-columns:1fr;

    gap:45px;

}

.story-content{

    text-align:center;

    padding:0;

}

.section-heading{

    justify-content:center;

}

.heading-line{

    margin:0 auto 28px;

}

}

/*=============================
MOBILE
=============================*/

@media(max-width:768px){

.about-story{

    padding:55px 0;

}

.section-heading h2{

    font-size:34px;

}

.section-heading img{

    width:26px;

}

.story-content p{

    font-size:16px;

    line-height:1.9;

}

.story-image{

    border-radius:18px;

}

}

/*==================================
ABOUT STATS
==================================*/

.about-stats{

    padding:0px 0 90px;

    background:
    linear-gradient(to bottom,#FFF9E8,#FFFDF8);

}

.stats-container{

    width: min(1572px,97%);

    margin:auto;

    background:#FFFDF6;

    border-radius:28px;

    display:grid;

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

    overflow:hidden;

    box-shadow:
        0 18px 45px rgba(0,0,0,.08);

    position: relative;
    top: -43%;
}

.stat-item{

    display:flex;

    align-items:center;

    gap:2px;

    padding:18px;

    position:relative;

    transition:.35s;

}

.stat-item:hover{

    background:#FFF8E7;

}

.stat-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:25px;

    width:1px;

    height:calc(100% - 50px);

    background:#EFE6C9;

}

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

.stat-icon{

    width:86px;

    height:86px;

    border-radius:50%;

    background:linear-gradient(135deg,#7DBB2E,#3D7F1A);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.stat-icon i{

    font-size:42px;

    color:#fff;

}

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

.stat-text{

    display:flex;

    flex-direction:column;

    gap:6px;

    left: 8%;
    position: inherit;

}
.stat-text span{

    font-size:15px;

    color:#666;

    font-weight:600;

}

.stat-text h3{

    font-size:26px;

    color:#1A5C2B;

    font-weight:800;

}

.stat-text small{

    font-size:15px;

    color:#666;

}

/*====================
TABLET
====================*/

@media(max-width:1100px){

.stats-container{

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

}

.stat-item:nth-child(2)::after{

    display:none;

}

}

/*====================
MOBILE
====================*/

@media(max-width:768px){

.about-stats{

    padding:25px 0 60px;

}

.stats-container{

    grid-template-columns:1fr;

}

.stat-item{

    padding:28px 24px;

}

.stat-item::after{

    display:none;

}

.stat-icon{

    width:62px;

    height:62px;

}

.stat-icon i{

    font-size:32px;

}

.stat-text h3{

    font-size:38px;

}

.stat-text span{

    font-size:16px;

}

.stat-text small{

    font-size:14px;

}

}

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

.about-values{

    padding:0px 0;

    background:
    linear-gradient(to bottom,#FFFDF8,#FFF8E8);

}

.about-values .container{

    width:min(1320px,92%);
    margin:auto;

    display:block;
    top: -10%;
    left: 43%;
}

.section-title{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.section-title h2{

    font-size:48px;

    color:#114B29;

    font-weight:800;
    position: relative;
    margin-top:-5%;
    left:3%;
}

.section-title i{

    font-size:24px;

    color:#82BB39;

    transform:rotate(-15deg);

    margin-top:-5%;

}

.title-divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin:18px 0 60px;
    left: 3%;
    position: relative;
}

.title-divider span{

    width:60px;

    height:2px;

    background:#97C545;

}

.title-divider i{

    color:#97C545;

    font-size:18px;

}

.values-grid{

    display:grid;

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

    gap:24px;
    top:-4%;
    left:3%;
    position: relative;

}

.value-card{

    background:#FFFDF7;

    border:1px solid #F0E5C8;

    border-radius:24px;

    padding:36px 24px;

    text-align:center;

    transition:.35s;

    box-shadow:0 12px 28px rgba(0,0,0,.05);

}

.value-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.value-icon{

    width:90px;

    height:90px;

    margin:0 auto 22px;

    border-radius:50%;

    background:linear-gradient(135deg,#8BC53F,#5A972A);

    display:flex;

    align-items:center;

    justify-content:center;

}

.value-icon i{

    font-size:46px;

    color:#fff;

}

.value-card h3{

    font-size:24px;

    color:#114B29;

    margin-bottom:14px;

}

.value-card p{

    color:#555;

    font-size:17px;

    line-height:1.8;

}

/* TABLET */

@media(max-width:1100px){

.values-grid{

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

}

}

/* MOBILE */

@media(max-width:768px){

.about-values{

    padding:60px 0;

}

.section-title h2{

    font-size:32px;

    text-align:center;

}

.values-grid{

    grid-template-columns:1fr;

}

.value-card{

    padding:30px 22px;

}

.value-icon{

    width:70px;

    height:70px;

}

.value-icon i{

    font-size:34px;

}

.value-card h3{

    font-size:20px;

}

.value-card p{

    font-size:15px;

}

}

.value-icon{

    background:none;

    width:auto;

    height:auto;

    margin-bottom:18px;

}

.value-icon i{

    font-size:56px;

    color:#6EA72D;

}

/*==================================
PROCESS
==================================*/

.about-process{

    padding:55px 0;

    background:linear-gradient(to bottom,#FFF8E8,#FFFDF7);

}

.process-container{

    width:min(1320px,92%);

    margin:auto;

}

.process-title{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.process-title h2{

    font-size:48px;

    color:#114B29;

    font-weight:800;

    margin:0;

}

.process-title i{

    color:#82BB39;

    font-size:24px;

    transform:rotate(-15deg);

}

.process-flow{

    margin-top:-20px;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:10px;

}

.process-item{

    flex:1;

    text-align:center;

}

.process-icon{

    width:88px;

    height:88px;

    margin:auto;

    border-radius:50%;

    border:2px solid #DCCF9F;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    background:#FFFDF7;

}

.process-icon i{

    font-size:46px;

    color:#6EA72D;

}

.process-item h3{

    font-size:22px;

    color:#114B29;

    margin-bottom:14px;

    line-height:1.4;

}

.process-item p{

    font-size:16px;

    line-height:1.8;

    color:#555;

}

.process-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:28px;

}

.process-arrow i{

    font-size:34px;

    color:#7FBF3A;

}

/*========================
TABLET
========================*/

@media(max-width:1100px){

.process-flow{

    display:grid;

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

    gap:40px;

}

.process-arrow{

    display:none;

}

}

/*========================
MOBILE
========================*/

@media(max-width:768px){

.about-process{

    padding:60px 0;

}

.process-title h2{

    font-size:32px;

}

.process-flow{

    grid-template-columns:1fr;

}

.process-item{

    padding:0 10px;

}

.process-icon{

    width:70px;

    height:70px;

}

.process-icon i{

    font-size:36px;

}

.process-item h3{

    font-size:20px;

}

.process-item p{

    font-size:15px;

}

}

/*==================================
CERTIFICATION
==================================*/

.about-certification{

    padding:90px 0;

    background:linear-gradient(to bottom,#FFFDF8,#FFF7E8);

}

.cert-container{

    width:min(1320px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:42% 58%;

    gap:28px;

}

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

.cert-card,
.future-card{

    background:#FFFDF7;

    border:1px solid #F1E5C7;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

}

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

.cert-card{

    padding:40px;

}

.cert-card h2,
.future-content h2{

    font-size:38px;

    color:#114B29;

    font-weight:800;

    margin-bottom:12px;

}

.cert-line{

    width:55px;

    height:3px;

    border-radius:999px;

    background:#8DBE3E;

    margin-bottom:24px;

}

.cert-card p,
.future-content p{

    font-size:18px;

    line-height:1.9;

    color:#555;

    margin-bottom:36px;

}

.cert-logos{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap: 10px;
    left: 14%;
    position: absolute;

}

.cert-logos img{

    max-height:110px;

    width:auto;

    object-fit:contain;

}

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

.future-card{

    position:relative;

    display:flex;

    align-items:center;

    min-height:330px;

    padding:40px;

}

.future-content{

    width:56%;

    position:relative;

    z-index:2;

}

.future-image{

    position:absolute;

    right:0;

    bottom:69px;

    width:48%;

    max-height:100%;

    object-fit:contain;

}

/*=========================
TABLET
=========================*/

@media(max-width:1100px){

.cert-container{

    grid-template-columns:1fr;

}

.future-card{

    min-height:420px;

}

.future-content{

    width:100%;

    padding-bottom:180px;

}

.future-image{

    width:300px;

}

}

/*=========================
MOBILE
=========================*/

@media(max-width:768px){

.about-certification{

    padding:60px 0;

}

.cert-card,
.future-card{

    padding:28px;

}

.cert-card h2,
.future-content h2{

    font-size:28px;

}

.cert-card p,
.future-content p{

    font-size:16px;

}

.cert-logos{

    justify-content:center;

    flex-wrap:wrap;

}

.cert-logos img{

    max-height:80px;

}

.future-content{

    padding-bottom:200px;

}

.future-image{

    width:230px;

}

}

.organic-logo{
    top:33%;
}