#web-content {
  display: none;
}

#web-loading {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("./../img/bg.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Contenedor invisible solo para centrar los elementos */
.centered-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; /* Centrar horizontalmente los elementos */
}

/* Título centrado */
.centered-container h1 {
  font-size: 90px;
  font-family: "Ubuntu";
  font-weight: 700;
  color: black; /* Puedes ajustar el color según el fondo */
  margin: 70px 0 0;
  padding-bottom: 80px;
}

/* Loader centrado debajo del título */
.centered-container .loader {
  margin-top: 80px;
}

.loader {
  display: inline-block;
  width: 70px;
  height: 70px;
  vertical-align: middle;
  top: 50%;
}

.loader-double {
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: gray;
  border-bottom-color: gray;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
  position: relative;
}

.loader-double::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 45px;
  background-color: #00ff00; /* Círculo verde en el centro */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Mini título "Connecting" debajo del spinner con animación */
.centered-container .connecting {
  font-size: 30px;
  font-family: "Ubuntu";
  font-weight: 700;
  color: gray; /* Ajusta el color según el diseño */
  margin-top: 15px; /* Espacio ligero entre el spinner y el texto */
  animation: flicker 2s infinite; /* Animación continua */
}

/* Keyframes para el efecto de parpadeo */
@keyframes flicker {
  0%,
  100% {
    opacity: 1; /* Totalmente visible */
  }
  10%,
  20% {
    opacity: 0.1; /* Casi invisible */
  }
  30% {
    opacity: 0.5; /* Leve parpadeo */
  }
  40% {
    opacity: 0.3; /* Más tenue */
  }
  60%,
  80% {
    opacity: 0.9; /* Parpadeo más fuerte */
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}