<header class="mt-2 p-3 text-bg-dark">
  <div class="container">
    <!-- -------------------------------- logo --------------------------------- -->
    <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
      <a
        href="/"
        class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
      >
        <img
          src="img/logo.png"
          alt="Logo"
          width="50"
          height="24"
          class="d-inline-block align-text-top"
        />
      </a>
      <!-- -------------------------------- menu --------------------------------- -->
      <ul
        class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
      >
        <li><a href="/" class="nav-link px-2 text-secondary">Home</a></li>
        <li><a href="/pricing" class="nav-link px-2 text-white">Pricing</a></li>
        <li><a href="/contact" class="nav-link px-2 text-white">Contact</a></li>
      </ul>
      <!-- ------------------------------- search -------------------------------- -->
      <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
        <input
          type="search"
          class="form-control form-control-dark text-bg-dark"
          placeholder="Search..."
          aria-label="Search"
        />
      </form>
      <!-- -------------------------------- login - Sign-up -------------------------------- -->
      <div class="text-end d-flex">
        <div class="dropdown">
          <button
            type="button"
            class="btn btn-outline-light me-2 dropdown-toggle"
            data-bs-toggle="dropdown"
            aria-expanded="false"
            data-bs-auto-close="outside"
            data-bs-offset="10,20"
          >
            Login
          </button>
          <div class="dropdown-menu dropstart bg-dark text-white">
            <form class="px-2 py-2">
              <div class="mb-3">
                <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
              </div>
              <div class="mb-3">
                <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
                <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
              </div>
              <div class="mb-3">
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="dropdownCheck">
                  <label class="form-check-label" for="dropdownCheck">
                    Remember me
                  </label>
                </div>
              </div>
              <button type="submit" class="btn btn-warning">Sign in</button>
            </form>
            <div class="dropdown-divider text-white"></div>
            <a class="dropdown-item text-white" href="#">New around here? Sign up</a>
            <a class="dropdown-item text-white" href="#">Forgot password?</a>
          </div>
        <button type="button" class="btn btn-warning">Sign-up</button>
      </div>

      <!-- -------------------------------- otros -------------------------------- -->
      




    </div>
  </div>
</header>
