/* .main{
    display: grid;
    grid-template-columns: 260px 1fr auto;
    
} */

.icons {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  justify-content: space-between;
  align-items: center;
  /* padding-top: 10px; */
}

 
.icon {
  display: grid;
  grid-template-columns: repeat(4, 60px);
  justify-content: space-between;
  align-items: center;
  /* padding-top: 10px; */
}

.icons span {
  /* border-radius: 100%; */
  
  display: grid;
  align-items: center;
  justify-content: center;
  /* box-shadow: var(--lv-box-shadow); */
  margin-right: 1px;
  margin-left: auto;
  cursor: pointer;
}

.icon span {
  /* border-radius: 100%; */
  
  display: grid;
  align-items: center;
  justify-content: center;
  /* box-shadow: var(--lv-box-shadow); */
  margin-right: 1px;
  margin-left: auto;
  cursor: pointer;
}

.bottomNavbar {
  background-color: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
    drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  border-top: 1px solid #d1d5db;
  padding: 8px 5px;
}

/* .bottomNavbar a{
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
} */

@media screen and (min-width: 769px) {
  .bottomNavbar {
    display: none;
  }
}
@media screen and (max-width: 376px) {
  .icons {
    grid-template-columns: repeat(5, 30px);
  }

  .icon {
    grid-template-columns: repeat(4, 60px);
  }
}

@media (min-width: 321px) and (max-width: 376px) {
  .icons {
    grid-template-columns: repeat(5, 30px);
  }
  .icon {
    grid-template-columns: repeat(4, 60px);
  }
}

@media (min-width: 270px) and (max-width: 320px) {
  .icons {
    grid-template-columns: repeat(5, 30px);
  }

   .icon {
    grid-template-columns: repeat(4, 60px);
  }
}