* {
  font-family: Poppins, "Century Gothic";
  padding: 0px;
  margin: 0px;
}

body {
  background: #f6f9fe;
  width: 100%;
  min-width: 335px;
}

h1 {
  font-size: 50;
}

.menuwrapper {
  background: white;
}

.middle {
  transition: 0.2s ease;
  opacity: 0;
  text-align: center;
  position: relative;
  width: 150px;
  margin: 0 auto;
  margin-top: -110px;
  background: #3c4043;
  border-radius: 5px;
}

.Allimg {
  opacity: 1;
  display: block;
  height: auto;
  backface-visibility: hidden;
}

.textwrap {
  background: #327559;
  width: 0%;
  height: 100%;
  position: absolute;
  transition: all 0.1s ease-in-out;
  border-radius: 5px;
}

.border:hover .middle:hover .textwrap {
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.border:hover .middle {
  margin-top: -120px;
}
.border:hover img {
  opacity: 0.3;
}

.border:hover .middle {
  opacity: 1;
}

.text {
  color: white;
  font-size: 16px;
  padding: 16px;
  position: relative;
}

.Divider {
  width: 90%;
  margin: 0px auto 20px;
  text-align: center;
  background-color: #3c4043;
  height: 1.5px;
  align-items: center;
}

.border {
  margin: 2px;
  padding-bottom: 15px;
  background: white;
  overflow: hidden;
}

.border:hover {
  cursor: pointer;
  overflow: hidden;
  background: #e9edf5;
}

.border:hover img {
  transform: scale(1.05, 1.05);
  transition: all 0.3s ease-in-out;
}

.prodlink {
  background-color: aqua;
}
.price {
  color: green;
}

.HCheader,
.OCheader,
.ICheader,
.SCheader,
.BBCheader,
.Allheader {
  width: 90%;
  margin: 20px auto 10px;
  text-align: center;
  height: 150px;
  align-items: flex-end;
  display: flex;
  justify-content: start;
}

.HCcategory1,
.HCcategory2,
.SCcategory1,
.BBCcategory1,
.ICcategory1,
.OCcategory1,
.Allcategory1 {
  display: grid;
  grid-template-columns: repeat(5, 20%);
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
}

.HCcategoryctr,
.SCcategoryctr,
.BBCcategoryctr,
.ICcategoryctr,
.OCcategoryctr,
.Allcategoryctr {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 100px;
}

.HCimg,
.HCimg img,
.SCimg,
.SCimg img,
.BBCimg,
.BBCimg img,
.ICimg,
.ICimg img,
.OCimg,
.OCimg img,
.Allimg,
.Allimg img {
  width: 220px;
  height: 220px;
  margin: 0px auto;
  transition: all 0.3s ease-in-out;
}

.HCdeets,
.Alldeets {
  width: 220px;
  height: 100px;
  margin: 0px auto;
  text-align: center;
}

.OCdeets {
  width: 220px;
  height: 100px;
  margin: 20px 25px 0px;
  text-align: center;
}

.SCdeets,
.BBCdeets,
.ICdeets {
  width: 220px;
  height: 100px;
  text-align: center;
  margin: 0 auto;
}

@media (min-width: 805px) and (max-width: 1259px) {
  .HCimg,
  .HCimg img,
  .SCimg,
  .SCimg img,
  .BBCimg,
  .BBCimg img,
  .ICimg,
  .ICimg img,
  .OCimg,
  .OCimg img,
  .Allimg img,
  .Allimg {
    width: 200px;
    height: 200px;
    display: flex;
    margin: 0 auto;
  }

  .Alldeets p,
  .HCdeets p,
  .OCdeets p,
  .SCdeets p,
  .BBCdeets p,
  .ICdeets p {
    margin: 0;
    font-size: 15px;
  }

  .SCdeets,
  .BBCdeets,
  .ICdeets,
  .HCdeets,
  .Alldeets,
  .OCdeets {
    width: 90%;
  }
}

@media screen and (max-width: 1400px) {
  .OCdeets {
    width: 90%;
    margin: 10px auto 0;
  }
}

@media screen and (max-width: 1070px) {
  .HCimg,
  .HCimg img,
  .SCimg,
  .SCimg img,
  .BBCimg,
  .BBCimg img,
  .ICimg,
  .ICimg img,
  .OCimg,
  .OCimg img,
  .Allimg img,
  .Allimg {
    width: 170px;
    height: 170px;
  }
}

@media screen and (max-width: 950px) {
  .HCcategory1,
  .HCcategory2,
  .SCcategory1,
  .BBCcategory1,
  .ICcategory1,
  .OCcategory1,
  .Allcategory1 {
    width: 95%;
  }

  .HCheader,
  .OCheader,
  .ICheader,
  .SCheader,
  .BBCheader,
  .Allheader {
    width: 95%;
  }

  .Divider {
    width: 95%;
  }

  .HCcategory1,
  .HCcategory2,
  .SCcategory1,
  .BBCcategory1,
  .ICcategory1,
  .OCcategory1,
  .Allcategory1 {
    grid-template-columns: repeat(4, 25%);
  }
  .SCdeets,
  .BBCdeets,
  .ICdeets,
  .HCdeets,
  .Alldeets {
    width: 90%;
  }

  p {
    font-size: 14px;
  }
}

@media screen and (max-width: 715px) {
  .HCimg,
  .HCimg img,
  .SCimg,
  .SCimg img,
  .BBCimg,
  .BBCimg img,
  .ICimg,
  .ICimg img,
  .OCimg,
  .OCimg img,
  .Allimg img,
  .Allimg {
    width: 140px;
    height: 140px;
  }
}

@media screen and (max-width: 655px) {
  .HCheader h1,
  .OCheader h1,
  .ICheader h1,
  .SCheader h1,
  .BBCheader h1,
  .Allheader h1 {
    font-size: 30px;
  }

  .Allheader,
  .HCheader,
  .OCheader,
  .ICheader,
  .SCheader,
  .BBCheader {
    height: 100px;
  }

  .border {
    box-shadow: none;
  }

  .border:hover {
    box-shadow: none;
  }

  .Allcategory1,
  .HCcategory1,
  .HCcategory2,
  .SCcategory1,
  .BBCcategory1,
  .ICcategory1,
  .OCcategory1 {
    justify-content: center;
    margin: 0px auto;
  }

  .Alldeets,
  .HCdeets,
  .OCdeets,
  .SCdeets,
  .BBCdeets,
  .ICdeets {
    width: 98%;
    margin: 0 auto;
  }

  .Alldeets p,
  .HCdeets p,
  .OCdeets p,
  .SCdeets p,
  .BBCdeets p,
  .ICdeets p {
    width: 100%;
  }
}

@media screen and (max-width: 640px) {
  .HCimg,
  .HCimg img,
  .SCimg,
  .SCimg img,
  .BBCimg,
  .BBCimg img,
  .ICimg,
  .ICimg img,
  .OCimg,
  .OCimg img,
  .Allimg img,
  .Allimg {
    width: 125px;
    height: 125px;
  }
}

@media screen and (max-width: 600px) {
  .HCcategory1,
  .HCcategory2,
  .SCcategory1,
  .BBCcategory1,
  .ICcategory1,
  .OCcategory1,
  .Allcategory1 {
    grid-template-columns: repeat(2, 50%);
  }

  .HCimg,
  .HCimg img,
  .SCimg,
  .SCimg img,
  .BBCimg,
  .BBCimg img,
  .ICimg,
  .ICimg img,
  .OCimg,
  .OCimg img,
  .Allimg img,
  .Allimg {
    width: 170px;
    height: 170px;
  }

  .Alldeets p,
  .HCdeets p,
  .OCdeets p,
  .SCdeets p,
  .BBCdeets p,
  .ICdeets p {
    width: 90%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 500px) {
  .logoftr {
    margin-right: 0px;
  }
}