:root {
  --primary: #FFA2A0;
  --secondary: #B0A750;
  --light: #FFF7F5;
  --dark: #000000;
  --gradient-start: #FFC0BF; 
  --gradient-middle: #F7A19A; 
  --gradient-end: #FDE0C9; 
  --button-color: #d5a8dc;
  --icon-color: #E55653;
  --hover-color: #fe9c88;
  --button-border-color: #d5a8dc; /* Ajouter une variable pour la couleur des bordures des boutons */
}

/* Styles des boutons */
.btn {
  display: inline-block; /* Permet au bouton de s'adapter à son contenu */
  padding: 10px 20px; /* Ajuste l'espace à l'intérieur du bouton */
  font-weight: 500; /* Garder le poids de police existant */
  color: var(--light);
  background: var(--button-color);
  border: 1px solid var(--button-border-color);
  transition: 0.5s;
  white-space: nowrap; /* Empêche le texte de s'enrouler */
  width: auto; /* Ajuste la largeur automatiquement en fonction du contenu */
  min-width: 50px; /* Largeur minimale optionnelle pour une taille cohérente */
}

.btn:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background: var(--secondary);
  border: 1px solid var(--secondary);
}

/* Ajustement pour les boutons carrés */
.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: inline-flex; /* Utiliser flex pour centrer le contenu */
  align-items: center;
  justify-content: center;
  font-weight: normal;
  border-radius: 50px;
  background: var(--button-color);
  border: 1px solid var(--button-border-color);
  width: auto; /* Ajuste la largeur automatiquement en fonction du contenu */
  min-width: 40px; /* Largeur minimale pour conserver la forme */
  height: auto; /* S'adapte automatiquement à la hauteur du contenu */
}

.btn-square:hover,
.btn-sm-square:hover,
.btn-lg-square:hover {
  background: var(--secondary);
  border: 1px solid var(--secondary);
}


/* Autres styles déjà présents */
.fa {
  color: var(--icon-color) !important;
}

#spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
  z-index: 99999;
}

#spinner.show {
  transition: opacity 0.5s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}
.back-to-top {
  position: fixed;
  display: none;
  right: 45px;
  bottom: 100px; /* Augmenter la valeur pour déplacer la flèche plus haut */
  z-index: 999; /* S'assurer que la flèche est au-dessus d'autres éléments */
}

h1,
h2,
.fw-bold {
  font-weight: 700 !important;
  color: var(--dark);
  font-family: "Abril Fatface", serif;
}

h3,
h4,
.fw-semi-bold {
  font-weight: 600 !important;
  color: var (--dark);
  font-family: "Abril Fatface", serif;
}

h5,
h6,
.fw-medium {
  font-weight: 500 !important;
  color: var(--dark);
  font-family: "Abril Fatface", serif;
}

body,
p,
a,
li,
span {
  font-family: "Montserrat", sans-serif;
}

/* Autres styles de boutons et éléments */
.navbar .dropdown-toggle::after {
  border: none;
  content: "\f067";
  font-family: "Font Awesome 5 Free";
  font-size: 10px;
  font-weight: bold;
  vertical-align: middle;
  margin-left: 8px;
}

.navbar-light .navbar-nav .nav-link {
  position: relative;
  margin-right: 25px;
  padding: 35px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--light) !important;
  outline: none;
  transition: 0.5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
  padding: 20px 0;
  color: var(--dark) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--secondary) !important;
}

.navbar-light .navbar-brand h1 {
  color: #ffffff;
}

.navbar-light .navbar-brand img {
  max-height: 60px;
  transition: 0.5s;
}

.sticky-top.navbar-light .navbar-brand img {
  max-height: 45px;
}

@media (max-width: 991.98px) {
  .sticky-top.navbar-light {
    position: relative;
    background: #ffffff;
  }

  .navbar-light .navbar-collapse {
    margin-top: 15px;
    border-top: 1px solid #dddddd;
  }

  .navbar-light .navbar-nav .nav-link,
  .sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 10px 0;
    margin-left: 0;
    color: var(--dark) !important;
  }

  .navbar-light .navbar-brand h1 {
    color: var(--primary);
  }

  .navbar-light .navbar-brand img {
    max-height: 45px;
  }
}

