/* If you copy the code, at least, buy some $RUGPILLS, I am broke, join ours socials, and tell me what's your project about, I will be happy to help you and buy. */
/* From France, first meme coin launch by @cryptonojutsu75, some more incoming, we are going to some real fun */

@font-face {
  font-family: 'Knicknack Regular';
  src: url('../font/knicknack-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

* {
  font-family: "Knicknack Regular";
  font-weight: 400;
  font-style: normal;
  color: rgb(255, 255, 255);
  text-shadow: 
  -3px -3px 3px #000,  
   3px -3px 3px #000,
  -3px  3px 3px #000,
   3px  3px 3px #000,
   0px -3px 3px #000, /* Ombres verticales */
   0px  3px 3px #000, 
  -3px  0px 3px #000, /* Ombres horizontales */
   3px  0px 3px #000;
  letter-spacing: 5px;
}

h1 {
  text-shadow: 
    -3px -3px 2px #000,  
     3px -3px 2px #000,
    -3px  3px 2px #000,
     3px  3px 2px #000,
     0px -3px 2px #000, /* Ombres verticales */
     0px  3px 2px #000, 
    -3px  0px 2px #000, /* Ombres horizontales */
     3px  0px 2px #000;
}

body {
  font-size: 16px;
  text-align: center;
  background: linear-gradient(50deg, 
  rgba(153,69,255,1) 0%, 
  rgba(114,118,225,1) 35%, 
  rgba(64,183,184,1) 75%, 
  rgba(20,241,148,1) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  margin-bottom: 0;
}

h2 {
  margin-top: 1px;
}

h3 {
  margin-top: 1px;
}

p {
  font-size: 1.5rem;
  text-shadow:
  -1.5px -1.5px 3px #000,  
   1.5px -1.5px 3px #000,
  -1.5px  1.5px 3px #000,
   1.5px  1.5px 3px #000,
   0px   -1.5px 3px #000, /* Ombres verticales */
   0px    1.5px 3px #000, 
  -1.5px  0px   3px #000, /* Ombres horizontales */
   1.5px  0px   3px #000;

  letter-spacing: 5px;
}

.p-bold {
  font-size: 1.5rem;
  text-shadow:
  -2.5px -2.5px 3px #000,  
   2.5px -2.5px 3px #000,
  -2.5px  2.5px 3px #000,
   2.5px  2.5px 3px #000,
   0px   -2.5px 3px #000, /* Ombres verticales */
   0px    2.5px 3px #000, 
  -2.5px  0px   3px #000, /* Ombres horizontales */
   2.5px  0px   3px #000;

  letter-spacing: 5px;
}

.btn {
  font-size: 1.5rem;
  background-color: rgba(153,69,255,1);
  border: #000 solid 3px;
  border-radius: 50px;
  color: white;
}
.btn:hover {
  font-size: 1.5rem;
  background-color: rgb(184, 130, 250);
  border: #000 solid 3px;
  border-radius: 50px;
  color: white;
}
.btn-primary {
  background: linear-gradient(50deg, 
  rgba(153,69,255,1) 0%, 
  rgba(114,118,225,1) 35%, 
  rgba(64,183,184,1) 75%, 
  rgba(20,241,148,1) 100%);
  border: none;
}

/* Conteneur de l'image pleine page */
#pillContainer {
  position: fixed; /* Fixe l'image à la fenêtre */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Prend toute la hauteur de la fenêtre */
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  z-index: 1001; /* Assure qu'il est au-dessus de tout */
  background-color: black; /* Ajoute un fond pour mieux voir l'image */
  overflow: hidden; /* Empêche les débordements */
}

/* Image centrée et responsive */
.fullscreen-image {
  max-width: 100%; /* L'image ne dépasse jamais la largeur disponible */
  max-height: 100%; /* L'image ne dépasse jamais la hauteur disponible */
  object-fit: contain; /* Adapte l'image à l'intérieur du conteneur */
  display: block; /* Assure un comportement de bloc pour le centrage */
}

/* Ajustement spécifique pour les petits écrans */
@media (max-width: 768px) {
  .fullscreen-image {
    max-width: 100%; /* Assure que l'image remplit la largeur sur mobile */
    max-height: 100%; /* Assure que l'image ne dépasse jamais la hauteur */
  }
}

.split-screen {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 50%;
  cursor: pointer;
}

.left-side {
  left: 0;
}

.right-side {
  right: 0;
}

#mainContent {
  display: none;
}

/* Conteneur du bouton audio (flottant) */
#audio-container {
  position: fixed;
  bottom: 30px; /* Distance depuis le bas */
  right: 30px; /* Distance depuis la droite */
  z-index: 1000; /* Toujours au-dessus du contenu */
  display: flex; /* Permet de centrer le bouton si nécessaire */
  justify-content: center;
  align-items: center;
}

