/* Estilos para la sección de parallax */
.parallax {
    /* Estilos para el parallax */
       background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px; /* Ajusta la altura según sea necesario */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Color del texto */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 2rem;
    text-align: center;
}

.parallax p {
    font-size: 20px; /* Tamaño de fuente más pequeño */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    font-weight: bold; /* Grosor del texto */
}

/* MISION VISION */
#about-values {
    padding-top: 100px; /* Ajusta el espaciado superior según sea necesario */
    padding-bottom: 100px; /* Ajusta el espaciado inferior según sea necesario */
}

.value-item {
    background-color: #fff; /* Color de fondo */
    border-radius: 10px; /* Bordes redondeados */
    padding: 30px; /* Espaciado interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
    transition: box-shadow 0.3s ease; /* Transición suave de la sombra */
    height: 300px; /* Altura fija para todos los elementos */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Establece la fuente */
    font-size: 15px;
    color: #3170ee; /* Color del texto */
    font-weight: bold; /* Grosor del texto */
}

.value-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8); /* Cambia la sombra al pasar el ratón */
}

/* Estilos para la sección de valores */
#values {
    background-color: #f8f9fa; /* Color de fondo */
    padding: 80px 0; /* Espaciado interno */
}

#values h2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente */
    color: #333; /* Color del texto */
}

#values .col-md-4 {
    padding: 20px; /* Espaciado interno */
}

#values .value-box img {
    width: 300px; /* Ancho fijo */
    height: 300px; /* Altura fija */
    object-fit: cover; /* Ajustar la imagen para llenar el contenedor */
    border-radius: 10px;
}

#values h4 {
    color:  #013bb0; /* Color del texto del título */
    font-weight: bold; /* Grosor de la fuente */
}

#values p {
    color: black; /* Color del texto del párrafo */
    font-weight: bold; /* Grosor de la fuente */
}

#values .card {
    transition: transform 0.3s ease;
}

#values .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
}