html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-image: url("../../assets/img/bg1.jpg");
  background-size: cover;
  background-position: center;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
}

/* overlay azul */

.overlay {
  flex: 1;
  background: linear-gradient(rgba(0, 95, 140, 0.9), rgba(0, 70, 110, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* botón */

.btn-primary {
  background: #1f8dbd;
}

.btn-primary:hover {
  background: #176e95;
}

/* animación */

.fade-in {
  animation: fadeIn 0.7s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}