/* Style de base pour le bouton audio */
.audio-button {
  width: 60px; /* Taille fixe et circulaire */
  height: 60px;
  border-radius: 50%; /* Bouton rond */
  background-color: rgba(153, 69, 255, 0.9); /* Couleur de fond */
  border: 5px solid white; /* Contour blanc */
  color: white; /* Couleur de l'icône */
  font-size: 24px; /* Taille de l'icône */
  cursor: pointer;
  box-shadow: 0 0 15px rgba(153, 69, 255, 0.5); /* Ombre subtile */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animation fluide */
}

/* Effet hover pour le bouton */
.audio-button:hover {
  transform: scale(1.3); /* Agrandit légèrement le bouton */
  box-shadow: 0 0 20px rgba(153, 69, 255, 0.7); /* Augmente l'ombre */
}

/* Effet pulse pour le bouton actif */
.audio-button.active {
  animation: pulse 1.5s infinite; /* Animation pulsante */
  border-color: rgb(255, 255, 255); /* Contour vert actif */
  box-shadow: 0 0 20px rgba(153, 69, 255, 0.7); /* Augmente l'ombre */
}

/* Animation pulse */
@keyframes pulse {
  0% {
    transform: scale(1); /* Taille initiale */
    box-shadow: 0 0 20px rgba(58, 253, 123, 0.8), 0 0 5px rgba(255, 255, 255, 0.5); /* Ombres */
  }
  50% {
    transform: scale(1.3); /* Grossissement au milieu */
    box-shadow: 0 0 30px rgba(153, 69, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.8); /* Ombres renforcées */
  }
  100% {
    transform: scale(1); /* Retour à la taille initiale */
    box-shadow: 0 0 20px rgba(58, 253, 123, 0.8), 0 0 5px rgba(255, 255, 255, 0.5); /* Ombres initiales */
  }
}


.transition-section {
  position: relative; /* Pour gérer l'empilement des éléments */
  overflow: hidden; /* Empêche les débordements */
}

.transition {
  width: 100%;
  height: 50px; /* Ajustez la hauteur selon vos besoins */
  background-image: url('../img/transition2.png'); /* Chemin vers votre image */
  background-repeat: repeat-x;
  background-size: contain;
  position: relative; /* Nécessaire pour appliquer le z-index */
  z-index: 3; /* Place les pills au-dessus du fond violet */
}

.transition-bg {
  position: relative; /* Important pour le z-index */
  padding: 20px; /* Espace entre le texte et les bordures */
  width: 100%; /* S'étend sur toute la largeur */
  text-align: center;
  border-radius: 0px; /* Pas d'arrondis */
  margin-top: -10px; /* Empiète sur la transition précédente */
  margin-bottom: -10px; /* Empiète sur la transition suivante */
  z-index: 1; /* Place le fond sous les pills */
}

.transition-bg::before {
  content: ''; /* Ajoute un pseudo-élément */
  position: absolute;
  top: -10px; /* Empiète visuellement sur les transitions */
  left: 0;
  right: 0;
  bottom: -10px; /* Empiète visuellement sur les transitions */
  z-index: -1; /* Place le fond sous les pills et sous le texte */
}

.tbg-purple::before {
  background-color: rgba(153, 69, 255, 0.45); /* Couleur violet */
}
.tbg-green::before {
  background-color: rgba(58, 253, 123, 0.45); /* Couleur vert */
}
.tbg-blue::before {
  background-color: rgba(55, 214, 249, 0.45); /* Couleur bleu */
}



