/* Global Watermark/Background styling */
body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/assets/img/afrique.png'); /* Relative to assets/styles.css */
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: min(80vw, 800px); /* Responsive size: 80% viewport width, max 800px */
  opacity: 0.05; /* Soft, premium watermark effect that keeps text readable */
  pointer-events: none; /* Let all click events pass through to elements underneath */
  z-index: -1; /* Keeps the map behind all text and components */
}

/* Couleurs personnalisées selon tes codes */
.bg-urunani-blue {
  background-color: #0f277e;
}

.text-urunani-blue {
  color: #002e63;
}

/* Bleu très foncé pour le texte */
.bg-urunani-keppel {
  background-color: #44aca0;
}

.text-urunani-keppel {
  color: #44aca0;
}

.bg-urunani-rose {
  background-color: #ea0f68;
}

.bg-urunani-orange {
  background-color: #ff8017;
}

.bg-urunani-white {
  background-color: #f5f6fa;
}

/* Animation pour le défilement sur mobile */
@keyframes scroll-text {
  /* Le texte commence à sa position normale */
  0% {
    transform: translateX(0%);
  }
  /* Il sort par la gauche */
  100% {
    transform: translateX(-100%);
  }
}

.animate-scroll {
  display: inline-block;
  white-space: nowrap;
  /* 40s pour une vitesse très confortable */
  animation: scroll-text 50s linear infinite;
  /* Un petit padding à droite pour que la fin ne colle pas au début du cycle */
  padding-right: 50px;
}

/* Couleurs personnalisées si non définies dans ton CSS */
.text-urunani-blue {
  color: #0f277e;
}
.border-urunani-rose {
  border-color: #ea0f68;
}
.text-urunani-keppel:hover {
  color: #44aca0;
}