@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Montserrat: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&family=Poppins:wght@100;300;400;500;600&display=swap');


*{
  margin: 0;
  padding: 0;
}
#Acceuill{
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(images/reunion.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 109vh;
}
.navbar{
  width: 1200px;
  height: 76px;
  margin: auto;
}
.icon{
  width: 200px;
  float: left;
  height: 70px;
  margin-top: 11px;
}
#logo1 {
  position: absolute;
  top: 2px;
  left: 20px;
  max-width: 70px; /* Ajustez la taille du logo selon vos besoins */
}
.logo{
  color: rgb(110, 185, 255);
  font-size: 17px;
  font-family:Arial;
  padding-left: 20px;
  float: left;
  padding-top: 10px;
}

.menu{
  width: 1000px;
  float: left;
  height: 90px;
}
ul{
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul li{
  list-style: none;
  margin-left: 90px;
  margin-top: 30px;
  font-size: 19px;
}

ul li a{
  text-decoration: none;
  color: #9bc3ff;
  font-family: Arial;
  font-weight: bold;
  transition: 0.2s ease-in-out;
}

ul li a:hover{
  color: #00d0df;
}
  
.language-switcher {
  text-align: center; /* Alignement des liens au centre */
  margin-top: 20px; /* Marge supérieure pour l'espacement */
}

.language-link {
  text-decoration: none; /* Suppression du soulignement */
  color: #b3defc; /* Couleur du texte */
  font-size: 15px; /* Taille de la police */
  margin: 0 10px; /* Marge horizontale entre les liens */
  padding: 5px 10px; /* Remplissage pour améliorer la convivialité */
  border: 1px solid #000c4e; /* Bordure autour des liens */
  border-radius: 5px; /* Coins arrondis pour une apparence plus douce */
  transition: background-color 0.3s ease; /* Animation de transition */
}

.language-link:hover {
  background-color: #00628f; /* Changement de couleur de fond au survol */
}
.content{
  width: 1200px;
  height: auto;
  margin: auto;
  color: #ffffff;
  position: relative;
  text-align: center;
}
  
.content .par{
  padding-left: 20px;
  padding-bottom: 10 px;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  letter-spacing: 1.2px;
  line-height: 70px;
  font-size: 20px;
  
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-20px);
  }
  100% {
      transform: translateY(0);
  }
}





.content h1{
  font-family: 'Times New Roman';
  font-size: 40px;
  padding-left: 20px;
  margin-top: 9%;
  letter-spacing: 2px;
}

.content .cn{
  width: 160px;
  height: 40px;
  background: rgb(110, 185, 255);
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
}
.content .cn a{
  text-decoration: none;
  color: black;
  transition: .3s ease;
}
.cn:hover {
  background-color: rgb(192, 225, 255);
}
.content span{
  color: rgb(110, 185, 255);
  font-size: 55px;
}





#a-propos {
  height: 100vh;
  margin: 0 10%; 
  
}
.title-section {
  margin-top: 50px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  color: rgb(110, 185, 255);
  font-size: 25px;
}
.sub-title-section {
  text-align: center;
  font-weight: bold;
  text-transform: capitalize;
  font-size: 20px;
}


