/* Footer styles */

footer {
  height: auto;
  width: 100%;
  padding: 3rem;
  text-align: center;
  margin-top: 0;
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  position: relative; /* Add this line */
}

.footer-bg {
  height: auto;
  opacity: 55%;
  background-image: linear-gradient(
      rgba(246, 246, 246, 0.079),
      rgba(27, 18, 1, 0.056)
    ),
    url("Imagenes/vaporEffect.png");
  background-size: cover, auto;
  background-repeat: repeat-x;
  background-position: center center;
  position: absolute; /* Add this line */
  top: 0; /* Add this line */
  left: 0; /* Add this line */
  right: 0; /* Add this line */
  bottom: 0; /* Add this line */
  z-index: -1; /* Add this line */
}

.footer-text {
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem; /* Use 'rem' for better scalability */
  color: #fafafafd;
  text-shadow: 2px 3px 5px rgb(0, 0, 0);
}

@media (max-width: 768px) {
  footer {
    height: auto;
    width: 100%;
    opacity: 0.8;
    padding: auto; /* Increase the padding for better visibility on smaller screens */
  }

  .footer-text {
    height: max-content;
    font-size: 1.5rem; /* Reduce the font size for better readability on smaller screens */
  }
}