.custom-section-about {
  width: 100%; /* La section prend toute la largeur de l'écran */
  display: flex;
  justify-content: center; /* Centre le contenu */
}

.custom-section-about .container {
  width: 100%;
  max-width: 1200px; /* Limite la largeur maximale pour éviter un texte trop étalé sur grand écran */
  padding: 32px 14px;
}

.custom-section-about h2 {
  font-size: 2.1rem;
  margin: 20px 0px 10px;
  text-align: center; /* Centrage du titre pour une meilleure adaptabilité */
}

.custom-section-about p {
  width: 100%; /* Prend toute la largeur disponible */
  max-width: 990px; /* Évite que le texte soit trop étiré sur les grands écrans */
  font-size: 1.2rem;
  margin-bottom: 10px;
  text-align: justify; /* Justifie le texte pour une meilleure lisibilité */
  margin-left: auto;
  margin-right: auto;
}

.custom-section-un {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Centrer le contenu de la section */
  padding: 32px 24px 0px;
  margin: 0px 59px;

  height: 560px;
}

.text-content-un {
  width: 50%;
  margin-left: 150px;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrer verticalement le contenu à l'intérieur de la div */
  align-items: flex-start; /* Aligner à gauche */
  text-align: left;
}

.text-content-un h2 {
  font-size: 2.1rem;
  font-weight: 100;

  margin: 20px 0px 10px;
}

.text-content-un p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 300;

  width: 80%;
}

.image-content-un {
  width: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.image-content-un img {
  max-width: 100%;
  height: auto;
}
.custom-section-deux {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Centrer les deux blocs horizontalement */
  padding: 0px 24px 64px 0px;
  margin: 0px 59px;
  height: 560px;
}

.image-content-deux {
  width: 50%;
  display: flex;
  justify-content: flex-start; /* Aligner l'image à gauche */
}

.image-content-deux img {
  max-width: 100%;
  height: auto;
}

.text-content-deux {
  width: 50%;
  margin-right: 150px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrer verticalement le contenu à l'intérieur de la div */
  align-items: flex-end; /* Aligner à gauche */
  text-align: right;
}

.text-content-deux h2 {
  font-size: 2.1rem;
  margin: 20px 0px 10px;
  font-weight: 100;
}

.text-content-deux p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 300;
  width: 80%;
}