@media (min-width: 992px) {
  .navbar-light {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    border-bottom: 1px solid rgba(256, 256, 256, 0.1);
    z-index: 999;
  }

  .sticky-top.navbar-light {
    position: fixed;
    background: #ffffff;
  }

  .sticky-top.navbar-light .navbar-brand h1 {
    color: var(--primary);
  }

  .navbar-light .navbar-nav .nav-item .dropdown-menu {
    display: block;
    border: none;
    margin-top: 0;
    top: 150%;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
  }

  .navbar-light .navbar-nav .nav-item:hover .dropdown-menu {
    top: 100%;
    visibility: visible;
    transition: 0.5s;
    opacity: 1;
  }

  .navbar-light .btn {
    color: var(--dark);
    background: #ffffff;
  }

  .sticky-top.navbar-light .btn {
    color: var(--dark);
    background: var(--secondary);
  }
}

.hero-header {
  margin-bottom: 6rem;
  padding: 1rem 0;
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-middle),
    var(--gradient-end)
  ) !important; /* Utiliser le dégradé défini dans les variables */
  position: relative;
  width: calc(100% - 30px);
  margin-left: auto;
  margin-right: auto;
}




@media (max-width: 991.98px) {
  .hero-header {
    padding: 6rem 0 9rem 0;
  }
}


.section-title {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--dark);
}

.section-title span:first-child,
.section-title span:last-child {
  position: relative;
  display: inline-block;
  margin-right: 30px;
  width: 30px;
  height: 2px;
}

.section-title span:last-child {
  margin-right: 0;
  margin-left: 30px;
}

.section-title span:first-child::after,
.section-title span:last-child::after {
  position: absolute;
  content: "";
  width: 15px;
  height: 2px;
  top: 0;
  right: -20px;
}

.section-title span:last-child::after {
  right: auto;
  left: -20px;
}

.section-title.text-primary span:first-child,
.section-title.text-primary span:last-child,
.section-title.text-primary span:first-child::after,
.section-title span:last-child::after {
  background: var(--primary);
}

.section-title.text-secondary span:first-child,
.section-title.text-secondary span:last-child,
.section-title.text-secondary span:first-child::after,
.section-title span:last-child::after {
  background: var(--secondary);
}

.section-title.text-white span:first-child,
.section-title.text-white span:last-child,
.section-title.text-white span:first-child::after,
.section-title span:last-child::after {
  background: #ffffff;
}

.feature-item {
  transition: 0.5s;
  color: var(--dark);
  width: calc(100% - 30px);
  margin-left: auto;
  margin-right: auto;
}

.feature-item:hover {
  margin-top: -15px;
}

.progress {
  height: 5px;
}

.progress .progress-bar {
  width: 0px;
  transition: 3s;
  background: var(--primary);
}

.fact {
  margin: 6rem 0;
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-middle),
    var(--gradient-end)
  );
}

.service-item {
  position: relative;
  padding: 45px 30px;
  background: var(--light);
  overflow: hidden;
  transition: 0.5s;
  color: var(--dark);
  width: calc(100% - 30px);
  margin-left: auto;
  margin-right: auto;
}

.service-item:hover {
  margin-top: -15px;
  padding-bottom: 60px;
  background: var(--hover-color);
}

.service-item .service-icon {
  margin: 0 auto 20px auto;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
  background: url(../img/blob-primary.png) center center no-repeat;
  background-size: contain;
  transition: 0.5s;
}

.service-item:hover .service-icon {
  color: var(--dark);
  background: url(../img/blob-secondary.png) center center no-repeat;
  background-size: contain;
}

.service-item h5,
.service-item p {
  transition: 0.5s;
  color: var(--dark);
}

.service-item:hover h5,
.service-item:hover p {
  color: #ffffff;
}

.service-item a.btn {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--button-color);
  background: #ffffff;
  border-radius: 40px 40px 0 0;
  transition: 0.5s;
  z-index: 1;
}

.service-item a.btn:hover {
  color: var(--dark);
  background: var(--secondary);
}

.service-item:hover a.btn {
  bottom: 0;
}

