body {
    font-family: 'Roboto Flex', sans-serif; /* Aplica la fuente Roboto */
    font-weight: 200; /* Peso de la fuente normal */
    font-size: 16px; /* Tamaño de fuente base */
    background-color: #f5f5f5;
}

.navbar {
    /* background: linear-gradient(270deg, rgb(174, 199, 245) 0%, rgb(216, 229, 240) 100%); */
    background: linear-gradient(90deg, #ffffff 0%, #f3f5f7 100%);
    color: white;
    font-size: 18px; /* Tamaño de fuente base */

    font-weight: 400;
}
.navbar-logo {
    height: 40px;
    width: auto;
    margin-right: 10px;
}


.navbar-padding-left {
    padding-left: 88px;
}

.large-logo {
    width: 30%; /* Ajusta el tamaño según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
}

.hidden {
    display: none;
}

.navbar-nav .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.9);
    border: none; /* Eliminar el borde */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem; /* Bordes redondeados */
}

.large-logo {
    width: 550px; /* Ajusta el tamaño según sea necesario */
    height: auto;
}

.btn-primary, .btn-dark {
    padding: 10px 20px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espacio entre el ícono y el texto */
}

.btn-primary i, .btn-dark i {
    font-size: 1.5rem; /* Tamaño del ícono */
}

.btn-dark {
    background-color: #69757D;
    color: white; /* Color inicial del texto */
    border: 2px solid #69757D; /* Borde inicial del botón */
    padding: 10px 20px; /* Espaciado interno del botón */
    border-radius: 4px; /* Esquinas redondeadas */
    cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
    transition: background-color 0.3s, color 0.3s, border 0.3s; /* Animación suave */
}

.btn-dark:hover {
    background-color: #4a5a63; /* Cambiar color de fondo al pasar el mouse */
    color: #e0e0e0; /* Cambiar color del texto al pasar el mouse */
    border: 2px solid #4a5a63; /* Cambiar color del borde al pasar el mouse */
}