/* ------------------------------------------------------------
   RESET
------------------------------------------------------------ */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'poppins', sans-serif;
}


/* ------------------------------------------------------------
   GLOBAL
------------------------------------------------------------ */

.container{
margin:auto;
padding:0 20px;
}


/* -------------------------------------- A propos -------------------------------------- */

/* ------------------------------------------------------------
ABOUT HERO
------------------------------------------------------------ */

.about-hero{
padding:120px 20px;
text-align:center;
background:#ffffff;
}

.about-hero h1{
margin-top: 60px;
font-size:2.8em;
color:#113356;
margin-bottom:20px;
}

.about-hero p{
max-width:700px;
margin:auto;
color:#666;
line-height:1.7;
}


/* ------------------------------------------------------------
STORY
------------------------------------------------------------ */

.about-story{
padding:50px 20px;
background:#ffffff;
}

.about-container{
max-width:1200px;
margin:auto;

display:flex;
align-items:center;
gap:60px;
}

.about-text{
flex:1;
}

.about-text h2{
color:#113356;
font-size:2.2em;
margin-bottom:20px;
}

.about-text p{
color:#666;
line-height:1.7;
margin-bottom:15px;
}

.about-image{
flex:1;
}

.about-image img{
width:100%;
border-radius:25px;
}



/* ------------------------------------------------------------
VALUES
------------------------------------------------------------ */

.about-values{
padding:100px 20px;
text-align:center;
}

.about-values h2{
font-size:2.3em;
color:#113356;
margin-bottom:50px;
}

.values-grid{
max-width:1000px;
margin:auto;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

.value-card{
background:white;
padding:40px;

border-radius:20px;

transition:0.3s;
}

.value-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

.value-card i{
font-size:30px;
color:#113356;
margin-bottom:15px;
}

.value-card h3{
color:#113356;
margin-bottom:10px;
}

.value-card p{
color:#666;
font-size:0.95em;
line-height:1.6;
}


/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */

@media(max-width:900px){

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

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

}

@media(max-width:600px){

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

.about-hero h1{
font-size:2.2em;
}

}