/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  

/* Styles pour le corps de la page */
body {
  width: 100%; /* Remplit la largeur de l'écran */
  background-color: #ffffff;
  
}

/* Styles pour l'en-tête (header) */
header {
  background-color: #ffffff; /* Couleur de fond de l'en-tête */
  color: #000000; /* Couleur du texte de l'en-tête */
  display: flex; /* Utilise une disposition en ligne pour l'en-tête */
  justify-content: space-between; /* Espacement équitable entre les éléments de l'en-tête */
  align-items: center; /* Centre verticalement les éléments de l'en-tête */
  padding: 10px 20px; /* Marge intérieure de l'en-tête */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  
}

.navbar {
  display: flex;
  justify-content: flex-end; /* Espace équitablement les éléments */
  width: 100%;
  max-width: 1200px; /* Limite la largeur maximale pour aligner les éléments */
  align-items: center;
  flex-grow: 1; /* Permet au conteneur de navigation de prendre tout l'espace disponible */

}

/* Styles pour le logo */
.logo img {
  max-width: 800px; /* Ajustez la largeur du logo selon vos besoins */
  height: auto;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Styles pour la navigation (navbar) */
nav ul {
  list-style: none; /* Supprime les puces de liste */
  display: flex; /* Utilise une disposition en ligne pour la navigation */
  padding: 0;
  justify-content: space-between; /* Espace entre les éléments de navigation */
}

nav ul li {
  margin-right: 60px; /* Marge à droite de chaque élément de la navigation */
}

nav a {
  text-decoration: none; /* Supprime la décoration du texte des liens de navigation */
  color: #000000; /* Couleur du texte des liens de navigation */
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 550;
  transition: color 0.3s; /* Transition de couleur au survol du lien */
}

nav a:hover {
  color: rgba(27, 99, 255, 0.7); /* Couleur au survol du lien */
}


/* Footer styles */
.footer {
  background-color: #CCCFD3;
  color: #000000;
  padding: 20px 0;
}

.footer .footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5px;
}

.footer .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

.footer .col-md-4 {
  flex: 0 0 23%; /* Ajuster à 23% pour 4 colonnes avec un peu d'espace entre elles */
  max-width: 23%; /* Ajuster la largeur maximale */
  margin-bottom: 20px;
}

.footer h5 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #021634;
}

.footer p, .footer ul, .footer li {
  font-size: 14px;
  line-height: 1.6;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer ul li {
  margin-bottom: 10px;
}

.footer ul li i {
  margin-right: 10px;
}

.footer hr {
  border: 0;
  border-top: 1px solid #555;
  margin: 20px 0;
}

.footer .social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.footer .social-icons a {
  color: #fff;
  text-decoration: none;
  margin: 0;
  font-size: 18px;
  transition: color 0.3s;
}

.footer .social-icons a:hover {
  color: #b1cc56;
}

/* Responsive styles */
@media (max-width: 768px) {
  header {
    flex-direction: column; /* Utilise une disposition en colonne pour l'en-tête */
    align-items: flex-start; /* Aligne les éléments à gauche */
  }

  .logo {
      max-width: 150px;
      height: auto; /* Maintient les proportions du logo */
      margin-left: 10px; /* Ajuste la marge à gauche du logo */
      margin-top: 10px; /* Ajuste la marge en haut du logo */
      margin-bottom: 10px; /* Ajuste la marge en bas du logo */
  }

  .logo img{
      width: 150px;
  }

  nav ul {
      flex-direction: row; /* Utilise une disposition en colonne pour les éléments de navigation en version mobile */
      justify-content: center;
      width: 100%;
      padding: 0;
  }

  nav ul li {
      margin: 0 0px; /* Réduit la marge entre les éléments de navigation pour s'assurer qu'ils tiennent sur une seule ligne */
      white-space: nowrap; /* Empêche les éléments de navigation de se casser sur plusieurs lignes */
      margin-right: -4px;
  }

  nav a {
      font-size: 7px; /* Réduit la taille de la police des liens de navigation pour qu'ils tiennent mieux en ligne */
      padding: 7px 7px; /* Ajuste le padding pour réduire l'espace utilisé par chaque lien */
  }
  .footer .col-md-4 {
      flex: 0 0 100%;
      max-width: 100%;
  }

  .footer .row .col {
      text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 1368px) {
  header {
    flex-direction: column; /* Utilise une disposition en colonne pour l'en-tête */
    align-items: flex-start; /* Aligne les éléments à gauche */
  }

  .logo {
      max-width: 150px;
      height: auto; /* Maintient les proportions du logo */
      margin-left: 10px; /* Ajuste la marge à gauche du logo */
      margin-top: 10px; /* Ajuste la marge en haut du logo */
      margin-bottom: 10px; /* Ajuste la marge en bas du logo */
  }

  .logo img{
      width: 150px;
  }

  nav ul {
      flex-direction: row; /* Utilise une disposition en colonne pour les éléments de navigation en version mobile */
      justify-content: center;
      width: 100%;
      padding: 0;

  }

  nav ul li {
      margin: 0 0px; /* Réduit la marge entre les éléments de navigation pour s'assurer qu'ils tiennent sur une seule ligne */
      white-space: nowrap; /* Empêche les éléments de navigation de se casser sur plusieurs lignes */
  }

  nav a {
      font-size: 12px; /* Réduit la taille de la police des liens de navigation pour qu'ils tiennent mieux en ligne */
      padding: 10px 10px; /* Ajuste le padding pour réduire l'espace utilisé par chaque lien */
  }
  .footer .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
}

.footer .row .col {
    text-align: center;
}
}