* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: montserrat;
}

body {
    /*background: rgb(28, 61, 127);
  background: linear-gradient(0deg, rgb(28, 61, 127) 0%, rgb(36, 65, 207) 100%);*/
    background-color:whitesmoke;
    font-family: montserrat;
}

.faq {
    padding: 1.5em;
    padding-top:3em;
    text-align: center;
    font-size: 45px;
    font-family: montserrat;
    font-weight: bold;
    color: whitesmoke;

}

#menu {
    color: aliceblue;
    padding: 1em;
  }
  
  #menu ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    width: 80%;
    font-weight: bold;
    list-style: none;
  }
  
  #menu ul li a {
    color: aliceblue;
    margin-right: 35px;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
  }
  
  #menu ul li a:hover {
    color: #2a98f9;
  }
  
  .logo-economic {
    background-color: #190eaf;
  }
  
  .logo-economic img {
    width: 75%;
    margin: 20px 0 0 10%;
    padding: 2em;
  }
  
  .logo-economic nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 0;
    background-color: #190eaf;
    opacity: 0.9;
    z-index: 998;
  }
  
  .logo-economic ul {
    margin-left: 17%;
  }
  
  .company-name {
    position: relative;
    left: 13%;
    top: 25px;
    color: whitesmoke;
    opacity: 0;
    transition: opacity 0.5s;
  }
  
  .scrolled .company-name {
    opacity: 1;
  }
  
  .barra {
    display: none;
    width: 100%;
    background-color: rgb(0, 0, 175);
    height: 160px;
    text-align: center;
    padding-top: 1em;
  }
  
  .barra img {
    max-width: 95%;
    height: 80%;
  }
  
  @media (max-width: 750px) {
    .nav-fija {
      display: none;
    }
    .nav-pop, .navs {
      visibility: visible;
      width: 100%;
      background-color: rgba(0, 58, 159, 0.567);
    }
    .barra {
      display: block;
    }
  }
  
  .tit {
    text-align: center;
    font-weight: 900;
  }
  
  .texto {
    width: 75%;
    margin: 2em auto 0;
    background-color: rgb(0, 86, 198);
    border-radius: 10px;
    padding: 1em;
  }
  
  @media (max-width: 860px) {
    .texto {
      width: 95%;
      margin-left: 2.5%;
    }
  }
  
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3em;
    background-color:#190eaf;
    backdrop-filter: blur(10px);
    position: relative;
    top: -40px;

  }
  
  .navbar .toggle-btn {
    display: none;
    color: aliceblue;
    font-size: 0.5em;
    padding: 1.5em;
    margin-right: 2em;
  }
  
  /*.dropdown-menu {
    display: none;
    position: absolute;
    top: 250px;
    right: 4rem;
    width: 300px;
    height: 0px;
    line-height: 3em;
    border-radius: 10px;
    background: whitesmoke;
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: height 0.2s cubic-bezier(0.175, 0.882, 0.32, 1.275);
  }
    */
    .dropdown-menu {
      visibility: hidden; /* Ocultar visualmente el menú */
      opacity: 0; /* Hacer el menú transparente */
      position: absolute;
      top: 305px;
      right: 3rem;
      width: 280px;
      height: 0; /* Colapsar la altura del menú */
      line-height: 3em;
      border-radius: 10px;
      background: whitesmoke;
      backdrop-filter: blur(10px);

      overflow: hidden; /* Ocultar el contenido desbordado */
      transition: height 0.2s cubic-bezier(0.175, 0.882, 0.32, 1.275), opacity 0.2s ease, visibility 0.2s ease;
  }
  .dropdown-menu li {
    padding: 0;
    text-align: center;
  }
  
  /*.dropdown-menu.open {
    height: 420px;
  }
    */
    .dropdown-menu.open {
      visibility: visible; /* Hacer el menú visible */
      opacity: 1; /* Hacer el menú opaco */
      height: 420px; /* Expandir la altura del menú */
      width: 250px;
  }
  
  @media (max-width: 860px) {
    .navbar .toggle-btn {
      display: block;
      cursor: pointer;
      margin-left: auto;
    }
    #menu {
      display: none;
    }
    }
  
  @media(max-width:630px){
    .dropdown-menu {
      top: 350px;
    }
  }
  @media(max-width:360px){
    .dropdown-menu {
      top: 200px;
    }
  }

