body, html {
  height: 100%;
  font-family: serenity, sans-serif;
}

.navbar-fixed {
  position: relative;
}

.carousel {
  height: 100%; /* Hauteur du carousel */
}

.carousel .carousel-item img {
  /*max-width: none;
  height: 100%;
  display: block; 
  margin: 0 auto; */
  max-width: auto;
  height: 100%;
  object-fit: cover;
  object-position: center;
  
}

.carousel-item {
  position: relative;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(121, 85, 72, 0.5); /* Fond semi-transparent pour le texte */
  padding: 10px; /* Espacement du texte par rapport au bord */
  border-radius: 5px; /* Coins arrondis pour l'overlay */
  color: white; /* Couleur du texte */
  width: 50%; /* Moitié de la largeur de l'image */
  text-align: center; /* Centrer le texte horizontalement */
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.centered-text {
  margin: 0;
  font-size: 4em; /* Taille du texte */
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8em;
  color: #333;
  cursor: pointer;
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

.page-footer {
  background-color: #333;
  color: white;
  height: 10%; /* Hauteur du footer */
}

.material-icons {
  vertical-align: middle;
}


.popup{
  background-color: black;
}

.modal h4{
  margin-bottom: 2em;
}

.modal img{
  height: 8em;
  color: rgba(121, 85, 72);
}

.initial-page, .main-content {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.initial-page {
  background-color: #fff; /* Couleur de fond de la page initiale */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.initial-page img{
  height: 100%;
  max-width: 100%;
}

.logo {
  width: 30%; /* Ajustez la taille du logo */
  height: 50%; /* Ajustez la taille du logo */
  filter: hue-rotate(20deg) saturate(150%);
}

.main-content {
  transform: translateY(-100%);
}

.hidden {
  display: none;
}

h1 {
  color: rgba(121, 85, 72);
}

.fade-in {
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-in.visible {
  opacity: 1;
}