.about-hero{

height:550px;

background:url("../images/banner/about-banner.jpg") center center;

background-size:cover;

position:relative;

}

.about-hero .overlay{

width:100%;

height:100%;

background:rgba(0,0,0,.45);

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:#fff;

}

.about-hero h1{

font-size:60px;

font-weight:700;

margin-bottom:20px;

}

.about-hero p{

font-size:22px;

margin-bottom:30px;

}

.section-title{

font-size:38px;

font-weight:700;

color:#2d6a2d;

margin-bottom:25px;

position:relative;

}

.section-title:after{

content:"";

width:80px;

height:4px;

background:#f0b400;

display:block;

margin-top:10px;

border-radius:5px;

}
/* =====================================
OUR JOURNEY
===================================== */

.journey-section{

background:#f8f9fa;

}

.timeline{

position:relative;

margin:40px auto;

padding-left:30px;

border-left:4px solid #2d6a2d;

}

.timeline-item{

position:relative;

padding:20px 0 35px 35px;

}

.timeline-item::before{

content:"";

position:absolute;

left:-12px;

top:30px;

width:18px;

height:18px;

background:#f0b400;

border:4px solid #2d6a2d;

border-radius:50%;

}

.timeline-year{

display:inline-block;

background:#2d6a2d;

color:#fff;

padding:6px 18px;

border-radius:30px;

font-weight:700;

margin-bottom:12px;

}

.timeline-content{

background:#fff;

padding:20px;

border-radius:12px;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.timeline-content h5{

font-weight:700;

color:#2d6a2d;

margin-bottom:10px;

}

/*===================================
VALUE CARDS
===================================*/

.value-card{

background:#fff;

padding:35px;

text-align:center;

border-radius:18px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

height:100%;

transition:.35s;

}

.value-card:hover{

transform:translateY(-10px);

box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.value-icon{

font-size:52px;

margin-bottom:20px;

}

.value-card h4{

font-weight:700;

color:#2d6a2d;

margin-bottom:15px;

}

.value-card p{

color:#666;

line-height:1.8;

}

/*===================================
VISION & MISSION
===================================*/

.vision-section{

background:#f7faf7;

}

.vision-card,
.mission-card{

background:#ffffff;

padding:45px;

border-radius:20px;

height:100%;

text-align:center;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

border-top:6px solid #2d6a2d;

}

.mission-card{

border-top:6px solid #d8a100;

}

.vision-card:hover,
.mission-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.vision-icon{

font-size:60px;

margin-bottom:20px;

}

.vision-card h3,
.mission-card h3{

font-weight:700;

color:#2d6a2d;

margin-bottom:20px;

}

.vision-card p,
.mission-card p{

font-size:17px;

line-height:1.9;

color:#555;

}

/*==========================
Impact
===========================*/

.impact-section{

background:#2d6a2d;

color:#fff;

}

.impact-box{

padding:40px 20px;

}

.impact-box h2{

font-size:52px;

font-weight:700;

color:#ffc107;

}

.impact-box p{

font-size:18px;

margin-top:10px;

}

.process-box{

padding:20px;

transition:.3s;

}

.process-box:hover{

transform:translateY(-8px);

}

.process-box{

font-size:18px;

}

.process-box h5{

margin-top:15px;

font-weight:600;

color:#2d6a2d;

}