<nav class="navbar navbar-expand-lg navbar-dark fixed-top mt-3"
  style="background-color: #0a192f; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3)">
  <div class="container">
    <!-- Logo à esquerda -->
    <a class="navbar-brand ms-3" href="#">
      <img src="/assets/img/logo.png" alt="Inefor_logotipo_principal"
        style="width: 80px; filter: brightness(0) invert(1)" />
    </a>

    <!-- Botão de toggler para mobile -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Itens do menu e botão de inscrever-se -->
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto me-3">
        <li class="nav-item">
          <a class="nav-link <%= activePage === 'home' ? 'active' : '' %>" href="/"
            style="transition: all 0.3s ease; border-bottom: 2px solid transparent;"
            onmouseover="this.style.borderBottom='2px solid #00BFFF';"
            onmouseout="this.style.borderBottom='2px solid transparent';">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"
            style="transition: all 0.3s ease; border-bottom: 2px solid transparent;"
            onmouseover="this.style.borderBottom='2px solid #00BFFF';"
            onmouseout="this.style.borderBottom='2px solid transparent';">Sobre</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"
            style="transition: all 0.3s ease; border-bottom: 2px solid transparent;"
            onmouseover="this.style.borderBottom='2px solid #00BFFF';"
            onmouseout="this.style.borderBottom='2px solid transparent';">Serviços</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#faq-section"
            style="transition: all 0.3s ease; border-bottom: 2px solid transparent;"
            onmouseover="this.style.borderBottom='2px solid #00BFFF';"
            onmouseout="this.style.borderBottom='2px solid transparent';">FAQ's</a>
        </li>
      </ul>

      <!-- Botão de Inscrever-se -->
      <button class="btn me-3 rounded-pill" data-bs-toggle="modal" data-bs-target="#modalInscricao"
        style="padding: 0.5rem 1.5rem;
              background: linear-gradient(135deg, #00bfff, #0077b6);
              color: white;
              border: none;
              transition: transform 0.3s ease, box-shadow 0.3s ease;"
        onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 6px 8px rgba(0, 0, 0, 0.3)';"
        onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 4px 6px rgba(0, 0, 0, 0.2)';">
        Inscrever-se
      </button>
    </div>
  </div>
</nav>