/* Hide the navbar by moving it up */
.navbar-hidden {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

/* Default navbar transition for smooth appearance */
.navbar {
    transition: transform 0.3s ease-in-out;
}



/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    #offcanvasNavbar2 {
        width: 60% !important;
        border: none !important;
    }
    #offcanvasNavbar1 {
        width: 80% !important;
        border: none !important;
    }
}
    
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #offcanvasNavbar2 {
        width: 50%px !important;
        border: none !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #offcanvasNavbar2 {
        width: 40% !important;
        border: none !important;
    }
}

/* Large devices (desktops, 1200px and up) */
@media (min-width: 1200px) {
    #offcanvasNavbar2 {
        width: 30% !important;
        border: none !important;
    }
}

/* Navbar Link Animation */
.navbar-light .navbar-nav .nav-link{
    color: white;
}

.navbar-light .navbar-brand{
    color: white;
}

.nav-link:hover{
    color: rgba(255, 255, 255, 0.5) !important;
}

.navbar-brand:hover{
    color: rgba(255, 255, 255, 0.5) !important;
}

.navbar-toggler:hover{
    color: rgba(255, 255, 255, 0.5) !important;
}

.navbar-user-image {
    max-height: 1.7rem; 
    max-width: 1.7rem; 
    aspect-ratio: 1/1;
}

.navbar-user-image-name {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem; 
    /* padding: 0px 10px;  */
    background-color: #6600cc;
}

.navbar-profile-image {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  object-fit: cover;
}

.navbar-profile-image-character {
  display: flex; /* Make the span a flex container */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
  background-color: #6600CC; /* Circle background color */
  width: 75px; /* Circle diameter */
  height: 75px; /* Circle diameter */
  /* Makes the span a perfect circle */
  border-radius: 50%; 
  font-size: 3rem; /* Dynamically adjusts font size */
  color: inherit; /* Text color */
  text-transform: uppercase; /* Capitalize the first letter */
  box-sizing: border-box; /* Ensures padding doesn’t affect dimensions */
}