@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* Estilos para la clase de la tarjeta */
.card {
    transition: box-shadow 0.1s ease; /* Transición suave para el efecto */
}

.card:hover {
    box-shadow: 0 0 10px rgba(2, 35, 56, 0.795); 
    transform: scale(1.05);
    transition: transform 0.5s ease;/* Añade sombra al pasar el ratón */
}

.img-fluid:hover {
    box-shadow: 0 0 10px rgba(2, 35, 56, 0.795); /* Añade sombra al pasar el ratón */
}

/* Estilos para la imagen dentro de la clase boton-imagen */
.boton-imagen img {
    display: block;
    width: 100px; /* Ancho de la imagen */
    height: auto;
}

/* Estilos para la clase boton-imagen cuando se pasa el ratón sobre ella */
.boton-imagen:hover {
    opacity: 0.8; /* Cambia la opacidad cuando se pasa el ratón por encima */
}

/* Estilos para el cuerpo del documento */
.pp {
    background-color: #ffffff;
}

/* Estilos para el contenedor fluido */
.container-fluid {
    background-color: #fcfbfb;
}

/* Estilos para los enlaces de la barra de navegación */
.navbar-nav .nav-link {
    color: rgb(0, 0, 0) !important;
    font-size: 17px;
    font-weight: 600; /* Cambia el color del texto a blanco */
}
.card-title{
    font-size: 18px;
    justify-content: center;
  
   
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
      ;
      font-weight: 1000;
}
/* Estilos para los enlaces de navegación al pasar el ratón */
.nav-link:hover {
    opacity: 0.2;
}

/* Estilos para la imagen superior de la tarjeta */
.card-img-top {
    background-color: white;
}

/* Estilos para el cuerpo de la tarjeta */
.card-body {
    background-color: #fcfbfb;
    font-size: 18px;
    justify-content: center;
  
   
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
      ;
      font-weight: 10000;
}

/* Estilos para el botón de contorno claro */
.btn.btn-outline-light {
    justify-content: center;
}

.navbar-nav .nav-link {
    color: rgb(0, 0, 0) !important;
    font-size: 17px;
    font-weight: 600;
    position: relative; /* Para que la línea roja se posicione correctamente */
    transition: opacity 0.3s, border-bottom 0.3s ease; /* Suavizar las transiciones */
}

/* Estilos para los enlaces de navegación al pasar el ratón */
.nav-link:hover {
    opacity: 0.5;
}

/* Agregar la línea roja al pasar el ratón */
.nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Ajusta la posición de la línea roja */
    left: 0;
    right: 0;
    height: 2px;
    background-color: red; /* Color de la línea roja */
    transform: scaleX(1);
    transition: transform 0.3s ease;
}

/* Ocultar la línea roja cuando no está en hover */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Ajusta la posición de la línea */
    left: 0;
    right: 0;
    height: 2px;
    background-color: red;
    transform: scaleX(0); /* Escala en 0 para ocultar la línea */
    transition: transform 0.3s ease;
}

/* Ajustes para el botón toggler */
.custom-toggler {
    border: 2px solid rgb(0, 0, 0); /* Añade un borde blanco visible */
    padding: 5px; /* Espaciado interno para que sea más grande */
    border-radius: 5px; /* Esquinas redondeadas */
    background-color: #004080; /* Fondo visible */
    color: white; /* Color del ícono */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Añade una sombra */
}


/* Color del ícono dentro del botón toggler */
.navbar-toggler-icon {
    background-color: #1391cc;
}

/* Asegura que el menú colapsado sea visible */
.collapse {
    background-color: #fcfbfb; /* Color de fondo del menú desplegable */
}

/* Ajustes para las opciones en el menú desplegable */
.collapse .nav-link {
    color: black !important; /* Asegura texto blanco */
    text-align: center; /* Centrado en dispositivos pequeños */
   
}

/* Estilos para el contenedor */
.card {
    margin-top: 50px;
}

/* Estilos para el texto alineado al centro */
.ppp {
    text-align: center;
}
.titulo-container {
    background-color: #1391cc; /* Color de fondo del contenedor */
    border: 2px solid #ffffff; /* Borde blanco de 2px */
    padding: 10px; /* Espaciado interno */
    border-radius: 10px; /* Borde redondeado */
    margin-bottom: 20px; /* Espaciado inferior */
    animation: slideInLeft 2s ease;
}

.titulo {
    color: #ffffff; /* Color del texto */
    margin-bottom: 5px; /* Espaciado inferior del título */
}

.subtitulo {
    background-color: #ec9191; /* Color de fondo del contenedor */
    border: 2px solid #ffffff; /* Borde blanco de 2px */
    padding: 10px; /* Espaciado interno */
    border-radius: 10px; /* Borde redondeado */
    margin-bottom: 20px; /* Espaciado inferior */

    color: #ffffff; /* Color del texto */
    margin-top: 5px; /* Espaciado superior del subtitulo */
    animation: slideInLeft 3s ease;
}

p{
    font-style: normal;
}
.img-fluid{
    border: 5px solid #acacac; /* Borde negro de 5px */
    border-radius: 10px;    /* Esquinas redondeadas */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
    max-width: 100%;
    height: auto;
    transition: box-shadow 0.3s ease;
}