/* style-left-navi.css */

#left-nav {
    width: 250px; /* Or your desired width */
    background-color: #eee;
    padding: 1rem;
    /* Remove position: relative and z-index */
}
#left-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

#left-nav li a {
    display: flex;
    align-items: center;
    padding: 5px;
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s ease; /* Smooth opacity transition */
}

#left-nav li a i { /* Style the icons */
    margin-right: 10px; /* Space between icon and text */
    width: 20px;       /* Consistent icon width */
    text-align: center; /* Center icons */
}

#left-nav .copyright-container {
    text-align: center;
    padding-top: 1rem;
    transition: opacity 0.3s ease; /* Smooth opacity transition */
}
/* Mobile Menu Icon Styles */
.mobile-menu-icon {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px; /* Adjust as needed */
    left: 20px; /* Adjust as needed */
    z-index: 3; /* Above left nav and content */
    font-size: 20px;
    cursor: pointer;
    background-color: #eee; /* Or transparent, or any color */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Media Queries */
@media (max-width: 768px) { /* Show icon-only */
    #left-nav {
        width: 60px; /* Icon-only width */
        overflow: hidden; /* Hide menu text */
    }

    #left-nav ul li a span, /* Hide the text within spans */
    #left-nav .copyright-container p, /* Hide copyright text */
    #left-nav .copyright-container h3, /* Hide copyright text */
    
    #left-nav:hover { /* Expand on hover */
        width: 250px;
        overflow: visible; /* Show text on hover */
    }

    #left-nav:hover ul li a span,
    #left-nav:hover .copyright-container p,
    #left-nav:hover h3 { /* Show the h3 title on hover */
        display: inline;
    }

}

@media (max-width: 425px) { /* Corrected: Added "px" */
    #left-nav {
        display: none; /* Hide the entire left nav */
    }
        .mobile-menu-icon {
        display: flex; /* Show the icon */
    }
}   

/* ... any other styles from your original CSS file ... */