/* Existing styles */

.nav-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    height: 60px;
    padding: 70px 0 0 0;
    cursor: default !important;

}

nav {
    z-index: 9999;
    height: 60px;
    position: fixed;
    max-width: 1428px;
    justify-content: space-between;
    cursor: default !important;

}

.bar {

    position: relative;
    justify-content: center;
    align-items: center;
    width: 1428px;
    background-color: #161A21;
    border-radius: 100px;
    box-shadow: rgba(149, 157, 165, 0.096) 0px 0px 24px;
    cursor: default !important;
    
}

.mob-nav-ele {
    display: none;
}

.bar-ele-but {
    position: relative;
    display: flex;
    max-width: 1428px;
    justify-content: space-between;
    height: 60px;
    align-items: center;
    color: white;
    cursor: default !important;
}

.bar-ele-but h4 {
    font-weight: 600;
    font-size: 1rem;
    cursor: default !important;
}

.bar-ele-but h4 a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85); /* Lighter text color */
    position: relative;
}

/* Centered Hovering Animation */
.bar-ele-but h4 a::after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: white;
    position: absolute;
    bottom: -5px;
    left: 50%; /* Start at the center */
    transform: translateX(-50%); /* Adjust positioning */
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.bar-ele-but h4 a:hover::after {
    width: 60%; /* Set underline width to 70% */
    transform: translateX(-50%); /* Keep it centered */
}

.bar-ele-but h4 a:hover {
    color: #FFFFFF; /* Brighter color on hover */
    font-weight: 700; /* Slightly bolder text */
    cursor: pointer !important;
}

/* Always show underline for the active page */
.bar-ele-but h4 a.active::after {
    width: 70%; /* Keep the underline at 70% */
    transform: translateX(-50%); /* Center the underline */
}

.bar-ele-but h4 a.active {
    color: #FFFFFF; /* Highlight the active link color */
    font-weight: 700; /* Optional: Make it bolder */
}

.bar-ele-but .left,
.bar-ele-but .right {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
  gap: 50px;
  font: bold;
  letter-spacing: 1.1px;
  cursor: default !important;
}

.bar-ele-but .left {
  justify-content: left;
  padding-left: 3vw;
}

.bar-ele-but .right {
  justify-content: right;
  padding-right: 3vw;
}


.bar-ele-but .center {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    scale: 200%;
    cursor: pointer;
    cursor: pointer !important;
}

.bar-ele-but .center img {
    scale: 100%;
    width: auto;
    height: 40px;
    object-fit: contain;
    cursor: pointer !important;
    
}

.profile-icon {
  display: flex;
  gap: 15px;
  width: 40px;
  height: 40px;
  justify-content: right;
  align-items: center;
  cursor: pointer !important;
}
.profile-icon img {
  width: 40px;
  height: 40px;
  cursor: pointer !important;
}


.ui-btn {
    font-size: 1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 600 16px Menlo, Roboto Mono, monospace;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    overflow: hidden;
  }
  
  .ui-btn span {
    letter-spacing: 0.1rem;
    transition: 0.3s;
    box-sizing: border-box;
    position: relative;
    background: inherit;
    cursor: pointer;
  }
  
  .ui-btn span::before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    background: inherit;
  }
  
  .ui-btn:hover,
  .ui-btn:focus {
    background: #161a21;

  }
  
  .ui-btn:hover span,
  .ui-btn:focus span {
    font-weight: 900;
    color: #fff;
  }
  
  .ui-btn:hover span::before,
  .ui-btn:focus span::before {
    animation: chitchat linear both 1.2s;
  }
  
  @keyframes chitchat {
    0% {
      content: "#";
    }
  
    5% {
      content: ".@$";
    }
  
    10% {
      content: "$$^*{";
    }
  
    15% {
      content: "-!#@";
    }
  
    20% {
      content: "#$_";
    }
  
    25% {
      content: "№:$$0";
    }
  
    30% {
      content: "#{@&+.";
    }
  
    35% {
      content: "@}+*--?";
    }
  
    40% {
      content: "?{4$$@%";
    }
  
    45% {
      content: "=.,$~-*^!";
    }
  
    50% {
      content: "?2@%";
    }
  
    55% {
      content: "&*$\;1}]";
    }
  
    60% {
      content: "$&#?{%:%";
      right: 0;
    }
  
    65% {
      content: "#$&|{f[4";
      right: 0;
    }
  
    70% {
      content: "{4^&*@0%";
      right: 0;
    }
  
    75% {
      content: "'1_4~{})";
      right: 0;
    
    }
    80% {
      content: "{0{}%";
      right: 0;
    }
  
    85% {
      content: "]45&>'";
      right: 0;
    }
  
    90% {
      content: "4%^/*-";
      right: 0;
    }
  
    95% {
      content: "2#^";
      right: 0;
    }
  
    100% {
      content: "Dashboard";
      right: 0;
    }
}
  

/* For Mobile Screens */
@media (max-width: 800px) {
    .nav-div {
        display: flex;
        flex-direction: row; /* Changed to row for horizontal alignment */
        justify-content: space-between; /* Distribute space evenly */
        align-items: center; /* Vertically center the items */
        z-index: 9999;
        height: 100px;
    }
    
    nav {
        z-index: 9999;
        height: 60px;
        position: fixed;
        width: 100%; /* Ensures it spans the full width */
        display: flex;
        justify-content: space-between; /* Align the items in the nav */
        align-items: center; /* Vertically center the nav items */
    }
    
    .bar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        background-color: #ffffff;
        height: 60px;
        border-radius: 100px;
        box-shadow: rgba(255, 255, 255, 0.267) 0px 0px 100px 0px;
    }

    .bar-ele-but {
        display: none;
    }
    
    .bar-elements {
        color: rgb(0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .mob-nav-ele {
        display: block;
        justify-content: center;
        align-items: center;
    }
    
    .nav-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-weight: bold;
        font-size: 1.45rem;
        padding: 20px 0;
        letter-spacing: 0.06rem;
        gap: 8px;
    }
    
    .mob-nav-ele span:first-child {
        font-weight: 900;
    }
    
    .mob-nav-ele span:last-child {
        font-weight: 500;
    }
    
}