html, body {
  height: 100%; /* Ensure the page takes up the full height */
  margin: 0; /* Remove default margin */
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  background-color: #F8EDE3;
  background-image: url("img/background.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
}

@media (max-width: 768px) {
  html, body {
    background-image: url("img/background-mobile.png");
    background-size: cover; /* Adjust the background size for mobile */
    background-position: center; /* Align the image to the top */
  }
}


.container {
  flex: 1; /* Push the footer to the bottom */
}

.container2 {
  padding-bottom:-110px;
}


footer {
  height: 100px; /* Keep the footer height */
  position: relative; /* Remove fixed positioning */
  background-color: #FF0000; /* Optional: Ensure footer background is visible */
}

footer p {
  padding: 25px; /* Add padding to the footer text */
}

.details {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.details.animate-slide-down {
  max-height: 500px; /* Adjust based on content */
  opacity: 1;
}

@keyframes fade-in {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-in-out;
}