/* Mobile Bottom Navigation */
    .mobile-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70px;
      background: #ffffff;
      display: none;
      justify-content: space-around;
      align-items: center;
      border-top: 1px solid #ddd;
      box-shadow: 0 -6px 16px rgba(0,0,0,0.12);
      z-index: 9999;
    }

    .mobile-nav .nav-item {
      flex: 1;
      text-align: center;
      text-decoration: none;
      color: #777;
      font-size: 12px;
      position: relative;
      padding-top: 10px;
      transition: all 0.3s ease;
    }

    .mobile-nav .nav-item i {
      font-size: 22px;
      display: block;
      margin-bottom: 5px;
      transition: all 0.3s ease;
    }

    /* Active State */
    .mobile-nav .nav-item.is-active {
      color: #007bff;
    }

    .mobile-nav .nav-item.is-active i {
      color: #ffffff;
      background: #007bff;
      width: 46px;
      height: 46px;
      line-height: 46px;
      border-radius: 50%;
      margin: -30px auto 6px;
      box-shadow: 0 6px 14px rgba(0,123,255,0.4);
    }

    .mobile-nav .nav-item:hover {
      color: #007bff;
    }

    /* Mobile only */
    @media (max-width: 768px) {
      .mobile-nav {
        display: flex;
      }
    }