/* mobile tabs to show only for mobiles */  
 .nav-bar {
      display: flex;
      align-items: center;
      background-color: rgb(65, 62, 62);
      height: 50px;
    }
  
    .menu {
      display: flex;
      align-items: center;
      list-style-type: none;
    }
  
    .menu a {
      text-decoration: none;
      color: white;
      margin: 0 15px;
      font-size: 18px;
    }
  
    .menu a:hover {
      color: rgb(111, 103, 103);
    }
  
    .mob-tab {
      display: none;
    }
 @media screen and (max-width:600px) {
   .nav-bar {
     display: none;
   }

   .mob-tab {
     background-color: rgb(255, 255, 255);
     align-items: center;
     text-align: center;
     position: fixed;
     bottom: 0;
     width: 100%;
     height: 55px;
     display: flex;
     z-index: 10;
   }

   .tabs {
     /* display: contents; */
     display: flex;
     align-items: center;
     /* justify-content: space-evenly; */
     width: 100%;
     list-style-type: none;
     margin-left: -10px;
   }

   .tabs li {
     margin-right: auto;
     /* padding-left: 18px; */
   }

   .tabs a {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-decoration: none;
     color: rgb(70, 66, 66);
     font-weight: 600;
   }

   .tabs a:hover {
     color: rgb(175, 22, 132);
   }

   .tabs a p {
     margin-bottom: -4px;
   }


   /* color: #736a6a; */
   .underline a:hover {
     color: #fe5757;
     text-decoration: none;
   }

   .underline a:before {
     content: "";
     position: absolute;
     width: 100%;
     height: 6px;
     bottom: -2px;
     left: 0;
     background-color: #000;
     visibility: hidden;
     -webkit-transform: scaleX(0);
     transform: scaleX(0);
     -webkit-transition: all 0.3s ease-in-out 0s;
     transition: all 0.3s ease-in-out 0s;
   }

   .underline a.active:before,
   .underline a:hover:before {

     visibility: visible;
     -webkit-transform: scaleX(1);
     transform: scaleX(1);
   }
}