@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Chivo:ital,wght@0,100..900;1,100..900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    font-family:  "Poppins", sans-serif;
}

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body{
    overflow-x: hidden;
    background-color:var(--body);
}

.scroller{
    position: fixed;
    top: 100px;
    left: 0;
    width: 100vw;
    height: 10px;
    z-index: 10;
    background: rgb(87,8,117);
    background: linear-gradient(90deg, rgba(87,8,117,1) 0%, rgba(97,45,156,1) 48%, rgba(246,246,246,1) 100%); 
    background-repeat: no-repeat;
    background-size: cover;
    transform-origin: left;
    width: 0;
    transition: width 0.25s ease-out;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
 
    
}
@keyframes scroll {
   from{
    background-size: 0% 5px;
   }
   to {
    background-size: 100% 5px;
   }
}
:root{
--violet:  rgba(54, 36, 70, 1);
--black:  rgb(31, 31, 31);
--black2:rgb(47, 48, 47);
--black3:#1e1f1e;
--white: rgb(230, 230, 230);
--white2: rgb(199, 199, 199);
--textColor: rgb(131, 131, 131);
--main-font:"Rubik", sans-serif;
--main-font2:"Roboto", sans-serif;
--main-font3: "Archivo Black", sans-serif;
--body: #eee9f3;
--black2:rgb(71, 71, 71);

}
.nav-accueil{
    height: 100px;
    width: 100vw;
    background-color:var(--black3) ;
    display: flex;
    position: fixed;
    z-index: 1;
    margin-bottom: 10px;
}
.logo-part{
    height: 100%;
    width: 120px;
    /* background-color:rgb(99, 0, 0); */
    display: flex;
    justify-content: center;
    align-items: center;
}
.left-part{
    height: 100%;
    width: 95%;
    /* background-color:rgb(99, 0, 0); */
    display: flex;

}

.ul-container{
    height: 100%;
    width: 70%;
    /* background-color:rgb(26, 207, 26); */

}
.ul-parent{
    height: 100%;
    /* width: 70%; */
    /* background-color:rgb(201, 26, 207); */
    display: flex;

    align-items: center;
}



.ul-parent li{
color: var(--white);
font-size: 15px;
padding: 0 25px;


}
.ul-parent a{
 transition: background-color 0.3s ease; 
    }
.ul-parent a:hover{
  background-color: var(--white2);
  border-radius: 7px;  
  padding: 8px 0;
    }

    .ul-parent a:hover li{
      color: var(--violet);
     
      border-radius: 7px; 
          }
      

.download-container{
    height: 100%;
    width: 30%;
    /* background-color:rgb(26, 74, 207); */
    display: flex;
    justify-content: center;
    align-items: center;

}

.btn-min{
    /* background-color:var(--violet); */
    position: absolute;
    display: none;
    padding: 20px 40px;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border-radius: 5px;
    color:var(--white);
    transition: background-color 0.3s ease;   
}
.burger-menu{
    /* background-color:var(--violet); */
display: none;
cursor: pointer;
}
.btn-min i{
    /* background-color:var(--violet); */

    font-size: 30px;
 
}

.btn-download{
    height: 50px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:var(--violet);
    justify-content: center;
    align-items: center;
    font-size: 15px;
    border-radius: 5px;
    color:var(--white);
    transition: background-color 0.3s ease;

}
.logo-part img{
    height: 40px;
    width: 90px;
  
  }
  .pourphone{
    display: none;
  }
@media screen and (max-width: 1225px){
    .btn-download{
        display: none;
    }
    .btn-min{
        display: block;
    }
 
    .ul-container {
        height: 100%;
        width: 90%;
      }
      .logo-part img {
        display: block;
        height: 38px;
        width: 93px;
      }
}
@media only screen and (max-width:1225px){
 
    .burger-menu{
        /* background-color:var(--violet); */
    display: block;
    color: var(--body);
    font-size: 35px;
    }
    .download-container{
        height: 100%;
        width: 80px;
        /* background-color:rgb(26, 74, 207); */
        display: flex;
        justify-content: center;
        align-items: center;
    
    }
    .ul-parent {
        height: 100%;
        width: 60%;
        background-color: rgb(201, 26, 207);
        display: none;
        align-items: center;
      }
      .logo-part {
        width: 75px;
        /* background-color: rgb(99, 0, 0); */
      }
}

























.btn-download:hover{
    background-color:var(--white2);
   
    color:var(--violet);

}

.btn-download i{
    color: var(--white);

}




/* SECTION ZERO SECTION ZERO SECTION ZERO SECTION ZERO SECTION ZERO  */




.section-0{
    height: 17rem;
    width: 100vw;
    /* background-color: rgb(129, 124, 124); */

}
.tridemcolor{
    background-color: var(--violet);
    color: var(--white2);
    border-radius: 25px;
    padding: 2px 20px;
}
.sec-01{
    height: 100%;
    width: 100%;
    /* background-color: rgb(163, 80, 173); */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6rem;

}
.sec-01 h2{
font-size: 35px;
text-align: center;
color: var(--black);
padding: 0 320px;
}

.sec-02{
    height: 19%;
    width: 100%;
    /* background-color: rgb(46, 97, 104); */
    display: flex;
    justify-content: center;
}

.sec-02 p{
  text-align: center;
  padding: 10px 1px;
  font-family: var(--main-font);
  font-size: 22px;
}
 
/* CONDITION GENERALE D'UTILISATEUR CONDITION GENERALE D'UTILISATEUR */
.conditionsGu{
  min-height: 100vh;
  width: 100vw;
  /* background-color: #00a108; */
  display: flex;
  justify-content: center;
  align-items: center;
padding: 4rem 0;
}

.cguCard{
  min-height: 650px;
  width: 1200px;
  border-radius: 10px;
  border: solid 1px  rgb(221, 221, 221);
  box-shadow: 5px 5px 5px 1px rgb(221, 221, 221);
  margin-top: 7rem;
}

.cguBigTitle{
  height: 230px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: var(--violet); */
  padding: 0 10px;
}
.cguBigTitle h1{
  color: var(--black);
  font-size: 35px;
}

.cguBigTitle p{
  color: var(--black2);
}

.cguBigTitle h4{
  color: var(--black2);
  font-weight: 400;
  font-size: 15px;
  margin: 15px 0;
}
.lineCgu{
  height: 1px;
  width: 100%;
  background-color: var(--textColor);
  margin-bottom: 30px;
}
.cguSec{
  min-height: 50px;
  width: 100%;
  /* background-color: #cc880a; */
  display: flex;
  flex-direction: column;
  padding: 10px;

}

.cguSec h2{
  color: var(--black);
  font-size: 20px;
}
.cguSec h3{
  color: var(--black2);
  font-size: 16px;
}

.cguSec h5{
  color: var(--textColor);
  font-weight: 300;
  font-size: 14px;
}
.cguSec h5 i{
  font-size: 7px;
  padding-left: 25px;
}


/* TOUS S'ENVOIE TOUS SE TRANSPORTE TOUS S'ENVOIE TOUS SE TRANSPORTE */
.tousSenvoie{
min-height: 400px;
width: 100vw;
/* background-color: #00a108; */
display: flex;
flex-direction: column;
align-items: center;
}

.tousSenvoie h5{
  color: var(--textColor);
  font-size: 17px;
  }

  .tousSenvoie h2{
    font-size: 35px;
    text-align: center;
    color: var(--black);
    }
.obetsMain{
  min-height: 350px;
  width: 1000px;
  background-color: #00a108;
  margin-top: 20px;
  background-image: url(../img/site/OAK41Y0.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.cardobjets{
  height: 130px;
  width: 140px;
  background-color: rgb(243, 243, 243);
  margin: 15px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 5px;
  justify-content: center;
  align-items: center;
}

.cardobjets img{
  height: 95px;
  width: 95px;
  object-fit: cover;
  display: flex;

}
.cardobjets h4 {
  font-size: 13px;
  color: var(--black2);
  user-select: none;
  display: flex;
  margin-top: auto; 
}




@media only screen and (max-width:1051px){
  .obetsMain {
    min-height: 350px;
    width: 95%;
    justify-content: space-between;
  }
}



@media only screen and (max-width:739px){
  .tousSenvoie h2 {
    font-size: 30px;
  }
}
@media only screen and (max-width:555px){
  .cardobjets {
    height: 85px;
    width: 107px;

  }
  .cardobjets img {
    height: 45px;
    width: 46px;
  }
  .cardobjets h4 {
    font-size: 11px;
  }
}
@media only screen and (max-width:500px){
  .tousSenvoie h2 {
    font-size: 25px;
    padding:0 5px;
  }
  
}
@media only screen and (max-width:335px){
  .tousSenvoie h5 {
    color: var(--textColor);
    font-size: 13px;
  }
  
}


/* CO2 CONTAINER CO2 CONTAINER CO2 CONTAINER CO2 CONTAINER */
.co2container{
  min-height: 600px;
  width: 100vw;
  background: rgb(238,233,243);
  background: linear-gradient(90deg, rgba(238,233,243,1) 0%, rgba(54,36,70,1) 100%);
  margin: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#titleCo2{
  font-size: 50px;
  color: var(--body);
}
.co2container p{
  color: var(--black);
  font-weight: bold;
}
.co2card{
  height: 200px;
  width: 800px;
  border: solid 3px var(--body);
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--violet);
}
.co2card h2{
  font-size: 4em;
  color: var(--body);
}
.co2card h5{
  color: var(--white2);
  font-size: 17px;
}


/* ACTIONS AUTOMATIQUES  ACTIONS AUTOMATIQUES  ACTIONS AUTOMATIQUES */

.rapide{
min-height: 300px;
width: 100vw;
/* background-color: #00a186; */
display: flex;
align-items: center;
justify-content: center;
margin-top: 5rem;
}

.rapideContainer{
  min-height: 300px;
  width: 1500px;
  /* background-color: #b5c900; */
  display: flex;
align-items: center;
justify-content: space-between;
}
.bcolor{
 color: var(--violet);
}
.cardRapide{
  height: 300px;
  width: 400px;
  /* box-shadow: 5px 5px 22px 1px rgb(219, 219, 219); */
  /* border-radius: 10px; */
display: flex;
flex-direction: column;
padding: 10px;
}

.cardRapide i{
  font-size: 35px;
  color: var(--violet);
  display: flex;
  align-self: center;
  margin: 15px 0;
}
.cardRapide h3{
  color: var(--black);
  display: flex;
  align-self: center;
  font-size: 20px;
}
.cardRapide p{
  color: var(--textColor);
  font-size: 15px;
  margin-top: 15px;
}


@media only screen and (max-width:1498px){
  .rapideContainer {
    min-height: 300px;
    width: 95%;
  }
}

@media only screen and (max-width:1192px){
  .cardRapide {
    min-height: 300px;
    width: 33%;
  }
}
@media only screen and (max-width:828px){
  .rapideContainer {
    min-height: 300px;
    width: 95%;
    /* background-color: #b5c900; */
    flex-direction: column;
  }

  .cardRapide {
    min-height: 300px;
    width: 100%;
  }
  .cardRapide p {
    text-align: center;
  }
}





/* SECTION UN SECTION UN SECTION UN SECTION UN SECTION UN */

.E2{
    display: none;
}

.section-1{
    height: 45rem;
    width: 100%;
position: relative;
display: flex;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
top: 99px;
justify-content: right;
overflow-x: hidden;
background-image: url(../img/site/w5.jpg);
background-position: center;
background-repeat: no-repeat;
}


.section-1 video{
 height: auto;
 width: auto;
 background-position-x: 50px;
 background-position-y: 50px;
}

        
@media only screen and (max-width:950px){
  .co2container p {
    margin-bottom: 15px;
  }
}












.videoContent{
  height: 100%;
  width: 1200px;
  /* background-color: #ed5d34; */
  position: absolute;
  display: flex;
  flex-direction: column;
justify-content: end;

}
.topVideoContent{
  height: 20%;
  width: 100%;
  /* background-color: rgba(112, 197, 202, 0.644); */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 10px;
}

.topVideoContent h1{
  color: var(--body);
  font-size: 30px;
}

.topVideoContent2{
  height: 15%;
  width: 100%;
  /* background-color: #7079cab4; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}









@media only screen and (max-width:1490px){
    .sec1-right {
        padding: 350px 0;
        /* background-color: #00a186; */
      }
}
.down13{
    display: none;
  }
.partie-heaut{
    height:30% ;
    width: 100%;
    /* background-color: blueviolet; */
    display: flex;
}
.slogan{
    height: 20%;
    width: 100%;
    /* background-color: brown; */
    align-self: flex-end;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:35px 80px;
}
.slogan h1{
  color: var(--white);
font-size: 35px;
  /* padding-right: 51px; */
}
.liv2{
    color:var(--violet);

}
.partie-bas {
  height: 28%;
  width: 90%;
  /* background-color: rgb(43, 226, 150); */
  display: flex;
  justify-content: space-evenly;
  padding: 0 50px;
  position: absolute;
  align-items: center;
  }

.prouv1{
    height: 100%;
    width: 318px;
    /* background-color: antiquewhite; */
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}
.prouv1 h2{
  color: var(--body);
  font-size: 50px;
}

.prouv1 p{
  color: var(--body);
  font-size: 16px;
}

.E3{
    display: none;
}
.prouv-top-2{
    height: 80%;
    width: 100%;
    /* background-color: brown; */
    display: flex;
    align-items: center;
    justify-content: center;

}
.chiffreTitre{
  min-height: 200px;
  width: 100vw;
  /* background-color: #00a108; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.chiffreTitre h2{
  color: var(--black);
  font-size: 35px;
  padding: 0 300px;
  text-align: center;

}

.chiffreTitre p{
  color: var(--textColor);
  padding: 0 200px;
  text-align: center;
  margin: 30px 0;
  display: none;
}
.cardChiffreMain{
  min-height: 400px;
  width: 100%;
  margin-top: 30px;
  /* background-color: #00a108; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cardChiffre{
  height: 180px;
  width: 465px;
  margin: 25px 0;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 5px 5px 22px 1px rgb(219, 219, 219);
}
.cardChiffre h3{
 height: 50px;
 width: 100%;
 /* background-color: #00a108; */
 display: flex;
 align-items: center;
 color: var(--black);
}
.cardChiffre img{
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 50%;
  border: solid 1px var(--violet);
 }

 .cardChiffre p{
  color: var(--textColor);
  margin-top: 10px;
 }



.chiffreGaz{
  min-height: 400px;
  width: 100vw;
  /* background-color: #00a108; */
  display: flex;
}

.chiffreC{
  min-height: 500px;
  width: 50%;
}
.chiffreLeft {
  display: flex;
  flex-direction: column;
}
.chiffreLeft h2{
  color: var(--black2);
  font-size: 20px;
  text-align: center;
  min-height: 60px;
  padding: 0 20px;
  width: 80%;
  /* background-color: #00a108; */
  justify-self: center;
  margin-left: auto;
  margin-top: 20px;
}



.chiffreRight img{
  height: 1086px;
  width: auto;
  object-fit: cover;
  border-radius: 10px;
}

.phoneEngagement{
  min-height: 450px;
  width: 100vw;
  /* background-color: #00a108; */
  display: flex;
  margin-top: 7rem;
}

.phoneEg{
  min-height: 300px;

}

.phoneEimg {
  display: flex;
  justify-content: right;
  align-items: center;
  width: 40%;
}
.phoneEimg img{
  height: 600px;
  width: auto;
  object-fit: cover;
}

.phoneEcontent{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  width: 60%;

}
.phoneEcontent h5{
  color: var(--textColor);
  font-size: 15px;
  font-weight: 600;
}

.phoneEcontent h2{
  color: var(--black);
  font-size: 25px;
}

.phoneEcontent p{
  color: var(--textColor);
  margin-top: 10px;
  min-height: 30px;
  width: 80%;
  display: flex;
  /* background-color: #00a108; */
}

.phoneEcontent a{
  display: flex;
  height: 60px;
  width: 250px;
  background-color: var(--violet);
  justify-content: center;
  align-items: center;
  color: var(--body);
  border-radius: 10px;
  margin-top: 20px;
  cursor: pointer;
}
.phoneEindex{

  margin-top: 7rem;
}

@media only screen and (max-width:734px){
  .phoneEcontent {
    width: 55%;
    /* background-color: blue; */
  }
  .phoneEimg {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 45%;
  }
  .phoneEcontent p {
    width: 99%;
  }
}

@media only screen and (max-width:666px){
  .phoneEimg img {
    height: 499px;
    width: auto;
    object-fit: cover;
  }
  .phoneEindex {
    margin-top:4rem;
  }
}
@media only screen and (max-width:550px){
  .phoneEindex {
    min-height: 450px;
    width: 100vw;
    /* background-color: #00a108; */
    display: flex;
    margin-top:7rem;
    flex-direction: column;
    align-items: center;
  }
  .phoneEcontent {
    width: 100%;
    /* background-color: blue; */
    padding: 10px;
  }
  .phoneEimg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}
@media only screen and (max-width:394px){
  .phoneEcontent h2 {
    font-size: 26px;
  }
}
/* TRIDAIRE LISTES TRIDAIRE LISTES TRIDAIRE LISTES  */
.triaireListe{
  min-height: 600px;
  width: 100vw;
  /* background-color: #00a108; */
  display: flex;
  margin-bottom: 10rem;
}

.triaireListePart{
  min-height: 600px;
  width: 50%;
  /* background-color: #b5c900; */
}
.TridaireImg{
  display: flex;
  justify-content: center;
  padding-left: 217px;
}
.TridaireImg img{
  height: 600px;
  width: auto;
  object-fit: cover;
  margin-right: 4rem;
  rotate: -4deg;
}
.tridairePhoneContent{
  /* background-color: #b5c900; */
  display: flex;
flex-direction: column;
justify-content: center;

}

