body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container3 {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.top-div {
    width: 100%;
    height: 70%; /* Ajuste de altura */
    position: absolute;
    top: 0;
    background-image: url('assets/img/bg-masthead.jpg');
    background-size: cover;
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 0% 100%);
}

.top-div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 57, 116, 0.5); /* Azul oscuro con transparencia */
}

.bottom-div {
    width: 100%;
    height: 30%; /* Ajuste de altura */
    position: absolute;
    bottom: 0;
    background-color: #ffffff;
}

.navbar-img img {
    max-height: 35px; /* Adjust the value as needed */
    
}


.container {
    background: linear-gradient(to bottom right, rgba(206, 212, 218, 0.5), rgba(206, 212, 218, 0.5)), #CED4DA;
    padding: 20px;
    text-align: center; /* Para centrar el contenido horizontalmente */
}




.blue-section {
    padding: 20px 0; /* Ajusta el espacio interno superior e inferior */
    overflow-y: auto; /* Añade desplazamiento vertical si el contenido excede la altura */
    max-height: calc(100vh - 56px); /* Limita la altura máxima de la sección al 100% de la altura de la ventana, menos la altura de la barra de navegación (56px en Bootstrap) */
}

.blue-section img {
    max-width: 100%; /* Asegura que la imagen no supere el ancho del contenedor */
    height: auto; /* Permite que la altura de la imagen se ajuste proporcionalmente al ancho */
}


.text-center {
    font-size: 55px; /* Tamaño de fuente más grande */
    font-weight: bold; /* Texto en negrita */
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #173974; /* Cambia #ff0000 al código de color específico que desees */

}

.container4 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

.container3 {
    padding-top: 300px; /* Puedes ajustar el valor según sea necesario */
}


/* Agrega este CSS para ajustar el espacio entre las imágenes y el modal */
.modal-dialog {
    position: absolute;
    top: 50%;
    left: 10%; /* Ajusta el valor según sea necesario */
    transform: translate(-50%, -50%);
}

.my-img {
    cursor: pointer;
}

.small-img {
    max-width: 100px; /* ajusta el tamaño de la imagen */
}

.centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -250px; /* Ajusta el valor según sea necesario para mover la imagen más arriba */
  }



/* Estilo personalizado para los modales */
.modal-content {
    background-color: #f6f6f6 !important; /* Cambia el color de fondo del modal */
    color: #212529 !important; /* Cambia el color del texto dentro del modal */
    border: 5px solid #cccccc !important; /* Añade un borde alrededor del modal */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important; /* Agrega una sombra */
}

.modal-header {
    border-bottom: 1px solid #010203 !important; /* Cambia el color del borde inferior del encabezado del modal */
}

.modal-footer {
    border-top: 1px solid #030304 !important; /* Cambia el color del borde superior del pie de página del modal */
}


.h4 {
    color: #173974; /* Cambia el color del texto */
    font-family: Arial, sans-serif; /* Cambia la fuente del texto */
    font-weight: bold; /* Añade negrita al texto */
    text-align: center; /* Centra el texto */
    padding-top: 10px;
    /* Otros estilos que desees aplicar */
}





nav {
    background-color: #173974; /* Color de fondo de la barra de menú */
}

nav ul {
    list-style-type: none; /* Quitamos las viñetas de la lista */
    padding: 0; /* Eliminamos el relleno predeterminado de la lista */
    margin: 0; /* Eliminamos el margen predeterminado de la lista */
    display: flex; /* Mostramos los elementos de la lista en una línea horizontal */
} 

nav li {
    display: inline-block; /* Cambiamos el valor de visualización a "inline-block" */
}

nav a {
    display: block;
    color: white; /* Color del texto */
    padding: 20px 25px; /* Espaciado interior */
    text-decoration: none; /* Quitamos el subrayado de los enlaces */
    align-content: center;
}

nav a:hover {
    background-color: #f8f3f3; /* Color de fondo al pasar el ratón sobre un enlace */
    text-decoration: none; /* Quitamos el subrayado al pasar el ratón por encima */
}




.content {
    margin-bottom: 100px; /* Añade margen inferior al contenido para dejar espacio para la sección */
}

.container2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
}

.inner-container2 {
    width: 20%; /* Puedes ajustar el ancho como desees */
    max-width: 600px; /* Puedes ajustar el ancho máximo como desees */
    max-height: 200;
    padding: 20px;
}

h3 {
    color: #173974; /* Cambia el color del texto */
    font-family: Arial, sans-serif; /* Cambia la fuente del texto */
    font-size: 50px; /* Cambia el tamaño del texto */
    font-weight: bold; /* Añade negrita al texto */
    text-align: center; /* Centra el texto */
    margin-top: 10px; /* Añade un margen en la parte superior del elemento */
    /* Otros estilos que desees aplicar */
}

.navbar-img{
    width: 120px; /* Puedes ajustar el ancho como desees */
    height: auto; /*Permite que la altura se ajuste automaticamente*/
}

#logo{
    max-width: 95px; /* Puedes ajustar el ancho máximo como desees */
    height: auto; /*Permite que la altura se ajuste automaticamente*/
  }




.navbar-toggler-icon {
    background-image: url('assets/img/menu.png');; /* Oculta el ícono predeterminado */
}




/* Estilos para pantallas grandes */
@media (min-width: 768px) {
    .container3 {
        padding-top: 300px; /* Se mantiene el padding-top para pantallas grandes */
    }
}

/* Estilos para pantallas pequeñas */
@media (max-width: 767px) {
    .container3 {
        padding-top: 150px; /* Se reduce el padding-top para pantallas pequeñas */
    }
}

/* Estilos para las imágenes */
.my-img {
    cursor: pointer;
    max-width: 100%; /* Asegura que la imagen no supere el ancho del contenedor */
    height: auto; /* Permite que la altura de la imagen se ajuste proporcionalmente al ancho */
}

/* Estilos para el logo */
#logo {
    max-width: 80px; /* Se reduce el ancho máximo del logo */
    height: auto; /*Permite que la altura se ajuste automáticamente*/
}