*, * a{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   text-decoration: none;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}



:root {
	--poppins: 'Poppins', sans-serif;
	--lato: 'Lato', sans-serif;
	--light: #F9F9F9;
	--blue: #3C91E6;
   --debut:rgba(0, 87, 186, 0.734);
   --fin:rgba(50, 56, 137, 0.753);
   --Btn:rgb(254, 181, 67);
   --first:rgb(50, 56, 137);
   --second:rgb(0, 87, 186); ;
}

.noMoove{
   overflow-y: hidden;
}

#other{

   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

header{
   background: url(../image/bl.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: start;
   transition: all .3s ease;
}
.header, #other {
   position: relative;
   width: 100%;
   color: white;
   background: linear-gradient(to right, var(--debut) 20% , var(--fin) 80%);
}

#other .logo{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 30px;
}
.header #headPage{
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 10px;
   padding-left: 30px;
   padding-right: 30px;
}

#headPage .logo img{
   width: 110px;
   border-radius: 12px;
}
#headPage a{
   padding: 10px 10px;
   color: white;
   cursor: pointer;
   border: 3px solid transparent;
   border-radius: 7px;
   transition: all  .4s ease;
}

#headPage a:hover{
   background-color: #052b506a;
   border-bottom: 3px solid white;
}

header button{
   background: none;
   outline: none;
   border: none;
}

#headPage button i{
   font-size: 1.5rem;
}



#headPage {
   padding-top: 50px;
}
#headPage nav{
   display: flex;
   font-weight: 600;
   font-size: 1.2rem;
   gap: 50px;
}

#headPage nav a, header #end{
   scroll-behavior: smooth;
}

#headPage  .menu{

   display: none;
}

#headPage  .menu button{
   cursor: pointer;
   padding: 8px;
   border-radius: 20px;
   transition: all .4s ease;
}

#headPage  .menu button:hover{
   background: linear-gradient(to right,var(--second) 20%,var(--first) 80% );
}
header .navContainer{
   margin-top: 80px;
   padding-bottom: 90px;
   display: flex;
   justify-content: center;
}

/*=========================barre de navigation sur mobile =======================*/

#mobile{ 
   top: 0;
   left: 0;
   position: absolute;
   width: 100vw;
   height: 100%;
   background: rgba(238, 238, 238, 0.899);
   transition: all .4s ease;
   display: none;
   z-index: 200;
}

#mobile .closer{
   width: 100%;
   padding: 30px 50px;
   display: flex;
   justify-content: space-between;
}

#mobile .choice{
   width: 100%;
   height: 80%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.choice a{
   text-align: center;
   width: 100%;
   padding: 20px 0;
   margin-bottom: 4%;
   font-weight: bold;
   font-size: 1.6rem;
   color: rgb(93, 91, 91);
   transition: all .4s ease;
   cursor: pointer;
   border-bottom: 4px solid transparent;
}


.choice a:hover{
   border-bottom: 4px solid rgb(1, 170, 199);
   color: white;
   background: linear-gradient(to right,var(--second) 20%,var(--first) 80% );

}

/* ======================= Le slider de l'entete*/
.navContainer .navDadasection{
   margin-top: 30px;
   width: 80%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10%;
}

.navDadasection .leftPart{
   flex: 45%;
}

.navDadasection .rightPart{
   flex: 45%;
   display: flex;
   align-items: center;
   gap: 10%;

}

.navDadasection .leftPart h1{
   font-size: 2.8rem;
   margin-bottom: 20px;
}

.leftPart #second{
   display: none;
}

.navDadasection .leftPart p{
   text-align: center;
   line-height: 1.5;
   max-width: 400px;
}
.leftPart button{
   margin-top: 15px;
   background-color: var(--Btn);
   font-size: 1.4rem;
   font-weight: bold;
   color: white;
   padding: 9px 14px;
   border-radius: 10px;
   cursor: pointer;
   transition: all .3s ease;
}

.leftPart button:hover{
   scale: .8;
   background-color: rgb(235, 160, 40);

}

