/* Avatar */
.avatar-sm {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #e0e0e0; /* Optional for appearance */
}

.avatar-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dropdown Menu Styling */
.relatives ul {
  display: none; /* Hidden by default */
  position: absolute;
  right: 0;
  top: calc(100% + 2px); /* Position below the avatar */
  background: #fff;
  color: #333;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 1px 0;
  z-index: 10;
  min-width: 200px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: scaleY(0);
}

.relatives ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  padding: 10px 15px;
  transition: background-color 0.2s ease-in-out;
}

.relatives ul a:hover {
  background-color: #f5f5f5;
}


/* Dropdown Menu Items */
.relatives ul a {
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s ease-in-out;
}
55, 57, 53
.dropdown-content {
  transition: opacity 0.5s, transform 0.5s;
  opacity: 0;
  transform: scaleY(0);
}

.dropdown-content:hover, .group:hover .dropdown-content {
  opacity: 1;
  transform: scaleY(1);
}

.dropdown-content {
  opacity: 1;
  transform: scaleY(1);
}


.relatives ul a:hover {
  background-color: #f5f5f5;
}

/* Divider */
.dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 10px 0;
}

.bg-primary {
    --tw-bg-opacity: 1 !important;
    background-color: #60D9AC !important;
}
.bg-primary-100 {
    --tw-bg-opacity: 1 !important;
    background-color: #4FE2BD !important;
}
.text-primary {
    --tw-text-opacity: 1 !important;
    color: #18181B !important;
}
.after\:bg-primary::after {
    --tw-bg-opacity: 1 !important;
    background-color: #60D9AC !important;
}

.btn::after {
    background-color: rgb(146 5 182) !important;
}


.btn::before {
    background-color: rgb(162 16 176 / var(--tw-bg-opacity, 1)) !important;
}
.fill-primary {
    fill: #60D9AC !important;
}
.btn-outline::before {
    background-color: rgb(162 16 176 / var(--tw-bg-opacity, 1)) !important;
}


.container, .relative {
    opacity: 1 !important;
}
.tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    max-width: 250px; /* Prevents overflowing */
    width: max-content; /* Keeps tooltip from being too wide */
    white-space: normal; /* Allows text to wrap */
    word-wrap: break-word; /* Ensures long words break properly */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    text-align: center; /* Keeps text centered */
}

/* Tooltip arrow */
.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}

/* Show tooltip on hover */
.group:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}
.dark .btn {
    color: white !important;
}

/* Tooltip container */
.tooltip-hover {
  position: relative;
  cursor: help;
  display: inline-block;
}

/* Tooltip text */
.tooltip-hover .tooltip-text {
  visibility: hidden;
  width: max-content;
  max-width: 250px;
  background-color: #1e293b; /* slate-800 */
  color: #f8fafc; /* slate-50 */
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  position: absolute;
  z-index: 9999;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  font-size: 0.875rem;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Tooltip arrow */
.tooltip-hover .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1e293b transparent transparent transparent;
}

/* Show the tooltip */
.tooltip-hover:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
#navbar-logo {
    width: 80px !important;
}
nav #navbar-logo {
    width: 80px !important;
}
@media screen and (max-width: 992px) {
    #navbar-logo {
        width: 80px !important;
    }
}
.w-50 {
    width: 80px !important;
}
.logos {
            width: 80px !important;
}