/*  Join button css */

.join-dropdown {
  position: relative;
  display: inline-block;
}

.join-dropdown .join-menu {
  position: absolute;
  top: 100%;
  right: -10;
  background: #fff;
  min-width: 180px;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.3s ease;
  z-index: 999;
}

.join-dropdown:hover .join-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.join-menu a {
  display: block;
  padding: 10px 15px;
  color: #000;
  text-decoration: none;
  transition: 0.3s;
}

.join-menu a:hover {
  background: var(--bg-color);
  color:var(--bs-white);
}