#portfolio-flters li {
  display: inline-block;
  font-weight: 500;
  color: var(--dark);
  cursor: pointer;
  transition: 0.5s;
  border-bottom: 2px solid transparent;
}

#portfolio-flters li:hover,
#portfolio-flters li.active {
  color: var(--primary);
  border-color: var(--primary);
}

.portfolio-item img {
  transition: 0.5s;
}

.portfolio-item:hover img {
  transform: scale(1.1);
}

.portfolio-item .portfolio-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(254, 156, 136, 0.9); /* Changer le violet en #FE9C88 */
  transition: 0.5s;
  opacity: 0;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-item p.text-primary {
  color: var(
    --hover-color
  ); /* Changer le texte violet "UI / UX Design" en #FE9C88 */
}


.testimonial-carousel .testimonial-item {
  padding: 0 30px 30px 30px;
  color: var(--dark);
  width: calc(100% - 30px);
  margin-left: auto;
  margin-right: auto;
}

.testimonial-carousel .owl-nav {
  display: flex;
  justify-content: center;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
  margin: 0 12px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: var(--light);
  border-radius: 60px;
  font-size: 22px;
  transition: 0.5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
  color: #ffffff;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.team-item .btn {
  color: var(--button-color);
  background: #ffffff;
}

.team-item .btn:hover {
  color: #ffffff;
  background: var(--primary);
}

.footer {
  margin-top: 3rem; /* Réduire la marge supérieure */
  padding-top: 3rem; /* Réduire le padding supérieur */
  padding-bottom: 2rem; /* Réduire le padding inférieur */
  position: relative;
  background: linear-gradient(
      135deg,
      var(--gradient-start),
      var(--gradient-middle),
      var(--gradient-end)
    ),
    url(../img/map.png) center center no-repeat;
  background-size: cover;
  width: calc(100% - 30px);
  margin-left: auto;
  margin-right: auto;
}



.footer .btn.btn-social {
  margin-right: 3px; /* Réduire l'espacement entre les boutons sociaux */
  width: 30px; /* Réduire la taille des boutons sociaux */
  height: 30px; /* Réduire la hauteur des boutons sociaux */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  border: 1px solid rgba(256, 256, 256, 0.1);
  border-radius: 40px;
  transition: 0.3s;
}

.footer .btn.btn-social:hover {
  color: var(--primary);
}

.footer .btn.btn-link {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  text-align: left;
  color: var(--light);
  font-weight: normal;
  transition: 0.3s;
}

.footer .btn.btn-link::before {
  position: relative;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 10px;
}

.footer .btn.btn-link:hover {
  letter-spacing: 1px;
  box-shadow: none;
  color: var(--secondary);
}

..footer .copyright {
  padding: 15px 0; /* Réduire le padding de la section copyright */
  font-size: 12px; /* Réduire la taille de la police */
  border-top: 1px solid rgba(256, 256, 256, 0.1);
}

.footer .copyright a {
  color: var(--light);
}

.footer .footer-menu a {
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .footer-menu a:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

.footer .copyright a:hover,
.footer .footer-menu a:hover {
  color: var(--secondary);
}


.hero-header,
.feature-item,
.service-item,
.newsletter,
.footer,
.fact {
  margin-left: auto;
  margin-right: auto;
  padding-left: auto;
  padding-right: auto;
}

.progress-bar.web-dev {
  background-color: #e55653 !important;
}

.progress-bar.digital-strategy {
  background-color: #a6aaf9 !important;
}

.progress-bar.ux-ui-design {
  background-color: #cdbd29 !important;
}

.hero-header {
  padding-top: 20px;
  padding-bottom: 100px;
}

.hero-header h1 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.hero-header img {
  margin-top: 20px;
  margin-bottom: 20px;
}

.hero-header .btn {
  margin-bottom: 10px;
}

@media (min-width: 992px) {
  .hero-header .btn {
    margin-bottom: 30px;
  }
}
/* Bannière Newsletter */
..newsletter {
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-middle),
    var(--gradient-end)
  );
  width: 90%; /* Réduire la largeur à 90% de la page */
  margin: 2rem auto; /* Réduire la marge verticale à 2rem au lieu de 6rem */
  border-radius: 15px; /* Arrondir les coins */
  padding: 1px; /* Réduire le padding pour ajuster la hauteur */
  text-align: center; /* Centrer le texte */
}

