* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #000;
  color: #fff;
  overflow-x: hidden;
}

/* MENU */
.navbar {
  width: 100%;
  background-color: #ff9100;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 55px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.menu ul {
  list-style: none;
  display: flex;
  gap: 40px;
}

.menu a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  transition: 0.3s;
}

.menu a:hover {
  color: #000;
}

/* HERO */
.hero {
  height: 100vh;
  background: url('../images/bg-electric.jpg') center/cover no-repeat;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 8%;
  position: relative;
  margin-top: 55px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.hero-content {
  position: relative;
  text-align: right;
  z-index: 1;
  max-width: 550px;
}

.slogan {
  font-family: "Rajdhani", sans-serif;
  font-size: 2.2rem;
  line-height: 1.3;
  margin-bottom: 25px;
  color: #fff;
  text-shadow: 0 0 15px rgba(255, 145, 0, 0.8);
}

.contact-btn {
  background-color: #ff9100;
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(255, 145, 0, 0.4);
}

.contact-btn:hover {
  background: #fff;
  color: #ff9100;
  transform: translateY(-2px);
}

/* SEÇÕES */
section {
  padding: 100px 12%;
  text-align: center;
}

/* TÍTULOS */
h2 {
  font-size: 2rem;
  color: #ff9100;
  margin-bottom: 20px;
}

/* SOBRE NÓS */
.sobre-nos p {
  max-width: 850px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #ddd;
}

/* SERVIÇOS */
.servicos .bloco-servico {
  margin-bottom: 60px;
}

.servicos .galeria-servico {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 25px;
}

.servicos img {
  width: 320px;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.servicos img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 145, 0, 0.4);
}

/* CLIENTES */
.grid-clientes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  margin-top: 50px;
  align-items: center;
}

.grid-clientes .cliente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.grid-clientes img {
  width: 120px;
  height: auto;
  transition: 0.3s;
  filter: brightness(0.9);
}

.grid-clientes img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

/* CONTATO */
.contato-info {
  line-height: 1.8;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

.contact-btn {
  display: inline-block;
  margin-top: 20px;
}

/* WHATSAPP FIXO */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  z-index: 100;
}

.whatsapp-float img {
  width: 100%;
  height: auto;
}

/* RESPONSIVO */
@media (max-width: 768px) {
  section {
    padding: 70px 8%;
  }

  .hero {
    justify-content: center;
    text-align: center;
    padding: 0 5%;
  }

  .hero-content {
    text-align: center;
  }

  .slogan {
    font-size: 1.6rem;
  }

  .servicos img {
    width: 90%;
    height: auto;
  }

  .grid-clientes {
    gap: 25px;
  }

  .grid-clientes img {
    width: 90px;
  }
}
/* ===== MENU MOBILE ===== */
@media (max-width: 768px) {
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: #ff7a00;
  }

  .menu ul {
    display: flex;
    flex-direction: column;
    background: #ff7a00;
    position: fixed;
    top: 60px;
    right: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }

  .menu ul.show {
    max-height: 300px;
  }

  .menu li {
    text-align: center;
    margin: 10px 0;
  }

  .menu a {
    font-size: 18px;
  }

  .menu-toggle {
    display: block;
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
  }
}