.rightPart .sliders{
   width: 80%;
}

.rightPart .slide{
   width: 100%;
}

.rightPart .sliders .slide h1{
   text-align: center;
}

.navDadasection .rightPart button {
   width: 40px;
   height: 40px;
   background: white;
   padding: 4px;
   border-radius: 50px;
   cursor: pointer;
   transition: all .3s ease;
}

.navDadasection .rightPart button:hover{
   background: var(--Btn);
}

.rightPart button i{
   font-size: 1.4rem;
}

.rightPart .slide{
   display: none;
}

.slide.displaySlide{
   display: block;
}

.customs-shape-divider-bottom-1712663058 {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   line-height: 0;
   transform: rotate(180deg);
}

.customs-shape-divider-bottom-1712663058 svg {
   position: relative;
   display: block;
   width: calc(147% + 1.3px);
   height: 69px;
   transform: rotateY(180deg);
}

.customs-shape-divider-bottom-1712663058 .shape-fill {
   fill: #FFFFFF;
}


/* ================= nos services =============*/
#Bienvenu{
   margin-top: 100px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

 .theTitle h1,.tcontent #title h1{
   color: var(--debut);
   font-size:2.6rem;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--Btn);
}

#Bienvenu .BienContainer{
   width: 80%;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.grids{
   width: 100%;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 20px;
   padding: 10px;
   margin-top: 60px;
}

.grids .grid{
   color: rgb(93, 91, 91);
   padding: 20px;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.26);
   transition: all .4s ease-in-out;
}

.grids .grid:hover{
   color: white;
   background: linear-gradient(to right,var(--second) 20%,var(--first) 80% );
}


.grid .pic{
   margin-top: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.grid .list span{
   text-align: center;
}
.pic .icon{
   padding: 10px;
   border: 1px solid rgba(128, 128, 128, 0.773);
   border-radius: 50%;
   background-color: white;
}

.pic h1{
   padding: 9px 4px;
   text-align: center;
}

.pic .icon i{
   color: var(--debut);
   font-size: 1.9rem;
}


.grid .list{
   padding: 10px 20px;
}

.grid .list .item{
   padding: 7px 0;
   font-size: 1.3rem;
   display: flex;
   align-items: center;
}

.grid .list .item span{
   padding-left: 5px;
}

.sectionthree{
   margin-top: 130px;
   background: linear-gradient(to right,var(--first) 20%,var(--second) 80% );
   display: flex;
   flex-direction: column;
   align-items: center;
   color: white;
   padding: 0 14%;
}

.sectionthree .h1{
   font-size: 2.6rem;
   padding-top: 50px;
   padding-bottom: 3px;
   margin-bottom: 30px;
   border-bottom: 2px solid var(--Btn);
   text-align: center;
}

.sectionthree .p{
   padding-top: 20px;
   text-align: center;
   font-size: 1.2rem;
   line-height: 1.5;
}

.sectionthree .last{
   padding-bottom: 70px;
}
.sgrid-container{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   padding: 50px 0;
}

.sgrid-container .sgrid{
   display: flex;
   align-items: center;
   gap: 4px;
}




.topcustom-shape-divider-top-1712684857 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   line-height: 0;
}

.topcustom-shape-divider-top-1712684857 svg {
   position: relative;
   display: block;
   width: calc(100% + 1.3px);
   height: 121px;
}

.topcustom-shape-divider-top-1712684857 .shape-fill {
   fill: #FFFFFF;
}
/* ========== Nos partenaire =============*/

.partenaires {
   margin: 60px 0;
   display: flex;
   justify-content: center;
   align-items: center;
}

.partenaires .tcontent{
   width: 80%;
}
.partenaires .grids{
   width: 100%;
   grid-template-columns: repeat(4, 1fr);
   -ms-grid-row-align: center;

}
.partenaires .grids .grid{
   
   width: 200px;
}

.partenaires .grids .grid:hover{
   background: white;
   scale: .8;

}

/* ========== notre equippe =============*/