.transition-section p {
  margin: 0px;
}

.bg-image, .mask {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bg-image {
  background-size: cover;
  background-position: center;
}

.navbar-nav .nav-link {
  color: white !important;
}

.navbar-logo {
  height: 50px;
  width: auto;
  transition: height 0.3s ease;
}

@media (max-width: 580px) {
  .navbar-logo {
    height: 40px;
  }
}

a {
  color: #cfc316;
}

.hero {
  margin-top: 0;
}

.hero-left {
  margin-top: -20px;
}

.hero h1 {
  font-size: 6vw; /* Taille par défaut pour les grands écrans */
  overflow: visible;
  margin-top: 10px;
}

@media (max-width: 720px) {
  .hero h1 { /* Réduisez la spécificité */
    font-size: 11.5vw; /* Taille réduite pour les écrans moyens */
    white-space: normal;
    margin: 0;
  }
}

.hero p {
  font-size: 2rem;
}

.visit-counter {
  padding: 10px 20px; /* Réduit l'espace entre le texte et les bordures */
  font-size: 2rem; /* Taille du texte */
  text-align: center;
  border-radius: 50px; /* Forme de pilule */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre */
  display: inline-block; /* Ajuste la largeur à celle du contenu */
  margin: 0 auto 10px; /* Centre l'élément horizontalement avec un espacement en bas */
  transition: transform 0.2s ease, background-color 0.3s ease; /* Animation hover */
}

.vs-purple {
  border: 3px solid rgba(153, 69, 255, 0.8); /* Contour violet */
  background-color: rgba(153, 69, 255, 0.3); /* Fond violet transparent */
}
.vs-green {
  border: 3px solid rgba(58, 253, 123, 0.8); /* Contour violet */
  background-color: rgba(58, 253, 123, 0.3); /* Fond violet transparent */
}
.vs-blue {
  border: 3px solid rgba(55, 214, 249, 0.8); /* Contour violet */
  background-color: rgba(55, 214, 249, 0.3); /* Fond violet transparent */
}

.custom-button {
  font-size: 1.5rem;
  color: rgb(255, 255, 255);
}

.icon-btn-buynow {
  height: 50px;
  object-fit: cover;
}

.hero .jiggle-button {
  animation: jiggle 2s infinite;
  transition: transform 0.3s, animation 0.3s;
  margin-top: 10px;
  margin-bottom: 20px;
}

.jiggle-button {
  animation: jiggle 2s infinite;
  transition: transform 0.3s, animation 0.3s;
}

.jiggle-button:hover {
  transform: scale(1.1);
  animation: jiggle-fast 0.5s infinite;
}

@keyframes jiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

@keyframes jiggle-fast {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

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

.animated-image {
  animation: floatAnimation 2s 0s infinite linear;
  animation-play-state: running;
}

.animated-image:hover {
  animation-play-state: paused;
}

.custom-ul, .navbar-nav.ml-auto .nav-item {
  display: inline-block;
  margin-left: 10px;
}

@media (max-width: 992px) {
  .navbar-nav.ml-auto .nav-item {
    margin-left: 0;
  }
}

/* Modifier la couleur des lignes du menu burger */
.navbar-toggler {
  border: none; /* Supprime la bordure autour du bouton */
  background-color: transparent; /* Assure qu'il n'y a pas de couleur de fond */
}

.navbar-toggler-icon {
  background-color: rgba(153, 69, 255, 0.9); /* Couleur violette des lignes */
  transition: background-color 0.3s ease; /* Transition fluide pour les changements de couleur */
}

/* Lorsque le menu est ouvert, ajouter un fond violet sombre */
.navbar-collapse.show {
  background-color: rgba(75, 0, 130, 0.9); /* Fond violet sombre */
  transition: background-color 0.3s ease; /* Transition fluide pour le fond */
  border-radius: 8px; /* Ajoute des bordures arrondies */
  padding: 10px; /* Ajoute de l'espace interne */
  margin-bottom: 20px;
}

/* Effet hover pour le menu burger */
.navbar-toggler:hover .navbar-toggler-icon {
  background-color: rgba(114, 118, 225, 0.9); /* Change la couleur au survol */
}

.card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
}

section h2, section p {
  margin-bottom: 10px;
}

.card-body h4, .card-body p {
  margin-bottom: 20px;
  color: white;
}

#hows, #road {
  scroll-margin-top: 50px;
}

