body{
    margin:0;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background:#f7faf7;
    color:#333;
}

.header{
    background-color: #205724;
    display: flex;
    justify-content: center;
}

.header img {
    width: 150px;
}

.footer {
    background-color: #205724;
    padding: 10px;
    color: white;
    text-align: center;
}

/* ================= HERO ================= */

.hero{

    text-align:center;
    padding:100px 20px;

    background:linear-gradient(135deg,#205724,#36943c);
    color:white;

}

.hero h1{

    font-size:55px;
    margin-bottom:20px;

}

.hero p{

    font-size:22px;
    max-width:750px;
    margin:0 auto 40px auto;
    line-height:1.6;

}

.btn-principal,
.btn-secondaire{

    display:inline-block;

    margin:10px;

    padding:16px 35px;

    text-decoration:none;

    border-radius:12px;

    font-size:18px;
    font-weight:bold;

    transition:.3s;

}

.btn-principal{

    background:white;
    color:#205724;

}

.btn-principal:hover{

    transform:translateY(-4px);
    box-shadow:0 10px 20px rgba(0,0,0,.25);

}

.btn-secondaire{

    border:2px solid white;
    color:white;

}

.btn-secondaire:hover{

    background:white;
    color:#205724;

}

/* ================= SECTIONS ================= */

section{

    padding:80px 20px;

}

section h2{

    text-align:center;
    font-size:40px;
    color:#205724;
    margin-bottom:50px;

}

/* ================= CARDS ================= */

.cards{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;

}

.card{

    background:white;

    width:280px;

    padding:30px;

    border-radius:18px;

    text-align:center;

    box-shadow:0 10px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.card:hover{

    transform:translateY(-10px);

    background:#36943c;

    color:white;

}

.card h3{

    margin-top:0;

}

/* ================= PRESENTATION ================= */

.presentation{

    background:white;
    text-align:center;

}

.presentation p{

    font-size:22px;
    line-height:2;

}

/* ================= PRIX ================= */

.pricing{

    background:#205724;
    color:white;
    text-align:center;

}

.pricing h2{

    color:white;

}

.price{

    margin:30px 0;

}

.amount{

    font-size:70px;
    font-weight:bold;

}

.pricing ul{

    list-style:none;

    padding:0;

    font-size:20px;

    line-height:2;

    margin-bottom:40px;

}

/* ================= FAQ ================= */

.faq{

    max-width:900px;
    margin:auto;

}

.faq h3{

    color:#205724;
    margin-top:40px;

}

.faq p{

    line-height:1.8;

}

/* ================= CTA ================= */

.cta{

    text-align:center;

    background:linear-gradient(135deg,#205724,#36943c);

    color:white;

}

.cta h2{

    color:white;
    font-size:45px;

}

.cta p{

    font-size:22px;
    margin-bottom:35px;

}

.icon-contact {
    display: inline-block;
    margin: 0 20px; /* Ajuste l'espacement entre les icônes si nécessaire */
    width: 40px; /* Ajuste la taille des icônes */
    height: 40px;
}
.icon-contact img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}
.icon-contact:hover img {
    transform: scale(1.1); /* Effet de zoom au survol */
}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

.hero{

    padding:70px 20px;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:18px;

}

section h2{

    font-size:30px;

}

.amount{

    font-size:55px;

}

.presentation p{

    font-size:18px;

}

.btn-principal,
.btn-secondaire{

    display:block;
    width:250px;
    margin:15px auto;

}

.card{

    width:100%;
    max-width:320px;

}

}