/* Small screen styles */
@media (max-width: 768px) {
    .navbar {
        background-color: transparent !important;
        width: 50px !important; /* Navbar width 50px on small screens */
        height: 50px !important; /* Full height to maintain vertical alignment */
        position: fixed; /* Fixed to the left */
        
        left: 1%;
        top: 0%;
        z-index: 999;
    }

        .navbar .nav-link {
            color: black !important;
            white-space: nowrap; /* Prevent text wrapping */
        }

    /* Hamburger button styling */
    .navbar-toggler {
        background-color: transparent !important;
        border: none !important;
        width: 40px !important;  /*Correct width for the toggler */
        height: 40px !important;
        padding: 0 !important;
    }

    /* Correct Hamburger Icon */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        width: 30px;
        
    }

    /* Menu width to 100% after toggling */
    .navbar-collapse {
        /*width: 200px !important;*/
        
        background-color: white;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        transition:ease-out;
       
    }
}

/* Large screen styles */
@media (min-width: 769px) {
    .navbar {
        background-color: transparent !important;
        width: 100% !important; /* Full width on large screens */
        position: relative;
    }

        .navbar .nav-link {
            color: white !important;
        }
}