/* ===== Sticky Navigation Menu (Tabs) ===== */
#profileTabs {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #1f2433; /* Dark background */
  border-bottom: 1px solid #0f121a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  padding: 8px 16px;
  margin: 0 0 16px 0;
  border-radius: 0;
  color: #fff;
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent tabs from wrapping */
  transition: top 0.3s ease-in-out;
}

/* Tabs container */
.tabButtonsRow {
  display: inline-block;
}

/* Individual tab button */
.tabBtn {
  display: inline-block;
  background: #eef0f3;
  border: 1px solid #ffffff;
  color: #140202;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  padding: 6px 12px;
  text-decoration: none;
  cursor: pointer;
  margin-right: 8px;
  white-space: nowrap;
}

/* Hover effect for tab */
.tabBtn:hover {
  background: #2563eb;
  border-color: #566080;
  color: #fff;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
}

/* Active tab button style */
.tabBtnActive {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
}

/* Mobile View */
@media (max-width: 768px) {
  #profileTabs {
    overflow-x: scroll; /* Allow horizontal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling */
  }

  .tabBtn {
    font-size: 11px;
    padding: 5px 10px;
  }

  .topTabsSticky {
    transition: top 0.3s ease-in-out; /* Smooth transition on scroll */
  }
}

/* Menu visibility toggle when scrolling */
.topTabsSticky.topTabsVisible {
  top: 0;
}

.topTabsSticky {
  top: -100px; /* Adjust the value as needed to hide the menu */
}