/* Sidebar styles */
.sidebar {
  position: fixed;
  top: 0;
  right: -250px; /* Start hidden on the right */
  width: 80%; /* Takes up most of the screen on mobile */
  max-width: 250px; /* Limits size on desktop */
  height: 100%;
  background-color: #111;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  padding-top: 50px;
  transition: right 0.3s ease;
  z-index: 1000;
  font-family: 'Istok Web', sans-serif;
  font-weight: 600;
}

.sidebar.active {
  right: 0; /* Slide in from the right */
}

.sidebar a {
  text-decoration: none;
  color: white;
  background-color: #333;
  width: 80%;
  text-align: center;
  justify-content: center;
  padding: 12px;
  margin: 8px 0;
  border-radius: 8px;
  transition: background 0.3s;
}

.sidebar a:hover {
  background-color: #facc15;
  color: black;
}

.sidebar .logout {
  background-color: #e11d48;
}

.sidebar .logout:hover {
  background-color: #f43f5e;
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 900;
}

.overlay.active {
  display: block;
}
.logout {
  background-color: #e11d48;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.admin{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}