body{
font-family:'DM Sans', Arial, sans-serif;
background:#f8fafc;
}

.logosize{
  width: 70px;
}

/* Mobile Responsive Global Styles */
@media(max-width:768px){
html, body{
overflow-x:hidden;
}
.container{
padding:0 15px;
}
}

@media(max-width:480px){
.btn-lg{
font-size:14px;
padding:10px 20px;
}
}

.top-header{
background:#0b5d1e;
color:#fff;
padding:10px 0;
font-size:14px;
}

@media(max-width:768px){
.top-header{
font-size:12px;
padding:8px 0;
}
.top-header .col-12{
text-align:center;
margin-bottom:8px;
}
.top-header .col-12:last-child{
margin-bottom:0;
}
}

.navbar{
padding:18px 0;
}

.nav-link{
font-weight:600;
margin:0 10px;
transition:background .25s ease, color .25s ease;
}

.nav-link.active,
.nav-link:hover{
background:#188d2b;
color:#fff !important;
border-radius:10px;
padding:8px 14px;
}

@media(max-width:768px){
.navbar{
padding:12px 0;
}
.nav-link{
margin:8px 0;
}
.navbar-brand h4{
font-size:18px;
}
}

.hero{
height:700px;
background:url("../images/UrbanTreePlantationInitiative.png") center center;
background-size:cover;
position:relative;
}

@media(max-width:768px){
.hero{
height:500px;
}
@media(max-width:480px){
.hero{
height:400px;
}
}
}

.overlay{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
    background: linear-gradient(to right, rgb(0 0 0) 0%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.1) 100%);
}

.hero-content{
padding-top:150px;
color:white;
}

.hero-content h1{
font-size:50px;
font-weight:800;
line-height:1.2;
}

.hero-content span{
color:#65d342;
}

.hero-content p{
font-size:22px;
margin-top:25px;
line-height:1.8;
max-width:650px;
}

@media(max-width:768px){
.hero-content{
padding-top:60px;
}
.hero-content h1{
font-size:32px;
}
.hero-content p{
font-size:16px;
margin-top:15px;
}
}

@media(max-width:480px){
.hero-content{
padding-top:40px;
}
.navbar-brand h4{
  font-size:12px;
}
.logosize{
  width: 35px !important;
}
.hero-content h1{
font-size:24px;
}
.hero-content p{
font-size:14px;
}
}

.btn-success{
background:#188d2b;
border:none;
padding:15px 35px;
}

.btn-outline-light{
padding:15px 35px;
}

.feature-wrapper{
margin-top:-80px;
position:relative;
z-index:10;
}

.feature-box{
background:#f6fbf7;
padding:15px 20px;
text-align:center;
border:1px solid #e6e6e6;
height:100%;
}

.feature-box i{
font-size:55px;
color:#198754;
margin-bottom:20px;
}

.feature-box h5{
font-weight:700;
margin-bottom:15px;
}

.feature-box p{
color:#666;
font-size:15px;
line-height:1.8;
}

@media(max-width:768px){
.feature-wrapper{
margin-top:-40px;
}
.feature-box{
padding:30px 15px;
margin-bottom:15px;
}
.feature-box i{
font-size:40px;
}
.feature-box h5{
font-size:16px;
}
.feature-box p{
font-size:13px;
}
}

@media(max-width:480px){
.feature-wrapper{
margin-top:-20px;
}
.feature-box{
padding:20px 10px;
}
.feature-box i{
font-size:35px;
}
}

.feature-wrapper .row{
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.section-title{
font-weight:700;
color:#1d4724;
}

.title-line{
width:45px;
height:4px;
background:#2d8b39;
margin:auto;
border-radius:20px;
margin-top:8px;
}

@media(max-width:768px){
.section-title{
font-size:28px;
}
.title-line{
width:35px;
}
.feature-wrapper .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.feature-wrapper .row > .col {
  flex: 0 0 100%;
  max-width: 100%;
}
}

.process-row{
display:flex;
align-items:flex-start;
justify-content:center;
flex-wrap:nowrap;
gap:20px;
}

.process-item{
text-align:center;
position:relative;
flex:1;
}

@media(max-width:1024px){
.process-row{
flex-wrap:wrap;
gap:15px;
}
.process-item{
flex:0 1 calc(50% - 15px);
}

.logosize{
  width: 55px;
}
.arrow{
display:none;
}
}



@media(max-width:768px){
.process-row{
flex-direction:column;
gap:30px;
justify-content:center;
align-items:center;
max-width:100%;
margin:0 auto;
}
.process-item{
flex:0 1 100%;
}
}

.number{
width:30px;
height:30px;
background:#22863a;
color:#fff;
border-radius:50%;
font-size:14px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-bottom:-15px;
position:relative;
z-index:5;
}

.icon-box{
width:105px;
height:105px;
background:#fff;
border-radius:18px;
border:1px solid #d7ecd7;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.icon-box i{
font-size:45px;
color:#2d8b39;
}

@media(max-width:768px){
.icon-box{
width:80px;
height:80px;
}
.icon-box i{
font-size:32px;
}
}

@media(max-width:480px){
.icon-box{
width:70px;
height:70px;
}
.icon-box i{
font-size:28px;
}
}

.process-item h6{
margin-top:15px;
font-weight:700;
}

.process-item p{
font-size:15px;
color:#666;
line-height:22px;
padding:0 10px;
}

@media(max-width:768px){
.process-item h6{
font-size:16px;
}
.process-item p{
font-size:14px;
}
}

.arrow{
font-size:30px;
color:#999;
margin-top:40px;
padding:0 20px;
}

.impact-section{
padding-bottom:0px;
}

.impact-bg{
background:url('images/forest-bg.jpg') center;
background-size:cover;
padding:70px 40px;
border-radius:20px;
position:relative;
overflow:hidden;
}

@media(max-width:768px){
.impact-bg{
padding:50px 20px;
border-radius:15px;
}
}

.impact-bg::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(239,247,236,.92);
}

