:root {
    --bs-body-bg: var(--bs-gray-100);
}

.lead {
    font-size: 1.25rem;
    color: #666;
}

.navbar-brand img {
    max-height: 60px; /* Adjust as needed */
}

.banner-image img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
}

.input-group-text {
    background-color: #eee;
    border: 1px solid #ccc;
}

.form-control {
    border: 1px solid #ccc;
}

.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

footer {
    padding: 20px 0;
    background-color: #005792; /* Un azul oscuro profesional */
    border-top: 1px solid #003d5c; /* Un toque más oscuro para definir el límite */
    color: #ffffff; /* Texto claro para un alto contraste */
}

.navbar-custom {
    background-color: #005792; /* Un azul oscuro profesional */
    border-bottom: 2px solid #003d5c; /* Un toque más oscuro para definir el límite */
}

.navbar-custom .navbar-nav .nav-link {
    color: #ffffff; /* Texto claro para contraste */
}

.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-link:focus {
    color: #cadeef; /* Un azul claro para hover y focus */
}

body {
    font-family: 'Open Sans', sans-serif;
    color: #333333; /* Un color de texto oscuro para mejor lectura */
}

h1, .form-header {
    font-size: 2.5rem; /* Ajusta según la importancia */
    font-weight: 700; /* Más grueso para encabezados */
    color: #005792; /* Cohesión con el esquema de colores */
}

p, .nav-link {
    font-size: 1rem;
    font-weight: 400; /* Normal para texto */
}

.lead {
    font-size: 1.25rem;
    font-weight: 600; /* Semi-grueso para destacar */
    color: #005792; /* Cohesión con el esquema de colores */
}

@media (max-width: 768px) {
    .input-group .input-group-text {
        width: auto; /* Mantiene el ancho natural de input-group-text */
        flex-shrink: 0; /* Evita que el input-group-text se reduzca */
    }

    .input-group .form-control {
        width: calc(100% - 40px); /* Ocupa el 100% del ancho disponible menos el ancho aproximado del input-group-text */
        margin-left: 10px; /* Añade un pequeño margen a la izquierda del form-control para separación */
    }

    /* Para manejar el input-group de forma adecuada, asegúrate de que no envuelva los elementos */
    .input-group {
        flex-wrap: nowrap; /* Evita que los elementos del input-group se envuelvan en una nueva línea */
    }
}