.hero-section {
            background-color: #142e61ff;
            color: #142e61ff;
            padding: 140px 0;
        }

        .container {
            position: relative;
            z-index: 2;

        }

        .hero-title {
            font-size: 2.5rem;
            font-weight: 700;
        }

        @media only screen and (max-width: 767px) {
            .hero-section {
                padding: 120px 0;
            }
        }

        .fadeIn {
            animation: fadeInAnimation ease 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
                transform: translateY(-50px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .navbar-brand {
            flex: 1; /* Estirar para ocupar el espacio restante */
            display: flex;
            justify-content: center; /* Centrar la imagen del logo */
            
        }
        .submenu a:first-child {
            display: none;
        }
/* menu */

#menu ul {
 list-style:none;
 margin:0;
 padding:0;
}

/* items del menu */

#menu ul li {
 background-color:#2e518b;
}

/* enlaces del menu */

#menu ul a {
 display:block;
 color:#fff;
 text-decoration:none;
 font-weight:400;
 font-size:15px;
 padding:10px;
 font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-transform:uppercase;
 letter-spacing:1px;
}

/* items del menu */

#menu ul li {
 position:relative;
 float:left;
 margin:0;
 padding:0;
}

/* efecto al pasar el ratón por los items del menu */

#menu ul li:hover {
 background:#5b78a7;
}

/* menu desplegable */
#menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #eee;
  padding: 0;
  z-index: 1; /* Asigna un valor z-index */
}

/* items del menu desplegable */
#menu ul ul li {
  float: none;
  width: 200px;
}

/* enlaces de los items del menu desplegable */
#menu ul ul a {
  line-height: 120%;
  padding: 10px 15px;
}

/* items del menu desplegable al pasar el ratón */
#menu ul li:hover > ul {
  display: block;
}