*{
    margin:0;
    padding: 0;
    box-sizing:border-box;
}
.about-hero{
    width:100%;
    height:320px;

    background:url("../images/condition-banner.jpg");
    background-size:cover;
    background-position:center;

    position:relative;
}

.about-overlay{
    width:100%;
    height:100%;

    background:linear-gradient(
        90deg,
        rgba(8,54,126,0.92) 0%,
        rgba(8,54,126,0.80) 35%,
        rgba(8,54,126,0.35) 70%,
        rgba(8,54,126,0.05) 100%
    );

    display:flex;
    align-items:center;
}

.about-hero-content{
    padding-left:90px;
    color:#fff;
}

.about-hero-content h1{
    font-size:65px;
    margin-bottom:20px;
}

.about-hero-content p{
    font-size:20px;
    margin-bottom:30px;
}

.about-hero-content p::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    background:#58b947;
    margin-top:15px;
    border-radius:5px;
}

.breadcrumb{
    display:flex;
    gap:12px;
    align-items:center;
    font-size:20px;
}

.breadcrumb a{
    color:#fff;
    text-decoration:none;
}

.breadcrumb span{
    color:#fff;
}
.about-section{
display:grid;
grid-template-columns: 1fr 1.5fr 1fr;
gap: 40px;
align-items: center;
padding: 80px 8%;
}

.about-image img{
width:100%;
height: 420px;
border-radius:20px;
}

.about-content{
flex:2;
}

.section-tag{
color:#58b947;
font-weight:600;
}

.about-content h2{
font-size:35px;
color:#0b4ea2;
margin:15px 0;
}

.about-content p{
line-height:1.8;
color:#555;
margin-bottom:15px;
}
.about-content h2::after{
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: #58b947;
    margin-top: 15px;
    border-radius: 5px;
}
.mission-item{
    align-items: center;
    flex-direction: column;
    gap: 25px;
}
.mission-icon{
    display:flex;
    gap:15px;
    align-items: flex-start;
    margin-bottom:25px;

}
.mission-icon i{
     width:60px;
    height:60px;
    border-radius:50%;
    background:#eef8ef;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#1fa15d;
    font-size:24px;
}
.mission-icon h4{
    color: #0b4ea2;
    font-size: 20px;
    gap:20px ;
}
.mission-icon p{
    color: #555;
    font-size: 15px;
}



.about-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
padding:40px 8%;
}

.stat-box{
background:#fff;
padding:25px;
border-radius:15px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.stat-box i{
font-size:35px;
color:#58b947;
margin-bottom:10px;
}

.why-about{
padding:80px 8%;
text-align:center;
}

.why-about h2{
color:#0b4ea2;
margin-bottom:40px;
}

.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.why-card{
background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.why-card i{
font-size:35px;
color:#58b947;
margin-bottom:15px;
}

.about-cta{
margin:60px 8%;
padding:40px;
border-radius:20px;
background:linear-gradient(
90deg,
#58b947,
#0b4ea2
);
display:flex;
justify-content:space-between;
align-items:center;
}

.about-cta h2,
.about-cta p{
color:#fff;
}

.cta-btn,
.whatsapp-btn{
padding:15px 30px;
background:#fff;
color:#0b4ea2;
border-radius:30px;
text-decoration:none;
margin-left:10px;
font-weight:600;
}
.hidden{
    opacity: 0;
    transform: translateY(40px);
    transition: all .8s ease;
}
.show{
    opacity: 1;
    transform: translateY(0);
}
@media (max-width:768px){
    .about-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 60px 25px;
    }
    .about-image,
    .mission-item,
    .about-content{
        width: 100%;
    
    }
    .about-image img{
        width: 100%;
        height: auto;
    }
    .mission-item{
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .about-stats{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }
    .why-grid{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }
    .about-cta{
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }


}