nav {
          font-size: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 30px;
          top: 0;
          width: 100%;
          box-shadow: 0 2px 8px black;
          box-sizing: border-box;
          position: relative;
          z-index: 1000;
          background-color: rgb(12, 12, 43);

        }
        nav.fixed-nav {
          position: fixed;
          top: 0;
          left: 0;
          margin: 0;
        }
    
      
    
        .navlogo {
          height: 70px;
          width: 150px;
          
          object-fit: cover;
        
        }


/* Menu button */
#menu-toggle {
    background: none;
    color: wheat;
    border: none;
    font-size: 20px;
    cursor: pointer;
    margin-left: auto; /* Push to the right end */
    display: block; /* Visible initially for mobile */
    padding-right: 15px; /* Added space between buttons */
}


        nav .nav-links {
            background: rgba(8, 8, 8, 0.3); /* white with 30% opacity */
  backdrop-filter: blur(10px);         /* apply blur to background */
  -webkit-backdrop-filter: blur(10px); /* for Safari support */
  border-radius: 10px;                 /* optional rounding */
  padding: 1rem; 
        
          display: none;
          flex-direction: column;
          position: absolute;
          top: 60px;
          right: 5px;
          padding: 10px;
          border-radius: 5px;
         
        }

        nav .nav-links a {
          margin: 0.5rem 0;
          padding: 0 1rem;
          text-decoration: none;
          transition: background-color 0.3s;
          font-weight: lighter;
          border-radius: none;
          color: #f5f1f1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
    
        nav a:hover {
          
          border-top: 2px solid rgb(8, 131, 245);
          border-bottom: 2px solid rgb(197, 238, 13);
          animation: hover 1s forwards  ;
        }
    @keyframes hover {
      0%{
        
       padding: 0 1rem;
      }
      100%{
       
        padding: 0.5rem 1rem;
      }
      
    }
        @media (min-width: 768px) {
          #menu-toggle {
            display: none;
          }
    
          nav .nav-links { 
            display: flex;
            position: static;
            flex-direction: row;
            background: none;
            box-shadow: none;
            padding: 0;
          }
    
          nav .nav-links a {
            margin: 0 1rem;
          }
        }