.impact-bg>*{
position:relative;
z-index:2;
}

.impact-card{
background:#fff;
padding:35px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
height:100%;
}

.impact-card:hover{
transform:translateY(-6px);
}

.impact-card i{
font-size:45px;
color:#2d8b39;
margin-bottom:20px;
}

.impact-card h2{
font-size:42px;
font-weight:700;
color:#22863a;
margin-bottom:5px;
}

.impact-card h6{
font-weight:700;
}

.impact-card p{
font-size:14px;
color:#666;
margin-top:10px;
}

@media(max-width:768px){
.impact-card{
padding:25px 15px;
}
.impact-card i{
font-size:35px;
margin-bottom:15px;
}
.impact-card h2{
font-size:28px;
}
.impact-card h6{
font-size:14px;
}
.impact-card p{
font-size:12px;
}
}

.cta-section{
margin-top:10px;
margin-bottom:25px;
position:relative;
z-index:100;
}

.cta-banner{
position:relative;
min-height:220px;
height:auto;
padding:28px 30px;
border-radius:20px;
overflow:hidden;
background:url("../images/footer-banner.png") center center;
background-size:cover;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.cta-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.35);
}

.cta-content{
position:relative;
z-index:2;
text-align:center;
max-width:850px;
margin:0 auto;
}

.cta-content h2{
color:#fff;
font-size:38px;
font-weight:700;
line-height:1.3;
margin-bottom:25px;
}

.cta-btn{
background:#34a853;
border:none;
padding:14px 35px;
border-radius:8px;
font-size:17px;
font-weight:600;
}

.cta-btn:hover{
background:#2d9449;
}

@media(max-width:1024px){
.cta-banner{
height:190px;
}
.cta-content h2{
font-size:30px;
}
.cta-btn{
font-size:16px;
padding:13px 30px;
}
}

@media(max-width:768px){
.cta-banner{
min-height:220px;
padding:28px 22px;
}
.cta-content h2{
font-size:22px;
margin-bottom:18px;
}
.cta-btn{
font-size:15px;
padding:12px 22px;
}
}

@media(max-width:480px){
.cta-banner{
min-height:240px;
padding:24px 18px;
}
.cta-content h2{
font-size:18px;
margin-bottom:14px;
}
.cta-btn{
font-size:14px;
padding:12px 18px;
min-width:180px;
}
}

/* Footer */
.footer-section{
background:linear-gradient(90deg,#114d23,#0d3d1d);
padding-top:38px;
color:#fff;
}

.footer-section h5{
font-weight:700;
margin-bottom:20px;
}

.footer-section p{
color:#d9e7dc;
line-height:28px;
}

.footer-links{
padding:0;
list-style:none;
}

.footer-links li{
margin-bottom:12px;
}

.footer-links a{
color:#d8e4da;
text-decoration:none;
transition:.3s;
}

.footer-links a:hover{
color:#74dd63;
padding-left:5px;
}

.contact-info{
list-style:none;
padding:0;
}

.contact-info li{
margin-bottom:18px;
line-height:28px;
}

.contact-info i{
color:#7be065;
width:25px;
}

.social-icons a{
display:inline-flex;
width:40px;
height:40px;
background:rgba(255,255,255,.15);
border-radius:50%;
align-items:center;
justify-content:center;
color:#fff;
margin-right:12px;
margin-top:15px;
transition:.3s;
}

.social-icons a:hover{
background:#74dd63;
color:#0d3d1d;
}

.footer-bottom{
text-align:center;
padding:20px 0;
border-top:1px solid rgba(255,255,255,.1);
margin-top:40px;
color:#b3c5b6;
}

@media(max-width:768px){
.footer-section{
padding-top:60px;
}
.footer-section h5{
font-size:16px;
margin-bottom:15px;
}
.footer-section p{
font-size:14px;
line-height:24px;
}
}

@media(max-width:480px){
.footer-section{
padding-top:40px;
}
.social-icons a{
width:35px;
height:35px;
font-size:14px;
}
}