#hows::before, #road::before {
  content: '';
  display: block;
  height: 50px;
  margin-top: -50px;
}

.rounded-border-gradient {
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(50deg, rgba(20,241,148,1) 0%, 
  rgba(64,183,184,1) 25%, rgba(114,118,225,1) 75%, rgba(153,69,255,1) 100%);
}

.rounded-border-gradient::before {
  content: '';
  position: absolute;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -7px;
  background: linear-gradient(50deg, rgba(153,69,255,1) 0%, 
  rgba(114,118,225,1) 25%, rgba(64,183,184,1) 75%, rgba(20,241,148,1) 100%);
  border-radius: inherit;
  z-index: -1;
}

.custom-btn {
  position: relative;
  display: inline-block;
  height: 3em;
  width: 7.5em;
  padding: 10px 20px;
  font-size: 1.25rem;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  background-image: url('../img/RUGPILL_btn_buy.png');
  background-size: cover;
  background-position: center;
  border: none;
  overflow: hidden;
}

.custom-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 50px;
}

.custom-btn:hover::before {
  background: linear-gradient(50deg, rgba(153,69,255,0.5) 0%, rgba(114,118,225,0.2) 25%, rgba(64,183,184,0.2) 75%, rgba(20,241,148,0.5) 100%);
}

/* .charts-section: Box-shadow orienté vers le haut */
.project-section {
  margin-top: 10px;
  padding: 20px 20px; /* Espacement par défaut */
  border-radius: 10px;
  box-shadow: 0px -4px 8px rgba(18, 208, 129, 0.8); /* Ombre orientée vers le haut */
}

@media (max-width: 768px) {
  .project-section {
    padding: 1px 1px; /* Réduction du padding sur mobile */
    box-shadow: 0px -2px 6px rgba(18, 208, 129, 0.6); /* Réduction de l'ombre pour un effet plus subtil */
    border-radius: 8px; /* Légère réduction du rayon pour s'adapter à l'écran */
  }
}

.project-section h2 {
  margin-bottom: 20px;
}

.project-section #h2 {
  margin-top: 30px;
  margin-bottom: 20px;
}

/* .charts-section: Box-shadow orienté vers le haut */
.faqqq-section {
  margin-top: 10px;
  padding: 20px 20px;
  border-radius: 10px;
  box-shadow: -1px 0px 5px rgba(153, 69, 255, 0.6), 1px 0px 5px rgba(153, 69, 255, 0.6); /* Ombres sur les côtés uniquement */
}

@media (max-width: 768px) {
  .faqqq-section {
    padding: 1px 1px; /* Réduction du padding sur mobile */
    box-shadow: 0px -2px 6px rgba(153, 69, 255, 0.6); /* Réduction de l'ombre pour un effet plus subtil */
    border-radius: 8px; /* Légère réduction du rayon pour s'adapter à l'écran */
  }
}


.phase-green {
  position: relative;
  padding: 20px 20px; /* Espacement par défaut pour les grands écrans */
  border-left: 5px solid rgb(18, 208, 129); /* Ligne verticale verte (gauche) */
  border-right: 5px solid rgba(18, 208, 129); /* Ligne verticale verte (droite) */
  background: linear-gradient(90deg, rgba(20,241,148, 0.5) 0%, rgba(114, 118, 225, 0.2) 30%, rgba(114, 118, 225, 0.2) 70%, rgba(20,241,148, 0.5) 100%);
  border-radius: 10px;
  box-shadow: 0px 2px 6px rgba(255, 255, 255, 0.1); /* Ombre légère */
  overflow: hidden; /* Assure que le contenu ne dépasse pas */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation douce */
}

