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

body {
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}



.contenu-principal {
    display: flex;
    flex: 1;
    padding: 40px;
    gap: 180px;
}

.croicomp {
    display: flex;
    flex-direction: row;
    gap: 70px;
    margin-top: 200px;
    margin-left: 70px;
    margin-right: 70px;
    font-size: large;
    text-align: justify;
}


.gauche {
    text-align: justify;
    letter-spacing: 0.5px;
    line-height: 1.6;
    font-weight: normal;
    margin-bottom: 20px;
    width: 50%;


}




.droite{
    text-align: justify;
    letter-spacing: 0.5px;
    line-height: 1.6;
    font-weight: normal;
    margin-bottom: 20px;
    width: 50%;
    font-size: large;
}

.image_1,
.image_2 {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
.image_2:hover {
    transform: scale(1.1);
    transition-duration: 0.4s;
}
.image_1:hover {
    transform: scale(1.1);
    transition-duration: 0.4s;
}
@media (max-width: 768px) {
    .contenu-principal {
        flex-direction: column;
        padding: 20px;
    }
    .gauche,
    .droite {
        width: 100%;
    }
}



.h2c {
    padding-top: 40px;
}

#GC{
    padding-top: 80px;
    text-align: center;
}

.gescons {
    background-color: #008000;
    color: #d8dffa;
    text-align: justify;
font-size: large;
}
.gestion {
    margin-right: 40px;
    margin-left: 40px;

}

.ges {
    display: flex;
    flex-direction: row;
    gap: 60px;

    color: #d8dffa;
    height: 400px;
    margin-top: 150px;
    width: 100%;

}
.ges1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 100px;
    padding-top: 10px;

}
#im {
    padding-right:60px;
    width:600px;
    object-fit: cover;
    height: 350px;
    text-shadow: 2px 2px 6px black;
    margin-top: 40px;
}
#im:hover {
    transform: scale(1.1);
    transition-duration: 0.4s;
}
.consommation {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 100px;
    padding-left: 130px;
    margin-right: 250px;
}
.moi {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.fur {
    display: flex;
    flex-direction: row;
    margin-top: 80px;
    padding-left: 130px;
    gap: 20px;
    margin-bottom: 30px;
    margin-right: 250px;
}
#bodyI {
    background-color: #008000;
    color: #d8dffa;
}

h1 {
    font-size: 3em;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
.impacts {
    text-align: center;
    margin-top: 40px;

}


.toi{
display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.toi1 {
display: flex;
    flex-direction: column;
    margin-bottom: 20px;

}
.impacts2 {
    display: flex;
    flex-direction: column;
    padding-left: 150px;
    gap: 80px;
    margin-top: 180px;
    margin-bottom: 100px;
    color: black;
}
.toi20 {
    background-color: #c3c3c3;
    padding-left: 100px;
    width: 90%;
    height: 550px;
    padding-top: 60px;
    color: black;
    padding-right: 90px;
    font-size: large;

}
.toi21 {
    background-color: #c3c3c3;
    width: 90%;
    height: 550px;
    padding-left: 115px;
    padding-top: 90px;
    color: black;
    padding-right: 90px;
    font-size: large;
}
.toi22 {
    background-color: #c3c3c3;
    padding-top: 150px;
    width: 90%;
    height: 550px;
    padding-left: 115px;
    color: black;
    padding-right: 90px;
    font-size: large;
}
.toi23 {
    background-color: #c3c3c3;
    width: 90%;
    height: 550px;
    padding-top: 170px;
    padding-left: 100px;
    gap: 80px;
    color: black;
    padding-right: 90px;
    font-size: large;

}
p {
    margin-bottom:10px;
    margin-top: 10px;


}
h3 p {
    margin-bottom:10px;
}
li {
    margin-bottom:10px;
    margin-top: 10px;
}

#solution {
    background-color:  #008000;
    color: #d8dffa;
}
.solution0 {
    text-align: center;
    margin-top: 40px;
}
.ps {
    padding-left: 100px;
    padding-top: 70px;

}
.solutions1 {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 100px;
}
.solutions11 {
    background-image: url('./Assets/pexels-mikhail-nilov-9242903.jpg'); opacity: 0.8;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 500px;
    height: 500px;
    padding-left: 35px;
    padding-top: 200px;
    padding-right: 20px;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-align: justify;

}
.solutions11:hover {transform: scale(1.1);
    transition-duration: 0.4s;}
.solutions12 {
    background-image: url('Prepa.site.code/Assets2/istockphoto-1277535491-612x612.jpg'); opacity: 0.8;
    width: 500px;
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 200px;
    padding-right: 20px;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-align: justify;

}
.solutions12:hover {transform: scale(1.1);
    transition-duration: 0.4s;}


.solutions13 {
    background-image: url('Prepa.site.code/Assets2/istockphoto-1263831531-612x612.jpg'); opacity: 0.8;
     box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    width: 500px;
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 200px;
    padding-right: 20px;
    color: white;
    text-align: justify;

}
.solutions13:hover {transform: scale(1.1);
    transition-duration: 0.4s;}
.solutions14 {
    background-image: url('Prepa.site.code/Assets2/istockphoto-1569106084-612x612.jpg'); opacity: 0.8;
    width: 1250px;
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 80px;
    margin-left: 100px;
    margin-bottom: 60px;
    padding-left: 35px;
    padding-top: 200px;
    padding-right: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    color: black;
    text-align: justify;
}
.solutions14:hover {transform: scale(1.1);
    transition-duration: 0.4s;}



#soutenir {
    background-color:  #008000;
    color: #d8dffa;
}
#sout1 {
    text-align: center;
    margin-top: 40px;
}