.newsletter h1,
.newsletter p,
.newsletter a {
  margin: 5px 0; /* Réduire l'espace entre les éléments */
}


.logo-carousel .item {
  text-align: center;
}

.logo-carousel .item img {
  max-height: 100px; /* Ajustez la taille des logos selon vos besoins */
  margin: auto;
}

.feature-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* Assure que chaque item prend toute la hauteur disponible */
  padding: 20px;
  background-color: #f8f9fa; /* Couleur de fond pour uniformité */
}

.service-icon {
  margin-bottom: 20px; /* Espacement entre l'icône et le contenu */
}

.service-item h5 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.25rem;
  font-weight: bold;
}

.service-item p {
  flex-grow: 1; /* Permet au paragraphe de prendre l'espace restant */
  margin-bottom: 15px;
}

.service-item a {
  align-self: center; /* Centrage du bouton en bas du conteneur */
}

#chatbot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  max-width: 100%;
  background-color: var(--light);
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  display: none;
  flex-direction: column;
  z-index: 1000;
  font-family: "Montserrat", sans-serif;
}

#chatbot-header {
  background-color: var(--primary);
  color: white;
  padding: 10px;
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chatbot-header button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

#chatbot-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 400px;
  max-height: 50vh;
  overflow-y: auto;
}

#messages {
  flex-grow: 1;
  overflow-y: auto;
}

.message {
  margin: 5px 0;
  padding: 10px;
  border-radius: 10px;
  font-family: "Montserrat", sans-serif;
}

.user-message {
  background-color: var(--secondary);
  color: var(--dark);
  align-self: flex-end;
  border-bottom-right-radius: 0;
}

.bot-message {
  background-color: var(--primary);
  color: var(--light);
  align-self: flex-start;
  border-bottom-left-radius: 0;
}

#userInput {
  padding: 10px;
  border: 1px solid var(--button-border-color);
  border-radius: 10px;
  width: calc(100% - 80px);
  margin-right: 10px;
}

#sendButton {
  padding: 10px 20px;
  background-color: var(--button-color);
  border: 1px solid var(--button-border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#sendButton:hover {
  background-color: var(--secondary);
}

#chatbot-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary);
  color: white;
  border-radius: 50px;
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

#chatbot-icon img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

#chatbot-icon span {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}

#chatbot-icon:hover {
  background-color: var(--hover-color);
}

/* Icônes blanches uniquement pour la section "Facts" */
.fact .icon-white {
  color: #ffffff !important;
}
.fact {
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-middle),
    var(--gradient-end)
  ) !important;
  color: var(--light); /* Assurez-vous que le texte est bien en blanc */
}

/* Assurer que les sections comme le bandeau prennent toute la largeur */
.hero-header,
.footer {
  width: 100%; /* Prend toute la largeur de la vue */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: 0;
  padding-right: 0;
}

/* Coller le footer en bas de la page */
html,
body {
  height: 100%; /* Assurer que le corps prend toute la hauteur disponible */
  margin: 0;
}

.container-xxl.bg-white.p-0 {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Assurer que le conteneur principal prend toute la hauteur de la fenêtre */
}

.footer {
  margin-top: auto; /* Pousse le footer au bas de la page */
  width: 100%; /* Prend toute la largeur de la vue */
}

/* Supprimer l'espace blanc en bas */
body > .container-xxl {
  padding-bottom: 0;
}

/* Ajuster les images ou autres éléments à la largeur de la page */
.hero-header img,
.footer img {
  width: 100%;
  height: auto;
}
.newsletter {
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-middle),
    var(--gradient-end)
  );
  width: 90%; /* Réduire la largeur à 50% de la page */
  margin: 0 auto; /* Centrer le bandeau */
  border-radius: 15px; /* Arrondir les coins */
  padding: 20px; /* Réduire le padding pour ajuster la hauteur */
  text-align: center; /* Centrer le texte */
}

