/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */
.logo img {
    max-height: 150px !important;
    height: auto;
}

section#header {
    background-color: #1363C6;
    color: #ffffff;
}

.main-menu{
    background-color: #14183E;
}

section#main-body{
    background-color: #F4F7FE;
}

section#footer{
    background-color: #14183E;
    color: #fff;
    text-align: center;
}

body{
    background-color: #1363C6;
}

ul.top-nav>li>a {
    padding: 6px 10px;
    color: #fff;
    line-height: 20px;
    text-decoration: none
}

/* Estilos generales para los botones de redes sociales */
.btn-redes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;   /* Tamaño del círculo */
    height: 40px;  /* Tamaño del círculo */
    border-radius: 50%;  /* Hace que el botón sea redondo */
    font-size: 15px;     /* Tamaño del icono dentro del botón */
    color: #000;         /* Color del icono */
    background-color: #F6F8FE; /* Color de fondo del botón (azul por defecto) */
    transition: background-color 0.3s ease; /* Transición suave al cambiar color */
    text-decoration: none; /* Eliminar subrayado de los enlaces */
}

/* Estilo para el hover (al pasar el ratón sobre el botón) */
.btn-redes:hover {
    background-color: #0056b3; /* Un azul más oscuro al hacer hover */
    color: #fff; /* Color del icono en hover */
}