<nav class="navbar navbar-expand-sm w-100 navbar-light bg-primary bg-gradient shadow-lg mx-auto mt-3 fixed-bottom mb-0 ">
    <div class="container-fluid justify-content-center mx-auto text-center">

        <!--  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
      <i class="fas fa-ellipsis-v p-2"></i>
    </button> -->

        <ul class="navbar-nav mx-auto justify-content-center ">


            <li class="nav-item justify-content-center w-100 mx-auto text-center">


                <div class="btn-group w-100 text-light p-0" role="group" aria-label="Basic radio toggle button group">
                    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" onclick="abas('home')" checked>
                    <label class="btn btn-outline-light border-0 rounded-0" for="btnradio1"><i class="fas fa-home me-2"></i>HOME</label>

                    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" onclick="abas('clientes')">
                    <label class="btn btn-outline-light border-0  rounded-0 " for="btnradio2"><i class="fas fa-users me-2"></i>CLIENTES</label>


                    <input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off" onclick="abas('produtos')">
                    <label class="btn btn-outline-light border-0 rounded-0 " for="btnradio4"><i class='fas fa-boxes me-2'></i>PRODUTOS</label>

                    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" onclick="abas('servicos')">
                    <label class="btn btn-outline-light border-0 rounded-0" for="btnradio3"><i class='fas fa-tools me-2'></i>SERVIÇOS</label>



                </div>


            </li>


        </ul>


    </div>
</nav>