/* MENU NAV */
.menuNav {
   & .navbar {
      width: 100%;
      height: 100px;
      display: flex;
      background-color: var(--verde-principal-op);
      color: white;
      z-index: 100;
      position: fixed;
      top: 0;
      border-bottom: 4px solid var(--arena);

      & .navbar-container {
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 80%;
         max-width: 80%;
         height: 100%;
         margin: 0 auto;
         padding: 0 20px;

         & .navbar-brand {
            height: 100%;

            & a {
               height: 100%;
               display: flex;
               align-items: center;

               & img {
                  max-height: 80%;
               }
            }
         }

         & .navbar-menu {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;

            & li {
               margin-left: 20px;

               & a {
                  color: white;
                  text-decoration: none;
                  padding: 10px 20px;
                  text-transform: uppercase;
                  font-weight: 600;
                  font-size: 16px;
               }

               a:hover {
                  background-color: var(--verde-uru);
                  border-radius: 4px;
               }
            }
         }

         /* Hamburger Menu (Mobile) */
         & .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;

            & .bar {
               width: 25px;
               height: 3px;
               background-color: white;
               margin: 3px 0;
               transition: 0.4s;
            }
         }
      }
   }
}

.menuLateral {
   & .menuLateral {

      & .lateral {
         width: 50px;
         height: 32vh;
         background-color: #fffa;
         position: fixed;
         z-index: 10;
         right: 50px;
         top: 32vh;
         overflow: hidden;
         transition: 0.5s ease-in-out;
         border-radius: 15px;

         & .menu-lateral {
            width: 100%;
            height: 100%;

            & .list-menu {
               width: 100%;
               height: 100%;
               display: flex;
               flex-direction: column;

               & li {
                  width: 100%;
                  height: 7vh;

                  & a {
                     width: 100%;
                     height: 100%;
                     display: flex;

                     & .icono {
                        width: 50px;
                        min-width: 50px;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        & i {
                           font-size: 30px;
                           color: var(--verde-principal);
                        }
                     }

                     & .texto {
                        width: 250px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        padding-left: 10px;


                        & p {
                           width: 300px;
                           font-size: 20px;
                           color: var(--verde-principal);
                           font-weight: 600;
                        }
                     }
                  }

               }
            }
         }
      }

      & .lateral:hover {
         width: 300px;
      }
   }
}






@media screen and (max-width: 425px) {
   .menuNav {
      & .navbar {
         height: 70px;
         border-bottom: 3px solid var(--arena);
         background-color: var(--verde-principal);

         & .navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
            max-width: 80%;
            height: 100%;
            margin: 0 auto;
            padding: 0 20px;

            & .navbar-brand {
               height: 100%;

               & a {
                  height: 100%;
                  display: flex;
                  align-items: center;

                  & img {
                     max-height: 80%;
                  }
               }
            }

            & .navbar-menu {
               display: none;
               flex-direction: column;
               justify-content: space-between;
               width: 100%;
               height: 250px;
               background-color: var(--verde-principal-op);
               background-color: var(--celeste-cuadros);
               position: absolute;
               top: 70px;
               /* Adjust based on navbar height */
               left: 0;
               text-align: center;
               z-index: 100;

               & li {
                  margin: 0;
                  width: 100%;

                  & a {
                     display: flex;
                     justify-content: center;
                     padding: auto 0;
                  }

                  & a:hover {
                     background-color: var(--verde-principal-op);
                     border-radius: 0;
                  }
               }
            }

            & .navbar-menu.active {
               display: flex;
            }

            /* Hamburger Menu (Mobile) */
            & .hamburger {
               display: flex;

               & .bar {
                  width: 25px;
                  height: 3px;
                  background-color: white;
                  margin: 3px 0;
                  transition: 0.4s;
               }
            }

            .hamburger.active .bar:nth-child(1) {
               transform: translateY(9px) rotate(45deg);
            }

            .hamburger.active .bar:nth-child(2) {
               opacity: 0;
            }

            .hamburger.active .bar:nth-child(3) {
               transform: translateY(-9px) rotate(-45deg);
            }
         }
      }
   }

   /*MENU LATERAL*/
   .lateral {
      display: none;
   }
}