#a-propos {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'popping', sans-serif;
  position: relative;
  min-height: 100vh;
  padding: 50px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(images/photo-1497215842964-222b430dc094.jpeg);
  background-position: center;
  height: 130vh; 
  

}
.apropos22{
  max-width: 800px;
  text-align: center;
  margin: 14px;
  
}
.apropos22 h2{
  font-size: 40px;
  font-weight: 500;
  color: #00bcd4;
}
.apropos22 p{
  font-weight: 300;
  letter-spacing: 2px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  margin: 6px;
  font-style: bold;
}
.paragraph-image {
  max-width: 270px; 
  margin-left: 80px ;
  margin-top: 15px;/* Ajustez la taille de l'image selon vos besoins */
}
.notremission p{
  font-weight: 300;
  color: #fff;
  margin: 3px;
}
.lina h2{
  font-size: 34px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
.lina ul{
  list-style-type: none;
  padding: 0;
}
.lina li{
  margin-bottom: 60px;
  height: 300px;
  width: 200px;
  background-color: #ffffff;
  padding: 3px;
  border: 0.3px solid rgba(114,226,174,0.2);
  border-radius: 8px;
  transition: .6s;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  cursor: pointer;
} 
.lina li strong{
  text-align: center;
  width: 100%;
  margin: 17px 0;
  color: #050f6d;
}
.lina li span{
  text-align: center;
  width: 100%;
  margin: 3px 0;
  font-size: 16px;
  color: #000000;
}





@media screen and (max-width: 768px) {
  main {
      padding: 10px;
  }
}















.container1{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 70px;
}
.row{
  display: flex;
  flex-wrap: wrap;

}
.container1 h2{
  font-size: 45px;
  margin-bottom: 20px;
  color: rgb(110, 185, 255);
  
}
.container1 h3{
  font-size: 27px;
  color: #ffffff;
  margin-bottom: 9px;
  
}
.container1 p{
  font-size: 20px;
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 20px;
}
.flex img{
  position: relative; /* Changez à "absolute" si vous voulez que l'image soit positionnée par rapport à son conteneur parent */
  top: 30%;
  margin-left: 54px;
  width: 409px;
  height: 200px;
}
.social-links{
  margin-bottom: 20px;
}
.social-links a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  color: #7d8aff;
  background-color: #000000;
  box-shadow: 0 2px 5px rgba(7, 154, 165, 0.3);
  transition: all 0.4s ease;
}
.social-links a:hover{
  transform: translate(-3px);
}
#Nos-Services{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins';
  min-height: 100vh;
  width: 100%;
  background-color: #191a2b;
  background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(images/dspic.png);
}
.service-wrapper{
  padding: 5% 8%;

}
.service{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service h1{
  color: #fff;
  font-size: 2rem;
  
  position: relative;
}
.cards{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
  margin-top: 50px;
  cursor: pointer;
}
.card{
  height: 400px;
  width: 390px;
  background-color: #ffffff;
  padding: 3px;
  border: 0.3px solid rgba(49, 119, 141, 0.2);
  border-radius: 8px;
  transition: .6s;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.card i{
  color: #091077;
  margin-top: 35px;
  margin-bottom: 20px;
  font-size: 2.6rem;
}
.card h2{
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
}
.card p{
  text-align: center;
  width: 100%;
  margin: 17px 0;
  color: #000000;
}
.card:hover{
  background-color: transparent;
  transform: translateY(-8px);
  border-color: rgb(110, 185, 255);
}
.card:hover i{
  color: rgb(123, 248, 217);
}
@media screen and (max-width:1200px){
  .cards{
    grid-template-columns: repeat(2,1fr);
  }
}@media screen and (max-width:900px){
  .cards{
    grid-template-columns: repeat(1,1fr);
  }
  cards.h1{
    font-size: 3.5rem;
  }
}
#contact{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'popping', sans-serif;
  position: relative;
  min-height: 100vh;
  padding: 50px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background:linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(images/pexels-photo.jpeg);
  background-size: cover;
}
#contact .content22{
  max-width: 800px;
  text-align: center;
  margin: 8px;
}
#contact .content22 h2{
  font-size: 36px;
  font-weight: 500;
  color: #00bcd4;
}
#contact .content22 p{
  
  font-weight: 300;
  color: #fff;
}
.container22 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.container22 .contactinfo{
  width: 60%;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.container22 .contactinfo .box22{
  position: relative;
  padding: 20px 0;
  display: flex;
}
.container22 .contactinfo .box22 .icon22{
  min-width: 60px;
  height: 60px;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 22px;
}
.container22 .contactinfo .box22 .text22{
  display: flex;
  margin-left: 20px;
  font-size: 16px;
  color: #ffffff;
  flex-direction: column;
  font-weight: 300;
}
.container22 .contactinfo .box22 .text22 h3{
  font-weight: 500;
  color: #00bcd4;
}
.contactform {
  width: 40%;
  padding: 40px;
  background: #fff;
}
.contactform h2{
  font-size: 30px;
  color: #333;
  font-weight: 500;
}
.contactform .inputbox{
  position: relative;
  width: 100%;
  margin-top: 10px;
}
.contactform .inputbox input,
.contactform .inputbox textarea
{
  width: 100%;
  padding: 5px 0;
  font-size: 16px;
  margin: 10px 0;
  border: none;
  border-bottom: 2px solid #333;
  outline: none;
  resize: none;
}
.contactform .inputbox span {
  position: absolute;
  left: 0;
  padding: 5px 0;
  font-size: 16px;
  margin: 10px 0;
  pointer-events: none;
  transition: 0.5s;
  color: #666;
}
.contactform .inputbox input:focus ~ span,
.contactform .inputbox input:valid ~ span,
.contactform .inputbox textarea:focus ~ span,
.contactform .inputbox textarea:valid ~ span {
  color: #e91e63;
  font-size: 12px;
  transform: translateY(-20px);
}
.contactform .inputbox input[type="submit"]{
  width: 100px;
  background: #00bcd4;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  main {
      padding: 10px;
  }
}















