.bottom-nav {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     height: 80px;
     background: #fefefe;
     border-top: 1px solid #ddd;
     display: flex;
     justify-content: space-around;
     align-items: center;
     z-index: 1000;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
     box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
   }

   .nav-item {
     text-align: center;
     font-size: 12px;
     color: #2c3e50;
     flex-grow: 1;
     position: relative;
   }

   .nav-item i {
     font-size: 18px;
     display: block;
     margin-bottom: 4px;
   }

   @media (min-width: 768px) {
     .bottom-nav {
       display: none;
     }

     body {
       padding-bottom: 0;
     }
   }