body{
  margin:0;
  font-family:'Times New Roman';
  background:#ffffff;
  color:#222;
}
/* Hero */
.about-hero{
  padding:120px 20px 160px;
  background:#0b5d4b;
  color:#fff;
  text-align:center;
}

.about-hero span{
  letter-spacing:4px;
  font-size:14px;
  opacity:0.85;
}

.about-hero h1{
  font-size:45px;
  margin:20px 0 30px;
  line-height:1.3;
}

.about-hero p{
  max-width:1100px;
  margin:auto;
  font-size:16.5px;
  line-height:1.8;
  opacity:0.95;
  text-align: justify;
  letter-spacing: 0.5px;
}

/* Overlap Section */
.about-overlap{
  margin-top:-140px;
  padding:0 20px 10px;
}

.overlap-box{
  max-width:750px;
  margin:auto;
  overflow:hidden;
}

/* Image Band */
.image-band{
  height:460px;
  background:url('../images/tree.png') center/contain no-repeat;
}

/* Content */
.overlap-content{
  max-width:1100px;
  margin:auto;
  overflow:hidden;
  padding:70px 30px 10px;
}

.overlap-content h2{
  font-size:38px;
  margin-bottom:25px;
  text-align: center;
}

.overlap-content p{
  font-size:16px;
  color:#555;
  line-height:1.5;
  margin-bottom:20px;
  text-align: justify;
}

/* Horizontal Vision Mission */
.vm-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:60px;
}

.vm-strip div{
  padding:45px;
}

.vm-strip h3{
  font-size:26px;
  margin-bottom:12px;
  color:#0b5d4b;
}

.vm-strip p{
  font-size:15px;
  line-height:1.7;
  color:#555;
}

.vm-strip .mission{
  background:#ffffff;
  border-left:1px solid #e2e2e2;
}

/* Responsive */
@media(max-width:900px){
  .about-hero h1{
    font-size:32px;
    line-height: 1.2;
  }
  .about-hero p{
   font-size: 15px;
  }
  .about-overlap{
   margin-top: -170px;
  }
  .overlap-content{
    padding:0 10px;
  }
  .vm-strip{
    grid-template-columns:1fr;
  }
  .vm-strip .vision{
    padding: 0px;
  }

  .vm-strip .mission{
    border-left:none;
    border-top:1px solid #e2e2e2;
    padding: 0px;
  }

  @media(max-width:768px){
    .vm-strip .mission {
      padding-top: 15px;
    }
  }
}

/* -------------Journey------------------- */
.growth-section{
    padding:50px 50px;
    text-align:center;
}

.growth-title{
    font-size:40px;
    color:#0f3d26;
    font-weight:700;
    margin-bottom: 8px;
}

.growth-sub{
    color:#5f6f65;
    margin:15px auto 40px;
    max-width:600px;
    font-size:15px;
}

/* Container */
.growth-container{
    max-width:2000px;
    margin:auto;
    overflow-x:auto;
    padding-bottom:50px;
}

/* Curve wrapper */
.curve-line{
    position:relative;
    height:320px;
    min-width:1400px;

}

/* SVG */
.curve-line svg{
    position:absolute;
    top:110px;
    left:0;
}

/* Points */
.point{
    position:absolute;
    width:13px;
    height:13px;
    background:radial-gradient(circle,#7ee08a,#1b5e20);
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:pulse 2.5s infinite;
}

@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(46,125,50,0.4);}
    70%{box-shadow:0 0 0 8px rgba(46,125,50,0);}
    100%{box-shadow:0 0 0 0 rgba(46,125,50,0);}
}

/* Point offsets */
.point-up{ transform:translate(-50%,-50%) translateY(8px); }
.point-down{ transform:translate(-50%,-50%) translateY(-8px); }

/* Labels */
.label{
    position:absolute;
    transform:translateX(-50%);
    text-align:center;
    min-width:130px;
    padding:10px 12px;
}

.label-up{ transform:translateX(-50%) translateY(-42px); }
.label-down{ transform:translateX(-50%) translateY(42px); }

.year{
    font-weight:700;
    color:#1b5e20;
    font-size:15px;
}

.text{
    font-size:10.7px;
    color:#4f5f57;
    margin-top:4px;
}

/* Point positions */
.p1{left:3%; top:280px;}
.p2{left:10.3%;  top:248px;}
.p3{left:18%; top:249px;}
.p4{left:25%; top:219px;}
.p5{left:33%; top:219px;}
.p6{left:42%; top:187px;}
.p7{left:52%; top:189px;}
.p8{left:61%; top:160px;}
.p9{left:70%; top:165px;}
.p10{left:78%; top:140px;}
.p11{left:87%; top:148px;}
.p12{left:95%; top:125px;}
.p13{left:103%; top:135px;}
.p14{left:111%; top:116px;}
.p15{left:120%; top:128px;}



/* Label base positions */
.l1{left:3.5%;  top:230px;}
.l2{left:10.5%;  top:210px;}
.l3{left:18%; top:215px;}
.l4{left:25%; top:180px;}
.l5{left:33%; top:140px;}
.l6{left:42%; top:150px;}
.l7{left:52%; top:110px;}
.l8{left:61%; top:125px;}
.l9{left:70%; top:121px;}
.l10{left:78%; top:100px;}
.l11{left:87%; top:75px;}
.l12{left:95%; top:89px;}
.l13{left:103%; top:67px;}
.l14{left:111%; top:78px;}
.l15{left:120%; top:75px;}

@media(max-width:768px){
    .growth-section {
      padding:50px 13px;

    }
  }