/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f7f7f7;
}

/* HERO */
.hero{
position:relative;
height:260px;
background:url('images/contact-banner.jpeg') center/cover no-repeat;
display:flex;
align-items:center;
}

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.6);
}

.hero-content{
position:relative;
z-index:2;
color:#fff;
padding-left:60px;
}

/* COMMON */
section{
padding:60px 0;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

/* ABOUT */
.about{
background:#fff;
}

.flex{
display:flex;
align-items:center;
gap:50px;
}

.flex img{
width:100%;
max-width:400px;
}

.about-text h2{
margin-bottom:15px;
}

.about-text p{
color:#555;
margin-bottom:15px;
}

.about-text ul{
list-style:none;
}

.about-text li{
margin-bottom:10px;
padding-left:20px;
position:relative;
}

.about-text li::before{
content:"✔";
position:absolute;
left:0;
color:green;
}

/* MISSION */
.mission{
background:#f1f1f1;
}

/* FEATURES */
.features{
text-align:center;
}

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:30px;
}

.box{
background:#fff;
padding:25px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

/* PRODUCT */
.product{
background:#fff;
}

.partner{
padding:60px 5%;
background:#f7f7f7;
}

.partner-title{
text-align:center;
font-size:28px;
font-weight:700;
margin-bottom:40px;
}

.partner-container{
display:flex;
align-items:center;
justify-content:center;
gap:40px;
}

.partner-left,
.partner-right{
width:30%;
}

.partner-center{
width:30%;
text-align:center;
}

.partner-center img{
width:100%;
max-width:350px;
}

.partner ul{
list-style:none;
padding:0;
}

.partner li{
margin-bottom:15px;
font-size:15px;
color:#555;
line-height:1.6;
}
/* CTA */
.cta{
background:#2e1a6b;
color:#fff;
text-align:center;
padding:50px;
}

.cta a{
background:#86c227;
padding:12px 25px;
border-radius:25px;
color:#fff;
text-decoration:none;
display:inline-block;
margin-top:15px;
}

/* RESPONSIVE */
@media(max-width:768px){

.flex{
flex-direction:column;
text-align:center;
}

.grid{
grid-template-columns:1fr;
}

.hero-content{
padding-left:20px;
}

}