#tab-content {
      padding: 0px;
    }

    .tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  border-top: 1px solid #ccc;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1000;
    }

    .tab-bar a {
      text-align: center;
      color: #666;
      text-decoration: none;
      font-size: 12px;
      flex: 1;
      transition: all 0.3s ease;
      color:rgb(44, 44, 44);
    }

    .tab-bar a.active {
      color: #15887c;
    }

    .tab-bar i {
      display: block;
      font-size: 18px;
      margin-bottom: 2px;
      transition: transform 0.3s;
    }

    .tab-bar a.active i {
      transform: scale(1.2);
    }
.tab-bar.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.tab-bar.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;


}
    @media (min-width: 769px) {
  .tab-bar {
    display: none;
  }
 
}

  @media (max-width: 768px) {
  body {
    padding-bottom: 58px; /* Reserve space for tab bar on mobile only */
  }



}