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

/* 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;
  
    margin: 0;
}


.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 la barra de navegación */
.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;
    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: #002f6c;
}

/* 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 botón de contorno claro */
.btn.btn-outline-light {
    justify-content: center;
}

/* Estilos para el pie de página */

.footer {
    width: 100%;
    margin: 0;
    padding: 40px 0;
    background-color: #002f6c; /* Fondo azul */
  }
  body {
    margin: 0; /* Elimina márgenes que puedan causar espacios */
    padding: 0;
  }

.footer a {
    color: #ffffff;
    text-decoration: none;
    width: 100%;
    position: relative;
    left: 0;
    margin: 0;
    
  }
  .container-fluid {
    padding: 0;
  }
  .footer a:hover {
    text-decoration: underline;
  }
  
  .footer h5 {
    color: #ffffff;
  }
  
  .footer p {
    color: #dddddd;
  }
  

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

/* Estilos para el texto alineado al centro */
.ppp {
    text-align: center;
}
.titulo-container {
    background-color: #023981 ; /* 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: 0; /* Elimina el margen inferior predeterminado */
}
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.modal-text {
    flex: 1;
}

.modal-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Espacio de 20px entre imágenes */
  }
  
  .modal-images img {
    width: 30%; /* Cada imagen ocupará un 30% del ancho total */
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
  }
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.main-card {
    width: 15rem;
    cursor: pointer;
}

.cards-container {
    display: flex;
    gap: 20px;
}
/* Form Styles */
.form-container {
    background: white;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    
  }
  .form-group {
    margin-bottom: 15px;
  }
  
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  input, select, textarea {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  button {
    background-color: #023981;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    display: inline-block; /* Alternativa a block si prefieres */
    font-size: 16px;
    cursor: pointer;
    text-align: center;
  }
  
  button:hover {
    background-color: #356099;
  }
  h2 {
    text-align: center;
    color: #333;
  }
  .boton{
    text-align: center; /* Centra el contenido dentro del contenedor */
      padding: 20px; /* Espaciado interno */
  }