body {
    font-family: 'Montserrat', sans-serif;
    color: white;
    margin: 0;
    padding: 0;
    background-image: url('../images/body.png'); /* Ajustar la ruta según tu estructura */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el fondo */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

header {
    width: 100%;
    background-color: #002c62;
    padding: 10px 0;
    text-align: center;
    height: 70px; /* Altura fija del header */
}

h2 {
    font-size: 40px;
    font-weight: bold;}

.card-img-top {
    height: 200px; /* Ajusta la altura según tus necesidades */
    object-fit: cover;
}

.header-image img {
    max-width: 100%;
    height: auto;
}

.navbar-custom {
    width: 100%;
    background-color: #005f99; /* Color de fondo del navbar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.navbar-toggler {
    border: none;
    color: white;
    font-size: 1.5rem; /* Tamaño del icono */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px; /* Altura del navbar igual a la del header */
    padding: 0; /* Elimina el padding */
}

.navbar-toggler-icon {
    background-color: transparent; /* Quita el color de fondo */
    width: 24px; /* Ancho del icono */
    height: 16px; /* Altura del icono */
    border-radius: 3px; /* Bordes redondeados opcionales */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0; /* Elimina el padding */
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    display: block;
    width: 24px; /* Ancho de las líneas del icono */
    height: 2px; /* Grosor de las líneas del icono */
    background-color: white; /* Color de las líneas */
    border-radius: 1px; /* Bordes redondeados opcionales */
}

.navbar-toggler-icon::before {
    margin-bottom: 4px; /* Espacio entre líneas */
}

.navbar-custom .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra las opciones */
    margin: 0; /* Elimina el margen para centrado adecuado */
}

.navbar-custom .navbar-nav .nav-link {
    color: #ddd;
    font-size: 18px; /* Tamaño de letra normal */
    font-weight: normal; /* Peso de letra normal */
}

.navbar-custom .navbar-nav .nav-link:hover {
    color: #c02d2f; /* Color al pasar el cursor */
    font-weight: bold; /* Negrita al pasar el cursor */
}

.img-fluid {
    width: 100%;
    height: auto;
}

.container {
    padding: 20px;
    text-align: center;
}

/* Estilos para pantallas pequeñas (celulares) */
@media (max-width: 768px) {

    h2 {
        font-size: 30px;  
    }

    .h2-banner {
        font-size: 20px;
    }
    header {
        padding: 5px 0; /* Ajusta el padding */
        height: 50px; /* Reduce la altura del header */
    }

    

    .header-image img {
        max-width: 100px; /* Establece un ancho fijo para la imagen */
        height: auto; /* Ajusta la altura automáticamente */
    }

    .navbar-custom {
        height: auto; /* Ajusta la altura automáticamente en pantallas pequeñas */
        flex-direction: column; /* Permite que el contenido se apile verticalmente */
        padding: 0; /* Elimina el padding para un ajuste más exacto */
    }

    .navbar-toggler {
        display: flex; /* Muestra el botón de menú desplegable */
        justify-content: center; /* Centra el botón horizontalmente */
        align-items: center; /* Centra el botón verticalmente */
        height: auto; /* Ajusta la altura automáticamente */
    }

    .navbar-toggler-icon {
        width: 24px; /* Tamaño del icono */
        height: 16px; /* Altura del icono */
    }

    .navbar-collapse {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: center;
        margin: 0; /* Elimina el margen para que el menú esté centrado */
    }

    .navbar-nav .nav-link {
        font-size: 14px; /* Tamaño de letra más pequeño */
    }

    .d-flex {
        flex-direction: column;
        align-items: center;
    }
    
    .card {
        width: 100%; /* Ocupa todo el ancho disponible */
        margin: 1rem 0; /* Ajusta el margen superior e inferior */
    }
   
}

/* Estilos para pantallas grandes (ordenadores) */
@media (min-width: 769px) {
    .navbar-custom {
        height: 70px; /* Altura fija del navbar igual a la del header */
    }

    .navbar-toggler {
        display: none; /* Oculta el botón de menú desplegable en pantallas grandes */
    }

    .navbar-collapse {
        display: flex !important; /* Asegura que el navbar esté siempre expandido en pantallas grandes */
        height: auto; /* Ajusta la altura automáticamente */
        justify-content: center; /* Centra horizontalmente las opciones del menú */
    }

    .navbar-nav {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .navbar-nav .nav-link {
        font-size: 18px; /* Tamaño de letra para pantallas grandes */
    }

    .video-container {
        width: 70%;
        margin: 0 auto; /* Centra el video horizontalmente */
    }
}