#team{
   position: relative;
   margin-top: 90px;
   padding-bottom: 40px;
   width: 100%;
   background: linear-gradient(to right,var(--second) 20%,var(--first) 80% );
}


#team .teamContainer{
   width: 100%;
   padding-top: 100px;
   display: flex;
   justify-content: center;
   color: white;
}

.teamContainer .tcontent{
   width: 80%;
   height: auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.tcontent #title{
   display: flex;
   justify-content: center;
   color: white;
}

.tcontent #title h1{
   color: white;
}

.tcontent .grid-container {
   margin-top: 70px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.tcontent .grid{
   background-color: white;
   color: var(--debut);
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}


.tcontent .grid img {
   width: 100%;
   height: auto;
}

/* Section contactez nous*/

#callUs{
   width: 100%;
   display: flex;
   justify-content: center;
   padding-top: 90px;
}
.callContainer{
   width: 80%;
   display: flex;
   flex-direction: column;
   align-items: center;
}


.callContainer .formContainer{
   margin-top: 90px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 5%;
}

/* le formulaire */
.formContainer .carte{
   flex: 47.5%;
}

.formContainer .formulaire{
   flex: 47.5%;
}

.formulaire form{
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}

form .usersInfo{
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 9%;
}

form .usermail, form .usermessage{
   width: 100%;
   display: flex;
   flex-direction: column;
   margin: 20px 0;
}

.formContainer label{
   font-size: 1.1rem;
   font-weight: bold;
   color: var(--debut);
}


.usersInfo .name{
   display: flex;
   flex-direction: column;
   width: 100%;
} 

.usersInfo .name input, .usermail input{
   width: 100%;
   transition: all .3s ease;
   border-bottom: 2px solid transparent;
}

.usersInfo .name input:focus, .usermail input:focus{
   border-bottom: 2px solid var(--debut);
}

.name input, .usermail input, .usermessage textarea{
   outline: none;
   border: none;
   margin-top: 10px;
   border-radius: 7px;
   background: rgba(186, 181, 181, 0.622);
   font-size: 1.2rem;
   padding: 10px 15px;

}

.button {
   font-family: inherit;
   font-size: 20px;
   background: linear-gradient(to right,var(--second) 20%,var(--first) 80% );
   color: white;
   padding: 0.7em 1em;
   padding-left: 0.9em;
   display: flex;
   align-items: center;
   border: none;
   border-radius: 16px;
   overflow: hidden;
   transition: all 0.2s;
   cursor: pointer;
}
 
 .button span {
   display: block;
   margin-left: 0.3em;
   transition: all 0.3s ease-in-out;
}

.button svg {
   display: block;
   transform-origin: center center;
   transition: transform 0.3s ease-in-out;
}

.button:hover .svg-wrapper {
   animation: fly-1 0.6s ease-in-out infinite alternate;
}