.newsletter h1,
.newsletter p,
.newsletter a {
  margin: 10px 0; /* Ajouter de l'espace entre les éléments */
}
.blog-content {
  max-width: 800px; /* Limite la largeur du contenu pour éviter qu'il soit trop étalé */
  margin: 0 auto; /* Centre le bloc de contenu */
}

.blog-content p,
.blog-content h3,
.blog-content ul {
  max-width: 750px; /* Limite la largeur des paragraphes, titres et listes */
  margin: 0 auto; /* Centre les paragraphes, titres et listes */
  text-align: left; /* Assure que le texte reste justifié à gauche */
}
/* Ajoutez ce code à la fin du fichier style.css pour qu'il s'applique à toutes les pages */
.content-section {
  padding-top: 20px;
}

@media (max-width: 768px) {
  .content-section {
    padding-top: 10px;
  }
}

@media (min-width: 1200px) {
  .content-section {
    padding-top: 50px;
  }
}

.quiz-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;
}

.quiz-content {
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-middle),
    var(--gradient-end)
  );
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  max-width: 500px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  font-family: "Montserrat", sans-serif;
  position: relative; /* Nécessaire pour que le bouton avec position: absolute fonctionne */
}

#closeQuiz {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
  color: white;
  z-index: 1001; /* Assurez-vous que la croix soit bien au-dessus des autres éléments */
}

#closeQuiz:hover {
  color: var(--primary);
}

.quiz-step {
  display: none;
}
.quiz-step p,
.quiz-step label {
  color: black; /* Met les questions et les réponses en noir */
}

.prevBtn,
#submitQuiz {
  background-color: white;
  color: #ff7a00;
  border: 2px solid #ff7a00;
  border-radius: 20px; /* Arrondi des coins du bouton */
  padding: 10px 15px;
  margin-top: 20px;
  cursor: pointer;
  font-size: 16px;
  display: inline-block;
}

.prevBtn:hover,
#submitQuiz:hover {
  background-color: #ff6a00;
  color: white;
}

#quizResult {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-align: left; /* Aligner le texte à gauche */
  text-justify: inter-word; /* Justification du texte */
  width: 100%; /* Prendre toute la largeur disponible */
}

.prevBtn {
  background-color: white;
  color: black;
  border: none; /* Supprime les bordures */
  border-radius: 20px;
  padding: 5px 10px; /* Taille réduite */
  font-size: 14px; /* Police plus petite */
  margin-top: 20px;
  cursor: pointer;
  display: inline-block;
  opacity: 0.7; /* Moins visible */
}

.prevBtn:hover {
  opacity: 1; /* Rendre plus visible au survol */
  background-color: #f0f0f0; /* Couleur légèrement grisée au survol */
}

#quizProgress {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 14px;
  color: white;
  margin-bottom: 20px; /* Ajoute de l'espace sous l'élément de progression */
}
/* Empêche les conteneurs de dépasser la largeur de l'écran */
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Assure que les images ne dépassent pas la largeur de l'écran */
img {
  max-width: 100%;
  height: auto;
}

/* Correction de la largeur de sections comme la bannière ou le footer */
.hero-header,
.footer {
  width: 100%;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: 0;
  padding-right: 0;
}

/* Réduction des marges et paddings pour .hero-header */
.hero-header {
  padding-top: 3px; /* Réduire cette valeur pour rapprocher le contenu du haut */
  padding-bottom: 150px; /* Ajustez cette valeur si nécessaire */
}

/* Réduction des marges pour le texte de bienvenue */
.hero-header h1 {
  margin-top: 0; /* Enlever la marge supérieure */
  margin-bottom: 10px; /* Ajustez cette valeur si nécessaire */
}

/* Réduction des marges pour l'image */
.hero-header img {
  margin-top: 100px; /* Réduire la marge supérieure si nécessaire */
  margin-bottom: 100px; /* Réduire la marge inférieure si nécessaire */
}


/* Empêcher les conteneurs de dépasser la largeur de l'écran */
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Assurer que les images ne dépassent pas la largeur de l'écran */
img {
  max-width: 100%;
  height: auto;
}

/* Correction de la largeur de sections comme la bannière ou le footer */
.hero-header,
.footer {
  width: 100%;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: 0;
  padding-right: 0;
}

