/* Menu principal */
#menu-container {
    position: relative;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 10%; 
    left: 5%;
    width: 70%;
    max-height: 350px; /* Limita a altura máxima a 80% da altura da viewport */
    overflow-y: auto; /* Habilita a barra de rolagem vertical quando necessário */
    background-color: rgb(170, 223, 46);
    border-radius: 13px;
    box-shadow: 0 4px 8px rgb(60, 255, 1);
    z-index: 1000; 
    color: black;
    gap: 10px;
    text-align: left;
    margin-left: 2%;
    margin-right: 2%;
    cursor: pointer;
  }
  #menu-container a {
    text-decoration: none;
    color: black;
    cursor: pointer;
    margin-left: 5%;
    font-size: 5vh;
  }
  #menu-container a:hover {
    background-color: rgb(0, 0, 0);
    text-decoration: underline;
    color: #f7f7f7;
    font-size: 6vh;
  }
  #menu-button {
    position: fixed;
    top: 2%;
    left: 2%;
    height: 8%;
    cursor: pointer;
    animation: pulse 5s infinite ease-in-out;
  }

  #whatsapp {
    position: fixed;
    bottom: 5%;
    right: 2%;
    width:120px;
    height: auto;
    animation: pulse 2s infinite ease-in-out;
    cursor: pointer;
    z-index: 1000;
  }
  #instagram {
    position: fixed;
    bottom: 25%;
    right: 2%;
    width: 88px;
    height: auto;
    animation: pulse 2s infinite ease-in-out;
    cursor: pointer;
    z-index: 1000;
  }
  #youtube {
    position: fixed;
    bottom: 25%;
    left: 2%;
    width: 120px;
    height: auto;
    animation: pulse 2s infinite ease-in-out;
    cursor: pointer;
    z-index: 1000;
  }
  #tiktok {
    position: fixed;
    bottom: 5%;
    left:2%;
    width: 100px;
    height: auto;
    animation: pulse 2s infinite ease-in-out;
    cursor: pointer;
    z-index: 1000;
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
  
  @media screen and (max-width: 768px) {
    #menu-container {
      width: 80%;
      left: 10%;
      top: 10%;
    }
    #menu-container a {
      font-size: 2.5vh;
    }
    #menu-container a:hover {
      font-size: 3.5vh;
    }
    #menu-button {  
      height: 4%;
  }
  #logo {
    height: 8%;
    position: absolute;
  }
  #whatsapp, #instagram, #youtube, #tiktok {
    height: 60px;
    width: 60px;
}

  }