.button:hover svg {
   transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

.button:hover span {
   transform: translateX(5em);
}

.button:active {
      transform: scale(0.95);
}

/* le footer de la page */
footer {
   margin-top: 100px;
   height: auto;
   background-image: url(../image/bl.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   color: white;
}

footer .foot {
   display: flex;
   flex-direction: column;
   align-items: center;
   background: linear-gradient(to right, var(--debut) 20%, var(--fin) 80%); /* Correction de la déclaration de couleur */
}

.foot .logofooter {
   padding-top: 40px;
   width: 100%;
   margin-bottom: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.foot .logofooter img , #other img{
   border-radius: 20px;
   max-width: 200px;
}
.foot .gridFoot {
   width: 80%;
   display: grid;
   gap: 20px;
   grid-template-columns: repeat(3, 1fr);
   justify-items: center;
   padding-bottom: 15px;
   border-bottom: 1px solid white;
}

.gridFoot .son {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.son .single-cta {
   display: flex;
   align-items: center;
   gap: 10%;
}

 .son .single-cta .cta-text{
   width: 300px;
} 

.son .single-cta i {
   font-size: 2rem;
}

.son .single-cta h4{
   font-size: 1.5rem;
}

footer .author {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center; 
   padding: 20px 0;
   background-color: transparent; 
}

footer a{

   color: rgba(255, 255, 255, 0.496);
}

footer .grids{
   margin-top: 20px;
   grid-template-columns: repeat(4, 1fr);
   justify-items: center;
}
footer .grids .grid{
   color: white;
   border: none;
   box-shadow: none; 
}

footer .grids .grid h3{
   margin-bottom: 10px;
}

footer .grids .grid p{

   margin: 7px 0;
}
footer .grids .grid:hover{
   background: none;
}

.animate-on-scroll {
   opacity: 0;
   transform: translateY(50px);
   transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.animate-on-scroll.is-visible {
   opacity: 1;
   transform: translateY(0);
}

@keyframes fly-1 {
   from {
      transform: translateY(0.1em);
   }

   to {
      transform: translateY(-0.1em);
   }
}

@media  screen and (max-width: 1145px) {
   .son .single-cta .cta-text{
      max-width: 200px;
   } 
   
}
@media screen and (max-width: 1150px) {

   .callContainer,
   .teamContainer .tcontent,
   #Bienvenu .BienContainer,
   .navContainer .navDadasection,
   .partenaires .tcontent{
   
      width: 95%;
   }

   #headPage nav{
      gap: 12px;
   }
}


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

   .header{
      padding-top: 30px;
      padding-right: 10px;
   }

   #headPage  .menu{
      display: block;
   }

   .menu .button{
      border: 2px solid red;
   }

   #headPage  nav{
      display: none;
   }

   #mobile .closer button{
      border: none;
      outline: none;
      padding: 6px;
      border-radius: 7px;
      cursor: pointer;
      transition: all .4s ease;
      background-color: gray;
   }
   #mobile .closer button:hover{
      background-color: red;
   }
   #headPage button i, #mobile .closer i{
      font-size: 1.9rem;
   }
   .navContainer .navDadasection{
      margin-top: 17px;
      flex-direction: column;
      padding-bottom: 60px;
   }


   .leftPart{
      width: 100%;
      flex: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
   }
   .leftPart #first{
      display: none;
   }

   .leftPart #second{
      display: block;
      text-align: center;
   }

   .navDadasection .rightPart{
      flex: none;
      width: 100%;
      padding:0 4%;
   }




   .grids{
      grid-template-columns: repeat(2, 1fr);
   }

   .foot .gridFoot {
      width: 100%;
      grid-template-columns: repeat(2, 1fr);
   }


   .partenaires .grids{
      grid-template-columns: repeat(3, 1fr);
   }

   .callContainer .formContainer{
      flex-direction: column;
      gap: 5%;
   }

   /* le formulaire */
   .formContainer .carte{
      flex: none;
      width: 100%;
   }

   .formContainer .formulaire{
      margin-top: 40px;
      flex: none;
      width: 100%;
   }

}

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

   .partenaires .grids{
      grid-template-columns: repeat(2, 1fr);
   }

   .partenaires .grids .grid{
      width: 300px;
   }

}

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

   #headPage .logo img{
      width: 90px;
      border-radius: 12px;
   }

   #headPage button i, #mobile .closer i{
      font-size: 1.9rem;
   }

   .grids{
      grid-template-columns: repeat(1, 1fr);
   }

   .partenaires .grids{
      grid-template-columns: repeat(1, 1fr);
      gap: 20px;
   }

   .son .single-cta {

      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10%;
   }

   .sectionthree{

      padding: 0 2.5%;
   }

   .son .single-cta .cta-text{
      text-align: center;
   }
   .partenaires .grids .grid{
      width: 100%;
   }

   .foot .gridFoot {

      grid-template-columns: repeat(1, 1fr);
   }
   footer .grids{
      grid-template-columns: repeat(2, 1fr);
   }
   form .usersInfo{
      flex-direction: column;
   }

      form .usersInfo .prenom{

         margin-top: 17px;
      }
}