nav li{
    font-family: Arial, sans-serif;
    display: inline;  
    
    padding: 3vh; 
}    


nav li button{
    color:#737373;
    background-color: transparent;  
    border: 0;
    font-size:18px; 
    font-weight: 400 !important;
}       

nav li button {
    position: relative;
    text-decoration: none;
    background: transparent;
    border: none;
    color: #737373;
    font-size: 18px;
    font-weight: 500;
    padding: 6px 10px;
    cursor: pointer;
    outline: none;
}

nav li button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px; /* Adjusts underline position */
    width: 100%;
    height: 2px; /* Thickness of the underline */
    background-color: #737373; /* Change to desired color */
    transform: scaleX(0); /* Initially hidden */
    transition: transform 0.3s ease-in-out;
}

nav li button:hover::after {
    transform: scaleX(1); /* Expands the underline */
}


.logo-container {
    display: flex;
    align-items: center;  /* Aligns images vertically */
    gap: 15px;  /* Adjusts spacing between images */
}

@media (max-width: 576px) {
    div.logo-container {
        display: none; /* Hides the whole navbar */
    }

    nav li{
        font-family: Arial, sans-serif;
        display: inline;   
        padding: 6px; 
    }    
    
    nav li button{ 
        font-size:12px;  
        font-weight:600;
    }  

    nav.navbar {
       
        border-top:1px solid black; 
        height: 100px;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgb(255, 255, 255); /* Change as needed */
        z-index: 1000; /* Ensures it stays above other content */
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional: adds shadow effect */
    }
    
}