@media screen and (min-width: 426px) and (max-width: 576px) {
   .menuNav {
      & .navbar {
         height: 70px;
         border-bottom: 3px solid var(--arena);
         background-color: var(--verde-principal);

         & .navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
            max-width: 80%;
            height: 100%;
            margin: 0 auto;
            padding: 0 20px;

            & .navbar-brand {
               height: 100%;

               & a {
                  height: 100%;
                  display: flex;
                  align-items: center;

                  & img {
                     max-height: 80%;
                  }
               }
            }

            & .navbar-menu {
               display: none;
               flex-direction: column;
               justify-content: space-between;
               width: 100%;
               height: 250px;
               background-color: var(--verde-principal-op);
               background-color: var(--celeste-cuadros);
               position: absolute;
               top: 70px;
               /* Adjust based on navbar height */
               left: 0;
               text-align: center;
               z-index: 100;

               & li {
                  margin: 0;
                  width: 100%;

                  & a {
                     display: flex;
                     justify-content: center;
                     padding: auto 0;
                  }

                  & a:hover {
                     background-color: var(--verde-principal-op);
                     border-radius: 0;
                  }
               }
            }

            & .navbar-menu.active {
               display: flex;
            }

            /* Hamburger Menu (Mobile) */
            & .hamburger {
               display: flex;

               & .bar {
                  width: 25px;
                  height: 3px;
                  background-color: white;
                  margin: 3px 0;
                  transition: 0.4s;
               }
            }

            .hamburger.active .bar:nth-child(1) {
               transform: translateY(9px) rotate(45deg);
            }

            .hamburger.active .bar:nth-child(2) {
               opacity: 0;
            }

            .hamburger.active .bar:nth-child(3) {
               transform: translateY(-9px) rotate(-45deg);
            }
         }
      }
   }

   /*MENU LATERAL*/
   .lateral {
      display: none;
   }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
   .menuNav {
      & .navbar {
         height: 70px;
         border-bottom: 3px solid var(--arena);
         background-color: var(--verde-principal);

         & .navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
            max-width: 80%;
            height: 100%;
            margin: 0 auto;
            padding: 0 20px;

            & .navbar-brand {
               height: 100%;

               & a {
                  height: 100%;
                  display: flex;
                  align-items: center;

                  & img {
                     max-height: 80%;
                  }
               }
            }

            & .navbar-menu {
               display: none;
               flex-direction: column;
               justify-content: space-between;
               width: 100%;
               height: 250px;
               background-color: var(--verde-principal-op);
               background-color: var(--celeste-cuadros);
               position: absolute;
               top: 70px;
               /* Adjust based on navbar height */
               left: 0;
               text-align: center;
               z-index: 100;

               & li {
                  margin: 0;
                  width: 100%;

                  & a {
                     display: flex;
                     justify-content: center;
                     padding: auto 0;
                  }

                  & a:hover {
                     background-color: var(--verde-principal-op);
                     border-radius: 0;
                  }
               }
            }

            & .navbar-menu.active {
               display: flex;
            }

            /* Hamburger Menu (Mobile) */
            & .hamburger {
               display: flex;

               & .bar {
                  width: 25px;
                  height: 3px;
                  background-color: white;
                  margin: 3px 0;
                  transition: 0.4s;
               }
            }

            .hamburger.active .bar:nth-child(1) {
               transform: translateY(9px) rotate(45deg);
            }

            .hamburger.active .bar:nth-child(2) {
               opacity: 0;
            }

            .hamburger.active .bar:nth-child(3) {
               transform: translateY(-9px) rotate(-45deg);
            }
         }
      }
   }

   /*MENU LATERAL*/
   .lateral {
      display: none;
   }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
   .menuNav {
      & .navbar {
         height: 100px;
         border-bottom: 3px solid var(--arena);
         background-color: var(--verde-principal);

         & .navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
            max-width: 80%;
            height: 100%;
            margin: 0 auto;
            padding: 0 20px;

            & .navbar-brand {
               height: 100%;

               & a {
                  height: 100%;
                  display: flex;
                  align-items: center;

                  & img {
                     max-height: 80%;
                  }
               }
            }

            & .navbar-menu {
               display: none;
               flex-direction: column;
               justify-content: space-between;
               width: 100%;
               height: 250px;
               background-color: var(--verde-principal-op);
               background-color: var(--celeste-cuadros);
               position: absolute;
               top: 70px;
               /* Adjust based on navbar height */
               left: 0;
               text-align: center;
               z-index: 100;

               & li {
                  margin: 0;
                  width: 100%;

                  & a {
                     display: flex;
                     justify-content: center;
                     padding: auto 0;
                  }

                  & a:hover {
                     background-color: var(--verde-principal-op);
                     border-radius: 0;
                  }
               }
            }

            & .navbar-menu.active {
               display: flex;
            }

            /* Hamburger Menu (Mobile) */
            & .hamburger {
               display: flex;

               & .bar {
                  width: 25px;
                  height: 3px;
                  background-color: white;
                  margin: 3px 0;
                  transition: 0.4s;
               }
            }

            .hamburger.active .bar:nth-child(1) {
               transform: translateY(9px) rotate(45deg);
            }

            .hamburger.active .bar:nth-child(2) {
               opacity: 0;
            }

            .hamburger.active .bar:nth-child(3) {
               transform: translateY(-9px) rotate(-45deg);
            }
         }
      }
   }

   /*MENU LATERAL*/
   .lateral {
      display: none;
   }
}