@media (max-width: 768px) {
  .phase-green {
    padding: 10px 10px; /* Réduction de l'espacement pour les appareils mobiles */
    border-left: 3px solid rgb(18, 208, 129); /* Réduction de la largeur des bordures */
    border-right: 3px solid rgba(18, 208, 129);
    border-radius: 8px; /* Légère réduction du rayon des bordures */
    box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.1); /* Réduction de l'ombre */
  }
}

.phase-purple {
  position: relative;
  padding: 20px 20px; /* Augmente l'espace intérieur */
  border-left: 5px solid #6a1b9a; /* Ligne verticale violet (gauche) */
  border-right: 5px solid #6a1b9a; /* Ligne verticale violet (droite) */
  background: linear-gradient(90deg, rgba(153, 69, 255, 0.5) 0%, rgba(114, 118, 225, 0.2) 25%, rgba(114, 118, 225, 0.2) 75%, rgba(153, 69, 255, 0.5) 100%);
  border-radius: 10px;
  box-shadow: 0px 2px 6px rgba(255, 255, 255, 0.1); /* Ombre légère */
  overflow: hidden; /* Assure que le contenu ne dépasse pas */
}

@media (max-width: 768px) {
  .phase-purple {
    padding: 10px 10px; /* Réduction de l'espacement pour les appareils mobiles */
    border-left: 3px solid #6a1b9a; /* Ligne verticale violet (gauche) */
    border-right: 3px solid #6a1b9a; /* Ligne verticale violet (droite) */
    border-radius: 8px; /* Légère réduction du rayon des bordures */
    box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.1); /* Réduction de l'ombre */
  }
}

.phase-for-p {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  position: relative;
  border-left: 5px solid #6a1b9a; /* Ligne verticale violet (gauche) */
  border-right: 5px solid #6a1b9a; /* Ligne verticale violet (droite) */
  background: linear-gradient(90deg, rgba(153, 69, 255, 0.5) 0%, rgba(114, 118, 225, 0.2) 25%, rgba(114, 118, 225, 0.2) 75%, rgba(153, 69, 255, 0.5) 100%);
  border-radius: 10px;
  box-shadow: 0px 2px 6px rgba(255, 255, 255, 0.1); /* Ombre légère */
  overflow: hidden; /* Assure que le contenu ne dépasse pas */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation douce */
}

#token p {
  font-size: 1.5rem;
}


/* .charts-section: Box-shadow orienté vers le haut */
.charts-section {
  margin-top: 10px;
  padding: 20px 20px;
  border-radius: 10px;
  box-shadow: 0px -4px 8px rgba(153, 69, 255, 0.8); /* Ombre orientée vers le haut */
}

@media (max-width: 768px) {
  .charts-section {
    padding: 1px 1px; /* Réduction du padding sur mobile */
    box-shadow: 0px -2px 6px rgba(153, 69, 255, 0.6); /* Réduction de l'ombre pour un effet plus subtil */
    border-radius: 8px; /* Légère réduction du rayon pour s'adapter à l'écran */
  }
}

.charts-section h3 {
  font-size: 1.7rem;
}

.tokenomics-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: 1.8;
}

.li-p li {
  font-size: 1.5rem;
  text-shadow:
  -1.5px -1.5px 3px #000,  
   1.5px -1.5px 3px #000,
  -1.5px  1.5px 3px #000,
   1.5px  1.5px 3px #000,
   0px   -1.5px 3px #000, /* Ombres verticales */
   0px    1.5px 3px #000, 
  -1.5px  0px   3px #000, /* Ombres horizontales */
   1.5px  0px   3px #000;
  letter-spacing: 5px;
}

.tokenomics-list li::before {
  content: '💊 '; /* Ajoute un emoji devant chaque item */
}

#p10 {
  color:rgb(100, 249, 187);
  margin-bottom: -15px;
}

#p90 {
  color:rgb(182, 123, 255);
  margin-top: -15px;
}