/* botão hamburguer escondido no desktop */
.menu-toggle {
  display: none;
}
/* --- Correção visual do menu mobile --- */
.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    position: fixed;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: white;
    cursor: pointer;
    z-index: 2000; /* 🔥 garante que fica acima da faixa laranja e das imagens */
  }

  .menu ul {
    margin-top: 60px; /* 🔥 empurra os links pra baixo do botão */
  }
}
/* --- Correção visual do menu mobile --- */
.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    position: fixed;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    color: white;
    cursor: pointer;
    z-index: 2000; /* fica sempre visível */
  }

  .menu ul {
    margin-top: 60px;
  }
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SF Instaladora</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Rajdhani:wght@600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>

  <!-- MENU SUPERIOR -->
  <header class="navbar">
    <button class="menu-toggle" aria-label="Abrir menu">☰</button>
    <nav class="menu">
      <ul>
        <li><a href="#inicio">Início</a></li>
        <li><a href="#sobre">Sobre Nós</a></li>
        <li><a href="#servicos">Serviços</a></li>
        <li><a href="#clientes">Clientes & Parceiros</a></li>
        <li><a href="#contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <!-- HERO -->
  <section class="hero" id="inicio">
    <div class="overlay"></div>
    <div class="hero-content right">
      <p class="slogan">Segurança, eficiência e energia<br>onde você precisa ⚡</p>
      <a href="https://wa.me/5551998814260?text=Olá!%20Quero%20falar%20com%20a%20SF%20Instaladora."
         target="_blank"
         class="contact-btn">
         💬 Nos chame no WhatsApp
      </a>
    </div>
  </section>

  <!-- SOBRE NÓS -->
  <section id="sobre" class="sobre-nos">
    <div class="container">
      <h2>Sobre Nós</h2>
      <p>
        A SF Instaladora é especializada em soluções elétricas completas — 
        desde instalações residenciais e comerciais até sistemas de carregamento 
        para veículos elétricos e projetos de PPCI (Plano de Prevenção e Combate a Incêndio). 
        Nossa missão é levar energia, segurança e eficiência a cada cliente, 
        com foco na qualidade e na confiabilidade de cada serviço prestado.
      </p>
    </div>
  </section>

  <!-- SERVIÇOS -->
  <section id="servicos" class="servicos">
    <h2>Nossos Serviços</h2>

    <div class="bloco-servico">
      <h3>Carregadores Elétricos</h3>
      <div class="galeria-servico">
        <img src="assets/images/Serviços/carregadores.png" alt="Carregador 1">
        <img src="assets/images/Serviços/carregadores2.png" alt="Carregador 2">
        <img src="assets/images/Serviços/carregadores3.png" alt="Carregador 3">
      </div>
    </div>

    <div class="bloco-servico">
      <h3>Instalações Elétricas</h3>
      <div class="galeria-servico">
        <img src="assets/images/Serviços/instalacoes-eletricas.png" alt="Instalações Elétricas">
        <img src="assets/images/Serviços/instalacoes-eletricas2.png" alt="Instalações Elétricas">
      </div>
    </div>

    <div class="bloco-servico">
      <h3>Alarmes de Incêndio</h3>
      <div class="galeria-servico">
        <img src="assets/images/Serviços/alarme.png" alt="Alarme de Incêndio">
        <img src="assets/images/Serviços/Alarme2.png" alt="Alarme de Incêndio">
      </div>
    </div>
  </section>

  <!-- CLIENTES -->
  <section id="clientes" class="clientes">
    <h2>Clientes & Parceiros</h2>
    <p>Empresas e marcas que confiam na SF Instaladora</p>

    <div class="grid-clientes">
      <div class="cliente"><img src="assets/images/Clientes/parceiro.png" alt="Higiton"><h4>Higiton</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro2.png" alt="Securité"><h4>Securité</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro3.png" alt="Sul Cell"><h4>Sul Cell</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro4.png" alt="Agronarcizo"><h4>Agronarcizo</h4></div> 
      <div class="cliente"><img src="assets/images/Clientes/parceiro6.png" alt="Luzzo"><h4>Luzzo</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro7.png" alt="Prevex"><h4>Prevex</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro9.png" alt="AGTN 2"><h4>AGTN</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro10.png" alt="Dutotec"><h4>Dutotec</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro11.png" alt="Tarandini"><h4>Tarandini</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro12.png" alt="Buteco 76"><h4>Buteco 76</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro13.png" alt="QT Equipamentos"><h4>QT Equipamentos</h4></div>
      <div class="cliente"><img src="assets/images/Clientes/parceiro14.png" alt="Augustin"><h4>Augustin</h4></div>
    </div>
  </section>

  <!-- CONTATO -->
  <section id="contato" class="contato">
    <h2>Fale Conosco</h2>
    <p>Entre em contato e solicite um orçamento personalizado.</p>

    <div class="contato-info">
      <div class="info-item">📞 <strong>Telefone:</strong> (51) 99881-4260</div>
      <div class="info-item">✉️ <strong>E-mail:</strong> sfinstaladora03@gmail.com</div>
      <div class="info-item">📍 <strong>Localização:</strong> Gravataí e Região</div>
    </div>

    <a href="https://wa.me/5551998814260?text=Olá!%20Quero%20falar%20com%20a%20SF%20Instaladora."
       target="_blank"
       class="contact-btn">
       💬 Falar via WhatsApp
    </a>
  </section>

  <!-- BOTÃO FIXO DO WHATSAPP -->
  <a href="https://wa.me/5551998814260?text=Olá!%20Quero%20falar%20com%20a%20SF%20Instaladora."
     class="whatsapp-float"
     target="_blank"
     aria-label="Fale conosco no WhatsApp">
    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp">
  </a>

  <!-- SCRIPT MENU MOBILE -->
  <script>
    const toggle = document.querySelector('.menu-toggle');
    const menu = document.querySelector('.menu ul');
    const links = document.querySelectorAll('.menu a');

    toggle.addEventListener('click', () => {
      menu.classList.toggle('show');
      toggle.textContent = menu.classList.contains('show') ? '✖' : '☰';
    });

    links.forEach(link => {
      link.addEventListener('click', e => {
        e.preventDefault();
        const destino = document.querySelector(link.getAttribute('href'));
        menu.classList.remove('show');
        toggle.textContent = '☰';
        window.scrollTo({
          top: destino.offsetTop - 60,
          behavior: 'smooth'
        });
      });
    });
  </script>

</body>
</html>