/*MENU INICIO */
.faqs {
    margin: 5px;
    margin-left: 15%;
    margin-right: 15%;
    text-align: center;
    padding: 10px;
    color: rgb(9, 9, 9);
}

.faq {
    text-shadow: 2px 2px 0 rgb(21, 0, 91);
    /*background-color: rgb(4, 0, 213);*/
 background-color: #190eaf;
}
p{
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
}
.primer {
    text-shadow: 2px 2px 0 rgb(21, 0, 91);
    margin: 0%;
}

.segundo {
    text-shadow: 2px 2px 0 rgb(21, 0, 91);
}

.tercero {
    text-shadow: 2px 2px 0 rgb(21, 0, 91);
}

.cuarto {
    text-shadow: 2px 2px 0 rgb(21, 0, 91);
}

.quinto {
    text-shadow: 2px 2px 0 rgb(21, 0, 91);
}

.sexto {
    text-shadow: 2px 2px 0 rgb(21, 0, 91);
}

.septimo {
    text-shadow: 2px 2px 0 rgb(21, 0, 91);
}

.octavo {
    text-shadow: 2px 2px 0 rgb(21, 0, 91);
}

.noveno {
    text-shadow: 2px 1px 0 rgb(21, 0, 91);
}


/* footer ------------------------------------ */
.footer {
    width: 100%;
    /*background-color: darkgreen;*/
    background-color: darkblue;
    margin-top: 25px;
}

.footer .grupo1 {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
    padding: 10px 0px;
    /* border: 4px solid;*/
}

.num1 {
    margin-left: 10%;
}

.footer .grupo1 .box figure {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 3px solid green;*/
}

.footer .grupo1 .box figure img {
    width: 160%;
}

.footer .box h2 {
    font-size: 25px;
    font-family: montserrat;
    color: aliceblue;
    margin-top: 25px;
}

.footer .box h3 {
    font-size: 20px;
    font-family: montserrat;
    color: aliceblue;
    margin-top: 25px;
}

.footer .box h4 {
    font-size: 50px;
    font-family: montserrat;
    color: aliceblue;
    text-align: end;
    margin-left: -48%;
}

.footer .box p {
    font-size: 11px;
    font-family: montserrat;
    color: aliceblue;
    text-align: justify;
    margin-top: 25px;
}

.footer .box a {
    box-sizing: content-box;
    width: 200px;
    height: 200px;
    text-decoration: none;
}

.logos {
    /*border: 4px solid;*/
    width: 350px;
    height: 150px;
    margin-top: 25px;
}

.minibox {
    width: 100px;
    float: left;
    /*poner elementos a la izquierda*/
    height: 100px;
}

.max {
    max-width: 80px;
    height: 80px;
}

@media screen and (max-width: 800px) {
    .footer .grupo1 {
        width: 90%;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
        padding: 35px 0px;
        /* border: 4px solid;*/
    }

    .footer .grupo1 .box figure img {
        width: 100%;
    }

    .footer .box p {
        font-size: 11px;
        font-family: montserrat;
        color: aliceblue;
        text-align: left;
    }
}
 /* Estilos para el Navbar en dispositivos móviles */
 @media (max-width: 860px) {
    .navbar .toggle-btn {
        display: block;
        cursor: pointer;
        margin-left: auto;
        font-size: 1.5em; /* Aumenta el tamaño del icono del menú */
        padding: 0.5em; /* Ajusta el padding para mayor usabilidad */
    }
  
    .dropdown-menu {
        display: block;
        width: 40%; /* Asegúrate de que el menú desplegable ocupe todo el ancho */
        background-color:whitesmoke; /* Aumenta la opacidad para mejor visibilidad */
        text-align: center; /* Centra los elementos del menú */
        padding: .5em; /* Añade padding para separar los elementos del menú */
        line-height: 25px;
    
      }
  
    .dropdown-menu li {
        padding: 1em 0; /* Aumenta el padding entre los elementos del menú */
        font-size: 1em; /* Aumenta el tamaño de la fuente para mejor legibilidad */
        font-weight: 800;
      }
      .dropdown-menu li a{
        color: rgb(0, 0, 101);
        text-decoration: none;
      }
  
    #menu {
        display: none; /* Oculta el menú principal en dispositivos móviles */
    }
  }