/* .roadmap-section: Box-shadow neutre */
.roadmap-section {
  padding: 20px 20px;
  border-radius: 10px;
  box-shadow: -1px 0px 5px rgba(153, 69, 255, 0.6), 1px 0px 5px rgba(153, 69, 255, 0.6); /* Ombres sur les côtés uniquement */
}

@media (max-width: 768px) {
  .roadmap-section {
    padding: 1px 1px; /* Réduction du padding sur mobile */
    box-shadow: 0px -2px 6px rgba(153, 69, 255, 0.6); /* Réduction de l'ombre pour un effet plus subtil */
    border-radius: 8px; /* Légère réduction du rayon pour s'adapter à l'écran */
  }
}

/* Ajustement spécifique pour .marketing-section */
.marketing-section {
  padding: 20px 20px;
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(153, 69, 255, 0.6); /* Ombre orientée vers le bas */
  margin-bottom: -20; /* Supprime les marges externes inutiles */
}

@media (max-width: 768px) {
  .marketing-section {
    padding: 1px 1px; /* Réduction du padding sur mobile */
    box-shadow: 0px -2px 6px rgba(153, 69, 255, 0.6); /* Réduction de l'ombre pour un effet plus subtil */
    border-radius: 8px; /* Légère réduction du rayon pour s'adapter à l'écran */
  }
}

/* Titre principal */
.roadmap-section h2 {
  font-weight: bold;
  margin-bottom: 0px;
  color: #ffffff;
}

.roadmap-section li {
  margin-bottom: 15px; /* Espacement vers le bas */
  line-height: 1.6; /* Amélioration de la lisibilité */
}

/* Phase container */
.roadmap-phase {
  position: relative;
  padding: 20px 20px; /* Augmente l'espace intérieur */
  margin-bottom: 20px;
  margin-top: 20px;
  border-left: 5px solid #6a1b9a; /* Ligne verticale violet (gauche) */
  border-right: 5px solid #6a1b9a; /* Ligne verticale violet (droite) */
  border-radius: 10px;
  box-shadow: 0px 2px 6px rgba(255, 255, 255, 0.1); /* Ombre légère */
  overflow: hidden; /* Assure que le contenu ne dépasse pas */
}

@media (max-width: 768px) {
  .roadmap-phase {
    padding: 1px 1px; /* Réduction du padding sur mobile */
    box-shadow: 0px -2px 6px rgba(153, 69, 255, 0.6); /* Réduction de l'ombre pour un effet plus subtil */
    border-radius: 8px; /* Légère réduction du rayon pour s'adapter à l'écran */
    border-left: 3px solid #6a1b9a; /* Ligne verticale violet (gauche) */
    border-right: 3px solid #6a1b9a; /* Ligne verticale violet (droite) */
  }
}

.roadmap-details {
  list-style-type: none; /* Supprime les puces */
  padding: 0; /* Supprime le padding par défaut du <ul> */
  margin: 0; /* Supprime la marge par défaut du <ul> */
}

.roadmap-details li {
  font-size: 1.5rem; /* Agrandit légèrement */
  line-height: 1.8;
  margin-bottom: 20px; /* Ajoute de l'espacement entre les éléments */
}

/* Fond distinct pour chaque phase */
.roadmap-phase:nth-child(odd) {
  background: linear-gradient(90deg, rgba(153, 69, 255, 0.5) 0%, rgba(114, 118, 225, 0.2) 25%, rgba(114, 118, 225, 0.2) 75%, rgba(153, 69, 255, 0.5) 100%);
}
.roadmap-phase:nth-child(even) {
  background: linear-gradient(90deg, rgba(153, 69, 255, 0.5) 0%, rgba(114, 118, 225, 0.2) 25%, rgba(114, 118, 225, 0.2) 75%, rgba(153, 69, 255, 0.5) 100%);
}

/* Ligne de connexion */
.roadmap-phase:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px; /* Aligné avec la ligne verticale */
  top: 100%;
  width: 5px;
  height: 40px;
  background-color: #6a1b9a; /* Prolonge la ligne verticale */
}

/* Titres des phases */
.roadmap-phase h3 {
  font-size: 1.9rem; /* Agrandit la taille */
  color: #ffffff;
  margin-bottom: 20px;
}

