body {
    margin: 0;
  }
#body{
  background-color: whitesmoke;
}
.nav-body{
  background-image: url("../Photos/product8.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 400px;
}
  /* -----------------------Product-menu------------------------ */
  .listProduct{
    .category-section{
      width: 100%;
      padding-bottom: 2%;
      margin-bottom: 5%;
      margin-top: 5%;
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: repeat(5, 1fr);
      overflow-x: auto; 
      overflow-y: hidden; 
      white-space: nowrap; 
      -webkit-overflow-scrolling: touch;
      h2{
        grid-row: 1; /* Place h2 in the first row */
        background-color: whitesmoke;
        color: #353432;
        width: 100%;
        height: 50px;
        position:absolute;
        font-size: large;
        letter-spacing: 5px;
        text-align: center;
        padding-top: 10px;
        font-family:'Franklin Gothic Medium';
        border-top: solid 1px rgba(0, 0, 0, 0.219);
        border-bottom: solid 1px rgba(0, 0, 0, 0.219);
      }
      .item {
        display: flex; /* Use flex for each item */
        flex-direction: column; /* Arrange content in a column */
        align-items: center; /* Center items horizontally */
        margin: 1px; /* Space between items */ 
        .productView {
          display: flex; /* Flexbox for the product view */
          flex-direction: column; /* Stack image and text vertically */
          align-items: center; /* Center product contents */
          margin-top: 20%;
          width: 80%;
          height: 350px;
          border-radius: 3%;
          /* padding: 1px; */
          box-shadow: 2px 2px 5px 2px rgba(46, 45, 45, 0.5);
          background-color: white;
          cursor: pointer;
          .product{
            img{
              width: 200px;
              height: 200px;
            }
            h4{
              font-size: small;
            }
            select{
              width: 80%;
            }
            p{
              font-size: smaller;
            }
    
          }
          .product:hover{
            background-color: white;
            img{
              filter: drop-shadow(0 50px 20px #0009);
            }
          } 
        }
        .addCart {
          /* position:inherit; */
          margin-top: -15%;
          margin-bottom: 10%;
          padding: 5px 10px;
          cursor: pointer;
          text-align: center;
          text-decoration: none;
          outline: none;
          color: #000000;
          background-color: #ffffff;
          border: solid 1px;
          border-radius: 15px;
        }
        .addCart:hover {
          box-shadow: 0 3px #474747;
          color: black;
        }
        .addCart:active {
          background-color: black;
          border: solid black 1px;
          color: white;
          transform: translateY(3px);
        }
      }
    }
  }
  
  @media screen and (max-width: 991px){
    .listProduct{
      .category-section{
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
  @media screen and (max-width: 600px){
    .listProduct{
      .category-section{
        grid-template-columns: repeat(2, 1fr);
        .item{
          .productView {
            margin-top: 35%;
            width: 170px;
            height: 280px;
            .product {
              img{
                width: 120px;
                height: 150px;
              }
              p{
                margin: 1%;
              }
              h4{
                font-size: 80%;
              }
            }
          }
          .addCart{
            margin-top: -25%;
          }
        }
      }
    }
  }

  /* ----------------------------INFO--------------------------- */
  .social-links{
    color: whitesmoke;
    background-color: #34485a;
      a{
        color: whitesmoke;
      }
    .contact-links{
        :hover {
          color:rgb(177, 106, 0);
        }
    }
    .quick-links{
        :hover {
          color: rgb(177, 106, 0);
        }
      }
  }
/* ----------------------footer------------------------------------ */
.terms{
    color: whitesmoke;
    background-color: rgba(44, 44, 44, 0.527);
    .social-icons{
        background-color: rgba(44, 44, 44, 0);
        :hover{
        color: rgb(177, 106, 0);
        }
    }
    footer{
        a{
            color: rgb(190, 188, 188);
            font-size: 80%;
        }
    }
}