@font-face {
  font-family: 'Pafigo';
  src: url('../fonts/Pafigo.otf') format('otf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Bardy';
  src: url('../fonts/Bardy.otf') format('otf'),
       url('../fonts/Bardy.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Buman-Bold';
  src: url('../fonts/Buman-Bold.otf') format('otf'),
       url('../fonts/Buman-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Abel-Regular';
  src: url('../fonts/Abel-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.message-fade {
  opacity: 0; /* Initialement invisible */
  transition: opacity 1.5s ease-in-out; /* Animation douce sur 0.5s */
  padding: 10px;
  background-color: lightgreen;
  margin-bottom: 10px;
  border-radius: 5px;
}
/* Slideshow container */
.slideshow-container {
  position: relative;
  /* Other styling like width, height, etc. */
}
/* Individual slides */
.mySlides {
  display: none; /* Initially hide all slides */
  text-align: center;
}
/* Optional: Fade effect for transitions */
.fade {
  animation-name: fadeEffect;
  animation-duration: 8.5s;
}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
.author {
  color: cornflowerblue;
}

/* If creating a sliding text effect within a slide */
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.slide-in-text {
  animation: slide-in 15s ease-out;
}
.box::before,
.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  transition: opacity 1s ease; /* Transition opacity */
}

.box::before {
  background-image: url('../img/bglog.jpg');
  opacity: 1; /* Initially visible */
}

.box::after {
  background-image: url('../img/bgcouple.jpg');
  opacity: 0; /* Initially hidden */
}

.box:hover::before {
  opacity: 0; /* Hide first image on hover */
}

.box:hover::after {
  opacity: 1; /* Show second image on hover */
}

.loading-gif {
  max-width: 500px;
}

@keyframes fadeOut {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.heart {
   animation: heartbeat 1.25s infinite;
}
.heart::before,
.heart::after {
  content: "";
  position: absolute;
}
.heart::after {
  top: 0;
}

@keyframes heartbeat {
  0% {
    transform: scale(1)
  }
  10% {
    transform: scale(1.15)
  }
  100% {
    transform: scale(1)
  }
}

.pre-loader {
  position: fixed;
  z-index: 2000; /** make sure this is the highest value compared to all other divs **/
  top: 0;
  left: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.pre-loader.hidden {
  animation: fadeOut 3s; /** change to 1s */
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.arr_plan{
  cursor: pointer;
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
 }
 .f_load{
  background-color: inherit;
  display: none;
  padding: 10px;
  position: fixed;
  top: 35%;
  left: 0px;
  right: 0px;
  z-index: 9000;
  margin: auto;
}