body {background-color: #DAD7CD;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
.rotate-image {
  display: inline-block;
  width: 100px; /* Largeur de votre logo */
  height: 100px; /* Hauteur de votre logo */
  border-radius: 50%; /* Pour arrondir l'image */
  overflow: hidden; /* Pour s'assurer que l'image est bien arrondie */
  animation: rotateAnimation 4s linear infinite; /* Animation de rotation */
}

@keyframes rotateAnimation {
  from {
      transform: rotate(0deg); /* Rotation de départ (0 degrés) */
  }
  to {
      transform: rotate(360deg); /* Rotation finale (360 degrés = une rotation complète) */
  }
}
/*
header {
  background-color: #333;
  color: white;
  padding: 1em 0;
  text-align: center;
}

header h1 {
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 0 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}*/
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Empêche le défilement horizontal */
}

header {
  position: fixed; /* Fixe le header en haut de la page */
  width: 100%;
  z-index: 1000; /* Assure que le header est au-dessus du contenu principal */
  background-color: #ffffff; /* Couleur de fond du header */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre légère pour le header */
}

.navbar {
  padding: 10px 0; /* Espacement du contenu dans la barre de navigation */
  margin: 10px;
}

.main {
  margin-top: 120px; /* Décale le contenu vers le bas pour éviter qu'il soit masqué par le header fixe */
}

body, html {
  margin: 0;
  padding: 0;
}

header {
  position: fixed; /* Fixe le header en haut de la page */
  width: 100%;
  z-index: 1000; /* Assure que le header est au-dessus du contenu principal */
  background-color: #ffffff; /* Couleur de fond du header */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre légère pour le header */
}

.navbar {
  padding: 5px 0; /* Espacement du contenu dans la barre de navigation */
}

.main {
  margin-top: 80px; /* Décale le contenu vers le bas pour éviter qu'il soit masqué par le header fixe */
}

.background-scroll {
  display: flex; /* Utilise Flexbox pour aligner horizontalement les images */
  overflow-x: auto; /* Permet le défilement horizontal des images */
  scroll-behavior: smooth; /* Défilement fluide */
  white-space: nowrap; /* Empêche le saut de ligne entre les images */
  height: 80vh; /* Hauteur réduite des images de fond */
  margin: 20px;
  
}

.bg-image {
  
  min-width: 100vw; /* Largeur minimale équivalente à la largeur de la vue */
  height: 100%; /* Hauteur équivalente à 100% de la section parente */
  background-size: cover; /* Redimensionne l'image pour couvrir toute la div */
  background-position: center; /* Centre l'image horizontalement */
  display: inline-block; /* Affiche les images de fond en ligne */
  vertical-align: top; /* Alignement vertical en haut */
  animation: background-scroll 30s linear infinite; /* Animation de défilement */
}

@keyframes background-scroll {
  from {
      transform: translateX(0); /* Début de la translation, pas de décalage */
  }
  to {
      transform: translateX(-300%); /* Fin de la translation, décalage de 300% vers la gauche */
  }
}


.navbar-nav {
  margin: 0 auto; /* Centre la liste horizontalement */
  display: table; /* Pour centrer avec margin: 0 auto; */
  padding: 0; /* Supprime le padding par défaut de la liste */
  text-align: center; /* Centre le texte des éléments de liste horizontalement */
}

.nav-item {
  display: inline-block; /* Affiche les éléments de liste en ligne */
  margin: 0 10px; /* Marge autour des éléments de liste */
}

section {
  padding: 2em;
  border-bottom: 1px solid #ccc;
}

.project, .blog-post, .testimonial {
  margin-bottom: 1em;
}

.skill-chart {
  width: 100%;
  height: 300px;
}

form {
  display: flex;
  flex-direction: column;
}

form label {
  margin-top: 1em;
}

form input, form textarea, form button {
  padding: 0.5em;
  margin-top: 0.5em;
}

form button {
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
}

footer {
  text-align: center;
  padding: 1em 0;
  background-color: #333;
  color: white;
}
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

footer {
  background-color: #0B0D21;
  color: #FFFFFF;
  padding: 20px;
}

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

.footer-left, .footer-middle, .footer-right {
  flex: 1;
  padding: 10px;
}

.footer-logo {
  width: 100px;
  margin-bottom: 10px;
}

.footer-middle {
  display: flex;
  justify-content: space-around;
}

.footer-section {
  margin: 0 10px;
}

.footer-section h4 {
  margin-bottom: 10px;
}

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

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

.social-media, .app-links, .payment-methods {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.social-media a, .app-links a, .payment-methods img {
  margin-bottom: 10px;
}

.payment-methods img {
  width: 50px;
}