/* Services Section
--------------------------------*/

/* Estilo para el título de la sección de servicios */
#services h3 {
  font-size: 36px; /* Tamaño de fuente */
  color: #413e66; /* Color del texto */
  text-align: center; /* Alineación centrada */
  font-weight: 700; /* Grosor de la fuente */
  font-family: "Montserrat", sans-serif; /* Familia de fuente */
}

/* Estilo general para la sección de servicios */
#services {
  padding: 60px 0 40px 0; /* Relleno (padding) superior e inferior */
}

/* Estilo para cada caja de servicio */
#services .box {
  padding: 30px; /* Relleno interno */
  position: relative; /* Posición relativa */
  overflow: hidden; /* Ocultar desbordamiento */
  background: #fff; /* Fondo blanco */
  box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1); /* Sombra */
  transition: all 0.3s ease-in-out; /* Transición suave */
  text-align: center; /* Alineación centrada */
  height: 100%; /* Altura completa */
}

/* Efecto al pasar el cursor sobre la caja */
#services .box:hover {
  transform: scale(1.1); /* Escala al pasar el cursor */
}

/* Estilo para el icono dentro de la caja */
#services .icon {
  margin: 0 auto 15px auto; /* Margen */
  padding-top: 12px; /* Relleno superior */
  display: inline-block; /* Visualización en línea */
  text-align: center; /* Alineación centrada */
  border-radius: 50%; /* Borde redondeado */
  width: 60px; /* Ancho */
  height: 60px; /* Altura */
}

/* Estilo para el icono dentro del contenedor */
#services .icon i {
  font-size: 36px; /* Tamaño de fuente */
  line-height: 0; /* Altura de línea */
}

/* Estilo para el título de cada servicio */
#services .title {
  font-weight: 700; /* Grosor de la fuente */
  margin-bottom: 15px; /* Margen inferior */
  font-size: 16px; /* Tamaño de fuente */
  font-family: "Montserrat", sans-serif; /* Familia de fuente */
}

/* Estilo para los enlaces en el título */
#services .title a {
  color: #ffffff; /* Color del enlace */
}

/* Cambio de color del enlace al pasar el cursor sobre la caja */
#services .box:hover .title a {
  color: #1bb1dc; /* Color del enlace al pasar el cursor */
}

/* Estilo para la descripción de cada servicio */
#services .description {
  font-size: 14px; /* Tamaño de fuente */
  color: #ffffff; /* Color del texto */
  line-height: 28px; /* Altura de línea */
  margin-bottom: 0; /* Sin margen inferior */
  font-family: "Montserrat", sans-serif; /* Familia de fuente */
}
.separator {
  border: 0;
  height: 1px;
  background: #ccc;
  margin: 15px 0;
}

/*-------------icono--------------*/
#services .icon {
  margin: 0 auto 15px auto;
  padding-top: 12px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  transition: color 0.3s ease; /* Añadimos una transición para el cambio de color */
}

#services .icon i {
  font-size: 36px;
  line-height: 60px; /* Alinea el ícono verticalmente */
  color: #ffffff; /* Color inicial del icono */
}
#services .box:hover .icon i {
  color: #1793B9; /* Color del icono cuando se pasa el mouse sobre la caja */
}