/* Réduction des marges et paddings pour .hero-header */
.hero-header {
  padding-top: 3px; /* Réduire cette valeur pour rapprocher le contenu du haut */
  padding-bottom: 150px; /* Ajustez cette valeur si nécessaire */
}

/* Réduction des marges pour le texte de bienvenue */
.hero-header h1 {
  margin-top: 0; /* Enlever la marge supérieure */
  margin-bottom: 10px; /* Ajustez cette valeur si nécessaire */
}

/* Réduction des marges pour l'image */
.hero-header img {
  margin-top: 100px; /* Réduire la marge supérieure si nécessaire */
  margin-bottom: 100px; /* Réduire la marge inférieure si nécessaire */
}

/* Assurer que certains boutons prennent bien la largeur en mobile */
.btn-full-width {
  width: 100%;
  max-width: 300px; /* Limite la taille maximum */
  margin: 0 auto; /* Centre les boutons */
}


/* Correction des marges et paddings pour que tout soit contenu */
.container-xxl.bg-white.p-0 {
  margin-left: 0;
  margin-right: 0;
  padding-left: 15px;
  padding-right: 15px;
}


/* Correction des images qui pourraient dépasser */
img {
  max-width: 100%;
  height: auto;
}

/* Empêcher le défilement vertical et horizontal non désiré */
.content-section, 
.feature-item, 
.service-item, 
.hero-header, 
.newsletter, 
.footer, 
.fact {
  overflow: hidden; /* Empêche tout défilement interne */
  max-width: 100%; /* Limite la largeur au conteneur parent */
  margin: 0 auto; /* Centre l'élément horizontalement */
}


.rounded-video {
    border-radius: 15px; /* Ajustez la valeur pour le degré d'arrondi souhaité */
    overflow: hidden; /* Assure que le contenu de la vidéo reste dans le cadre arrondi */
}
/* Correction de la superposition sur la page d'accueil */
.container-xxl {
    position: relative;
    overflow: hidden; /* Empêche les éléments de dépasser leur conteneur */
}

.portfolio-container {
    display: flex;
    flex-wrap: wrap; /* Permet de corriger les éléments flex qui se chevauchent */
    justify-content: space-between; /* Espace entre les éléments */
}

.portfolio-item {
    flex: 1 1 30%; /* Ajuste la largeur des éléments à environ 30% chacun, peut être modifié */
    margin-bottom: 20px; /* Ajoute un espace entre les éléments */
}
/* Assurez-vous que le carousel conserve la taille d'origine des images */
.owl-carousel .item {
    position: relative;
    display: block;
    width: 100%;
}

.owl-carousel .item img {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Arrondi des coins de toutes les images */
}

.owl-carousel .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.7); /* Bandeau transparent noir */
    color: white;
    text-align: center;
}

/* Couleurs pour les textes */
.owl-carousel .overlay h5 {
    color: var(--light); /* Utilise la couleur secondaire définie dans le root */
    font-weight: bold;
}

.owl-carousel .overlay p {
    color: var(--light); /* Utilise la couleur blanche définie dans le root */
}

/* Styles pour les flèches et les points de navigation */
.owl-nav .owl-prev,
.owl-nav .owl-next,
.owl-dots .owl-dot {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 5px;
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover,
.owl-dots .owl-dot:hover {
    background: var(--primary);
    color: white;
}
/* Ajout pour arrondir les coins des images */
.owl-carousel .item img {
    border-radius: 15px; /* Ajuste la valeur pour avoir l'arrondi souhaité en bas */
}

/* Ajustement de la couleur des titres et du texte */
.owl-carousel .overlay h5 {
    color: var(--secondary); /* Utilise la couleur secondaire */
    font-weight: bold;
}

.owl-carousel .overlay p {
    color: var(--light); /* Utilise la couleur blanche définie dans le root */
}

/* Suppression des flèches */
.owl-nav {
    display: none; /* Masque les flèches de navigation */
}

/* Ajustement des points de navigation */
.owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    background: var(--secondary); /* Couleur par défaut des points */
    border-radius: 50%;
    transition: background 0.3s ease;
}

.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span {
    background: var(--primary); /* Couleur lors du hover ou de l'activation */
}