/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

html {
  scroll-behavior: smooth !important;
}

body {
  font-family: "Raleway", sans-serif !important;
}

h1,
h2,
h3,
h4 {
  font-family: "Raleway", sans-serif !important;
  
}

.swiper-slide-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  /* Para pantallas pequeñas, como tablets y móviles */
  h4.text-modifiqued {
    font-size: 1.5em; /* Ajusta el tamaño según tus necesidades */
  }
}

@media (max-width: 768px) {
  .primary-menu-trigger {
    order: 1;
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .menu-container {
    display: none;
  }
}

span{
  color: rgba(9, 9, 126, 0.801) !important;
}

.menu-container li a{
  color: black !important;
}

.menu-container li a:hover{

color: rgba(9, 9, 126, 0.801) !important;
}

@keyframes heartbeat {
  0%, 100% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.2);
  }
}

.btn-wsp {
  position: fixed;
  bottom: 20px; /* Ajusta la distancia desde el borde inferior */
  left: 20px;   /* Ajusta la distancia desde el borde izquierdo */
  background-color: #25D366; /* Color inicial del botón */
  color: white !important; /* Color del icono */
  border-radius: 50%;
  padding: 15px;
  font-size: 24px;
  z-index: 1000;
  width: 80px; /* Ancho fijo */
  height: 80px; /* Alto fijo */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para mayor visibilidad */
  transition: background-color 0.3s ease; /* Transición para el cambio de color */
}

.btn-wsp:hover {
  background-color: #128C7E; /* Color del botón al pasar el cursor */
}

.icono {
  font-size: 44px;
}

.icono {
  animation: heartbeat 1.5s infinite; /* Aplicar la animación de latido */
}


ul li i{
 color: black !important;
}

ul li i:hover{
  color: rgb(2, 2, 139) !important;
}

::selection {
  background-color: #d1d1cf; /* Color de fondo de la selección */
  color: #000000; /* Color del texto seleccionado */
}

a{
  color: black !important;
}

a:hover{
  color: rgb(2, 2, 143) !important;
}

.uil:hover{
  background-color: rgb(46, 46, 146) !important;

}


@media (min-width: 769px) {
  .swiper-slide-bg video {
      object-fit: cover; 
  }
}