.container1{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 70px;
}
.row{
  display: flex;
  flex-wrap: wrap;

}
.container1 h2{
  font-size: 45px;
  margin-bottom: 20px;
  color: rgb(110, 185, 255);
  
}
.container1 h3{
  font-size: 27px;
  color: #ffffff;
  margin-bottom: 9px;
  
}
.container1 p{
  font-size: 20px;
  line-height: 1.5;
  color: #ffffff;
  margin-bottom: 20px;
}
.flex img{
  position: relative; /* Changez à "absolute" si vous voulez que l'image soit positionnée par rapport à son conteneur parent */
  top: 30%;
  margin-left: 54px;
  width: 409px;
  height: 200px;
}
.social-links{
  margin-bottom: 20px;
}
.social-links a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  color: #7d8aff;
  background-color: #000000;
  box-shadow: 0 2px 5px rgba(7, 154, 165, 0.3);
  transition: all 0.4s ease;
}
.social-links a:hover{
  transform: translate(-3px);
}
#Nos-Services{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins';
  min-height: 100vh;
  width: 100%;
  background-color: #191a2b;
  background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(images/dspic.png);
}
.service-wrapper{
  padding: 5% 8%;

}
.service{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service h1{
  color: #fff;
  font-size: 2rem;
  
  position: relative;
}
.cards{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
  margin-top: 50px;
  cursor: pointer;
}
.card{
  height: 400px;
  width: 390px;
  background-color: #ffffff;
  padding: 3px;
  border: 0.3px solid rgba(49, 119, 141, 0.2);
  border-radius: 8px;
  transition: .6s;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.card i{
  color: #091077;
  margin-top: 35px;
  margin-bottom: 20px;
  font-size: 2.6rem;
}
.card h2{
  color: #000000;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 1px;
}
.card p{
  text-align: center;
  width: 100%;
  margin: 17px 0;
  color: #000000;
}
.card:hover{
  background-color: transparent;
  transform: translateY(-8px);
  border-color: rgb(110, 185, 255);
}
.card:hover i{
  color: rgb(123, 248, 217);
}
@media screen and (max-width:1200px){
  .cards{
    grid-template-columns: repeat(2,1fr);
  }
}@media screen and (max-width:900px){
  .cards{
    grid-template-columns: repeat(1,1fr);
  }
  cards.h1{
    font-size: 3.5rem;
  }
}
#contact{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'popping', sans-serif;
  position: relative;
  min-height: 100vh;
  padding: 50px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background:linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(images/pexels-photo.jpeg);
  background-size: cover;
}
#contact .content22{
  max-width: 800px;
  text-align: center;
  margin: 8px;
}
#contact .content22 h2{
  font-size: 36px;
  font-weight: 500;
  color: #00bcd4;
}
#contact .content22 p{
  
  font-weight: 300;
  color: #fff;
}
.container22 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.container22 .contactinfo{
  width: 60%;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.container22 .contactinfo .box22{
  position: relative;
  padding: 20px 0;
  display: flex;
}
.container22 .contactinfo .box22 .icon22{
  min-width: 60px;
  height: 60px;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 22px;
}
.container22 .contactinfo .box22 .text22{
  display: flex;
  margin-left: 20px;
  font-size: 16px;
  color: #ffffff;
  flex-direction: column;
  font-weight: 300;
}
.container22 .contactinfo .box22 .text22 h3{
  font-weight: 500;
  color: #00bcd4;
}
.contactform {
  width: 40%;
  padding: 40px;
  background: #fff;
}
.contactform h2{
  font-size: 30px;
  color: #333;
  font-weight: 500;
}
.contactform .inputbox{
  position: relative;
  width: 100%;
  margin-top: 10px;
}
.contactform .inputbox input,
.contactform .inputbox textarea
{
  width: 100%;
  padding: 5px 0;
  font-size: 16px;
  margin: 10px 0;
  border: none;
  border-bottom: 2px solid #333;
  outline: none;
  resize: none;
}
.contactform .inputbox span {
  position: absolute;
  left: 0;
  padding: 5px 0;
  font-size: 16px;
  margin: 10px 0;
  pointer-events: none;
  transition: 0.5s;
  color: #666;
}
.contactform .inputbox input:focus ~ span,
.contactform .inputbox input:valid ~ span,
.contactform .inputbox textarea:focus ~ span,
.contactform .inputbox textarea:valid ~ span {
  color: #e91e63;
  font-size: 12px;
  transform: translateY(-20px);
}
.contactform .inputbox input[type="submit"]{
  width: 100px;
  background: #00bcd4;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 18px;
}

/* Styles pour les écrans de petite taille (smartphones) */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  #Acceuill{
    
    
  }
  .navbar{
    
    width: 100%;
    
  }
  .icon{
    width: 200px;
    float: left;
    
    margin-top: 11px;
  }
  #logo1 {
     /* Ajustez la taille du logo selon vos besoins */
    max-width: 50px; /* Ajustez la taille du logo selon vos besoins */
    
  }
  .logo{
    
    font-size: 14px;
    
  }
  
  .menu{
    width: 100%;
    float: left;
    
  }
  ul{
    
    flex-direction: column; /* Afficher les éléments de liste verticalement */
    margin-top: 20px;
  }
  
  ul li{
    
    margin: 0; /* Réinitialiser les marges */
    text-align: center; /* Centrer le texte */
    margin-bottom: 10px;
  }
  
  
 
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* Ajoutez vos styles pour les tablettes ici */
    .container1 h2 {
      font-size: 35px; /* Adjusted font size for headings */
    }
    
    .flex img {
      width: 100%; /* Adjusted width for images */
      margin-left: 0; /* Reset margin */
      margin-top: 20px; /* Adjusted margin */
    }
    
    .service-wrapper {
      padding: 5% 5%; /* Adjusted padding */
    }
    
    .card {
      width: 300px; /* Adjusted width for cards */
    }
  }
  
  /* Styles pour les écrans de grande taille (ordinateurs de bureau) */
  @media only screen and (min-width: 1025px) {
    /* Ajoutez vos styles pour les ordinateurs de bureau ici */
    
    .container1 h2 {
      font-size: 45px; /* Revert font size for headings */
    }
    
    .flex img {
      width: 409px; /* Revert width for images */
      margin-top: 30%; /* Revert margin top for images */
      margin-left: 54px; /* Revert margin left for images */
    }
    
    .service-wrapper {
      padding: 5% 8%; /* Revert padding */
    }
    
    .card {
      width: 390px; /* Revert width for cards */
    }
  }