@media screen and (min-width: 1025px) and (max-width: 1359px) {

   & body {
      & .menuNav {
         & .navbar {
            height: 80px;
            border-bottom: 3px solid var(--arena);

            & .navbar-container {
               

               & .navbar-brand {

                  & a {

                     & img {
                     }
                  }
               }

               & .navbar-menu {
                  list-style: none;
                  display: flex;
                  margin: 0;
                  padding: 0;

                  & li {
                     margin-left: 0px;
                     width: fit-content;

                     & a {
                        color: white;
                        text-decoration: none;
                        padding: 5px 15px;
                        text-transform: uppercase;
                        font-weight: 600;
                        font-size: 15px;
                     }

                     & a:hover {
                        background-color: var(--verde-uru);
                        border-radius: 4px;
                     }
                  }
               }

               /* Hamburger Menu (Mobile) */
               & .hamburger {
                  display: none;
                  flex-direction: column;
                  cursor: pointer;
               }

               & .hamburger .bar {
                  width: 25px;
                  height: 3px;
                  background-color: white;
                  margin: 3px 0;
                  transition: 0.4s;
               }
            }
         }
      }


      /*MENU LATERAL*/
      & .menuLateral {

         & .lateral {
            height: 42vh;
         }
      }
   }
}

@media screen and (min-width: 1360px) and (max-width: 1370px) {

   & body {
      & .menuNav {
         & .navbar {
            height: 80px;
            border-bottom: 3px solid var(--arena);

            & .navbar-container {
               

               & .navbar-brand {

                  & a {

                     & img {
                     }
                  }
               }

               & .navbar-menu {
                  list-style: none;
                  display: flex;
                  margin: 0;
                  padding: 0;

                  & li {
                     margin-left: 0px;
                     width: fit-content;

                     & a {
                        color: white;
                        text-decoration: none;
                        padding: 5px 15px;
                        text-transform: uppercase;
                        font-weight: 600;
                        font-size: 15px;
                     }

                     & a:hover {
                        background-color: var(--verde-uru);
                        border-radius: 4px;
                     }
                  }
               }

               /* Hamburger Menu (Mobile) */
               & .hamburger {
                  display: none;
                  flex-direction: column;
                  cursor: pointer;
               }

               & .hamburger .bar {
                  width: 25px;
                  height: 3px;
                  background-color: white;
                  margin: 3px 0;
                  transition: 0.4s;
               }
            }
         }
      }


      /*MENU LATERAL*/
      & .menuLateral {

         & .lateral {
            height: 42vh;
         }
      }
   }
}