@media (max-width: 999px) {
    body {
      overflow-x: hidden;
    }
    .nav-list {
      position: absolute;
      top: 10vh;
      right: 0;
      width: 50vw;
      height: 95vh;
      background: rgba(1, 1, 131, 0.8); /* Cor de fundo com opacidade */
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      transform: translateX(100%);
      transition: transform 0.3s ease-in;
  }
  
  .nav-list li {
      margin-left: 0;
      opacity: 1; /* Garante que os <li> não herdem nenhuma opacidade */
  }
  
  .mobile-menu {
      display: block;
      position: relative;
      left: 14%;
  }
  
  }
  
  .nav-list.active {
    transform: translateX(0);
  }

  
@keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .mobile-menu.active .line1 {
    transform: rotate(-45deg) translate(-8px, 8px);
  }
  
  .mobile-menu.active .line2 {
    opacity: 0;
  }
  
  .mobile-menu.active .line3 {
    transform: rotate(45deg) translate(-5px, -7px);
  }

  @media (max-width: 450px) {

    #logo {
      position: relative;
      left: -14%;
    }

    .boasvindas {
        font-size: 20px;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    input[type="file"] {
        width: 94%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    #botao-whats {
        z-index: 999;
        width: 80px;
        position: relative;
        left: 78%;
        top: 650px;
        position: fixed;
      }
  
      footer {
        height: 200px;
      }
    }

    @media (max-width:360px) {

      .nav-list {
        width: 30vh;
      }
    }

    
@media (min-width:361px) and (max-width: 375px) {

  .nav-list {
    width: 34vh;
  }
}



@media (width:360px) {


  footer {
    padding: 18px;
   }
  
   #loc-icone {
     position: relative;
     top: 25%;
     right: 52%;
    }
  
  }
  
  
  @media (width: 375px) {
  
    footer {
     padding: 18px;
    }
  
    #loc-icone {
      position: relative;
      top: 25%;
      right: 50%;
     }
  }
  
  
  @media (width: 414px) {
  
    
  
    footer {
      padding: 18px;
     }
   
     #loc-icone {
       position: relative;
       top: 25%;
       right: 50%;
      }
  }
  
  
  
  @media (width: 390px) {
   
  
    footer {
      padding: 18px;
     }
   
     #loc-icone {
       position: relative;
       top: 25%;
       right: 52%;
      }
  }
  
  
  
  @media (width: 428px) {
     footer {
      padding: 18px;
     }
   
     #loc-icone {
       position: relative;
       top: 25%;
       right: 50%;
      }
  }
  
  
  @media (width: 412px) {
  
    
  
    footer {
      padding: 18px;
     }
   
     #loc-icone {
       position: relative;
       top: 25%;
       right: 50%;
      }
  }