@media (min-width: 768px) {
  .menu-toggle{
    display: none;
  }
  
}
@media (max-width: 400px) {
  .navegacao {
    position: relative;
    width: 100%;
    justify-content: center;
  }

  .logo {
    position: relative;
    width: 150px; 
  }

  .menu-toggle {
    display: block;
    font-size: 1.8rem;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    position: absolute;
    left: 1rem;
    
  }
  .menu-toggle i{
    position: relative;
    font-size: 25px;
    top: 5px;
  }

  .social-icons {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.2rem;
  }

  .menu {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    background-color: white;
    flex-direction: column;
    padding: 1rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }

  .menu.show {
    display: flex;
  }

  .menu li {
    margin: 1rem 0;
  }



.main-banner {
    margin-left: 1rem;
    padding: 0 1rem;
}

.banner-conteudo h1 {
    font-size: 2.5rem;
}

.subtitulo-home {
    font-size: 1rem;
}
.servicos-caixa {
  display: flex;
  flex-direction: column;
  overflow-x: unset;
  white-space: normal;
  padding-left: 0; /* remove padding horizontal extra */
  align-items: center; /* centraliza os cards */
}

.servicos-caixa .servicos-card:first-child {
  margin-left: 0; /* remove margem extra no primeiro */
}

.servicos-card {
  width: 90%; /* ocupa quase toda a largura */
  margin-bottom: 1rem;
}
.servicos-card p{
 text-align: left;
 word-spacing: normal;
}

.caracteristicas h3{
  font-size: 15px;
}
.caracteristicas p{
  font-size: 12px;
}
.fas{
  font-size: 35px;
}

.container-contatos textarea {
    width: 260px;
}
}

@media only screen and (min-width: 400px) and (max-width: 768px) {
    .navegacao {
        position: relative;
        width: 100%;
        justify-content: center;
      }
    
      .logo {
        position: relative;
        width: 200px; 
      }
    
      .menu-toggle {
        display: block;
        font-size: 1.8rem;
        background: none;
        border: none;
        color: #333;
        cursor: pointer;
        position: absolute;
        left: 1rem;
        
      }
      .menu-toggle i{
        position: relative;
        font-size: 25px;
        top: 5px;
      }
    
      .social-icons {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 0.3rem;
      }
    
      .menu {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        background-color: white;
        flex-direction: column;
        padding: 1rem 2rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      }
    
      .menu.show {
        display: flex;
      }
    
      .menu li {
        margin: 1rem 0;
      }
    
    

    .main-banner {
        margin-left: 1rem;
        padding: 0 1rem;
    }

    .banner-conteudo h1 {
        font-size: 2.5rem;
    }

    .subtitulo-home {
        font-size: 1rem;
    }
    .servicos-caixa {
      display: flex;
      flex-direction: column;
      overflow-x: unset;
      white-space: normal;
      padding-left: 0; /* remove padding horizontal extra */
      align-items: center; /* centraliza os cards */
    }
    
    .servicos-caixa .servicos-card:first-child {
      margin-left: 0; /* remove margem extra no primeiro */
    }
    
    .servicos-card {
      width: 90%; /* ocupa quase toda a largura */
      margin-bottom: 1rem;
    }
    .servicos-card p{
     text-align: left;
     word-spacing: normal;
    }
    .container-contatos textarea {
        width: 260px;
    }
}