.tridairePhoneContent h5{
  color: var(--textColor);
  font-size: 15px;
  margin-top: 40px;
}

.tridairePhoneContent h2{
  color: var(--black);
  font-size: 20px;
}

.tridairePhoneContent  p{
  min-height: 2%;
  width: 600px;
  /* background-color: #00a108; */
  color: var(--textColor);

}

@keyframes bgColorChange {
  0% {
    background-color: rgb(99, 35, 155);
  }
  50% {
    background-color: rgb(31, 31, 31);
  }
  100% {
    background-color: rgba(54, 36, 70, 1);
  }
}

.tridairePhoneContent a {
  height: 55px;
  width: 250px;
  display: flex;
  margin-left: 50px;
  background-color: rgba(54, 36, 70, 1); /* Couleur initiale */
  color: var(--body);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  margin-top: 20px;
  
  /* Ajout de l'animation */
  animation: bgColorChange 1s infinite ease-in-out;
}


@media only screen and (max-width:739px){
  .triaireListe {
    margin-bottom: 2rem;
  }

  .tridairePhoneContent h2 {
    margin-bottom: 37px;
  }
}
@media only screen and (max-width:1217px){
  .tridairePhoneContent p {
    width: auto;
    padding-right: 10px;
  }
}


@media only screen and (max-width:931px){
  .TridaireImg {
    padding-left: 0px;
  }
  .TridaireImg img {
    height: 600px;
    rotate: -4deg;
  }
}
@media only screen and (max-width:803px){
  .TridaireImg img {
    height: 500px;
    rotate: -8deg;
  }
}
@media only screen and (max-width:737px){
  .TridaireImg img {
    height: 455px;
  }
  .TridaireImg {
    padding-left: 0px;
    align-items: center;
  }
  .triaireListe {
    min-height: 600px;
    width: 100vw;
    /* background-color: #00a108; */
    display: flex;
    margin-bottom: 5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .triaireListePart {
    min-height: 473px;
    width: 100%;
    /* background-color: #b5c900; */
    padding:
  0 20px;
      padding-left: 20px;
  }

  .tridairePhoneContent {
    justify-content: start;
    min-height: 353px;
  }

  .tridairePhoneContent a {
  margin-left: 0;
  align-self: center;
}
}

@media only screen and (max-width:339px){
  .TridaireImg img {
    margin-left: 50px;
  }
}





@media only screen and (max-width:1201px){
  .section-1 {
    height: 36rem;
    width: 100%;
    /* background-color: #00a108; */
    justify-content: center;
  }
}

@media only screen and (max-width:1071px){
  .section-1 {
    height: 25rem;
    width: 100%;
  }

  .topVideoContent2 {
    justify-content: center;
  }

  .prouv1 {
    height: 100%;
    width: 288px;
  }
  .topVideoContent2 {
    height: 24%;
    width: 100%;
  }
  .prouv1 h2 {
    color: var(--body);
    font-size: 36px;
  }
  .topVideoContent h1 {
    color: var(--body);
    font-size: 23px;
  }
}
@media only screen and (max-width:867px){
  .prouv1 p {
    font-size: 14px;
  }

  .burger-menu {
    font-size: 36px;
  }
}
    
@media only screen and (max-width:867px){
  .prouv1 h2 {
    font-size: 23px;
  }

  .topVideoContent2 {
    height: 18%;
    width: 100%;
  }
}
@media only screen and (max-width:360px){
  .top-partt {
    padding-left: 0px;
    text-align: center;
  }
}


@media only screen and (max-width:1326px){
    .sec1-left {
        height: 100%;
        width: 20%;
        background-color: blueviolet;
        display: none;
      }
 
   
    .partie-bas {
        height: 791px;
        width: 100%;
        /* background-color: rgb(43, 226, 150); */
        display: flex;
        justify-content: space-between;
      }
    
       
}

@media only screen and (max-width:1326px){
 
    .slogan {
        height: 20%;
        width: 100%;
        /* background-color: brown; */
        align-self: flex-end;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 35px;
      }
      .prouv-top h3 {
        color: var(--white);
        font-size: 50px;
      }
      .prouv-top-2 p {
        color: var(--white);
        font-size: 50px;
      }

      .sec1-right {
        padding: 300px 0;
        /* background-color: #00a186; */
      }
}

/* @media only screen and (max-width:1524px){
 
    .sec1-right {
        padding: 350px 0;
      }
  
} */
@media only screen and (max-width:1285px){


   
      
      .partie-heaut {
        height: 30%;
        width: 113%;
        /* background-color: blueviolet; */
        display: flex;
        justify-content: right;
      }
      .slogan h1 {
        color: var(--white);
        font-size: 21px;
    
      }
      .slogan {
        height: 20%;
        width: 100%;
        /* background-color: brown; */
        align-self: flex-end;
        display: flex;
        justify-content: center;
        align-items: center;

      }
}
@media only screen and (max-width:1077px) {
    
    .sec1-right {
        height: 122%;
        width: 100%;
      }


}

@media only screen and (max-width:991px) {
    .slogan h1 {
        color: var(--white);
        font-size: 17px;
    
      }
      .prouv-top p {
        color: var(--white);
        font-size: 30px;
      }
      .prouv-top-2 p {
        color: var(--white);
        font-size: 30px;
      }
    
      .prouv-bottom p {
        color: var(--white);
        font-size: 12px;
      }


}



@media only screen and (max-width:861px){
    .sec1-right {
        height: 115%;
        width: 100%;
        /* background-color: rebeccapurple; */
      }
      .slogan h1 {
        color: var(--white);
        font-size: 15px;
      }

 

    

}


@media only screen and (max-width:783px){
    .sec1-right {
        height: 106%;
        width: 100%;
        /* background-color: rebeccapurple; */
      }
}





@media only screen and (max-width:723px){
    .sec1-right {
        height: 97%;
        width: 100%;
        /* background-color: rebeccapurple; */
      }
      @media only screen and (max-width:647px){
     


          .slogan {
        
            display: flex;
            justify-content: center;
            align-items: flex-start;
          }
          .sec1-right {
            height: 89%;
            width: 100%;
            /* background-color: rebeccapurple; */
          }
    }

}

@media only screen and (max-width:567px){
    .sec1-right {
        height: 67%;
        width: 100%;
        /* background-color: rebeccapurple; */
      }
      .partie-heaut {
        height: 30%;
        width: 484px;
        /* background-color: blueviolet; */
      }
      .partie-bas {
        height: 791px;
        /* width: 405px; */
        /* background-color: rgb(43, 226, 150); */
      }
      .partie-heaut {
        height: 30%;
        width: 484px;
        background-color: blueviolet;
      visibility: hidden;
      }
}
@media only screen and (max-width:471px){
    .sec1-right {
        height: 35%;
        width: 100%;
        /* background-color: rebeccapurple; */
      }


}


@media only screen and (max-width:423px){
    .sec1-right {
        height: 30%;
        width: 100%;
        /* background-color: rebeccapurple; */
      }
      .prouv-top p {
        color: var(--white);
        font-size: 18px;
      }
      .prouv-top-2 p {
        color: var(--white);
        font-size: 18px;
      }
.pourPc{
    display: none;
}

.pourphone{
    display: block;
}
}

@media only screen and (max-width:391px){
    .sec1-right {
        height: 25%;
        width: 100%;
        /* background-color: rebeccapurple; */
      }
     
}

@media only screen  and (max-width:371px){
    .sec1-right {
        height: 17%;
        width: 100%;
        /* background-color: rebeccapurple; */
      }
}


@media only screen and (max-width:575px){
  .topVideoContent h1 {
    color: var(--body);
    font-size: 25px;
    min-height: 30px;
    width: 95%;
    text-align: center;
    /* background-color: aquamarine; */
  }


  .topVideoContent {
    height: 30%;
    width: 100%;
    /* background-color: rgba(112, 197, 202, 0.644); */
  }


}

@media only screen and (max-width:705px){
  .videoContent {
    height: 100%;
    width: 100%;
    /* background-color: #ed5d34; */

  }
}
@media only screen and (max-width:575px){
  .videoContent {
    align-items: center;
  }
  #ProuvOne {
    display: flex;
    align-items: center;
  }



  #ProuvThree {
    display: flex;
    align-items: center;
  }
  .topVideoContent2 {
    min-height: 80px;
    width: 95%;
  }
  .prouv1 {
    min-height: 83px;
    width: 188px;
    /* background-color: #3c3327; */
  }
  .prouv1 p {
    font-size: 12px;
    text-align: center;
  }
}
@media only screen and (max-width:1431px){
  .sec-01 h2 {

    padding:0 50px;
  }
}


@media only screen and (max-width:763px){
  .sec-01 h2 {
    padding:0 20px;
  }
}
@media only screen and (max-width:763px){
  .sec-01 h2 {
    font-size: 30px;
    padding:0;
  }
}

@media only screen and (max-width:495px){
  .sec-01 h2 {
    font-size: 25px;
    padding:0 20px;
  }
}

@media only screen and (max-width:405px){
  .section-0 {
    height: 17rem;
  }
}

/* ENVOYER ENVOYER ENVOYER ENVOYER ENVOYER  */
.envoyerColis{
  height: 100vh;
  width: 100vw;
  /* background-color: #00a186; */
  background-image: url(../img/site/vivid-blurred-colorful-background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.envoyerColis h1{
  font-size: 45px;
  color: var(--black);
  margin-top: 10rem;
}
.progesseColis {
  width: 900px;
  height: 25px;
  background-color: rgb(218, 218, 218);
  margin-top: 10px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, rgba(54, 36, 70, 1) 0%, rgba(54, 36, 70, 1) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 5s linear;
}

.contentProgress {
  margin-top: 10px;
  height: 50px;
  width: 900px;
  display: flex;
  justify-content: space-between;
}

.cardPcont {
  height: 100%;
  width: 30%;
  /* background-color: #b5c900; */
  display: flex;
  flex-direction: column;
}
.bul{
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #ed5d34;
  display: flex;
  align-self: center;
}
.bul1{
  background-color: rgb(172, 157, 28);
  display: flex;
  align-self: flex-start; /* Positionne l'élément en haut de son conteneur */
  margin-right: auto; /* Aligne cet élément à gauche */
}
.bul2{
  background-color: rgb(13, 135, 235);
}
.bul3 {
  background-color: #00a108;
  display: flex;
  align-self: flex-end;
  margin-left: auto; /* Cela pousse .bul3 à droite */
}

.cardPcont h3 {
  font-size: 20px;
  color: var(--black2);
}

#step3 {
  display: flex;
align-items: end;
  visibility: hidden;
}

#step2 {
  visibility: hidden;
  justify-content: center;

}

#step1 {
  visibility: visible; /* rendre visible si nécessaire */
 
}
.minHeure{
  height: 100px;
  width: 300px;
  /* background-color: #00a108; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
}
.minHeure h2{
  font-size: 37px;
  color: var(--black);
}

.minHeure h4{
  color: green;
  visibility: hidden;
}
.envoyerColis p{
  color: var(--textColor);
  padding: 0 400px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 4rem;
}

.envoyerColis a{
  height: 60px;
  width: 250px;
  background-color: var(--black);
  color: var(--body);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  border-radius: 7px;
  transition: all 0.3s ease-in-out;
}
.envoyerColis a:hover{
  background-color: var(--body);
  color: var(--violet);
}



/* SECTION WHYUSE SECTION WHYUSE SECTION WHYUSE SECTION WHYUSE */

.whyUse{
  min-height: 300px;
  width: 100vw;
  /* background-color: #00a108; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}

.heroEnvoie{
  min-height: 100px;
  width: 1200px;
  /* background-color: #b5c900; */
  padding-right: 450px;

}

.heroEnvoie h2{
  color: var(--black);
  font-size: 35px;
  margin-bottom: 1rem;
}

.heroEnvoie h5{
  font-size: 17px;
  color: var(--black2);
  font-weight: 500;
}

.heroEnvoieContent{
  min-height: 600px;
  width: 1200px;
  display: flex;
  /* background-color: #00a108; */
  justify-content: center;
  align-items: center;
}

.heroEnvoieContent img{
height: 500px;
width: 450px;
object-fit: cover;
border-radius: 10px;
}
.hcdiv{
  height: 500px;
  width: 550px;
  /* background-color: yellow; */
  margin-left: 45px;
  display: flex;
  flex-direction: column;
justify-content: center;
}
.hcdiv h5{
  color: var(--textColor);
  font-size: 15px;
font-weight: 600;
margin-top: 40px;
}
.hcdiv  p{
  color: var(--textColor);
  margin-top: 20px;

}

.hcdiv h2{
  color: var(--black);
  font-size: 20px;
}

.sendColis {
  height: 60px;
  width: 250px;
  background-color: var(--violet);
  display: flex;
  align-self: center;
  justify-content: center;
  align-items: center;
  color: var(--body);
  border-radius: 10px;
  margin-top: 20px;
  cursor: pointer;
}

.sendMessage {
  height: 70px;
  width: 90%;
  margin-top: 10px;
  display: flex;
  align-self: center;
  border-radius: 10px;
  box-shadow: 5px 5px 22px 1px rgb(219, 219, 219);
  padding: 10px;
  color: var(--textColor);
  

  opacity: 0; 
  visibility: hidden; 
  transition: opacity 1s ease, visibility 0s 0.5s; 
}

.sendMessage.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 0s 0s;
}



/* SECTION CONCEPT SECTION CONCEPT SECTION CONCEPT SECTION CONCEPT */
.section-concept-container{
    height: 38rem;
    width: 100vw;
    /* background-color: brown; */
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
    margin-top: 3rem;

}


.section-concept-container-chearch{
    height: 10%;
    width: 100%;
    /* background-color: #333; */
    display: flex;
    justify-content: center;

}
.chearch-concept-header{
    height: 100%;
    width: 900px;
    /* background-color: #ed5d34; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.chearch-concept-header button{
    height: 100%;
    width: 170px;
outline: none;
  cursor: pointer;
  background-color: var(--body);
  border-radius: 28px;
  border: 2px solid rgb(211, 211, 211);
  color: var(--black);

  font-size: 15px;
  transition: background-color 0.3s ease;
}
.chearch-concept-header button:hover{
  color: var(--white2);
background-color: var(--violet);
}

.section-concept-main{
    height: 90%;
    width: 100%;
    margin-top: 3rem;
 
    /* background-color: #69478b;  */
    /* display: flex !important; */
  

}
.container-concept-left{
    height: 484px;
    width: 938px;
    /* background-color: #b5c900; */
    display: flex;
    justify-content: right;
    align-items: center;
}

.container-concept-left-img, .container-concept-left-img2, .container-concept-left-img3, .container-concept-left-img4{
    height: 484px;
    width:  640px;
    /* background-color: #69478b; */
    border-radius: 12px;
    background-position: center;
    background-size: cover;
}
.container-concept-left-img{

    background-image: url(../../assets/img/img-1/t54.jpg);
}
.container-concept-left-img2{
    background-image: url(../../assets/img/img-1/t22.jpg);
}
.container-concept-left-img3{
    background-image: url(../../assets/img/img-1/t35.jpg);
}
.container-concept-left-img4{
    background-image: url(../../assets/img/img-1/road-601871_1920.jpg);
}
.container-concept-right{
    height: 484px;
    width:  904px;
    padding-left: 37px;
    /* background-color: #00a1c9; */
}
#timelineTwo{
  display: none;
}
.top-partt{
    height: 60px;
    width: 100%;
    /* background-color: #ed5d34; */
    display: flex;
    /* align-items: center; */
    padding-left: 10px;
}
.top-partt, h4{
 font-size: 22px;
 color: var(--black2);
 user-select: none;
text-align: center;
}
.cc-container{
    height: 424px;
    width: 524px;
    /* background-color: #b5c900; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cc-container1{
    height: 25%;
    width: 100%;
    /* background-color: #00a186; */
    display: flex;
}
.cc-container-left{
    height: 100%;
    width: 15%;
    /* background-color: #d9f00b; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.cc-container-right{
    height: 100%;
    width: 85%;
    /* background-color: #4b5874; */
}

.rondelion{
height: 40px;
width: 40px;
background-color:var(--violet);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--white2);
font-size: 17px;

}
.preci{
    color: var(--violet);
}
.cc-container-right-top{
    height: 25%;
    width: 100%;
    /* background-color: #ed5d34; */
    display: flex;
    justify-content: center;
}
.cc-container-right-top p{
font-family: var(--main-font2);
color: var(--black);
font-size: 19px;
}
.cc-container-right-top-width{
    height: 100%;
    width: 50%;
    /* background-color: #a1dd14; */
    display: none;

}
.num-g{
    height: 100%;
    width: 30px;
    /* background-color: #1e00c9; */
}
.num-g span{
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--violet);
    color: var(--body);
}
.textingo-gd{
    height: 100%;
    width: 475px;
    /* background-color: #07c900; */
    display: flex;
    justify-content: center;
    align-items: center;
}





