.nav-content{
     background-color: var(--verde-oscuro);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 3rem 1rem ;
     width: 100%;
     -webkit-box-shadow: 0px 7px 7px 1px rgba(0, 0, 0, 0.19);
     -moz-box-shadow: 0px 7px 7px 1px rgba(0, 0, 0, 0.19);
     box-shadow: 0px 7px 7px 1px rgba(0, 0, 0, 0.19);
     margin-bottom: 1rem;
}

.nav-img {
     width: 15%;
     height: auto;
}

.nav-ul {
     list-style: none;
     display: flex;
     gap: 4rem;
     flex-wrap: nowrap;
}

.nav-ul li{
     white-space: nowrap;
}

.nav-ul a{
     text-decoration: none;
     color: var(--verde-neon);
     font-size: 1.1rem;
     font-weight: bold;
     transition: color 0.3s;
}

.nav-ul a:hover{
     color: var(--blanco);
}

.nav-active{
     color: var(--blanco-humo)!important;
}



/* MEDIA QUERY PARA  PANTALLAS A 900PX */
@media(max-width: 900px) and (min-width: 600px){
     .nav-content{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 2rem 3rem;
     }

     .nav-img {
          width: 50%;
          margin-bottom: 1rem;
          text-align: center;

     }

     .nav-ul{
          justify-content: center;
          gap: 2rem;
          flex-wrap: wrap;
     }
}

/*MEDIA QUERY PARA PALLAS HASTA 600PX*/
@media(max-width: 600px){
     .nav-content{
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 2rem;
          text-align: center;
          width: 100%;
     }

     .nav-img {
          display: flex;
          justify-content: center;
          margin-bottom: 1rem;
          width: 50%;
          margin-bottom: 1rem;
     }

     .nav-ul {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1rem;
          width: 100%;
          padding: 0;
     }


     .nav-ul li:nth-child(1),
     .nav-ul li:nth-child(2),
     .nav-ul li:nth-child(3){
          text-align: center
     }

     .nav-ul li:nth-child(4){
          grid-column: 1;
          text-align: right;
     } 

     .nav-ul li:nth-child(5){
          grid-column: 3;
          text-align: center;
     } 
}