.whatsapp-btn {
  position: fixed;
  bottom: 80px; /* Ajusta la posición vertical según sea necesario */
  right: 20px; /* Ajusta la posición horizontal según sea necesario */
  background-color: #25D366; /* Color verde de WhatsApp */
  color: white; /* Color del texto */
  border: none; /* Sin borde */
  border-radius: 50%; /* Botón redondo */
  width: 50px; /* Ancho del botón */
  height: 50px; /* Alto del botón */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Sin subrayado */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra */
  transition: transform 0.3s ease; /* Transición suave para el efecto de aumento */
  z-index: 9999; /* Transición suave para el efecto de aumento */
  }

  .whatsapp-btn:hover {
    background-color: #128C7E; /* Color verde más oscuro al pasar el ratón */
    transform: scale(1.1); /* Aumenta el tamaño del botón al pasar el ratón */
  }

/***********************************************************************************************************/
/**************************************************************************************************************************************/
/* BOTON HACIA ARRIBA*/
.scroll-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #033189;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px; /* Esto se puede eliminar si usas flexbox */
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, transform 0.3s ease-in-out;
  z-index: 1000;
  display: flex; /* Agregado para usar flexbox */
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
}

.scroll-top-btn:hover {
  background-color: #22126e;
  transform: scale(1.1);
}

.scroll-icon {
  width: 24px; /* Ajusta el tamaño de la imagen según sea necesario */
  height: 24px; /* Ajusta el tamaño de la imagen según sea necesario */
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%); /* Comienza fuera de la pantalla a la derecha */
    opacity: 0; /* Se vuelve completamente transparente */
  }
  100% {
    transform: translateX(0); /* Llega a su posición original */
    opacity: 1; /* Se hace completamente opaco */
  }
} 

.btn-quiensomos {
  background-color: #d0383f; /* Color de fondo azul */
  color: white; /* Color del texto blanco */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  padding: 22px 34px; /* Espaciado interno */
  font-size: 16px; /* Tamaño de texto */
  cursor: pointer; /* Cambio de cursor al pasar por encima */
  transition: background-color 0.3s ease; /* Transición para el hover */
  animation: slideInFromRight 2s ease-out;
}

.btn-quiensomos:hover {
  background-color: #b71c24; /* Color de fondo cuando el mouse pasa por encima */
  text-shadow: 0 0 2px white, 0 0 2px white; /* Efecto más pronunciado */
}

.btn-quiensomos:focus {
  outline: none; /* Eliminar el contorno al hacer clic */
}

.btn-unete {
  background-color: #d0383f; /* Color de fondo azul */
  color: white; /* Color del texto blanco */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  padding: 22px 34px; /* Espaciado interno */
  font-size: 16px; /* Tamaño de texto */
  cursor: pointer; /* Cambio de cursor al pasar por encima */
  transition: background-color 0.3s ease; /* Transición para el hover */
  animation: slideInFromRight 2s ease-out;
}

.btn-unete:hover {
  background-color: #b71c24; /* Color de fondo cuando el mouse pasa por encima */
  text-shadow: 0 0 2px white, 0 0 2px white; /* Efecto más pronunciado */
}

.btn-unete:focus {
  outline: none; /* Eliminar el contorno al hacer clic */
}