<div class="fab-container">
  <!-- Main Button -->
  <div class="fab-main" id="fabToggle">
    <i class="ti tabler-plus"></i>
  </div>

  <!-- Quick Links -->
  <div class="fab-menu" id="fabMenu">
    <a href="#" class="fab-item" data-tooltip="Profile">
      <i class="ti tabler-user"></i>
    </a>

    <a href="#" class="fab-item" data-tooltip="Wallet">
      <i class="ti tabler-wallet"></i>
    </a>

    <a href="#" class="fab-item" data-tooltip="Get Units">
      <i class="ti tabler-coins"></i>
    </a>

    <a href="#" class="fab-item" data-tooltip="Support">
      <i class="ti tabler-headset"></i>
    </a>
  </div>
</div>
<style>
  /* Tooltip base */
  .fab-item {
    position: relative;
  }

  /* Tooltip text */
  .fab-item::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%) scale(0.8);

    background: #0a1f44;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
  }

  /* Arrow */
  .fab-item::before {
    content: "";
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%) scale(0.8);

    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #0a1f44;

    opacity: 0;
    transition: all 0.2s ease;
  }

  /* Show on hover */
  .fab-item:hover::after,
  .fab-item:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
  }

  /* Main Button */
  .fab-main {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #f7e7a1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
    font-size: 22px;
  }

  .fab-main:hover {
    transform: scale(1.1) rotate(90deg);
  }

  /* Menu */
  .fab-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;

    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  /* Active state */
  .fab-container.active .fab-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Items */
  .fab-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b7c98, #25A0C4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
  }

  .fab-item:hover {
    transform: translateX(-5px) scale(1.1);
  }
</style>
<script>
  const fab = document.getElementById('fabToggle');
  const container = document.querySelector('.fab-container');

  fab.addEventListener('click', () => {
    container.classList.toggle('active');
  });
</script>

<footer style="width:100%; background: linear-gradient(135deg, #19a9c5, #138fa7, #0d6b7c); color:white; padding:20px 0; font-family:Arial, sans-serif;">
  <div
    style="max-width:1200px; margin:0 auto; display:flex; justify-content:center; flex-wrap:wrap; gap:15px; font-size:14px; line-height:1.6; text-align:center; align-items:center;">

    <span><strong>Customer Care</strong></span>

    <span style="color:#00bfff;">|</span>

    <span>📞 +91 92495 02372 | 0471 351 0988</span>

    <span style="color:#00bfff;">|</span>

    <span>🕒 Monday – Friday: 10:00 AM – 5:00 PM</span>

    <span style="color:#00bfff;">|</span>

    <span style="font-size:12px; color:#d4d4d4;">(Only on working days)</span>
  </div>
</footer>
<!-- <footer class="content-footer footer bg-footer-theme">
  <div class="container-xxl">
    <div class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
      <div class="text-body">
                &#169;
                <script>
                    document.write(new Date().getFullYear());
                </script>
                , Technology Partner<a href="https://novelx.in/" target="_blank"
                    class="footer-link text-danger"><b>&nbsp;NovelX</b></a>
            </div>
    </div>
  </div>
</footer> -->

<footer class="content-footer footer bg-footer-theme">
  <div class="container-xxl">
    <div class="footer-container d-flex align-items-center justify-content-center py-3 flex-column">

      <div class="text-body text-center">
        &copy;
        <script>
          document.write(new Date().getFullYear());
        </script>

        OMIGA IPL
        <!-- </div>

            <div class="text-body text-center mt-1" style="font-size:13px;"> -->
        Technology Partner :
        <a href="https://novelx.in/" target="_blank"
          class="footer-link text-info fw-bold">
          NovelX Technology
        </a>
      </div>

    </div>
  </div>
</footer>
<div class="content-backdrop fade"></div>
</div><?php /**PATH /var/www/html/omiga_ipl/resources/views/User_layout/footer.blade.php ENDPATH**/ ?>