section{
    padding:20px;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 40px auto;
}
section ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom:20px;
}
section ul li{
    list-style: none;
    background: #eeee;
    padding:12px 20px;
    margin: 5px;
    letter-spacing: 1px;
    cursor:pointer;
}
section ul li.active{
    background: #03a9f4;
    color:#fff;

}
.product{
    display: flex;
    justify-content: center;
    align-items:center;
    flex-wrap: wrap;
}
.product .itemBox{
    position: relative;
    width: 200px;
    height: 200px;
    margin: 5px;
    display: block;
}
.product .itemBox.hide{
    display:none;
}
.product .itemBox img{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media (width > 480px) {
    /* nav{display:none;} */
    
    .about__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .about__image:nth-child(1) {
      grid-area: 1/2/2/3;
    }
  
    .about__image:nth-child(1),
    .about__card:nth-child(4) {
      transform: translateY(2rem);
    }
  
    .feature__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .menu__images {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .menu__banner {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .news__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .footer__container {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .footer__col:first-child {
      grid-column: 1/3;
    }
  }
  
  @media (width < 768px) {
    nav{
        display: none;
    }
  }

  @media (width > 768px) {
    
  
    .nav__bar {
      max-width: var(--max-width);
      margin: auto;
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: var(--white);
      border-radius: 5px;
      transform: translateY(50%);
    }
  
    .nav__header {
      padding: 0;
      background-color: transparent;
    }
  
    .nav__menu__btn {
      display: none;
    }
  
    .nav__links {
      width: fit-content;
      padding: 0;
      position: static;
      flex-direction: row;
      transform: none;
      background-color: transparent;
    }
  
    .booking__container form {
      max-width: 100%;
      grid-template-columns: repeat(4, 1fr);
      align-items: center;
    }
  
    .about::before {
      height: 75%;
      width: 75%;
    }
  
    .about__container {
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
    }
  
    .room__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .intro__container {
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
    }
  
    .feature__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .menu__header {
      flex-direction: row;
    }
  
    .menu__items {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .menu__images {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .menu__banner {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .news__header {
      flex-direction: row;
    }
  
    .news__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .footer__container {
      grid-template-columns: 2fr repeat(2, 1fr);
    }
  
    .footer__col:first-child {
      grid-column: unset;
    }
  }
  
  @media (width > 1024px) {
    .about__grid {
      gap: 2rem;
    }
  
    .room__grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
  
    .menu__images {
      gap: 2rem;
    }
  
    .news__grid {
      gap: 2rem;
    }
  }