/* Texte de contenu */
.roadmap-phase p,
.roadmap-phase ul {
  font-size: 1.5rem; /* Agrandit légèrement */
  line-height: 1.8;
  margin-bottom: 10px;
}

/* Texte avec contour noir exclu pour .details-hidden */
.roadmap-phase .details-hidden {
  font-size: 1.5rem;
  text-shadow:
  -1.5px -1.5px 3px #000,  
   1.5px -1.5px 3px #000,
  -1.5px  1.5px 3px #000,
   1.5px  1.5px 3px #000,
   0px   -1.5px 3px #000, /* Ombres verticales */
   0px    1.5px 3px #000, 
  -1.5px  0px   3px #000, /* Ombres horizontales */
   1.5px  0px   3px #000;
  letter-spacing: 5px;
  line-height: 1.8;
  color: #ffffff;
}

/* Bouton "Voir plus" */
.expand-button {
  margin-top: 15px;
  padding: 8px 20px; /* Agrandit le bouton */
  background-color: #6a1b9a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem; /* Agrandit le texte */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.expand-button:hover {
  background-color: #ede5f1;
}

/* Texte déployé */
.roadmap-phase .details {
  display: none; /* Caché par défaut */
  font-size: 1.2rem;
  line-height: 1.8;
  color: #ffffff;
}

/* Affiche le texte complet */
.roadmap-phase.expanded .details {
  display: block;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .roadmap-section {
    padding: 1px 1px;
  }

  .roadmap-phase {
    padding: 2px 2px;
    margin-bottom: 30px;
  }

  .roadmap-phase h3 {
    font-size: 1.8rem; /* Ajuste pour mobile */
  }

  .roadmap-phase p,
  .roadmap-phase ul,
  .roadmap-phase li {
    font-size: 1.5rem;
  }

  .expand-button {
    padding: 5px 15px; /* Taille réduite */
    font-size: 0.9rem;
  }
}

