body {
     color: black;
     background-color: #f5f5f5;
     margin: 0 auto;
     padding: auto;
     font-family: Arial, Helvetica, sans-serif;
     font-family: "Poppins", serif;
     font-weight: 100;
     font-style: normal;
 }
p,li,a{
    font-weight: 200;
}
 html {
     scroll-behavior: smooth;
 }

 .headerBox {
     background-color: #bd261b;
     padding: 1px;
 }

 .headerBox1 {
     margin: auto;
     width: 95%;
     display: flex;
     justify-content: space-between;
 }

 .headerBox1 div h1 {
     color: white;
     font-weight: 20;
     text-align: center;
 }

 .headerBox1 div h1 span {
     font-weight: bold;

 }

 .navigation nav ul {
     list-style-type: none;
     display: flex;
     padding-top: 30px;
 }

 .listeItem {
     padding-right: 30px;
 }

 .navigation nav ul li a {
     color: white;
     text-decoration: none;
     transition: 0.5s;
 }

 .navigation nav ul li a:hover {
     letter-spacing: 2px;
     border-bottom: 1px solid white;
     transition: 0.5s;
 }

 .nos {
     border-bottom: 1px solid white;
 }

 .BtnMenu {
     display: none;
 }
 .BtnMenu i{
    font-size: 25px;
 }
 .mobileNav {
     padding: 10px;
     position: fixed;
     width: 100%;
     height: 100%;
     left:-110%;
     background-color: #bd261b;
     background-color: black;
     transition: 0.5s;
 }

 .mobileNavNewClasse {
     left: -0px;
     transition: 0.5s;
 }

 .BntClose {
     float: right;
     padding-right: 40px;
     text-decoration: none;
     font-size: 20px;
     color: white;
     cursor: pointer;
     display: block;
 }

 .BntClose:hover {
     font-size: 25px;
 }

 .mobileNav nav ul {
     list-style-type: none;
     position: relative;
     right: 20px;
     padding-top: 40px;
 }

 .mobNavItem {
     padding-top: 40px;
 }
 .mobileNav nav ul li{
    list-style-type: none;
    display: block;
    padding-right: 20px;
 }
 .mobileNav nav ul li a {
     text-decoration: none;
     display: block;
     color: white;
     background-color: rgb(84, 82, 82);
     padding: 8px;
 }

 .mobileNav nav ul li a:hover {
     font-weight: bold;
 }

 main {
     width: 90%;
     margin: auto;
     margin-top: 50px;
     border-radius: 10px;
     padding: 40px;
     text-align: center;
     background-image: url("gallerie/homme2.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     color: white;

 }

 main h2 {
     padding-top: 100px;
     font-size: 90px;
 }

 .title {
     margin: auto;
     width: 95%;
     margin-top: 50px;
     text-align: center;
 }

 .title h2 {
     color: #bd261b;
     font-size: 50px;
     word-wrap: break-word;
     font-weight: 550;
 }

 section {
     margin: auto;
     width: 95%;
     margin-top: 20px;
 }

 .boxService {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
 }

 .boxService div {
     flex-basis: 45%;
     margin-top: 30px;
     padding: 10px;
     border-radius: 10px;
 }

 .boxService div .spanColor {
     background-color: #bd261b;
     padding: 12px 15px 12px 15px;
     color: #bd261b;
     position: relative;
     bottom: 12px;
 }

 .serviceColor {
     background-color: white;
 }

 .spanColordiff {
     background-color: white;
     color: white;
     padding: 12px 15px 12px 15px;
     position: relative;
     bottom: 12px;
 }

 .serviceColorRed {
     background-color: #bd261b;
     color: white;
 }

 .banniere {
     background-color: #bd261b;
     margin-top: 50px;
 }

 .banniereContenaire {
     margin: auto;
     width: 95%;
     display: flex;
     justify-content: space-between;
     color: white;
     flex-wrap: wrap;
 }

 .banniereContenaire div {
     flex-basis: 45%;
     box-sizing: content-box;
 }

 .banniereContenaire div h3 {
     color: white;
     font-size: 30px;
 }

 .good {
     font-size: 70px;
 }

 .banniereContenaire div h5 {
     font-size: 20px;
 }

 .banniereContenaire div ul li {
     padding-top: 10px;
 }

 .banniereContenaire div a {
     color: white;
 }

 .banniereContenaireBox2 {
     text-align: center;
 }

 .banniereContenaireBox2 img {
     width: 100%;
     height: 650px;
     object-fit: contain;
 }

 article {
     margin-top: 20px;
 }

 .Boxarticle {
     width: 95%;
     margin: auto;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
 }

 .Boxarticle div {
     margin-top: 30px;
     flex-basis: 45%;
     border-radius: 10px;
     padding: 10px;
 }

 .Boxarticle div span {
     padding: 12px 15px 12px 15px;
     position: relative;
     bottom: 12px;
 }

 .Boxarticle div a {
     text-decoration: none;
 }

 .BoxarticleColor1 {
     background-color: white;
 }

 .spanColorWhite {
     background-color: #bd261b;
     color: #bd261b;
 }

 .BoxarticleColor1 a {
     color: black;
 }

 .BoxarticleColor2 {
     background-color: #f7b614;
     color: white;
 }

 .spanColorYello {
     background-color: white;
     color: white;
 }

 .BoxarticleColor2 a {
     color: white;
 }

 aside {
     margin-top: 50px;
     padding-top: 15px;
     background-color: #bd261b;
 }

 aside h3 {
     text-align: center;
     padding: 15px;
     color: white;
     font-weight: 400;
 }

 .contenaireEquipe {
     margin: auto;
     width: 95%;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     padding-bottom: 110px;
 }

 .contenaireEquipe div {
     flex-basis: 20%;
     margin-top: 20px;
     text-align: center;
     background-color: white;
 }

 .contenaireEquipe div img {
     width: 97%;
     height: 200px;
     padding-top: 20px;
     object-fit: cover;
 }

 .contenaireEquipe div h6 {
     color: #bd261b;
     border-left: 50px solid #bd261b;
     border-right: 50px solid #f7b614;
     font-weight: 400;
 }
 .contact {
     margin: auto;
     width: 95%;
     margin-top: 50px;
 }

 .contact h4 {
     font-size: 30px;
     color: #bd261b;
 }

 .cont {
     border-bottom: 5px solid #bd261b;
 }
 .contact form{
    margin: auto;
    width: 1000px;
 }
 .contact form p {
     color: #bd261b;
 }
 .contact form div{
    display: flex;
    justify-content: space-between;
 }
 .contact form div input{
    flex-basis: 47%;
    height: 45px;
    outline-color: #bd261b;
    border: none;
    font-family: "Poppins", serif;
 }
 .contact form div input::-webkit-input-placeholder{
    opacity: 0.3;
    padding-left: 10px;
    font-family: "Poppins", serif;
 }
 .magtop{
    margin-top: 20px;
 }
 .contact form textarea{
    margin-top: 20px;
    width: 99.5%;
    height: 200px;
    outline-color: #bd261b;
    border: none;
    font-family: "Poppins", serif;
 }
 .contact form textarea::-webkit-input-placeholder{
    opacity: 0.3;
    padding-left: 10px;
    font-family: "Poppins", serif;
 }
 .contact form button{
    margin-top: 20px;
    background-color: #bd261b;
    border: none;
    color: white;
    padding: 10px 15px 10px 15px;
    border-radius: 15px;
    cursor: pointer;
    font-family: "Poppins", serif;
    transition: 0.5s;
 }
 .contact form button:hover{
    padding: 10px 20px 10px 20px;
    transition: 0.5s;
 }
footer{
    margin-top: 130px;
    padding: 1px;
    background-color: #bd261b;
    color: white;
}
.contenaireFoot{
    margin: auto;
    width: 95%;
    word-wrap: break-word;
    display: flex;
    justify-content: space-between;
}
.contenaireFoot div{
    flex-basis: 20%;
}
.contenaireFoot div ul li{
    padding-top: 10px;
}
.underline{
    border-bottom: 3px solid white;
}
.listReseau{
    position: relative;
    right: 50px;
}
 .listReseau li{
    display: inline-block;
    list-style-type: none;
    padding-left: 20px;
}
.listReseau li a{
    text-decoration: none;
    color: white;
}
.listReseau li a i{
    font-size: 15px;
}
.copy{
    font-size: small;
    padding-left: 20px;
}

 /*****************************************************/
 @media screen and (max-width:1100px) {
     main {
         padding: 30px;
     }

     .contenaireEquipe div {
         flex-basis: 45%;
     }
     .contact form{
        width: 90%;
     }
     .contenaireFoot{
        flex-wrap: wrap;
    }
    .contenaireFoot div{
        flex-basis: 47%;
    }
   
 }

 @media screen and (max-width:800px) {
     .navigation {
         display: none;
     }

     .BtnMenu {
         padding-top: 40px;
         color: white;
         cursor: pointer;
         display: block;
     }

     main {
         padding: 10px;
     }

     main h2 {
         padding-top: 40px;
         font-size: 40px;
     }

     .title h2 {
         color: #bd261b;
         font-size: 30px;
         word-wrap: break-word;
     }

     .boxService {
         justify-content: space-around;
     }

     .boxService div {
         flex-basis: 90%;
     }

     .banniereContenaire {
         justify-content: space-around;
     }

     .banniereContenaire div {
         flex-basis: 90%;
     }

     .banniereContenaireBox2 img {
         height: 400px;
     }

     .banniereContenaireBox2 {
         margin-top: 20px;
     }

     .Boxarticle {
         justify-content: space-around;
     }

     .Boxarticle div {
         flex-basis: 90%;
     }

     .contenaireEquipe {
         justify-content: space-around;
     }

     .contenaireEquipe div {
         flex-basis: 90%;
     }
     .contact form{
        width: 90%;
     }
     .contact form div{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
     }
     .contact form div input{
        flex-basis: 100%;
        height: 45px;
        outline-color: #bd261b;
        border: none;
        font-family: "Poppins", serif;
     }
     .contact form div input{
        margin-top: 10px;
     }
    .contenaireFoot div{
        flex-basis: 100%;
    }
 }