<div class="fixed-bottom d-block d-sm-none" style="

z-index: 100;
">
<div class="container-fluid">
<div class="row text-center border-top">
<div class="col border-right py-2 btn-footer" style="background-
color: var(--vz-header-bg);">
<a class="text-dark font-weight-bold small" href="?
opc=pagos"><i class="mdi mdi-cogs fs-20 text-primary"></i> <br>Pagas</a>
</div>
<div class="col border-right py-2 btn-footer" style="background-
color: var(--vz-header-bg);">
<button type="button" class="btn btn-icon btn-topbar btn-
primary rounded-circle shadow-lg" data-bs-toggle="modal" data-bs-target="#myModal"
title="Crear">
<i class="bx bx-plus fs-18"></i>
</button>

</div>
<div class="col border-right py-2 btn-footer" style="background-
color: var(--vz-header-bg);">
<a class="text-dark font-weight-bold small" href="?
opc=pagos"><i class="mdi mdi-cogs fs-20"></i> <br>Pagas</a>
</div>

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

<div class="modal fade" id="myModal" tabindex="-1" aria-

labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Contenido del modal -->
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">¿Qué quiero
hacer?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<!-- Opción 1 en la parte superior izquierda -->
<div class="col-6 d-flex align-items-stretch">
<div class="card text-center w-100">
<div class="card-body py-4 px-4">
<img
src="https://themesbrand.com/velzon/html/saas/assets/images/nft/wallet/
metamask.png" alt="" height="55" class="mb-3 pb-2">
<h6>Transferir dinero</h6>
</div>
</div>
</div>
<!-- Opción 2 en la parte superior derecha -->
<div class="col-6 d-flex align-items-stretch">
<div class="card text-center w-100">
<div class="card-body py-4 px-4">
 <img
src="https://themesbrand.com/velzon/html/saas/assets/images/nft/wallet/
metamask.png" alt="" height="55" class="mb-3 pb-2">
<h6>Pagar sevicoos</h6>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<!-- Opción 3 en la parte inferior izquierda -->
<div class="col-6">
<div class="card text-center">
<div class="card-body py-4 px-4">
<img
src="https://themesbrand.com/velzon/html/saas/assets/images/nft/wallet/
metamask.png" alt="" height="55" class="mb-3 pb-2">
<h6>Recargar</h6>
</div>
</div>
</div>
<!-- Opción 4 en la parte inferior derecha -->
<div class="col-6">
<div class="card text-center">
<div class="card-body py-4 px-4">
<img
src="https://themesbrand.com/velzon/html/saas/assets/images/nft/wallet/
metamask.png" alt="" height="55" class="mb-3 pb-2">
<h5>Otros</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>