@media screen and (max-width: 1200px) {
  .custom-section-about .container {
    padding: 32px 14px 12px 14px;
  }
}
@media screen and (max-width: 576px) {
  .custom-section-about h2 {
    font-size: 1.8rem;
  }
  .custom-section-about p {
    font-size: 1rem;
  }
}
@media screen and (max-width: 1200px) {
  .custom-section-un {
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
    padding: 12px 16px 32px 16px;
    margin: 0;
  }

  .text-content-un {
    width: 100%;
    margin: 0;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .text-content-un h2 {
    font-size: 1.8rem;
  }

  .text-content-un p {
    font-size: 1rem;
    width: 90%;
  }

  .image-content-un {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }

  .image-content-un img {
    max-width: 90%;
    height: auto;
  }
}
@media screen and (max-width: 1200px) {
  .custom-section-deux {
    flex-direction: column-reverse; /* Inverse l'ordre des enfants */
    align-items: center;
    text-align: center;
    height: auto;
    padding: 32px 16px;
    margin: 0;
  }

  .text-content-deux {
    width: 100%;
    margin: 0;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .text-content-deux h2 {
    font-size: 2rem;
  }

  .text-content-deux p {
    font-size: 1.1rem;
    width: 90%;
  }

  .image-content-deux {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }

  .image-content-deux img {
    max-width: 90%;
    height: auto;
  }
}

.custom-section-trois {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Centrer le contenu de la section */
  padding: 64px 24px 0px;
  margin: 0px 59px;
  height: 560px;
}

.text-content-trois {
  width: 50%;
  margin-left: 150px;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrer verticalement le contenu à l'intérieur de la div */
  align-items: flex-start; /* Aligner à gauche */
  text-align: left;
}

.text-content-trois h2 {
  font-size: 2.1rem;
  font-weight: 100;

  margin: 20px 0px 10px;
}

.text-content-trois p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 300;

  width: 80%;
}

.image-content-trois {
  width: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.image-content-trois img {
  max-width: 100%;
  height: auto;
}
.custom-section-quatre {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Centrer les deux blocs horizontalement */
  padding: 0px 24px 64px 0px;
  margin: 0px 59px;
  height: 560px;
}

.image-content-quatre {
  width: 50%;
  display: flex;
  justify-content: flex-start; /* Aligner l'image à gauche */
}

.image-content-quatre img {
  max-width: 100%;
  height: auto;
}

.text-content-quatre {
  width: 50%;
  margin-right: 150px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrer verticalement le contenu à l'intérieur de la div */
  align-items: flex-end; /* Aligner à gauche */
  text-align: right;
}

.text-content-quatre h2 {
  font-size: 2.1rem;
  margin: 20px 0px 10px;
  font-weight: 100;
}

.text-content-quatre p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 300;
  width: 80%;
}
@media screen and (max-width: 1200px) {
  .custom-section-trois {
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
    padding: 32px 16px;
    margin: 0;
  }

  .text-content-trois {
    width: 100%;
    margin: 0;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .text-content-trois h2 {
    font-size: 1.8rem;
  }

  .text-content-trois p {
    font-size: 1rem;
    width: 90%;
  }

  .image-content-trois {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }

  .image-content-trois img {
    max-width: 90%;
    height: auto;
  }
}
@media screen and (max-width: 1200px) {
  .custom-section-quatre {
    flex-direction: column-reverse; /* Inverse l'ordre des enfants */
    align-items: center;
    text-align: center;
    height: auto;
    padding: 32px 16px;
    margin: 0;
  }

  .text-content-quatre {
    width: 100%;
    margin: 0;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .text-content-quatre h2 {
    font-size: 2rem;
  }

  .text-content-quatre p {
    font-size: 1.1rem;
    width: 90%;
  }

  .image-content-quatre {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }

  .image-content-quatre img {
    max-width: 90%;
    height: auto;
  }
}

@media screen and (max-width: 350px) {
  .text-content-un h2 {
    font-size: 1.5rem;
  }
  .text-content-deux h2 {
    font-size: 1.5rem;
  }
  .text-content-trois h2 {
    font-size: 1.5rem;
  }
  .text-content-quatre h2 {
    font-size: 1.5rem;
  }
  .custom-section-un {
    padding: 12px 16px;
  }
  .custom-section-deux {
    padding: 12px 16px;
  }
  .custom-section-trois {
    padding: 12px 16px;
  }
  .custom-section-quatre {
    padding: 12px 16px;
  }
}

/*Bandeau*/
/* styles.css */
.custom-section-bandeau-about {
  height: 230px;
  padding: 64px 14px;
  background-color: #32374b;
}

.custom-section-bandeau-about .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.custom-section-bandeau-about .title {
  font-size: 2rem;
  font-weight: 200;
  color: white;
  margin-bottom: 24px;
}
.container-button-bandeau {
  padding: 0 10px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media screen and (max-width: 560px) {
  .custom-section-bandeau-about .title {
    font-size: 1.8rem;
    text-align: center;
  }

  .custom-section-bandeau-about {
    height: 260px;
  }
}
@media screen and (max-width: 350px) {
  .custom-section-bandeau-about .title {
    font-size: 1.5rem;
    text-align: center;
  }
  .custom-section-bandeau-about {
    height: 300px;
  }
}
/* Mise en place Header*/
/* styles.css */
.custom-section-header-about {
  height: 230px;
  padding: 64px 14px;
  background-color: #32374b;
}

.custom-section-header-about .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
}

.custom-section-header-about .title {
  font-size: 3rem;
  font-weight: 200;
  color: white;
  margin: 0;
}

.custom-section-header-about .description {
  font-size: 1.2rem;
  color: white;
  margin-top: 1.5rem;
}
@media screen and (max-width: 620px) {
  .custom-section-header-about .title {
    font-size: 2.3rem;
  }

  .custom-section-header-about .description {
    font-size: 1.1rem;
  }
  .custom-section-header-about {
    height: 260px;
  }
}

@media screen and (max-width: 350px) {
  .custom-section-header-about .title {
    font-size: 2rem;
  }

  .custom-section-header-about .description {
    font-size: 1.1rem;
  }
  .custom-section-header-about {
    height: 300px;
  }
}

@media screen and (max-width: 300px) {
  .custom-section-header-about .title {
    font-size: 1.8rem;
  }

  .custom-section-header-about .description {
    font-size: 1rem;
  }
  .custom-section-header-about {
    height: 300px;
  }
}