.sout2 {
    background-color: #c3c3c3;
    color: black;
    padding-left: 40px;
    display: flex;
    flex-direction: row;
    margin-top: 200px;
    height: 500px;
    gap: 40px;
    margin-bottom: 100px;
    font-size: large;
    text-align: justify;
}
.sout3 {
    margin-top: 90px;
    margin-left: 80px;


}
.imgs {
    width: 600px;
    height: 400px;
    margin-top: 50px;
    margin-right: 100px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
.imgs:hover
{transform: scale(1.1);
transition-duration: 0.4s;}
.lien{
    margin-bottom: 50px;
}
#pc {
    background-color:  #008000;
    color: #d8dffa;

}
.pc1 {
    padding-top: 50px;
    padding-bottom: 50px;
    margin-bottom: 50px;
    margin-left: 200px;
    margin-right: 200px;
    gap: 300px;
    font-size: x-large;
    text-align: justify;

}
.pc0 {
    text-align: center;
    margin-top: 40px;
}
#mentions {
    background-color:  #008000;
    color: #d8dffa;
}
.mention0 {
    text-align: center;
    margin-top: 40px;
}
.mentions1 {
    padding-top: 130px;
    padding-bottom: 50px;
    margin-left: 200px;
    margin-right: 200px;
    gap: 200px;
    font-size: x-large;
    text-align: justify;
}
.pr {
    padding-top: 20px;
    padding-bottom: 10px;
    gap: 90px;
}

.écoute {
    margin-left: 50px;
}
.contact {
    background-color: #008000;
    color: #d8dffa;

}
.contact1 {
    text-align: center;
    margin-top: 40px;
}
.contact2 {
    margin-top: 100px;
    margin-bottom: 50px;
    margin-left: 50px;
    font-size: x-large;
}
.formulaire {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 50px;
margin-left: 100px;
    font-size: x-large;
    margin-bottom: 20px;
}
.formulaire1 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    font-size: x-large;
}
input:hover{
    transform: scale(1.1);
    transition-duration: 0.4s;
}
#submit {
    width: 100px;
    margin-left: 60px;
}
input {
    display: flex;
    flex-direction: row;
    gap: 50px;
    width: 300px;
    height: 30px;
}
#message {
    width: 300px;
    height: 100px;
}
.Ns {
    background-color:  #008000;
    color: #d8dffa;
}


.services{
    display: flex;
    flex-direction: column;
    margin-left: 50px;
    font-size: large;

}
.services0 {
margin-left: 50px;
    margin-top: 100px;
    margin-bottom: 60px;
    gap: 100px;

}


.services1 {
    display: flex;
    flex-direction: row;
    margin-left: 50px;
    margin-top: 100px;
    color: #d8dffa;
    margin-bottom: 50px;
}
.services11 {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    font-size: large;
    margin-top: 50px;
    text-align: justify;

}
.imgservices3 {
    width: 500px;
    height: 400px;
    margin-left: 30px;
    margin-right: 110px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    margin-top: 80px;

}
.imgservices1 {
    width: 800px;
    height: 400px;
    margin-left: 100px;
    margin-right: 130px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    margin-top: 50px;
}
.imgservices1:hover {
    transform: scale(1.1);
    transition-duration: 0.4s;
}
.imgservices2:hover {
    transform: scale(1.1);
    transition-duration: 0.4s;
}
.imgservices3:hover {
    transform: scale(1.1);
    transition-duration: 0.4s;
}
.imgservices2 {
    width: 500px;
    height: 400px;
    margin-left: 100px;
    margin-right: 70px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    margin-top: 50px;
}

.services2 {
    display: flex;
    flex-direction: row;
    margin-top: 50px;
    width:1380px;
    color: #d8dffa;

}
.services22 {
    margin-left: 50px;
    margin-top: 170px;
    font-size: large;
    text-align: justify;

}
.services3 {
    display: flex;
    flex-direction: row;
    margin-top: 100px;
    color: #d8dffa;
    margin-bottom: 50px;
}

.services33 {
    margin-left: 50px;
    margin-top: 150px;
    font-size: large;
    text-align: justify;

}
.lis {
    display: flex;
    flex-direction: column;
    margin-left: 50px;
}

.Qui{
    background-color: white;
    color: black;
}
.sommes0 {
    text-align: center;
    margin-top: 30px;
    gap: 150px;
}
sommes-nous {
    background-color: white;
    color: black;
}

.sommes1 {
    margin-left: 200px;
    margin-top: 100px;
    margin-bottom: 110px;
    gap: 200px;
    margin-right: 300px;
    font-size: x-large;
    text-align: justify;

}
.sommes2 {
    margin-left: 50px;
}