.cc-container-right-bottom{
    height: 75%;
    width: 100%;

    /* background-color: #34d7ed; */
}
.cc-container-right-bottom p{
    color: var(--textColor);
    font-size: 15px;
    line-height: 1.7; 
}
 /* #publier, #suivi, #trid-def{
display: none;
} */
.ensavoir-more{
    height: 5rem;
    width: 100%;
    /* background-color: #ed5d34; */

        display: flex;
}
.em{
    height: 100%;
    width: 40%;
    /* background-color: #00a186; */
}
.em1{
    height: 100%;
    width: 60%;
    /* background-color: #777777; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.em1 a{
  padding: 15px 30px;
  border: 2px solid rgb(211, 211, 211);
  color:var(--violet);
  border-radius: 28px;
  transition: background-color 0.3s ease;

}
.em1 a:hover{
background-color: var(--violet);
color: var(--white2);

}


/* SECTION HERO ENGAGEMENT  SECTION HERO ENGAGEMENT  SECTION HERO ENGAGEMENT  */
.heroEngagement{
  height: 100vh;
  width: 100vw;
  background-image: url(../img/site/v960-ning-30.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
}
.heroEngage{
  height: 100%;
  width: 50%;
  /* background-color: #00a10886; */
}
.heroEngagementLeft{
  /* background-color: #00a10886; */
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-left: 90px;
}
.heroEngagementLeft h5{
  color: var(--textColor);
  font-size: 15px;
  font-weight: 600;
  margin-top: 40px;
}
.heroEngagementLeft h1{
  color: var(--black);
  font-size: 80px;
}
.heroEngagementLeft  h2{
  color: var(--black2);
  font-size: 35px;

}
.heroEngagementRight{
  /* background-color: rgba(255, 55, 0, 0.932); */
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes rotation {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.heroEngagementRight img {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  object-fit: cover;
  animation: rotation 20s linear infinite;
}
.carContainer {
  height: 45px;
  width: 100%;
  /* background-color: #00a108; */
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.carContainer i {
  font-size: 50px;
  color: var(--violet);
  position: absolute;
  left: 0;
  transition: opacity 0.3s ease-in-out;
}

#carText {
  position: absolute;
 
  font-size: 18px;
  color: var(--black2);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes blink {
  50% { opacity: 0; }
}











/* SERVICR FOR ALL SERVICE FOR ALL SERVICE FOR ALL SERVICE FOR ALL SERVICE FOR ALL */


.service-for-all{
    height: 6rem;
    width: 100vw;
    /* background-color: #333; */
    display: flex;
    align-items: end;
    flex-direction: column;
align-items: center;
margin-top: 3rem;
}
.service-for-all h2{
  font-size: 35px;
  color: var(--black);
  text-align: center;
}


.service-for-all h5{
  color: var(--textColor);
  font-size: 15px;
  font-weight: 600;

}

@media only screen and (max-width:780px){
  .service-for-all h2{
    font-size: 30px;
    padding: 0 5px;
  }
}


@media only screen and (max-width:445px){
  .service-for-all h2{
    font-size: 25px;
  }
}


@media only screen and (max-width:1010px){
  .cc-container-right-top-width {
    height: 100%;
    width: 100%;
    /* background-color: #a1dd14; */
    display: none;
  }
  .textingo-gd {
    height: 100%;
    width: 95%;
    /* background-color: #07c900; */
    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 5px;
  }
  .container-concept-right {
    padding-left: 15px;
  }
.num-g span {
  border-radius:0;
}

}
@media only screen and (max-width:738px){
  .cc-container1 {
    padding-left: 20px;
  }
}




/* SECTION TROIS SECTION TROIS SECTION UTROIS SECTION UN SECTION TROIS */





.texte-top{
    height: 15%;
    width: 100%;
    background-color:var(--white2);
    border-top-right-radius: 10px;
}
.texte-top{
    color: var(--violet);
    font-size: 16px;
    text-align: center;
    font-weight: bold;
 
}
.text-bottom{
    height: 230px;
    width: 100%;
    /* background-color:royalblue; */

}

.text-bottom-top{
    height: 75%;
    width: 100%;
    /* background-color:royalblue; */
    border-top-right-radius: 10px;
    display: flex;
 align-items: center;

}
.text-bottom-bottom{
    height: 25%;
    width: 100%;
    /* background-color:rgb(136, 137, 141); */
    border-bottom-right-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-secu{
    height: 87%;
    width: 173px;
    background-color:var(--violet);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-secu{
  font-size: 17px;
  color: var(--white);
}
.btn-secu a{
    height: 100%;
    width: 100%;
    position: absolute;
  
}

.text-bottom-top p{
font-family: var(--main-font2);
color: var(--violet);
font-size: 17px;
text-align: justify;
padding: 0 10px;


}
.sec3-gtext{
    height: 100%;
    width: 40%;
    /* background-color: rgb(185, 88, 23); */
    display: flex;
justify-content: right;
}

.item-picture{
    height: 271px;
    width: 400px;
 background-image: url(./img-1/t35.jpg);
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    background-position: center;
    background-size: cover;
}


.sec3-droit{
    height: 100%;
    width: 30%;
    /* background-color: rgb(10, 134, 62); */
}





/* SECTION-B SECTION-B SECTION-B SECTION-B SECTION-B SECTION-B  */
.section-B{
    height: 20rem;
    width: 100vw;
    /* background-color: #333; */
    display: flex
}

.secb-right{
    height: 100%;
    width: 50%;
    /* background-color: #556c7c; */
}

.secb-left{
    height: 100%;
    width: 50%;
    /* background-color: #31eed5; */
    display: flex;
/* padding-left:12rem; */
justify-content: center;
    align-items: center;
}
.secb-left P{
   text-align:left;
   color: var(--violet);
   font-size: 55px;
   font-weight: bold;
}

.colums-left-one{
    background-color: black;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.colums-left-one:hover{
    background-color: rgb(103, 104, 28);
}
.clo-top{
    height: 75%;
    width: 100%;
    /* background-color: rgb(191, 240, 255); */
    display: flex;
    justify-content: center;
    align-items: center;
}
.clo-top h3{
 color: var(--white2);
 font-size: 31px;
 padding: 0 26px;
 text-align: left;

}
.clo-bottom{
    height: 25%;
    width: 100%;
    /* background-color: rgb(33, 160, 61); */
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 25px;

}
.clo-bottom a{
    display: block;
    height: 45px;
    width: 120px;
border: solid 1px var(--white2);
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
color: var(--white2);
transition: background-color 0.3s ease;
}


.clo-bottom a:hover{
  background-color: var(--white2);
  color: var(--black);
  }












/* <!-- SECTION4 SECTION4 SECTION4 SECTION4 SECTION4 --> */

.section4{
    height: 80rem;
    width: 100vw;
    /* background-color: rgb(110, 56, 56); */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
}


.colums-left{
    height: 95%;
    width: 869px;
    /* background-color: rgb(21, 255, 0); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
   
}





.colums-left-two{
    background-color: rgb(58, 132, 216);
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.colums-left-two:hover{
    
    background-color: rgb(58, 216, 142);
    
}
.colt-top{
    height: 75%;
    width: 100%;
    /* background-color: #ed5d34; */
}
.colt-top h3 {
    color: var(--body);
    font-size: 28px;
    padding-left: 20px;
    padding-top: 20px;
  }
.colt-bottom{
    height: 25%;
    width: 100%;
    /* background-color: #30881a; */
    display: flex;
    justify-content: center;
    align-items: center;
}




.colt-bottom a{
    display: block;
    height: 70px;
    width: 250px;
    background-color:var(--white2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    color: var(--black);
    font-size: 20px;
  transition: background-color 0.3s ease;
}


.colt-bottom a:hover{
    color: var(--white2);
    background-color:var(--black);
    transition: left 0.3s ease;
}











.colums-left-three{
    background-color: rgb(113, 28, 116);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.colums-left-three:hover{
    background-color: rgb(28, 59, 116);
}
.colums-left-three h3{
    color: var(--white2);
    font-size: 32px;
    padding: 26px;
    text-align: left;
}



.colums-left-one, .colums-left-two, .colums-left-three{
border-radius: 12px;
height: 398px;
width: 445px;
}

.colums-right{
    height: 95%;
    width: 869px;
    /* background-color: yellow; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   
}



.colums-right-one{
    height: 20%;
    background-color: var(--violet);
    /* cursor: pointer; */
    transition: background-color 0.3s ease;
   
}

.colums-right-one:hover{
    background-color: #00a186;
   
}
.cro-top{
    height: 90%;
    width: 100%;
    /* background-color: #333; */
    display: flex;
    justify-content: center;
    align-items: center;

}
.cro-top h3{
  color: var(--white2);
  font-size: 34px;
  padding:0 10px;
    
}



.security{
    padding: 2px 10px;
    background-color: var(--white2);
    color: var(--violet);
    border-radius: 20px;
}

.security2{
    padding: 2px 10px;
    background-color: var(--violet);
    color: var(--white2);
    border-radius: 20px;
}



.colums-right-two{
    height: 50%;
 background-image: url(../../assets/img/img-1/T15.jpg);
 background-position-x: -146px;
 background-position-y: -111px;
 background-size: cover;
 display: flex;
 flex-direction:column;
 justify-content: center;
 background-repeat: no-repeat;

   
}


.clrt-tx{
    height: 50%;
    width: 100%;
    background-color: #ed5d34;
    visibility: hidden;
}



.clrt-tx2{
    height: 50%;
    width: 100%;
    /* background-color: #000000; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.clrt-main{
    height: 90%;
    width: 90%;
    background-color: #00a186;
    border-radius: 15px;
    transition: background-color 0.3s ease;
    cursor: pointer;
 
}
.clrt-main:hover{
    background-color: #b5c900;

}

.clrt-main-text{
    height: 70%;
    width: 100%;
    /* background-color: #ed5d34; */
}

.clrt-main-text h3{
    color: black;
    font-size: 28px;
  padding: 20px 10px;
}


.clrt-main-btn{
    height: 30%;
    width: 100%;
    /* background-color: #34ed90; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.clrt-main-btn a{
    display: block;
    height: 70px;
    width: 250px;
border: solid 1px var(--white2);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    color: var(--white2);
    font-size: 20px;
}

.clrt-main-btn a:hover{
background-color: var(--white2);
color:var(--black);

}

.colums-right-three{
    height: 20%;
    background-color: rgb(202, 205, 207);
    transition: background-color 0.3s ease;
    cursor: pointer;

}.colums-right-three:hover{
    background-color: rgb(76, 177, 202);

}
.colums-right-three h3{
    color: var(--black);
    font-size: 33px;
  padding: 20px 15px;
   
}


.colums-right-three, .colums-right-two, .colums-right-one{
    width: 538px;
    border-radius: 12px;
   
}


@media only screen and (max-width:1168px){
    .colums-right-one,  .colums-right-two, .colums-right-three{
        width: 472px;
      }

      .clrt-main {
        height: 276px;
        width: 423px;
      }
      .clrt-main-text p {
        font-size: 29px;
      }
      .clrt-main-btn a, .colt-bottom a {
        height: 50px;
        width: 182px;
      }
      .colums-right-three p {
        font-size: 31px;
      }
}


/* SECTION 6 SECTION  SECTION 6SECTION 6 SECTION6 */



.triand-haut p{
color: var(--violet);
font-size: 25px;
transform: skew(-20deg);

}





/* CARD HTML CARD HTML CARD HTML CARD HTML CARD HTML   */
.cardReturnContainer {
  min-height: 300px;
  width: 100vw;
  /* background-color: #00a186; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0;
}

.cardReturnMain {
  min-height: 300px;
  width: 1500px;
  /* background-color: #b5c900; */
  display: flex;
  justify-content: space-between;
}

.solidCard {
  height: 300px;
  width: 400px;
  box-shadow: 5px 5px 22px 1px rgb(219, 219, 219);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d; 
  transition: transform 0.6s; 
}

.cardFont, .cardBack {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  padding: 10px;
  border-radius: 10px;
  flex-direction: column;
  backface-visibility: hidden; 
}

.cardFont {
  /* background-color: #ed5d34; */
  display: flex;


}
.cardFont h2{
  color: var(--black2);
  font-size: 25px;
}
.cardFont p{
  color: var(--textColor);
  display: flex;
  justify-content: end;
  margin-top: auto;
  margin-bottom: 10px;
}
.cardFont span{
  color: var(--violet);
  margin-top: 20px;
}

#c1{ 
   background-color: rgba(78, 198, 235, 0.616);
}
#c2{ 
  background-color: rgba(48, 17, 161, 0.616);
}
#c3{ 
  background-color: rgba(187, 61, 61, 0.616);
}
.cardBack {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg); 
}
.vlt{
  background-color: var(--violet);
}
.vlt2{
  background-color: rgba(11, 78, 11, 0.795);
}
.vlt3{
  background-color: rgba(11, 18, 78, 0.795);
}
.cardBack h3{
  color: var(--body);
}
.cardBack p{
  color: var(--white2);
}
.solidCard.flipped {
  transform: rotateY(180deg); 
}

.solidCard.flipped .cardFont {
  display: none;
}

.solidCard.flipped .cardBack {
  display: flex; 
}

  /* NOSAVANTAGES   NOSAVANTAGES   NOSAVANTAGES   NOSAVANTAGES   NOSAVANTAGES  */
  .nosavantages{
    height:45rem;
    width: 100vw;
  }

    .nosavantages-top{
    height: 10%;
    width: 100vw;
    /* background-color: #e92828; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
  }

  .nosavantages-top h2{
    font-size: 35px;
    color: var(--black);
  }

  .main-nosavantages{
    height:90% ;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #ed5d34; */
  }
  .center-div{
    height: 100%;
    width: 778px;
    /* background-color: #00a186; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .elements1,  .elements2,  .elements3{
    height: 194px;
    width: 768px;
    /* background-color: #e92828; */
  }

  .e1-left{
 height: 97%;
 width: 100%;
 /* background-color: #00a186; */
 display: flex;

  }
  .e1-left2{
    height: 97%;
    width: 100%;
    /* background-color: #00a186; */
    display: flex;
    /* flex-direction: row-reverse; */
    justify-content: end;
   
     }
.e1-right{
    height: 100%;
    width: 70%;
    /* background-color: #35a32b; */
}
.e1-right2{
    height: 100%;
    width: 70%;
    /* background-color: #c5e6c2; */
}
.e1r-top{
    height: 20%;
    width: 100%;
    /* background-color: #333; */
    display: flex;
    justify-content: center;
}
.eay{
    height: 20%;
    width: 100%;
    /* background-color: #333; */
    display: flex;
    justify-content: right;
    align-items: center;
}
.eay2{
    height: 20%;
    width: 100%;
    /* background-color: #333; */
    display: flex;
    justify-content: right;
    align-items: center;
}

.visiontridem{
  height: 25rem;
  width: 100vw;
  /* background-color: #00a186; */
  display:none;
}


@media only screen and (max-width:984px){
  .nosavantages-top h2 {
    font-size: 30px;
    text-align: center;
  }
}




@media only screen and (max-width:1189px){
    .sec1-right {
        padding: 250px 0;
        /* background-color: #00a186; */
      }
}

@media only screen and (max-width:1055px){
    .sec1-right {
        padding: 210px 0;
        /* background-color: #00a186; */
      }
}

@media only screen and (max-width:831px){
    .sec1-right {
        padding: 180px 0;
        /* background-color: #00a186; */
      }
}

@media only screen and (max-width:739px){
    .sec1-right {
        padding: 150px 0;
        /* background-color: #00a186; */
      }
}
@media only screen and (max-width:647px){
    .sec1-right {
        padding: 130px 0;
        /* background-color: #00a186; */
      }
}
@media only screen and (max-width:599px){
    .slogan {
        visibility: hidden;
      }
      .sec1-right {
        padding: 120px 0;
        /* background-color: #00a186; */
      }
}
@media only screen and (max-width:561px){
    .slogan {
        visibility: hidden;
      }
      .sec1-right {
        padding: 100px 0;
        /* background-color: #00a186; */
      }
      .logo-part img {
        display: block;
        height: 23px;
        width: 55px;
      }
        
      .burger-menu {
        display: block;
        font-size: 25px;
        color: var(--body);
      }
}


@media only screen and (max-width:501px){
      .sec1-right {
        padding: 80px 0;
        /* background-color: #00a186; */
      }
      .prouv-top p {

        color: var(--white);
        font-size: 20px;
        font-weight: 500;
      }
      .prouv-top-2 p {
        color: var(--white);
        font-size: 20px;
        font-weight: 500;
      }
      .prouv-bottom p {
        color: var(--white);
        font-size: 11px;
      }
      .prouv-bottom {
        height: 23%;
        width: 100%;
        /* background-color: rgb(85, 42, 165); */
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }
      .prouv-top {
        display: flex;
        align-items: flex-end;
      }

      .prouv-top-2 {
        display: flex;
        align-items: flex-end;
      }

      .partie-bas {
        height: 791px;
        width: 576px;
        /* background-color: rgb(43, 226, 150); */
      }
}

@media only screen and (max-width:457px){
    .partie-bas {
        height: 791px;
        width: 524px;
        /* background-color: rgb(43, 226, 150); */
      }

      .sec1-right {
        padding: 70px 0;
        /* background-color: #00a186; */
      }
}

@media only screen and (max-width:413px){

      .sec1-right {
        padding: 60px 0;
        /* background-color: #00a186; */
      }
}



@media only screen and (max-width:387px){

    .sec1-right {
      padding: 50px 0;
      /* background-color: #00a186; */
    }
    .sec-01 p {
        font-size: 17px;
      }

   
      .prouv-top-2 p {
        font-size: 17px;
          }
          .prouv-top p {
            font-size: 17px;
              }
}

@media only screen and (max-width:349px){

    .sec1-right {
      padding: 40px 0;
      /* background-color: #00a186; */
    }
    .sec-01 p {
        font-size: 17px;
      }
 
      .partie-bas {
        height: 791px;
        width: 485px;
        /* background-color: rgb(43, 226, 150); */
      }
      .section-concept-container {
        margin-top: 5rem;
      }
}

@media only screen and (max-width:333px){

    .sec1-right {
      padding: 30px 0;
      /* background-color: #00a186; */
    }
    .sec-01 p {
        font-size: 15px;
      }

      .partie-bas {
        height: 791px;
        width: 450px;
        /* background-color: rgb(43, 226, 150); */
      }
      .section-concept-container {
        margin-top: 5rem;
      }
}


@media only screen and (max-width:305px){

    .sec1-right {
      padding: 32px 0;
      /* background-color: #00a186; */
    }
    .sec-01 p {
        font-size: 15px;
      }

      .partie-bas {
        height: 791px;
        width: 400px;
        /* background-color: rgb(43, 226, 150); */
      }
      .section-concept-container {
        margin-top: 7rem;
      }
  
}



@media only screen and (max-width:297px){

    .sec1-right {
      padding: 20px 0;
      /* background-color: #00a186; */
    }
}


@media only screen and (max-width:269px){

    .sec1-right {
      padding: 15px 0;
      /* background-color: #00a186; */
    }
}

@media only screen and (max-width:299px){

    .sec1-right {
      padding: 10px 0;
      /* background-color: #00a186; */
    }
    .partie-bas {
        height: 791px;
        width: 370px;
        /* background-color: rgb(43, 226, 150); */
      }
}

@media only screen and (max-width:698px){

   
      .chearch-concept-header button {
        width: 126px;
        background-color: var(--body);
        border-radius: 8px;
      
      }
      .chearch-concept-header {
        display: flex;
        justify-content: space-around;
      }


}

@media only screen and (max-width:1274px){
    .container-concept-left-img, .container-concept-left-img2, .container-concept-left-img3,   .container-concept-left-img4{
        height: 477px;
        width: 599px;
    }
}
@media only screen and (max-width:1198px){
    .container-concept-left-img,.container-concept-left-img2,   .container-concept-left-img3,    .container-concept-left-img4{
        height: 477px;
        width: 551px; 
    }

    .secb-left P {
        font-size: 44px;
      }
      .colums-left-one, .colums-left-two, .colums-left-three {
        border-radius: 12px;
        height: 365px;
        width: 384px;
      }
      .clo-top h3 {
        font-size: 28.5px;
      }
      .section-B {
        height: 19rem;
        width: 100vw;
      }
      .colt-top h3 {
        font-size: 30px;
        padding-left: 10px;
      }
      .colums-left-three h3 {
        font-size: 30px;
      }
}



@media only screen and (max-width:1090px){
    .container-concept-left-img, .container-concept-left-img2,   .container-concept-left-img3,    .container-concept-left-img4 {
        height: 469px;
        width: 479px;
      }
      .cc-container {
        height: 424px;
        width: 480px;
      }
}







.eay2 i{
    color: rgb(160, 160, 160);
    font-size: 25px;
    padding-right: 15px;
    transition: color 0.3s ease;
}
.eay2 i:hover{
    color:var(--violet);

}
.eay i:hover{
    color: var(--violet)
}
.eay i{
color:  rgb(160, 160, 160);
padding-right: 15px;
font-size: 25px;
transition: color 0.3s ease;

}
.e1-right-main-text{
    height: 60%;
    width: 100%;
    /* background-color:#00a186; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.e1-right-main-text p{
   color: var(--textColor);
   text-align: justify;
   line-height: 1.5;
   font-size: 15px;
}
.e1r-top p{
    font-size: 25px;
    color: var(--black2);
    font-weight:400 ;
}
  .e1-line{
    height: 1%;
    width: 100%;
    background: rgb(54,36,70);
    background: linear-gradient(90deg, rgba(54,36,70,1) 0%, rgba(54,36,70,0) 100%); 
visibility: hidden;
}
  .e1-lef-int{
    height: 100%;
    width: 30%;
    /* background-color: #7e6060; */
    display: flex;
    justify-content: center;
    align-items: center;
  }


  /* TELMOB TELMOB TELMOB TELMOB TELMOB    TELMOB TELMOB TELMOB TELMOB TELMOB */

  .telmob{
    height: 45rem;
    width:  100vw;
    /* background-color: #00a186; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5rem;
  }

  .telmob-main{
    height: 90%;
    width: 1360px;
    background-color: var(--violet);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

  }


  .telmob-main-left, .telmob-main-right{
    height: 646px;
    width: 670px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }


  .telmob-main-right video{
height: 100%;
width: 100%;
border-radius: 12px;
  }

.down12{
    color: var(--white2);
    letter-spacing: 3px;
}

    .telmob-main-left-top{
        height: 50%;
        width: 100%;
        /* background-color: #ed5d34; */
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .telmob-main-left-top .cmd{
font-family: var(--main-font3);
font-size: 35px;
text-align: left;
padding: 55px;
color: var(--white2);
    }

    .telmob-main-left-btn{
        height: 20%;
        width: 100%;
        /* background-color: #ed5d34; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .telmob-main-left-btn a{

  padding: 15px 30px;
       background-color: var(--white2);
       color: var(--black);
       border-radius: 5px;
       font-size: 17px;
       transition: background-color 0.3s ease;
       box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

    }
    .telmob-main-left-btn a:hover{

      background-color: green;
      color: var(--white2);
      
          }
          @media only screen and (max-width:1404px){
          
            .telmob {
                height: 29rem;
                width: 100vw;
                /* background-color: #00a186; */
                margin-bottom: 2rem;
              }
            .telmob-main {
                height: 450px;
                width: 1113px;
                margin-bottom: 0;
              }

              .telmob-main-right video {
                height: 69.7%;
                width: 100%;
              }
              .telmob-main-left-top .cmd {
                font-size: 26px;
              }

              .telmob-main-left-btn {
                display: flex;
                justify-content: center;
                align-items: flex-start;
              }
              .down12, .down13 {
                color: var(--white2);
                letter-spacing: 1px;
              }
              
        }
/* TRAJET ANTICIPE TRAJET ANTICIPE TRAJET ANTICIPE TRAJET ANTICIPE TRAJET ANTICIPE */
.trajet-anti{
    height: 35rem;
    width: 100vw;
    /* background-color: #ed5d34; */
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 5rem;
}

.anti-top{
    height: 10%;
    width: 100%;
    /* background-color: #349aed; */
    display: flex;
    justify-content: center;
    align-items: center;
}



.anti-top h2{
    font-size: 35px;
    color: var(--black);
}

.anti-paraphrase{
    height: 15%;
    width: 834px;
    /* background-color: #994395; */
    display: flex;
    justify-content: center;


}
.anti-paraphrase p{  
    font-size: 17px;
    color: var(--textColor);
    text-align: justify;
    line-height: 25px;
}

.anti-container{
    height: 75%;
    width: 1318px;
    /* background-color: #b5c900; */
}
.anti-container-card{
    height: 80%;
    width: 100%;
    /* background-color: #995bd6; */
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.card-cont{
    height: 90%;
    width: 256px;
    background-color: var(--body);
    color: var(--violet);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transform: scale(0.9); 
    transition: transform 0.3s ease-in-out;

}

.card-cont:hover{
    height: 90%;
    width: 256px;
    transform: scale(1);
    background-color: var(--body);
    color: var(--violet);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    cursor: pointer;

}
.card-cont-top{
    height: 70%;
    width: 100%;
    /* background-color: #ed5d34; */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-cont-bottom{
    height: 30%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-cont-bottom p{
    font-size: 20px;
    color: var(--black2);
}

.anti-container-btn{
   height: 20%;
   width: 100%;
   /* background-color: #ed5d34;  */
   display: flex;
   align-items: end;
   justify-content: center;
}

.anti-container-btn a{
 padding: 20px 35px;
    background-color: var(--body);
    color:var(--violet); 
    border-radius: 5px;
    font-size: 20px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
    visibility: hidden;
 }
 
 .anti-container-btn a:hover{
       transform: scale(1);
   
    }

    @media only screen and (max-width:1303px){
        .card-cont {
            height: 76%;
            width: 214px;
            margin: 0 20px;
          }

          .anti-container-card {
            /* background-color: #995bd6; */
            display: flex;
            justify-content: center;
            align-items: end;
          }
          .card-cont:hover{
            height: 77%;
            width: 215px;
            transform: scale(1);
        
        }
        .about {
            height: 65em;
            width: 100vw;
            /* background-color: #00a186; */
            margin-bottom: 1rem;
            display: flex;
          }
          .mc-video {
            height: 100%;
            width: 100%;
            /* background-color: #b5c900; */
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            flex-wrap: wrap;
            flex-direction: column;
          }
          .main-corps {
            height: 100%;
            width: 100%;
            /* background-color: #31255e; */
            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: center;
          }

   
    }






















    /* TELMOB TELMOB TELMOB TELMOB TELMOB TELMOB TELMOB TELMOB */
   .telecharger-lapp{
    height: 5rem;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
    justify-content: center;


   }

.telecharger-texte{
    height: 100%;
    width: 1321px;
    /* background-color: #ed5d34; */
    display: flex;
    align-items: end;
}
.telecharger-texte h2{
font-size: 45px;
color: var(--black);
}














/* ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT ABOUT BOUT */

.about{
    height: 60em;
    width: 100vw;
    /* background-color: #00a186; */
    margin-bottom: 1rem;
    display: flex;
}


.ableft-title{
    height: 10%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #b88181; */
}
.ableft-title h2{
font-size: 35px;
color: var(--black);
}

.main-corps{
    height: 90%;
    width: 100%;
    /* background-color: #31255e; */
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;


}

.rangeone{
    height: 224px;
  width: 600px;
  margin: 10px 0;
  border-radius: 15px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  background-color: var(--body);
  display: flex;


}

.triangle-main{
    height: 25%;
    width: 10%;
    background-color:var(--violet);
    border-bottom-right-radius: 50px;
}
.mc-texe{
    height: 100%;
    width: 90%;
   /* background-color: #00a186; */
   display: flex;
   align-items: center;

}

.main-corps-text{
    height: 100%;
    width: 90%;
    /* background-color: #a19600; */
}
.mc-texe p{
color: var(--textColor);
line-height: 1.9;
text-align: justify;
padding-right: 20px;

}


.aboutleft, .aboutright{
    height: 85%;
    width: 50%; 
}

.main-corpsS{
    /* background-color: #0040a1; */
    height: 85%;
    width: 100%;
    display: flex;
    align-items: center;
}



.about-btn{
    height: 10%;
    width: 100%;
    /* background-color: #b88181; */
    margin-bottom: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;

}

.about-btn a{
    display: block;
    height: 55px;
    width: 155px;
    /* background-color: var(--violet); */
    border-radius: 5px;
    color: var(--black2);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.mc-video{
    height: 100%;
    width: 100%;
   /* background-color: #b5c900;  */
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   flex-wrap: wrap;

}
.mcv1{
    height: 287px;
    width: 245px;
    background-color:var(--body);
    display: flex;
    flex-direction: column;
    justify-content: end;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.mcv1:nth-child(1){
 background-image: url(../../assets/img/img-1/environne.jpeg);
 background-position-y: -109px;
 background-position-x: -87px;
background-repeat: no-repeat;
 background-size: cover;
}

.mcv1:nth-child(2){
    background-image: url(../../assets/img/img-1/t24.jpg);
    background-position-y: -33px;
    background-position-x: -54px;
   background-repeat: no-repeat;
    background-size: cover;
   }

   .mcv1:nth-child(3){
    background-image: url(../../assets/img/img-1/pp.jpg);
    background-position-y: -44px;
    background-position-x: -84px;
   background-repeat: no-repeat;
    background-size: cover;
   }

.mcv1-top{
    height: 40%;
    width: 100%;
    background-color:var(--body);
}
.mcv1-top p{
 font-size: 15px;
 color: var(--textColor);
 padding: 5px 5px;
 text-align: left;
 line-height: 1.5;
}


@media only screen and (max-width:1404px){
    .telecharger-texte {
        height: 100%;
        width: 1110px;
      }
}



@media only screen and (max-width:1168px){
    .about {
        height: 75em;
        width: 100vw;
      }
}





/* FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER */

footer{
    min-height: 25rem;
    width: 100vw;
     border-top-right-radius:60px;
     border-top-left-radius:60px;
}
      

.footer-top{
    height: 400px;
    width: 100%;

    background-color: rgb(54,36,70); 
    /* background: linear-gradient(90deg, rgba(54,36,70,1)
     0%, rgba(0,0,0,1) 100%);   */
     display:flex;
     justify-content: center;
    

}


.footer-bottom{
    height: 300px;
    width: 100%;
    background-color: rgb(54,36,70); 
    position: relative;
    background-color: #161616;
    display: flex;
    flex-direction: column;

}
.footerTopCard{
  min-height: 80%;
  width: 173px;
  /* background-color: #00a108; */
  margin: 15px;
  display: flex;
  flex-direction: column;
/* border: solid 1px white; */
justify-content: center;
}
.footerTopCard h4{
  font-size: 16px;
  color: var(--body); 
  margin-bottom: 25px;
}
.footerTopCard a{
  font-size: 15px;
  color: var(--white2);
  font-weight: 500;
  margin: 5px 0;
}
.ftcNetApp, .ftcNetLogo{
  width: 30%;
} 
.ftcNetLogo{
display: flex;
flex-direction: column;
justify-content: center;
}
.ftcNetLogo img{
  height: 40px;
  width: 90px;
  display: flex;
  align-self: center;
  margin-bottom: 20px;
}
.ftcNetLogo h2{
  color: var(--body);
  font-size: 16px;

}

.ftcNetApp{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.appNow{
  min-height: 60px;
  width: 100%;
  /* background-color: #00a108; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.appNow img{
  height: 50px;
  width: auto;
  object-fit: cover;
  margin: 10px;
  border-radius: 10px;
}
.Reseaux{
  min-height: 40px;
  width: 100%;
  /* background-color: #00a108; */
  display: flex;
  justify-content: center;
  align-items: center;

}
.Reseaux a{
  color: var(--body);
  margin: 0 15px;
}
.reseauH4{
  margin-bottom: 0 !important;
}
.footerBottomOne{
  min-height: 45%;
  width: 100%;
  /* background-color: #00a108; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.footerBottomOne a{
  margin: 0 20px;
  color: var(--white2);
  user-select: none;
}
.footer-bottom hr{
  width: 50%;
  color: rgb(43, 43, 43);
  border: solid 0.5px;
  display: flex;
  align-self: center;
}

.footer-bottom p{
  color: var(--white2);
  display: flex;
  align-self: center;
  margin-top: 20px;
  user-select: none;
}


@media only screen and (max-width: 1166px){
  .appNow img {
    height: 33px;
  }

  .ftcNetLogo h2 {
    color: var(--body);
    font-size: 12px;
    text-align: center;
  }

 .ftcNetLogo {
    width: 20%;
  }

}




    /* NEW PAGE     NEW PAGE     NEW PAGE     NEW PAGE     NEW PAGE */
    /* WHY WHY WHY WHY WHY WHY     WHY WHY WHY WHY WHY WHY    WHY WHY WHY WHY WHY WHY */
    header{
        height: 733px;
        width: 100vw;
        overflow: hidden;
      background-image: url(../../assets/img/Photo3/Shoot-21.jpg);
        background-position-y: -57px;
      background-size: cover;
      background-repeat: no-repeat;
        display: flex;
        align-items: flex-end;
    }
    .header-new{
        height: 733px;
        width: 100vw;
        overflow: hidden;
      background-image: url(../../assets/img/img-1/t33.jpg);
        background-position-y: -57px;
      background-size: cover;
      background-repeat: no-repeat;
        display: flex;
        align-items: flex-end;
        margin-bottom: 7rem;
    }
    .header-parainage{
        height: 733px;
        width: 100vw;
        overflow: hidden;
      background-image: url(../../assets/img/img-1/t54.jpg);
        background-position-y: -11px;
      background-size: cover;
      background-repeat: no-repeat;
        display: flex;
        align-items: flex-end;
        margin-bottom: 2rem;
    }
    .header-security{
        height: 733px;
        width: 100vw;
        overflow: hidden;
      background-image: url(../img/img-1/Secu2.jpg);
        background-position-y: -57px;
      background-size: cover;
      background-position-y: -240px;
      background-repeat: no-repeat;
        display: flex;
        align-items: flex-end;
    }
    .header-contact{
        height: 733px;
        width: 100vw;
        overflow: hidden;
      background-image: url(./img-1/call-center-8754751_1280.jpg);
        background-position-y: 78px;
      background-size: cover;
      background-repeat: no-repeat;
        display: flex;
        align-items: flex-end;
        margin-bottom: 7rem;
    }
    .header-cms{
        height: 733px;
        width: 100vw;
        overflow: hidden;
      background-image: url(../img/site/cms-265128_1280.jpg);
        background-position-y: -57px;
      background-size: cover;
      background-repeat: no-repeat;
        display: flex;
        align-items: flex-end;
        margin-bottom: 3rem;
    }
    .container-text-header{
        height: 250px;
        width: 876px;
        /* background-color: #00a186; */
        display: flex;
        flex-direction: column;
        justify-content: center;
align-items: center;
    }
    .container-cms{
        height: 100px;
        width: 100%;
        /* background-color: #00a186; */
        display: flex;
        flex-direction: column;
        justify-content: center;
align-items: center;
    }

    .container-cms P{
        font-size: 35px;
        color: var(--white2);
    }



    .container-text-header p{
   font-size: 5em;
   color: var(--white2);
   text-align: center;
    }
    .container-text-header span{
        font-size: 5em;
        color: var(--white2);
         }
         .container-text-header span b{
            color: var(--violet);
             }

/* Why Why Why Why Why Why Why Why Why Why Why Why Why  */

.whyMain{
min-height: 700px;
width: 100vw;
/* background-color: #00a108; */
display: flex;
align-items: center;
justify-content: center;
padding-top: 180px;
}

.cardConcept{
  min-height: 300px;
  width: 950px;
  /* background-color: #00a108; */
  margin-bottom: 5rem;
}
.cardConcept h2{
  color: var(--black);
  font-size: 35px;
}
.cardConcept h5{
color: var(--black2);
font-size: 17px;
margin: 15px 0;
}
.cardConcept h5 i{
  color: var(--violet);
  font-size: 10px;
  }

#idco2{
  font-size: 17px;
}
.cardConcept hr{
  color: rgb(241, 241, 241);
  width: 100%;
  margin: 40px 0;
}



.cardConcept p{
color: var(--textColor);
font-size: 16px;
}




.cardConcept p b{
  color: var(--black);
  font-weight: 500;
  }
.cardConcept p i{
  color: var(--violet);
}
.cardConcept img{
  height: 500px;
  width: 950px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 5px;
  box-shadow: 5px 5px 5px 5px rgb(201, 201, 201);
}



.cmnt p{
color: var(--black2);
}














/* PAGE 3 PAGE 3 PAGE 3 PAGE 3 PAGE 3 PAGE 3 PAGE 3 PAGE 3 */
.concept{
    height: 700px;
    width: 100vw;
        /* background-color: #76c79a; */
        display: flex;
    justify-content: center;
    align-items: center;
}

.sec-concept-main{
    height:90%;
    width: 80%;
    /* background-color: #65756d; */
    display: flex;
}
.sec-concept-main-left{
    height:100%;
    width: 50%;
    /* background-color: #028a46; */
}
.sec-concept-main-right{
    height:100%;
    width: 50%;
    /* background-color: #a08888; */
}
.scml-top{
    height: 35%;
    width: 100%;
    /* background-color: #b5c900; */
    display: flex;
    justify-content: center;
}
.scml-top p{
    font-size: 3.8em;
    color: var(--black2);
}
.scml-bottom{
    height: 65%;
    width: 100%;
    /* background-color: #9a00c9; */
}
.scml-btop{
    height: 15%;
    width: 100%;
    /* background-color: #00a186; */

}
.scml-btop p{
    font-size: 35px;
    color: var(--violet);
}
.scml-btob{
    height: 85%;
    width: 100%;
    /* background-color: #cfcfcf; */
}
.scml-btob p{
    color: var(--black2);
    text-align: justify;
    line-height: 1.5;
    font-size: 17px;
    text-align: justify;
    padding-right:15px;
}
.secmr-top{
    height: 40%;
width: 100%;
background-image: url(./Photo3/Shoot-10.jpg);
background-position-y: -117px;
background-size: cover;
background-repeat: no-repeat;
}

.secmr-bottom{
    height: 60%;
width: 100%;
/* background-color: #a7a7a7; */
}
.secmr-bottom ul li{
    color: var(--black2);
    text-align: justify;
    line-height: 3;
    font-size: 17px;
    text-align: justify;
    padding-right:15px;
}
.secmr-bottom ul li i{
    color: var(--violet);

    font-size: 12px;
    padding-right:1px;
}

@media only screen and (max-width: 344px){
.Env1{
  margin-bottom: 25px;
}
}
/* SMALLING SMALLING SMALLING SMALLING SMALLING SMALLING */
.smalling{
    height: 10rem;
    width: 100vw;
    /* background-color: rebeccapurple; */
    display: flex;
  
}
.smalling1{
    height: 100%;
    width: 60%;
    /* background-color: rebeccapurple;       */
    display: flex;
    justify-content: center;
    align-items: center;
}
.smalling1 p{
  font-size: 25px;
  color: var(--black2);
}
/* SECTION MULTIPLE  SECTION MULTIPLE  SECTION MULTIPLE */
.multiples{
    height: 90rem;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
justify-content: center;
align-items: center;
}
.multiples-center{
    height:100% ;
    width: 80%;
    /* background-color: #567570; */
   display: flex;
   justify-content: space-between;
}
.multiples-left{
    height:100% ;
    width: 49.5%;
    /* background-color: #567570; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.sec-card-inf{
    height: 346px;
    width: 522px;
    background-color: var(--body);
    /* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); */
    border-radius: 12px;
}
.g1{
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

}
/* 
.g2, .g3{
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

} */



.resting-main-right{
    height: 100%;
    width: 50%;
    /* background-color: #ed34e4; */
    background-image: url(../../assets/img/img-1/T43.jpg);
    background-position: center;
    background-size: cover;
}
.resting-ml-top-title{
    height: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #00a186; */
}
.resting-ml-top-title p{
    font-size: 20px;
    font-weight: bold;
    color: var(--violet);
}
.body-of-text{
    height: 28%;
    width: 100%;
    /* background-color: #34b2ed; */
}
.body-of-text2{
    height: 13%;
    width: 100%;
    /* background-color: #34b2ed; */
}

.body-of-text3{
    height: 25%;
    width: 100%;
    /* background-color: #34b2ed; */
}
.body-of-text p, .body-of-text2 p, .body-of-text3 p{
    font-size: 17px;
    color: var(--black2);
    line-height: 1.6;
    padding: 0 15px;
}
/* .etreu{
    font-size: 25px;
} */
/* HOW SECTION  HOW SECTION  HOW SECTION  HOW SECTION */
.entrepriseAide{
    min-height: 300px;
    width: 100vw;
    /* background-color: #00a186; */
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
}

.entrepriseAide h2{
  color: var(--black);
  display: flex;
  align-self: center;
  font-size: 35px;
  margin-bottom: 35px;
}

.all-resting{
  min-height: 300px;
   width: 100%;
   /* background-color: #a19e00; */
   display: flex;
   justify-content: space-evenly;
   align-items: flex-end;
}
.cardEntreprise{
  min-height: 500px;
  width: 450px;
  /* background-color: #ed5d34; */
  display: flex;
  flex-direction: column;
}

.cardEntreprise img{
  height: 300px;
  width: 100%;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.cardEntreprise h5{
  font-size: 20px;
  font-weight: 500;
  color: var(--black2);
  display: flex;
  align-self: center;
}
.cardEntreprise p{
  color: var(--textColor);
  padding: 0 10px;
  font-size: 16px;
}

/* Comment ça marche Comment ça marche Comment ça marche */
.comment{
min-height: 300px;
width: 100vw;
/* background-color: #00a108; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.comment h2{
  font-size: 35px;
  text-align: center;
  color: var(--black);
}
.comment hr{
  color: var(--violet);
  width: 300px;
}


@media only screen and (max-width: 833px){
  .comment {
    min-height: 105px;
    width: 100vw;
    justify-content: end;
  }
}


/* COMMENT DEVENIR UN TRAIDAIRE COMMENT DEVENIR UN TRAIDAIRE */

.commentDevenir{

  min-height: 400px;
  width: 100vw;
  /* background-color: #00a186; */
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.cmnt{
  min-height: 300px;
  width: 700px;
  background-color:  #70c6ca;
  display: flex;
  flex-direction: column;
margin: 0 5px;
}
.cmntLeft{
  background-color: antiquewhite;
}
.cmntRight{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;

}

.cmntRight a{
  height: 60px;
  width: auto;
  padding: 0 10px;
  background-color: var(--black3);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  color: var(--body);
}
.cmnt h2{
display: flex;
align-self: center;
  color: var(--black);
  font-size: 25px;
}
.cmnt h5{
  color: var(--black2);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
}
.cmnt span{
  height: 50px;
  width: auto;
  color: var(--textColor);
  font-size: 16px;
  display: flex;
  align-items: center;

}
.cmnt span i{
  height: 30px;
  width: 30px;
  margin: 0 7px;
  border-radius: 50%;
  display: flex;
  color: var(--body);
  font-size: 15px;
  align-items: center;
  justify-content: center;
  background-color: var(--violet);
}


/* SECTION PHONE TRIAND SECTION PHONE TRIAND SECTION PHONE TRIAND */


.sectionPhoneTriand{
  min-height: 400px;
  width: 100vw;
  /* background-color: #00a108; */
  display: flex;
  justify-content: center;
}


.triandPhone{
  min-height: 800px;
  width: 700px;
  /* background-color: #00a186; */
  margin: 0 20px;
}
.triandContentPhone{
  /* background-color: #00a186; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.triandContentPhone h5{
  color: var(--textColor);
  font-size: 15px;
  font-weight: 600;
  margin-top: 40px;
}
.triandContentPhone h2{
  color: var(--black);
  font-size: 4em;
  min-height: 200px;
  width: 650px;
  /* background-color: #00a108; */
}
.triandContentPhone p{
  color: var(--black);
  font-size: 17px;
  color: var(--textColor);
}

.triandImgPhone{
  display: flex;
  justify-content: left;
}
.triandImgPhone{
  height: 500px;
  width: auto;
  object-fit: cover;
}


/* SECTION AVANTAGE ENVOYER SECTION AVANTAGE ENVOYER SECTION AVANTAGE ENVOYER  */
.Evavantage{
  min-height: 400px;
  width: 100vw;
  /* background-color: #00a108; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
.Evavantage h2{
  color: var(--black);
  font-size: 35px;

}
.Evavantage2{
  margin-top: 0;
  min-height: 100px;
}
.Evavantage p{
  font-size: 17px;
  color: var(--textColor);
  padding: 0 400px;
  text-align: center;
}

.listStepEnvoie{
  min-height: 200px;
  width: 350px;
  /* background-color: #00a108; */
  display: flex;
  flex-direction: column;
  margin-top: 20px;

}
.listStepEnvoie span{
  color: var(--black2);
  font-weight: 500;
  margin: 10px 0;
display: flex;
}
.listStepEnvoie span i{
  height: 25px;
  width: 25px;
  background-color: var(--violet);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--body);
}


/* HEADER COMMERCANT  HEADER COMMERCANT  HEADER COMMERCANT  HEADER COMMERCANT  */
.headerCommerce{
  height: 100vh;
  width: 100vw;
  display: flex;
  /* background: rgb(216, 174, 255); */
  background-image: url(../img/site/v960-ning-30.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  /* position: absolute; */
  z-index: 0;
 
}
.commerceLeft, .commerceRight{
  height: 100%;
  width: 50%;
  /* background-color: rgba(161, 0, 0, 0.507); */
  

}
.commerceLeft{
display: flex;
justify-content: center;
flex-direction: column;
padding: 60px;

}
.commerceLeft h1, .commerceLeft h2{
  font-size: 35px;
  color: var(--black3);

}
.commerceLeft  p{
  color: var(--black2);
}
.debuterNow{
  height: 55px;
  width: 250px;
  background-color: var(--violet);
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  align-self: center;
  cursor: pointer;
}
.debuterNow p{
  color: var(--body);
  font-size: 16px;
  font-weight: 400;
}
.commerceRight{
  /* background-color: rgba(113, 161, 0, 0.562); */
  display: flex;
  justify-content: center;
  align-items: center;
}
.commerceRight img{
  height: 600px;
  width: auto;
  object-fit: cover;

}
.nowContente{
  height: 100vh;
  width: 100vw;
  /* background-color: rgba(181, 201, 0, 0.219); */
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}
.MessageDownload{
  min-height: 100px;
  width: 500px;
  box-shadow: rgba(168, 168, 168, 0.226) 5px 5px 22px 1px;
  background-color: var(--body);
  border-radius: 10px;
  position: absolute;
  top: 525px;
  left: 164px;
  padding:5px 10px;
}
.MessageDownload i{
  color: var(--textColor);
  height: 25px;
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--textColor);
  border-radius: 50%;
  cursor: pointer;
  margin-left: auto;

}
.MessageDownload p {
  color: var(--textColor);
  margin-top: 5px;
}

/* CONVERSION  CONVERSION  CONVERSION CONVERSION CONVERSION */
.conversion{
min-height: 300px;
width: 100vw;
/* background-color: #00a186; */
display: flex;
justify-content: center;

}

.conversionMain{
  min-height: 600px;
  width: 800px;
  /* background-color: #ed5d34; */
}
.img{
  display: flex;
  justify-content: center;
  align-items: center;
}
.img img{
  height: 550px;
  width: 700px;
  object-fit: cover;
  border-radius: 25px;
}
 .Content{
  display: flex;
  flex-direction: column;
/* border: solid 1px green; */
}
.Content h2{
  color: var(--black);
  font-size: 35px;
  display: flex;
  margin-top: 10px;
}
#pMaitre{
  color:var(--black);
}
#spanMaitre{
  margin-top: 3rem;
}
.Content span i{
color: green;
}
.Content span{
  font-weight: bold;
  color: var(--black);
}
.Content p{
  color: var(--textColor);
}
#letGo {
  height: 55px;
  width: 250px;
  border-radius: 30px;
  background-color: var(--violet);
  color: var(--body);
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  margin-top: 30px;
  cursor: pointer;
}


/* SECTION WHY SECTION WHY SECTION WHY SECTION WHY SECTION WHY */
.why, .timelineVente{
min-height: 200px;
width: 100vw;
/* background-color: #00a186; */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;

}
.why h2{
  color: var(--black);
  font-size: 35px;
}
.why p{
  color: var(--black);
  padding: 0 250px;
  text-align: center;
}
.timelineVente{
  flex-direction: row;
  /* background-color: #00a186; */
  min-height: 500px;
  justify-content: center;
}
.timelineVente img{
  height: 350px;
  width: auto;
  object-fit: cover;
}

/* RETRAIT COMMERCANT  RETRAIT COMMERCANT RETRAIT COMMERCANT  */


.whoUse{
  min-height: 550px;
  width: 500px;
  /* background-color: #00a186; */
  margin: 0 15px;
}
.retrait{
  display: flex;
  flex-direction: row;

  }
  .detailsUse{
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .detailsUse h2{
    color: var(--black2);
    font-size: 25px;
    margin-bottom: 20px;
  }

  .detailsUse h5{
    color: var(--textColor);
    font-size: 15px;
  }
  .detailsUse span{
    color: var(--textColor);
  }
  .detailsUse span i {
    color: green;
  }
.whoimg{
  display: flex;
  justify-content: right;
  /* background-color: #ed5d34; */

}
.whoUse img{
  height: 550px;
  width:100%;
  object-fit: cover;
  border-radius: 10px;
}



/* NOUS REJOINDRE NOUS REJOINDRE NOUS REJOINDRE NOUS */

.followUse{
min-height: 400px;
width: 100vw;
background-color: #8a8a8a2d;
margin: 50px 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* PAGE SECURITE  PAGE SECURITE PAGE SECURITE PAGE SECURITE PAGE SECURITE  */
.secu{
    height: 25rem;
    width: 100vw;
    /* background-color: #00a186; */
display: flex;
justify-content: center;
margin-bottom: 20px;

}
.secuMainTitle{
  min-height: 250px;
  width: 100vw;
  /* background-color: #00a108; */
  margin-bottom: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 100px;
}
.secuMainTitle h1{
  color: var(--black);
  font-size: 35px;

}
.secuMainTitle h1 i{
  color: var(--violet);
}
.secuMainTitle  p{
  color: var(--textColor);
  font-size: 16px;
  display: flex;
  min-height: 40px;
  width: 1000px;
  text-align: center;
}

.brountone-center{
    height: 100%;
    width: 60%;
    /* background-color: #b5c900; */
    display: flex;
    justify-content: center;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);


}
.brountImg{
    height: 100%;
    width: 50%;
    background-color: #00a186;
    background-image: url(../img/img-1/secustandart.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
.brountContent{
  height: 100%;
  width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px;
}

.brountContent h2{
color: var(--black);
font-size: 35px;

}
.brountContent h4{
  color: var(--violet);
  font-size: 16px;
  margin-bottom: 10px;
font-weight: 500;
}

.brountContent p{
  color: var(--textColor);
margin: 5px 0;
text-align: left;
}
.brountContent i{
  font-size: 10px;
  color: var(--violet);
}

.brountImg2{
  background-image: url(../img/img-1/subscribe-3534409_1280.jpg);

}
.brountImg3{
  background-image: url(../img/img-1/secu333.jpg);
}
.brountImg4{
  background-image: url(../img/img-1/gps3.jpg);
}
.brountImg5{
  background-image: url(../img/img-1/paiement.jpg);
}
.brountImg6{
  background-image: url(../img/img-1/clientService.jpg);
}

.brountO1B{
    height: 100%;
    width: 50%;
    background-color: #00a186;
  
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
.brountO1C{
    height: 100%;
    width: 50%;
    background-color: #00a186;
    background-image: url(./img-1/key-106885_1280.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
.brountO1D{
    height: 100%;
    width: 50%;
    background-color: #00a186;
    background-image: url(./Photo3/Shoot-63.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

.brountO1E{
    height: 100%;
    width: 50%;
    background-color: #00a186;
    background-image: url(./img-1/t20.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}
.brountO1F{
    height: 100%;
    width: 50%;
    background-color: #00a186;
    background-image: url(./img-1/call-center-8754751_1280.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}








/* PAGE COMMENT CA MARCHE  PAGE COMMENT CA MARCHE PAGE COMMENT CA MARCHE */

.TITRE{
    height: 6rem;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;

}

.TITRE h1{
font-family: var(--main-font3);
  font-size: 40px;
  color: var(--violet);
}

.cms-main{
    height: auto;
    width: 100vw;
    /* background-color: #ed5d34; */
    display: flex;
    justify-content: center;
}
.cms-center{
    min-height: 30rem;
    width: 1200px;
    /* background-color: #00a186; */
    display: flex;
    justify-content: center;
    margin-bottom: 10rem;
}

.pgcms, .pdcms{
    display: block;
    height: 100%;
    width: 48%;
    /* background-color: #ed5d34; */



}
.q1{
    min-height: 60px;
    width: 100%;
    /* background-color: #8434ed; */
    border: solid 1px var(--violet);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 7px;
}






.q1 p{
    color: var(--black);
    font-size: 19px;
 
}
.q1 i{
   position: absolute;
 right: 37%;
 cursor: pointer;
 font-size: 25px;
 transform: rotate(180deg);

}

.r1{
    min-height: 125px;
    width: 100%;
    background-color:var(--body);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
 padding: 10px;
    margin-top: 5px;
    display: none;
 
}


.r1 p{
    color: var(--black2);
    font-size: 16px;
    line-height: 1.6;

}
.r1 p i{
    color: var(--black2);
    font-size: 10px;
    line-height: 1.6;

}


/* PAGE PARAINAGE PAGE PARAINAGE PAGE PARAINAGE PAGE PARAINAGE */


.parainage_titre{
    height: 3rem;
    width: 100vw;
    /* background-color: #00a186; */
}


.parainage_titre{
    font-size: 35px;
    color: var(--black2);
    text-align: center;
}

.parainage-large{
    height: 9rem;
    width: 100vw;
    /* background-color: #a19529; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.hrligne{
    height: 1px;
    width: 50%;
    background-color:var(--violet);
    margin-top: 15px;
}
.parainage-child{
    height: 90%;
    width: 761px;
    /* background-color: #2999a1; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}


.parainage-child p{
    color: var(--black2);
    font-size: 15px;
    line-height: 1.7;
}
.devenir_tridaire{
    height: 40rem;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
}

.tridcenter{
    height: 95%;
    width: 761px;
    /* background-color: #ed5d34; */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.top-picture{
    height: 60%;
    width: 100%;
    /* background-color: #edda34; */
    background-image: url(../../assets/img/img-1/t25.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: -4px;
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;

}
.top-picture2{
    height: 60%;
    width: 100%;
    /* background-color: #edda34; */
    background-image: url(../../assets/img/img-1/together.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: -7px;
    display: flex;
    align-items: flex-end;
    flex-direction: row-reverse;

}
.bottom-textpict{
    height: 40%;
    width: 100%;
    background-color:var(--body);

}
.bottom-textpict p{
    
    color: var(--black2);
    font-size: 15px;
    line-height: 1.7;
    padding: 5px 10px;
    text-align: justify;
}
.tridaireleft{
    height: 50%;
    width: 60%;
    /* background-color: #00a186; */
    display: flex;
    /* justify-content: end; */
    flex-direction: column;
    padding: 0 15px;
    line-height: 1.6;
    align-items: end;
    padding-top: 48px;
}
.tridaireleft .pdevenez{
    font-size: 2em;
    color: var(--white2);
    text-align: center;
}
.pgagner{
    color: var(--violet);
  font-weight: 500;
  font-size: 25px;
  text-align: center;
}
.tridaireright{
    height: 50%;
    width: 40%;
    /* background-color: #71a100; */
}

.vitesse_sup{
    height: 10rem;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.vitesse_sup p{
    font-size: 35px;
    color: var(--black2);
    text-align: center;
}

/* Footer2 Footer2 Footer2 Footer2 Footer2 */

.footer-2{
    height: 15rem;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
    align-items: center;
    justify-content: center;
}




/* PAGE NOUS CONTACTER PAGE NOUS CONTACTER PAGE NOUS CONTACTER PAGE NOUS CONTACTER */
.ecoute_title{
    height: 3rem;
    width:100vw;
    /* background-color: #00a186; */
    margin-bottom: 2rem;
}

.ecoute_title p{
    font-size: 40px;
    text-align: center;
    color: var(--violet);
}
.container-contact{
    height:55rem ;
    width: 100vw;
    /* background-color: #b5c900; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-main{
    height: 95%;
    width: 800px;
    background-color: var(--violet);
    border-radius: 12px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    /* background-color: var(--black3); */
}
.form-content{
    height: 60%;
    width: 100%;
    /* background-color: var(--violet); */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 50px;
}

.form-content input[type="text"]{
  padding: 20px;
  border: none;
  outline: none;
  background-color: var(--body);
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.form-content input[type="text"]::placeholder{
font-family: var(--main-font2);
font-size: 16px;
  }
  
  .form-content textarea{
resize: none;
min-height: 195px;
outline: none;
border: none;
background-color: var(--body);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 5px;
      }
 
      .form-content textarea::placeholder{
font-size: 16px;
              }
                  




.form-btn{
    height: 15%;
    width: 100%;
    /* background-color: #0068c9; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.piece-j{
    height: 15%;
    width: 100%;
    /* background-color: #c95a00; */
}

.pj-title{
    height: 30%;
    width: 100%;
    /* background-color: #00a186; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.pj-title p{
    font-size: 16px;
    color: rgb(161, 161, 161);
}

.file-upload{
    height: 70%;
    width: 100%;
    /* background-color: #0018a1; */
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.uplo-1{
    height: 47px;
    width: 120px;
    /* background-color: #b7ca0f; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.uplo-1 input[type="file"]{
display: none;
}
.uplo-1 label{
    padding: 15px 15px;
   background-color: var(--body);
   cursor: pointer;
   user-select: none;
   border-radius: 5px;
   font-size: 15px;
   color: var(--violet);
   
    }
    
.form-btn button{
    display: flex;
    height: 55px;
    width: 200px;
    justify-content: center;
    align-items: center;
    background-color: var(--body);
    color: var(--violet);
    font-size: 20px;
    border-radius: 7px;
    outline: none;
    border: none;
    cursor: pointer;
  
}

.teams{
    height: 10rem;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
    justify-content: center;
    align-items: center;

}

.team-center{
    height: 80%;
    width: 761px;
    /* background-color: #b5c900; */
    display: flex;
    justify-content: space-around;

}
.team-center i{
  color: var(--violet);
  font-size: 25px;

}

.footer-contact{
    height: 10rem;
    width: 100vw;
    /* background-color: #c9c9c9; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 18px;
    color: var(--black2);
    margin-bottom: 1rem;
}
.error{
    height: 5%;
    width: 100%;
    /* background-color: #00a186; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.error p{
 font-family: var(--main-font2);
 color: #c53007d5;
 font-size: 15px;
}

.cardThree{
  min-height: 200px;
  width: 100vw;
  /* background-color: #00a186; */
  display: flex;
  justify-content: center;
  margin: 50px 0;
}

.cardAssuranceMain{
  min-height: 300px;
  width:1500px ;
  /* background-color: #b5c900; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cardAssurance{
  height:300px;
  width: 400px;
  box-shadow: 5px 5px 22px 1px rgb(219, 219, 219);
  border-radius: px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}
.cardAssurance i{
  display: flex;
  font-size: 40px;
  align-self: center;
  margin-bottom: 20px;

}
.cardAssurance h2{
  color: var(--black2);
  font-size: 20px;
}
.cardAssurance p{
  color: var(--textColor);
  font-size: 15px;
  line-height: 1.7;
}

#secu1{
  color: rgba(140, 26, 168, 0.767);
}
#secu2{
  color: rgba(26, 168, 62, 0.767);
}
#secu3{
  color: rgba(14, 90, 233, 0.767);
}


/* DEVENIR TRIDAIRE DEVENIR TRIDAIRE DEVENIR TRIDAIRE */

.heroDevenirTridaire{
  min-height: 700px;
  width: 100vw;
  /* background-color: #00a186; */
  display: flex;
  align-items: flex-end;
  justify-content: center;

}

.separateHeroTridaire{
  height: 500px;
  width: 900px;
  /* background-color: #b5c900; */
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.separateHeroTridaire img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.separateHeroTridaire h2{
  color: var(--black);
  font-size: 35px;
}
.separateHeroTridaire h5{
  color: var(--violet);
  font-size: 17px;
  font-weight: 500;
  display: flex;
  align-self: center;
  margin-bottom: 10px;
}

.separateHeroTridaire p{
  color: var(--textColor);
}


.coffreVide span{
  color: var(--textColor);
}
.coffreVide span i{
  color: green;
}
.gesteGrand{
  min-height: 400px;
  width: 100vw;
  /* background-color: #00a186; */
  display: flex;
  flex-direction: column;
  margin-top: 70px;
}

.gesteGrand h2{
  color: var(--black);
  font-size: 35px;
  display: flex;
  align-self: center;
}
.separateHeroTridaire h5{
  color: var(--violet);
  display: flex;
  align-self: flex-start;
}
.gesteGrand h5{
  font-size: 17px;
  font-weight: 500;
  color: var(--black2);
  text-align: center;
  padding: 0 200px;
}

#tridaireDef{
  color: var(--black2);
}
.cardGestes{
  height: 330px;
  width: 100%;
  /* background-color: #00a186; */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  align-items: flex-end;
  margin-top: 20px;
}

.cardGesteGrand{
  height: 300px;
  width: 400px;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.cardGesteGrand i {
  font-size: 35px;
  color: var(--violet);
  display: flex;
  align-self: center;
  margin: 15px 0;
}

.cardGesteGrand h3 {
  color: var(--black);
  display: flex;
  align-self: center;
  font-size: 20px;
  text-align: center;
}
.cardGesteGrand p {
  color: var(--textColor);
  font-size: 15px;
  margin-top: 15px;
  text-align: center;
}

.secur{
  min-height: 60px;
  width: 100vw;
  /* background-color: #00a186; */
  display: flex;
  flex-direction: column;

}
.secur h2{
  color: var(--black);
  font-size: 35px;
  display: flex;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.secur h2 i{
  color: var(--violet);
}
.restezConnecte{
  margin-top: -265px;
}
.tridPhone{
  /* background-color: #00a186; */
  display: flex;
flex-direction: row;
justify-content: right;
width: 500px;
}
.tridPhone img{
height: 500px;
width: 500px;
object-fit: contain;
}

@media only screen and (max-width:1010px){
    .section-concept-container {
        height: 72rem;
        width: 100vw;
        /* background-color: brown; */
        display: flex;
        flex-direction: column;
        margin-bottom: 5rem;
        margin-top: 8rem;
      }
      .container-concept-left {
        height: 484px;
        width: 100%;
        /* background-color: #b5c900; */
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .container-concept-right {
        height: 484px;
        width: 100%;
        /* background-color: #00a1c9; */
      }
      .top-partt {
        display: flex;
        justify-content: center;
        /* background-color: #96a100; */
        align-items: center;
        margin-bottom: 2rem;
        margin-top: 2rem;
      }

      .chearch-concept-header button {
        height: 48%;
        width: 151px;
     
      }
      .cc-container {
        height: 424px;
        width: 100%;
        /* background-color: beige; */

      }
      .cc-container-right-top-width{
        display: flex;
    }

      .cc-container-left {
    display: none;
      }
      .cc-container-right {
        height: 100%;
        width: 100%;
        /* background-color: #4b5874; */
      }

      .cc-container-right-bottom {
        display: flex;
        justify-content: left;
        align-items: center;
      }
      .E1{
        display: none;
      }
      .container-concept-left-img,.container-concept-left-img2,   .container-concept-left-img3,    .container-concept-left-img4 {
        height: 475px;
        width: 834px;
      }
      .em {
      display: none;
      }
      .em1 {
        height: 100%;
        width: 100%;
      }
.E4{
    display: none;
}
.E3{
    display: block;
}
      .chearch-concept-header button {
        width: 150px;
        border-radius: 8px;
      }
      .section-concept-main {
        height: 90%;
        width: 100%;
        margin-top: 3rem;
        /* background-color: #69478b; */
        align-items: flex-end !important;
        justify-content: space-between !important;
        flex-direction: column !important;

      }
}


@media only screen and (max-width:1178px){
  .colums-right-three h3 {
    color: var(--black);
    font-size: 28px;
    padding:10px 10px;
  }
}

@media only screen and (max-width:1303px){
    .main-corpsS {
        height: 100%;
        width: 100%;
      }
      .mcv1 {
        height: 236px;
        width: 228px;
      }
      .aboutleft{
        height: 100%;
        width: 50%;
      }

      .rangeone {
        height: 269px;
        width: 539px
      }
      .main-corps {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: end;
      }

      .about-btn {
        height: 187px;
        width: 100%;
        /* background-color: #b88181; */
        margin-bottom: 10rem;
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }
}

@media only screen and (max-width:1168px){
    .main-corps {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: end;
        /* background-color: #ed5d34; */
      }

      .aboutleft {
        height: 100%;
        width: 64%;
      }
      .aboutright {
        height: 90%;
        width: 50%;
      }
      .telmob-main {
        height: 385px;
        width: 944px;
      }
      .telmob-main-right video {
        height: 59.7%;
        width: 100%;
      }

      .telecharger-texte {
        height: 100%;
        width: 935px;
      }

      .trajet-anti {
        margin-bottom: 0rem;
      }
}

.E6{
display: none;
}

.EvCard{
  width: 250px;
}
@media only screen and (max-width:998px){
    .secb-left P {
        font-size: 30px;
      }
      .colums-left-one, .colums-left-two, .colums-left-three{
        height: 365px;
        width: 319px;
      }
      .clo-top h3 {
        font-size: 24px;
      }
      .colt-top p {
        font-size: 24px;
      }
      .colt-bottom {
        display: flex;
        justify-content: center;
        align-items: normal;
        padding: 35px 0;
      }
      .colums-right-two,.colums-right-one,   .colums-right-three{
        width: 399px;
      }
      .E6{
        display: block;
        }
        .E7{
            display: none;
            }
            .colums-left-three p {
                font-size: 28px;
              }

              .colums-left-three p {
                padding: 11px;
              }
              .clrt-main {
                height: 237px;
                width: 375px;
              }
              .clrt-main-text h3 {
                font-size: 27px;
              }
              .colums-right-three h3 {
                font-size: 26px;
              }

              .section-B {
                height: 12rem;
                width: 100vw;
              }
              .colums-right-two {
                background-position-x: -224px;
                background-position-y: 13px;
              }

              .telecharger-texte p {
                font-size: 39px;
              }
              .telecharger-texte {
          padding-left: 95px;
              }
              .telmob-main {
                height: 343px;
                width: 781px;
              }
              .telmob-main-right video {
                height: 53%;
                width: 100%;
              }
              .telmob-main-left-top {
                height: 42%;
                width: 100%;
                /* background-color: #ed5d34; */

              }

              .telmob-main-left-top .cmd {
                padding: 21px;
              }

              .telmob-main-left-btn {
                height: 9%;
                /* background-color: blue; */
              }
              .down13{
                display: block;
              }
              .down12{
                display: none;
              }
              .card-cont {
                height: 54%;
                width: 182px;
              }
              .card-cont-top img{
                height: 70px;
                width: 70px;
              }
              .rangeone {
                height: 244px;
                width: 490px;
              }
              .main-corps {
                height: 90%;
                width: 109%;
              }
              .sec-01 p {
                font-size: 33px;
              }
              .card-cont:hover{
                height: 54%;
                width: 182px;
            }
}
@media only screen and (max-width:912px){
    .chearch-concept-header {
        display: flex;
        justify-content: space-evenly;
      }

}

@media only screen and (max-width:850px){
    .anti-container {
        height: 35%;
        width: 1318px;
        /* background-color: #b5c900; */
      }
      .anti-paraphrase {
        height: 20%;
        width: 834px;
        /* background-color: #994395; */
      }

      .anti-paraphrase p {
        font-size: 17px;
        padding: 0 30px;
      }
      .trajet-anti {
        margin-bottom: -9rem;
      }
      .card-cont {
        height: 89%;
        width: 147px;
      }

      .card-cont-top img{
        height: 40px;
        width: 40px;
      }
      .card-cont:hover{
        height: 89%;
        width: 147px;

    }
    .container-concept-left-img, .container-concept-left-img2, .container-concept-left-img3, .container-concept-left-img4 {
        height: 475px;
        width: 720px;
      }
}


@media only screen and (max-width:830px){
    .telmob-main {
        height: 267px;
        width: 657px;
      }
      .telmob-main-right video {
        height: 41.3%;
        width: 100%;
      }
      .telmob-main-left-top .cmd {
        font-size: 18px;
      }
      .telmob-main-left-top {
        height: 26%;
        width: 100%;
        /* background-color: #ed5d34; */
        margin-bottom: 1rem;
      }
      .telmob {
        height: 20rem;
      }
      .nosavantages h2 {
        font-size: 21px;
        color: var(--black);
      }
      .elements1, .elements2, .elements3 {
        height: 194px;
        width: 705px;
      }
      .e1-lef-int img{
            height: 50px;
            width: 50px;
      }
      .e1r-top p {
        font-size: 20px;
      }
      .eay i, .eay2 i {
        font-size: 22px;
      }

      .container {
        width: 78%;
        max-width: 100vw;
      }
      .colums-right-two, .colums-right-one, .colums-right-three {
        width: 329px;
      }
      .cro-top h3 {
        font-size: 25px;
      }
      .clrt-main {
        height: 296px;
        width: 293px;
      }
      .clrt-main-text h3 {
        font-size: 24px;
      }

      
      .E9{
        display: block;
      }
      .colums-right-two {
        background-position-x: -254px;
        background-position-y: 13px;
      }
      .colums-right-three h3 {
        font-size: 24px;
      }
      .colums-left-one, .colums-left-two, .colums-left-three {
        height: 365px;
        width: 264px;
      }
      .clo-top h3 {
        font-size: 22px;
      }
      .colt-top h3 {
        font-size: 21px;
      }
      .colums-left-three p {
        font-size: 25px;
        color: var(--body);
        font-weight: bold;
      }
      .security2{
        padding: 5px 5px;
        font-size: 17px;
      }
      .anti-paraphrase {
        height: 20%;
        width: 681px;
      }
      .anti-container {
        height: 35%;
        width: 654px;
      }
.anti-paraphrase p {
        font-size: 13px;
      }
      .rangeone {
        height: 349px;
        width: 409px;
      }
      .cc-container-right-bottom {
        height: 75%;
        width: 95%;
      }
}
@media only screen and (max-width:738px){
  .container-concept-left-img, .container-concept-left-img2, .container-concept-left-img3, .container-concept-left-img4 {
    height: 394px;
    width: 636px;
  }
  .sec-01 p {
    font-size: 21px;
  }

  .section-concept-container {
    margin-top: 1rem;
    margin-bottom: -5rem;
  }

  .chearch-concept-header {
    height: 100%;
    width: 635px;
    /* background-color: #ed5d34; */
    display: flex;
    justify-content: space-between;
  }
  .chearch-concept-header button {
    width: 115px;
  }

  .section-concept-main {
    margin-top: -2rem;
  }

  .container-concept-right {
    margin-bottom: 140px;
  }
  .section-concept-container-chearch {
    margin-bottom: 22px;
  }

  .container-concept-right {
    height: 532px;
    width: 104%;
    /* background-color: #00a1c9; */
  }
  .nosavantages-top p {
    font-size: 18px;
  }
  .elements1, .elements2, .elements3 {
    height: 194px;
    width: 90%;
  }
  .mcv1 {
    height: 262px;
    width: 185px;
  }
  .aboutright {
    display: none;
  }
  .aboutleft {
    height: 100%;
    width: 100%;
    /* background-color: beige; */
  }
  .main-corps {
    height: 100%;
    width: 109%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    /* background-color: #ed5d34; */
  }
  .rangeone {
    height: 233px;
    width: 592px;
    margin-right: 60px;
  }
  .container {
    width: 63%;
  }
  .anti-paraphrase {
    height: 20%;
    width: 584px;
  }
  .anti-top {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .telmob-main {
    height: 238px;
    width: 587px;
  }
  .telmob-main-right video {
    height: 36.7%;
    width: 100%;
  }
  .telmob-main-left-top .cmd {
    padding: 17px;
  }
  .telmob-main-left-top {
    margin-bottom:0;
  }
  .telecharger-texte {
    padding-left: 0;
    height: 100%;
    width: 935px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .telecharger-texte p {
    font-size: 29px;
  }
  .visiontridem{
    height: 40rem;
    width: 100vw;
    display:flex;
    flex-direction: column;
  }
  .about {
    height: 55em;
    width: 100vw;
    margin-bottom: 7rem;
  }
  .ableft-titles h2 {
    font-size: 35px;
    color: var(--black);
  }
  .ableft-titles{
    /* background-color: #c53007d5; */
    height: 15%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .notrevision-suite{
    /* background-color: #07c540d5; */
    height: 85%;
  width: 100%;
  display: flex;
align-items: center;
  }
  .notrevision-suite-left{
    height: 541px;
    width: 295.2px;
    /* background-color: #c53007d5; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  
  }
  .notrevision-suite-right{
    height: 541px;
    width: 442.8px;
    /* background-color: #0779c5d5; */
  }
  .photo-vision{
    height: 323px;
    width: 204px;
    /* background-color: #1e1f1e; */
    background-image: url(./img-1/child-89208_1920.jpg);
    background-size: cover;
    background-position:center ;
    background-repeat: no-repeat;
    border-radius: 12px;
  }

  .photo-vision2{
    height: 200px;
    width: 204px;
    /* background-color: #1e1f1e; */
    background-image: url(./img-1/enfat.jpg);
    background-size: cover;
    background-position:center ;
    background-repeat: no-repeat;
    border-radius: 12px;
  }


  .notrevision-suite-right-top{
    height: 13%;
    width: 90%;
    /* background-color: beige; */
  }
  .notrevision-suite-right-bottom{
    height: 87%;
    width: 90%;
    /* background-color: rgb(245, 220, 245); */
  }
  .notrevision-suite-right-bottom  p{
    color: var(--black2);
    text-align: justify;
    line-height: 1.3;
  }
  .notrevision-suite-right-top p{
    font-size: 23px;
    color: var(--black2);
    text-align: left;
  
  }

}

@media only screen and (max-width:530px){
  .eay i, .eay2 i {
    font-size: 18px;
  }
  .e1-lef-int {
    height: 100%;
    width: 20%;
  }
  .e1-right2 {
    height: 100%;
    width: 80%;
  }
  .e1-right {
    height: 100%;
    width: 80%;
  }

  .center-div {
    height: 100%;
    width: 778px;
    align-items: center;
  }

  .elements1, .elements2, .elements3 {
    height: 194px;
    width: 95%;
  }

  .e1-lef-int {
    height: 100%;
    width: 15%;
    display: flex;
    justify-content: left;
    align-items: center;
  }
}
@media only screen and (max-width:450px){

}









@media only screen and (max-width:674px){
  .notrevision-suite-right-top p {
    font-size: 20px;
  }
  .colums-right-two, .colums-right-one, .colums-right-three {
    width: 281px;
  }
  .colums-right-two {
    background-position-x: -297px;
    background-position-y: 13px;
  }
  .clrt-main {
    height: 289px;
    width: 232px;
  }
  .colums-right-three h3 {
    font-size: 23px;
  }
  .clrt-main-btn a, .colt-bottom a {
    height: 40px;
    width: 182px;
    font-size: 16px;
  }

  .clrt-main-text h3 {
    font-size: 21px;
  }
  .cro-top h3 {
    font-size: 28px;
  }
  .secb-left P {
    font-size: 26px;
  }
  .container-concept-left-img, .container-concept-left-img2, .container-concept-left-img3, .container-concept-left-img4 {
    height: 90%;
    width: 93%;
  }
  .chearch-concept-header {
    display: flex;
    justify-content: space-evenly;
  }
  .chearch-concept-header button {
    width: 105px;
    height: 40%;
  }
  .sec-01 p {
    font-size: 16px;
  }

  .rangeone {
    height: 233px;
    width: 87%;
    margin-right: 60px;
  }
}

@media only screen and (max-width: 601px){
  .chearch-concept-header button {
    width: 105px;
    height: 40%;
    font-size: 12px;
  }
}
@media only screen and (max-width: 537px){
  .comment h2 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 433px){
  .chearch-concept-header {
    height: 100%;
    width: 100%;
    /* background-color: #ed5d34; */
  }

  .chearch-concept-header button {
    width: 79px;
    height: 40%;
    font-size: 12px;
  }
  .comment h2 {
    font-size: 25px;
  }
}

@media only screen and (max-width: 345px){
  .chearch-concept-header button {
    width: 70px;
    height: 45%;
    font-size: 10px;
  }
}

@media only screen and (max-width: 1636px){
  .cardAssuranceMain, .cardReturnMain  {
    min-height: 300px;
    width: 95%;
    /* background-color: #b5c900; */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }



}

@media only screen and (max-width: 1300px){
  .cardAssurance,   .solidCard {
    height: 300px;
    width: 30%;
  }
}

@media only screen and (max-width: 680px){
  .cardAssuranceMain, .cardReturnMain {
    min-height: 300px;
    width: 95%;
    /* background-color: #b5c900; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
  }

  .cardAssurance,   .solidCard {
    height: 240px;
    width: 95%;
    border: solid 1px rgb(242, 240, 242);
    margin: 10px 0;
  }
  .cardFont p {
    justify-content: left;
  }
  .service-for-all {
    margin-top: 5rem;
  }

  .service-for-all h5 {
    color: var(--textColor);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 0 10px;
  }




}

@media only screen and (max-width: 550px){
  .cardFont h2 {
    color: var(--black2);
    font-size: 20px;
  }
}

@media only screen and (max-width:870px){
  #titleCo2 {
    font-size: 40px;
    color: var(--body);
    text-align: center;
  }
  .co2card h2 {
    font-size: 3em;
    color: var(--body);
  }
}

@media only screen and (max-width:818px){
  .co2card {
    height: 200px;
    width: 95%;

  }
}
@media only screen and (max-width:564px){
  .co2card {
    height: 150px;
    width: 95%;
  }

  .co2card h2 {
    font-size: 2.3em;
    color: var(--body);
  }
  #titleCo2 {
    font-size: 30px;
    color: var(--body);
    text-align: center;
  }
}
@media only screen and (max-width:564px){
  .co2container {
    min-height: 500px;

  }
  .co2card {
    height: 110px;
    width: 95%;
  }
  #titleCo2 {
    font-size: 25px;
  }
  .co2card h2 {
    font-size: 2em;
    color: var(--body);
  }
  .co2container p {
    font-weight: bold;
    text-align: center;
    padding:0 5px;
  }
}
@media only screen and (max-width:340px){
  .e1r-top p {
    font-size: 17px;
  }
}

@media only screen and (max-width:676px){
  .colums-left-one, .colums-left-two, .colums-left-three {
    height: 365px;
    width: 216px;
  }
  .clo-top h3{
    font-size: 20px;
    padding:0 7px;
  }
  .colt-top h3 {
    font-size: 19px;
  }
  .colums-left-three p {
    font-size: 21px;
  }
  .cro-top h3 {
    font-size: 24px;
  }
  .colums-right-three h3 {
    font-size: 22px;
  }
}
@media only screen and (max-width:590px){
  .telecharger-lapp {
    height: 5rem;
    width: 100vw;
    display: flex;
    justify-content: center;

  }
  .telmob-main {
    height: 830px;
    width: 95%;
    flex-direction: column-reverse;
    align-items: center;
  }
  .telmob-main-left, .telmob-main-right {
    height: 100%;
    width: 100%;
    /* background-color: #00a108; */
  }
  .telmob-main-left-top {
    min-height: 23%;
    width: 100%;
    /* background-color: #ed5d34; */
    padding: 0 15px;
  }
  .telmob-main-left-top .cmd {
    padding:0 4px;
  }
  .telmob-main-left-btn {
    height: 30%;
    /* background-color: blue; */
    display: flex;
    align-items: center;
  }
  .telmob-main-right video {
    height: 450px;
    width: auto;
  }
  .telmob {
    min-height: 900px;
  }
}

@media only screen and (max-width:578px){
  .section4 {
    min-height: 1000px;
    width: 100vw;
    /* background-color: rgb(110, 56, 56); */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
    flex-direction: column;
  }
  .colums-left {
    min-height:885px;
    width: 100%;
    /* background-color: rgb(21, 255, 0); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rem;
  }

  .colums-left-one, .colums-left-two, .colums-left-three {
    min-height: 202px;
    width: 95%;
    margin:
15px 0;
  }

  .section-B {
    min-height: 19rem;
    width: 100vw;
    /* background-color: blanchedalmond; */

  }
  .secb-left {
    height: 100%;
    width: 50%;
    /* background-color: #31eed5; */
    display: flex;
    padding-left: 20px ;
    justify-content: center;
    align-items: flex-start;
  }
  .colt-bottom {
    padding:0;
  }
  .clrt-main-btn a, .colt-bottom a {
    height: 55px;
    width: 182px;
    font-size: 16px;
  }
  .colums-left-three p {
    font-size: 29px;
  }
  .colums-right {
    min-height: 1000px;
    width: 100%;
    /* background-color: yellow; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 9rem;
  }
  .telmob {
    min-height: 20rem;

  }
  .colums-right-two, .colums-right-one, .colums-right-three {
    width: 95%;
    margin: 15px 0;
  }

  .clrt-main {
    height: 100%;
    width: 100%;
  }

  .colums-right-two {
    background-position-x: -78px;
    background-position-y: -93px;
  }
  .telecharger-lapp {
    height: 5rem;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
    justify-content: center;
margin-top: 32rem;
margin-bottom: 4rem;
  }
  .telmob {
    height: 45rem;
  }

  .telmob-main-right video {
    height: 420px;
    width: auto;
  }

  .telmob-main-left-top {
    min-height: 100px;
    width: 100%;

  }
  .telmob-main-left, .telmob-main-right {
    height: 44%;
    width: 100%;
  }

}

@media only screen and (max-width:498px){
  .secb-left {
    height: 100%;
    width: 70%;

  }

  .secb-left {
    height: 100%;
    width: 50%;
    display: flex;
    padding-left: 20px;
    justify-content: left;
    align-items: flex-start;
  }
}
@media only screen and (max-width:444px){
  .telmob-main {
    height: 658px;
    width: 95%;
    flex-direction: column-reverse;
    align-items: center;
  }
  .telmob-main-left, .telmob-main-right {
    height: 52%;
    width: 100%;
  }
}
@media only screen and (max-width:466px){
  .secb-left P {
    font-size: 22px;
  }
  .section-B {
    min-height: 16rem;
    width: 100vw;
    /* background-color: blanchedalmond; */
  }
  .secb-left P {
    font-size: 21px;
  }
  .colums-right-two {
    background-position-x: -122px;
    background-position-y: -81px;
  }
}

@media only screen and (max-width:410px){
  .telmob-main-left-btn a {
    padding:10px 30px;
  }
}

@media only screen and (max-width:400px){
  .secb-left {
    height: 100%;
    width: 150%;
  }
 
}
@media only screen and (max-width:388px){
  .colums-left-three p {
    font-size: 24px;
  }
  .cro-top h3 {
    font-size: 20px;
  }
  .colt-top h3 {
    font-size: 17px;
  }
  .colums-right-two {
    background-position-x: -156px;
    background-position-y: -106px;
  }
}

@media only screen and (max-width:314px){
  .colums-left-three p {
    font-size: 22px;
  }
  .colt-top h3 {
    font-size: 15px;
  }
  .clo-top h3 {
    font-size: 17px;
  }
  .colums-right-three h3 {
    font-size: 20px;
  }
  .clrt-main-text h3 {
    font-size: 19px;
  }
  .telmob-main-left-btn {
    margin-top: 30px;
  }
}

@media only screen and (max-width:308px){
  .telmob-main-left-btn {
    margin-top: 54px;
  }
}

@media only screen and (max-width: 576px){
  .about {
    min-height: 1000px;
    width: 100vw;
    margin-bottom: 7rem;
  }

  .ableft-title {
    height: 137px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #b88181; */
  }

  .rangeone {
    min-height: 233px;
    width: 87%;
    margin-right: 60px;
  }

  .main-corps {
    min-height: 306px;
    width: 109%;

  }
}

@media only screen and (max-width: 566px){
  .rangeone {
    min-height: 322px;
    width: 87%;
  }
}
@media only screen and (max-width: 446px){

  .about {
    min-height: 1650px;
    width: 100vw;
    margin-bottom: 7rem;
  }
  .rangeone {
    min-height: 508px;
    width: 79%;
  }
}

@media only screen and (max-width: 738px){

  .aboutright {
    display: flex;
  }
  .about {
    height: 55em;
    width: 100vw;
    margin-bottom: 7rem;
    display: flex;
    flex-direction: column;
  }
  .visiontridem {
    display: none;
    flex-direction: column;
  }

  .about {
    min-height: 2218px;
    width: 100vw;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    /* background-color: blueviolet; */
  }

  .aboutright {
    min-height: 500px;
    width: 100%;
    /* background-color: beige; */
    display: flex;
    flex-direction: column;
  }

  .about-btn {
    height: 100px;
    margin-bottom: 4rem;
  }
  .main-corps {
    min-height: 504px;
    width: 109%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    /* background-color: #ed5d34; */
  }

  .mcv1 {
    height: 262px;
    width: 95%;
  }

  .mcv1:nth-child(1) {
    background-position-y: -215px;
    background-position-x: 1px;
  }
  .mcv1:nth-child(2) {
    background-position-y: -94px;
    background-position-x: 5px;
  }

  .mcv1:nth-child(3) {
    background-position-y: -62px;
    background-position-x: 1px;
  }
}

@media only screen and (max-width: 570px){
  .mcv1:nth-child(2) {
    background-position-y: 0;
    background-position-x: 0;

  }
  .mcv1:nth-child(1) {
    background-position-y: -110px;
  }
}

@media only screen and (max-width:446px){
  .mc-video {
    min-height: 874px;
    /* background-color: #711c54; */
    display: flex;
    flex-direction: row;
    margin-top: 10rem;
  }

  .about {
    min-height: 2700px;
    width: 100vw;
    margin-bottom: 4rem;
  }

  .aboutright {
    min-height: 963px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 8rem;
  }
  .main-corpsS {
    height: 58%;
    width: 100%;
  }

  .ableft-title {
    display: flex;
    align-items: flex-start;
  }
}


@media only screen and (max-width: 974px){
  .footer-top {
    height: auto;
    width: 100%;
    display:flex;
    flex-direction: column;
    background-color: rgb(54,36,70); 
    background: linear-gradient(90deg, rgba(54,36,70,1)
     0%, rgba(0,0,0,1) 100%);  
  }
  .footerBottomOne a {
    font-size: 15px;
  }
  .footer-bottom p {
   font-size: 15px;
  }
  .ftcNetLogo {
    width: 100%;
  }
  .ftcNetLogo h2 {
    font-size: 25px;
    padding:0 90px;
    color: var(--body);
  }

  .top-partt, h4 {
    text-align: left;;
    
  }

  .ftcNetApp {
    width: 100%;
  }

  .appNow img {
    height: 49px;
  }
  .footerMargin{
    margin-left: 50px;
  }

  .footerTopCard h4 {
    font-size: 20px;

  }
}

@media only screen and (max-width: 830px){
  .ftcNetLogo h2 {
    font-size: 20px;
    padding:0 20px;
    text-align: center;

  }
}
@media only screen and (max-width: 566px){
  .appNow img {
    height: 39px;
  }
  .footerBottomOne {
    height: auto;
    width: 100%;
    align-items: baseline;
    flex-direction: column;
    padding-left: 50px;
  }
  .footerBottomOne a {
    margin:5px 0;
  }
  .footer-bottom p {
    color: var(--white2);
    display: flex;
    align-self: initial;
    margin-top: 20px;
    user-select: none;
    margin-left: 50px;
  }
.foren{
  margin: 20px 0;
}
.ftcNetApp {
  width: 100%;
  margin:20px 0;
}
.footerTopCard h4 {
  font-size: 16px;
}
}

@media only screen and (max-width: 430px){
  .ftcNetLogo h2 {
    font-size: 15px;
    padding:0 20px;
    text-align: center;
  }
  .footerTopCard h4 {
    font-size: 15px;
  }
}
@media only screen and (max-width:1838px){
  .separateHeroTridaire {
    height: 500px;
    width: 48%;
    /* background-color: #b5c900; */
    margin:0 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

}

@media only screen and (max-width:878px){
  .heroDevenirTridaire {
    flex-direction: column;
    align-items: center;
  }
  .separateHeroTridaire {
    height: 500px;
    width: 95%;
    /* background-color: #b5c900; */
    margin:0 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .heroDevSolo{
    min-height: 500px;
    justify-content: end;
    padding-bottom: 50px;
  }

.skindel{
margin-bottom: 100px;
}

.coffre{
  display: flex;
  flex-direction: column-reverse;
}

.coffreVide{
  height: auto;
  padding-bottom: 50px;
}
.gesteGrand h5 {
  font-size: 17px;
  font-weight: 500;
  color: var(--black2);
  text-align: center;
  padding:0 20px;
}
.cardGestes {
  min-height: 690px;
  width: 100%;
  /* background-color: #00a186; */
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 20px;
  flex-direction: column;
}
}

@media only screen and (max-width:681px){
  .skindel {
    margin-bottom: 60px;
    padding-top: 60px;
  }

  .gesteGrand h2 {
    display: block;
    text-align: center;
  }


}
@media only screen and (max-width:527px){
  .separateHeroTridaire h2 {
    color: var(--black);
    font-size: 30px;
  }
  .separateHeroTridaire h2 i{
    font-size: 20px;
  }

  .gesteGrand h2 {
    font-size: 25px;
    display: block;
    align-self: center;
    text-align: center;
    padding: 0 10px;
  }
  .gesteGrand h5 {
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    padding:0 10px;
  }
  .separateHeroTridaire h2 {
    color: var(--black);
    font-size: 30px;

    margin:30px 0;
  }
  .entrepriseAide h2 {
    align-self: center;
    font-size: 25px;
    text-align: center;
    padding:0 10px;
  }


  .skindel {
    margin-bottom: 35px;
    padding-top: 60px;
  }

  .heroDevSolo {
    padding-top: 28rem;
  }
  .separateHeroTridaire h2 {
    color: var(--black);
    font-size: 25px;
    margin:0;
  }

  .separateHeroTridaire h5 {
    margin-top: 36px;
  }

  .separateHeroTridaire h5 {
    color: var(--violet);
    display: flex;
    align-self: flex-start;
    margin-top: 36px;
  }

.separImg{
  height: 300px;
}
.tridPhone{
  display: flex;
 align-items: center;
}
}
@media only screen and (max-width:495px){
  #resTz{
    margin: 20px 0;
  }
}

@media only screen and (max-width:453px){
  .gesteGrand h2 {
    font-size: 25px;
  }
  .separateHeroTridaire h2 {
    color: var(--black);
    font-size: 25px;
  }
}


@media only screen and (max-width:373px){
  .heroDevSolo {
    padding-top: 30rem;

  }
 
  #tridaireDef {
    color: var(--black2);
    font-size: 15px;
  }
  .coffreVide span {
    color: var(--textColor);
    font-size: 15px;
  }
  .gesteGrand h5 {
    font-size: 15px;
  }

  .gesteGrand h2 {
    font-size: 20px;
  }
  .cardGesteGrand h3 {
    font-size: 13px;
  }

}
@media only screen and (max-width:321px){
  .heroDevSolo {
    padding-top: 32rem;
  }
}
@media only screen and (max-width:1433px){
  .commentDevenir {
    min-height: 400px;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
   align-items: center;
    margin-top: 50px;
    flex-direction: column;
  }
  .cmnt {
    min-height: 300px;
    width: 95%;
    /* background-color: #70c6ca; */
    display: flex;
    flex-direction: column;
    margin:0 5px;
    padding: 0 100px;
  }
}
@media only screen and (max-width:1411px){
  .cardEntreprise {
    min-height: 500px;
    width: 380px;
    /* background-color: #ed5d34; */
    display: flex;
    flex-direction: column;
  }
}
@media only screen and (max-width:923px){
  .cmnt {
    min-height: 435px;
    width: 95%;
    /* background-color: #70c6ca; */
    display: flex;
    flex-direction: column;
    margin:15px;
    padding: 0 10px;
  }
}
@media only screen and (max-width:923px){
  .cmnt span {
    font-size: 15px;
  }
  .cmnt h2 {
    font-size: 20px;
  }
  .cmnt p{
    color: var(--black2);
    font-size: 15px;
    }
    
}

@media only screen and (max-width:669px){
  .cmnt span {
    margin: 15px 0;
    font-size: 16px;
    display: block;
  }


  .cmnt span i {
    height: 30px;
    width: 30px;
    margin-top: 15px;

  }
}

@media only screen and (max-width:441px){
  .cmnt span {
    font-size: 13px;
  }
  .cmntRight a {
    font-size: 13px;
  }
}

@media only screen and (max-width:353px){
  .cmnt {
    min-height: 471px;
  }
}
@media only screen and (max-width:1165px){
  .all-resting {
    min-height: 300px;
    width: 100%;
    /* background-color: #a19e00; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
  }
  .cardEntreprise {
    min-height: auto;
    width: 95%;
    margin:15px 0;
  }
  .cardEntreprise img {
    height: 668px;
    width: 100%;
  }

}
@media only screen and (max-width:779px){
  .cardEntreprise img {
    height: 350px;
    width: 100%;
  }
  .Content h2 {
    display: block;
    text-align: center;
    margin: 15px 5px;
  }
}

@media only screen and (max-width:853px){
  .headerCommerce {
    height: auto;
    width: 100vw;
    flex-direction: column;
    padding-top: 110px;
  }
  .commerceLeft, .commerceRight {
    height: 100%;
    width: 95%;
  }
  .rapideContainer {
    min-height: 300px;
    width: 95%;
    flex-direction: column;
  }

  .cardRapide {
    min-height: 300px;
    width: 489px;
  }
  .cardRapide p {
    color: var(--textColor);
    font-size: 15px;
    margin-top: 15px;
    text-align: center;
  } 
}

@media only screen and (max-width:575px){
  .commerceRight img {
    height: 396px;
  }
  .commerceLeft h1, .commerceLeft h2 {
    font-size: 26px;
  }
  .commerceLeft {
    padding:60px 15px;
  }
}
@media only screen and (max-width:1555px){
  .conversion {
   height: auto;
    width: 100vw;
    /* background-color: #00a186; */
    display: flex;
   align-items: center;
    flex-direction: column;
  }
  .conversionMain {
    min-height: 600px;
    width: 1019px;
  }

  .img img {
    height: 550px;
    width: 1024px;
  }
}

@media only screen and (max-width:1555px){
  .conversionMain {
    min-height: 600px;
    width: 90%;
  }

}

@media only screen and (max-width:871px){
  .img img {
    height: 464px;
    width: auto;
  }

}

@media only screen and (max-width:723px){
  .img img {
    height: 394px;
    width: auto;
  }
  .conversionMain {
    min-height: 442px;
    width: 90%;
  }

  .why h2 {
    color: var(--black);
    font-size: 30px;
    text-align: center;
    margin:
  25px 5px;
  }


}
@media only screen and (max-width:605px){
  .conversionMain {
    min-height: 357px;
    width: 90%;
  }
  .img img {
    height: 311px;
    width: auto;
  }
  .Content h2 {
    color: var(--black);
    font-size: 30px;

  }
  
}

@media only screen and (max-width:605px){
  .img img {
    height: 300px;
    width: auto;
  }
  .conversionMain {
    min-height: 258px;
    width: 90%;
  }
  .debUtE{
    margin-bottom: 40px;
  }
}

@media only screen and (max-width:459px){
  .img img {
    height: 270px;
    width: auto;
  }
  .Content h2 {
    font-size: 25px;
  }
  .why h2 {
    color: var(--black);
    font-size: 25px;
    text-align: center;
    margin:25px 5px;
  }

  .cardRapide p {
  margin:0 20px;
  }
}
@media only screen and (max-width:431px){
  .cardRapide p {
    margin:0 30px;
    }
}
@media only screen and (max-width:401px){
  .cardRapide p {
    margin:0 45px;
    }
}

@media only screen and (max-width:417px){
  .img img {
    height: 233px;
    width: auto;
  }
  .Content h2 {
    font-size: 20px;
  }
  .why h2 {
    font-size: 20px;

  }



}
@media only screen and (max-width:387px){
  .cardRapide p {
    margin:0 60px;
    }


}

@media only screen and (max-width:355px){
  .img img {
    height: 195px;
    width: auto;
  }

  .cardRapide p {
    margin:0 80px;
  }


}

@media only screen and (max-width:1543px){
  .timelineVente img {
    height: 250px;
    width: auto;
  }
}


@media only screen and (max-width:1285px){
  .why h2 {
    font-size: 35px;
    text-align: center;
    padding:20px 10px;
  }

  .why p {
    color: var(--black);
    padding:0 50px;
    text-align: center;
  }

}

@media only screen and (max-width:1101px){
  .timelineVente img {
    height: 191px;
    width: auto;
  }
}

@media only screen and (max-width:907px){

  .why p {
    margin-bottom: 34px;
  }
}

@media only screen and (max-width:853px){
  .timelineVente {
    min-height: 241px;
  }

  .timelineVente img {
    height: 144px;
    width: auto;
  }

  .Content h2 {
    font-size: 35px;
    display: block;
    text-align: center;
    margin: 20px 0;
  }

}

@media only screen and (max-width:785px){
  .retrait {
    display: flex;
    flex-direction: column;
  }
  .whoUse {
    min-height: 373px;
    width: 95%;
    /* background-color: #00a186; */
    margin:0 15px;
  }
  .why h2 {
    font-size: 30px;
    text-align: left;
    padding:0;
  }
  .why, .timelineVente {
    padding:0 20px;
  }
  .why p {
    padding:0 10px;
    text-align: left;
  }
#PouQuoiTridem{
  margin-top: 50px;
}

.Content span {
  font-weight: bold;
  color: var(--black);
  margin-top:30px;
}
}

@media only screen and (max-width:631px){

.timelineVente{
  height: auto;
  width: 100vw;
  /* background-color: #00a108; */
  padding: 30px 0;
}
#timelineOne{
  display: none;
}
#timelineTwo{
  display: block;
  height: 650px;
  width: auto;
}
.followUse p{
color: var(--black2);
padding: 0 10px;
text-align: center;
}
}


@media only screen and (max-width:560px){
  .why h2 {
    font-size: 25px;
    text-align: center;
    padding:0;
    margin: 0;
    margin-bottom: 30px;
  }
  .detailsUse h5 {
    font-size: 15px;
    margin-top: 25px;
  }
}


@media only screen and (max-width:480px){
  .why h2 {
    font-size: 25px;
    text-align: center;
    margin: 30px 0;
  }
  .Content h2 {
    font-size: 25px;

  }
}

@media only screen and (max-width:1669px){
  .envoyerColis p {
    padding:0 50px;
  }

}

@media only screen and (max-width:951px){
  .envoyerColis h1 {
    font-size: 35px;
    margin-top: 10rem;
  }

  .progesseColis {
    width: 95%;
    height: 16px;
  }
  .contentProgress {
    margin-top: 10px;
    height: 50px;
    width: 95%;

  }
}
@media only screen and (max-width:795px){
  .envoyerColis p {
    padding:0 10px;
  }
  .cardPcont h3 {
    font-size: 15px;
  }
  .envoyerColis h1 {
    font-size: 25px;
  }
}

@media only screen and (max-width:593px){

  .cardPcont:nth-child(1){
    height: 100%;
    width: 100px;
    /* background-color: #b5c900; */
  }
  .cardPcont:nth-child(2){
    height: 100%;
    width: 200px;
    /* background-color: #8900c9; */
  }
  .cardPcont:nth-child(3){
    height: 100%;
    width: 100px;
    /* background-color: #00c986; */
  }

}

@media only screen and (max-width:465px){
  .envoyerColis h1 {
    font-size: 20px;
  }
  .sendColis {
    height: 50px;
    width: 170px;

  }
}

@media only screen and (max-width:437px){
  .cardPcont:nth-child(1){
    height: 100%;
    width: 85px;;
  }
  .cardPcont:nth-child(2){
    height: 100%;
    width: 180px;
  }
}

@media only screen and (max-width:387px){
  .envoyerColis h1 {
    font-size: 17px;
  }
  .cardPcont h3 {
    font-size: 12px;
  }
  .cardPcont:nth-child(1){
    height: 100%;
    width: 65px;;
  }
  .cardPcont:nth-child(2){
    height: 100%;
    width: 140px;
  }

  .cardPcont:nth-child(3){
    height: 100%;
    width: 80px;
  }

}

@media only screen and (max-width:315px){
  .envoyerColis h1 {
    font-size: 14px;
  }
}


@media only screen and (max-width:1563px){
  .Evavantage p {
    font-size: 17px;
    padding:0 100px;
    text-align: center;
  }
  .Evavantage h2 {
    color: var(--black);
    font-size: 35px;
    margin:20px 0;
  }

}


@media only screen and (max-width:1207px){
  .heroEnvoie {
    min-height: auto;
    width: 95%;
    /* background-color: #b5c900; */
    padding-right: 450px;
  }

.triandContentPhone{

    min-height: 800px;
    width: 60%;
    /* background-color: #00a186; */
    margin:0 20px;
  }


.heroEnvoieContent {
  min-height: 600px;
  width: 95%;
  display: flex;
  /* background-color: #00a108; */
  justify-content: center;
  align-items: center;
}

}

@media only screen and (max-width:1120px){
  .triandContentPhone h2 {
    font-size: 3em;
    min-height: 200px;
    width: 650px;
  }
  .triandContentPhone {
    min-height: 800px;
    width: 52%;
    margin:0 20px;
  }
}

@media only screen and (max-width:1065px){
  .triandContentPhone h2 {
    font-size: 2em;
    min-height: 200px;
    width: 650px;
  }
  .triandContentPhone h2 {
    font-size: 2em;
    min-height: auto;
    width: 650px;
    padding-right: 125px;
  }

  .heroEnvoie {
    min-height: auto;
    width: 95%;
    padding-right: 315px;
  }
}

@media only screen and (max-width:997px){

  .heroEnvoieContent {

    flex-direction: column;
  }

  .heroEnvoieContent img {
    height: 500px;
    width: auto;
    object-fit: cover;
    border-radius:10px;
  }

  .hcdiv {
    height: auto;
    width: 100%;
    /* background-color: yellow; */
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }


  .triandPhone {
    min-height: 800px;
    width: 46%;
    /* background-color: #00a186; */
    margin:0;
  }

  .Evavantage p {
    font-size: 17px;
    padding:0 50px;
    text-align: center;
  }
}

@media only screen and (max-width:817px){
  .Evavantage h2 {
    font-size: 35px;
    margin:20px;
    text-align: center;
  }

  .heroEnvoie {
    padding-right: 252px;
  }
  .EvCard {
    width: 409px;
  }
  .triandPhone {
    min-height: 800px;
    width: 49%;
    margin:0;
  }

  .sectionPhoneTriand {
    min-height: 400px;
    width: 100vw;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
  }

  .triandPhone {
    min-height: auto;
    width: 96%;
    margin:0;
  }
  .triandContentPhone h2 {
    font-size: 2em;
    min-height: auto;
    width: auto;
    padding-right: 0;
    text-align: left;
  }

  .cardGestes {
    margin-bottom: 50px;
  }
  .triandImgPhone {
    display: flex;
    justify-content: center;
  }

  .heroEnvoieContent img {
    height: 325px;
    width: 600px;
    object-fit: cover;
    border-radius:10px;
    margin-top: 50px;
  }
}

@media only screen and (max-width: 655px){
  .heroEnvoie {
    padding-right: 0;
    width: 95%;
  }
  .triandContentPhone h2 {
    font-size: 30px;
  }
  .Evavantage h2 {
    font-size: 30px;

  }

  .heroEnvoie h2 {
    font-size: 30px;
  }

  .heroEnvoieContent img {
    height: 278px;
    width: 516px;
  }

  .Evavantage p {
    padding:0 10px;
  }
}

@media only screen and (max-width: 533px){
  .heroEnvoieContent img {
    height: 249px;
    width: 415px;
  }
  .heroEnvoie h2 {
    font-size: 25px;
  }

  .triandContentPhone h2 {
    font-size: 25px;
  }
  .Evavantage h2 {
    font-size: 25px;
  }
  .Evavantage p {
    padding:0 10px;
    font-size: 15px;
  }

  .hcdiv p {
    font-size: 15px;
  }
  .heroEnvoie h5 {
    font-size: 15px;
  }
  .cardGesteGrand h3 {
    font-size: 15px;
  }
}

@media only screen and (max-width:433px){
  .hcdiv h2 {
    text-align: center;
  }
  .triandContentPhone h2 {
    font-size: 25px;
    text-align: center;
  }

  .heroEnvoieContent img {
    height: 215px;
    width: 383px;
    margin-top: 20px;
  }

  .EvCard {
    width: 95%;
  }
  .cardGesteGrand i {
    font-size: 22px;
  }
}

@media only screen and (max-width:397px){

  .heroEnvoieContent img {
    height: 191px;
    width: 327px;
    margin-top: 20px;
  }
  .listStepEnvoie {
    min-height: 200px;
    width: 95%;
  }
  .listStepEnvoie span {
    font-size: 15px;
  }
  .Evavantage h2 {
    font-size: 20px;
  }
  .triandContentPhone h2 {
    font-size: 20px;
    text-align: center;
  }
  .heroEnvoie h2 {
    font-size: 20px;
  }
}

@media only screen and (max-width:335px){
  .heroEnvoieContent img {
    height: 191px;
    width: 306px;
  }



}