.mask-custom-1, .mask-custom-2, .mask-custom-3, .mask-custom-4 {
  width: 100%;
  max-width: 1200px; /* Largeur maximale commune */
  margin: auto; /* Espace vertical et centré horizontalement */
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mask-custom-1 {
  background-color: rgba(178, 60, 253, 0.35);
}

.mask-custom-2 {
  background-color: rgba(97, 160, 255, 0.35);
}

.mask-custom-3 {
  background-color: rgba(58, 253, 123, 0.35);
}

.mask-custom-4 {
  background-color: rgba(175, 58, 253, 0.295);
}

.mask-custom-3-2 {
  background-color: rgba(175, 58, 253, 0.295);
  width: 100%; /* Occupe toute la largeur disponible */
  max-width: 100%; /* Aligné avec la largeur maximale du parent */
  margin: 0 auto; /* Centre horizontalement */
  padding: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* Permet aux enfants d'occuper toute la largeur */
  justify-content: center;
}

/* Applique à tous les textes de la section Contact */
.mask-custom-3-2 p,
.mask-custom-3-2 h2,
.mask-custom-3-2 a {
  width: 100%; /* Occupe toute la largeur disponible */
  max-width: 100%; /* Aligné avec la largeur maximale du parent */
  text-align: center; /* Centre le texte à l'intérieur */
  margin: 0 auto; /* Centre horizontalement */
  word-wrap: break-word; /* Permet de gérer les débordements */
}

@media (max-width: 1200px) {
  .mask-custom-3-2 {
    max-width: 90%; /* Réduit légèrement la largeur pour les tablettes */
  }
}

@media (max-width: 768px) {
  .mask-custom-3-2 {
    max-width: 95%; /* Presque toute la largeur pour mobiles */
  }
}

@media (max-width: 500px) {
  .mask-custom-3-2 {
    max-width: 98%; /* Pratiquement toute la largeur pour très petits écrans */
  }
}


/* Ajustement pour les tablettes */
@media (max-width: 1920px) {
  .mask-custom-1, .mask-custom-2, .mask-custom-3, .mask-custom-4 {
    max-width: 90%; /* Réduction de la largeur maximale */
  }
}

/* Ajustement pour les petits écrans */
@media (max-width: 768px) {
  .mask-custom-1, .mask-custom-2, .mask-custom-3, .mask-custom-4 {
    max-width: 95%; /* Presque toute la largeur pour mobiles */
  }
}

/* Ajustement pour les petits écrans */
@media (max-width: 500px) {
  .mask-custom-1, .mask-custom-2, .mask-custom-3, .mask-custom-4 {
    max-width: 98%; /* Presque toute la largeur pour mobiles */
  }
}

/*.faq-section {
  width: 100%;
  max-width: 1100px; /* Ajustez pour être proche de la largeur du mask 
  margin: 0 auto;
  padding: 15px;
  box-sizing: border-box;
}*/

.accordion {
  max-width: 100%;
}

.accordion-item {
  margin-bottom: 10px;
  background: transparent;
}

.accordion-button {
  word-wrap: break-word;
  white-space: normal;
  background: rgba(178, 60, 253, 0.5);
  color: #fff;
  text-shadow: none;
}

.accordion-button:not(.collapsed) {
  background: rgba(153,69,255, 0.6);
}

.accordion-body {
  background: rgba(153,69,255, 0.8);
  color: #fff;
}

.the-labels {
  color: red;
}

.contact-section .form-control {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.contact-section .form-control:focus {
  background: rgba(255, 255, 255, 0.2) !important;
}

.contact-section .form-label {
  color: #fff !important;
  padding-left: 10px;
}

.contact-section .btn-primary {
  background: linear-gradient(50deg, 
  rgba(153,69,255,1) 0%, 
  rgba(114,118,225,1) 35%, 
  rgba(64,183,184,1) 75%, 
  rgba(20,241,148,1) 100%);
  border: none !important;
}

/* Style général pour la section Contact */
.contact-section h2 {
  font-size: 2rem; /* Taille de base pour les grands écrans */
  word-wrap: break-word; /* Permet de couper les mots trop longs */
  overflow-wrap: break-word; /* Compatibilité étendue */
  max-width: 100%; /* Empêche le débordement horizontal */
  margin: 0 auto; /* Centre le texte horizontalement */
}

.contact-section p {
  font-size: 1.5rem; /* Taille de base pour les paragraphes */
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%; /* Empêche le débordement horizontal */
  margin: 0 auto 10px; /* Centre et espace entre les paragraphes */
}

.contact-email {
  font-size: 1.5rem;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-decoration: none; /* Supprime le soulignement par défaut */
  display: inline-block; /* Permet un meilleur contrôle de la largeur */
  max-width: 100%; /* Empêche le débordement horizontal */
}

/* Ajustements pour les petits écrans */
@media (max-width: 768px) {
  .contact-section h2 {
    font-size: 1.5rem; /* Réduction pour s'adapter aux petits écrans */
  }

  .contact-section p {
    font-size: 1.5rem; /* Réduction de la taille du texte */
  }

  .contact-email {
    font-size: 1.5rem; /* Ajuste la taille de l'email */
  }
}

/* Ajustements pour les très petits écrans */
@media (max-width: 500px) {
  .contact-section h2 {
    font-size: 1.5rem; /* Encore plus petit pour les très petits écrans */
  }

  .contact-section p {
    font-size: 1.1rem;
  }

  .contact-email {
    font-size: 1.1rem; /* Réduction de l'email pour les écrans étroits */
  }
}


.social-icon {
  height: 100px;
  width: 100px;
}


canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-fade-in.visible {
  animation: fadeIn 0.8s forwards;
}

.step, .fixmargintop, .fixpaddingbot {
  margin-top: 20px;
}

.fixmargintop {
  margin-top: 30px;
}

.fixpaddingbot {
  padding-bottom: 30px;
}

.space {
  height: 20px;
}

.go-back-btn {
  margin-bottom: 30px;
  margin-top: -20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.rounded-image {
  border-radius: 15px;
  overflow: hidden;
  display: inline-block;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 300px;
  overflow: hidden;
  margin-top: 30px;
}

.youtube-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
}