.cont1 {
  display: grid;
  width: 100%;
  grid-template-columns: 30% 45% 25%;
  grid-template-rows: 70px;
  background-color: #fffdf7;
  position: sticky;
  top: 0px;
}
#first {
  display: block;
  padding: 5%;
}
.cont1 > .c1b > button {
  background-color: transparent;
  padding: 2%;
  margin: 2% 4%;
  margin-right: 0px;
  font-size: 13px;
  font-weight: bold;
  border: transparent;
}
.c1b > button:hover {
  color: #3167ff;
  cursor: pointer;
}
.c1c > button {
  padding: 2%;
  font-family: "Abel", sans-serif;
  font-weight: bold;
  margin: 5% auto;
  margin-left: 55%;
  border: transparent;
  background-color: transparent;
  cursor: pointer;
  font-size: 14px;
}
.c1c > button + button {
  margin-left: 0px;
  width: 29%;
  font-weight: bold;
  font-size: 17px;
  border: transparent;
  color: white;
  background-color: #3167ff;
  cursor: pointer;
}
.B1 {
  font-size: 15px;
  margin-bottom: 5px;
  cursor: pointer;
  margin-right: 1%;
  background-color: #fffdf7;
}

.cont2 {
  width: 100%;
  margin: auto;
  height: 600px;
  display: flex;
}
.c2a {
  width: 50%;
  height: 100%;
  background-color: #fef9ea;
  font-family: Favoritfreshly, sans-serif;
}
.c2b {
  width: 50%;
  height: 100%;
  /* background-image: url(https://assets-global.website-files.com/5d03b4e130118314af624b20/6181bb1124863f69c44010d8_21_Winter2_BulkHolidayCampaign_C123020_1600x1067%20);
    background-size:cover; */
}
.c2a > h1 {
  font-size: 60px;
  padding: 2% 10%;
}
.c2a > h3 {
  padding: 2% 10%;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 0px;
}
.c2a > p {
  font-size: 15px;
  font-weight: lighter;
  padding: 2% 10%;
}
label {
  padding: 2% 10%;
  margin-top: 0px;
  font-weight: bold;
  font-size: 14px;
}
.c2a > label + label {
  padding-left: 20%;
}
#zip {
  margin-left: 10%;
  padding: 2%;
  width: 40%;
  border: transparent;
  background-color: #f7f7f7;
  border-bottom: gray 1px solid;
}
#zip1 {
  margin-left: 0px;
  padding: 2%;
  width: 10%;
  border: transparent;
  background-color: #f7f7f7;
  border-bottom: gray 1px solid;
}
.c2a > button {
  padding: 2%;
  border: transparent;
  background-color: #3167ff;
  font-weight: bold;
  font-family: "Abel", sans-serif;
  font-size: 18px;
  color: white;
  width: 20%;
  cursor: pointer;
}

.cont3 {
  width: 100%;
  height: 450px;
  border: 1px solid transparent;
  text-align: center;
  background-color: #f8f7f4;
}
.cont3 > h1 {
  font-family: Favoritfreshly, sans-serif;
  font-size: 50px;
  color: #333333;
}
.c3a {
  display: grid;
  /* width: 80%; */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 300px;
  grid-gap: 70px;
  margin: 0% 10%;
  align-content: space-around;
}
.c3a > div {
  cursor: pointer;
}
.c3a > div > h2 {
  font-family: "Abel", sans-serif;
}
.c3a > div > p {
  font-family: "Abel", sans-serif;
}

.cont4 {
  width: 100%;
  height: 1000px;
  border: 1px solid transparent;
  background-image: url(https://assets-global.website-files.com/5d03b4e130118314af624b20/5d94e04ff2b857688f7138b6_home_image2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.c4a {
  width: 60%;
  height: 80%;
  background-color: white;
  margin: 8% auto;
}

.c4a > h1 {
  padding: 0% 5%;
  padding-top: 3%;
  font-family: "Abel", sans-serif;
  font-size: 50px;
  margin-bottom: 10px;
}
.c4a > p {
  padding: 0% 5%;
  margin-top: 0px;
  font-size: 20px;
  font-family: Favoritfreshly, sans-serif;
}
.c4a > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  grid-gap: 30px;
  width: 75%;
  margin: 10% auto;
}
.c4a > div > div {
  /* border: red 1px solid; */
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.c4a > div > div:hover {
  cursor: pointer;
  background-color: #f8f7f4;
}

.img1 {
  border-radius: 10px 10px 0px 0px;
}
div > h4 {
  margin: 10% 10%;
  font-family: "Abel", sans-serif;
}
.sele1 {
  display: block;
  margin: auto;
  padding: 10px 28px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: transparent;
  background-color: #3167ff;
  font-family: "Abel", sans-serif;
  cursor: pointer;
}
.cont5 {
  width: 100%;
  height: 1100px;
  background-color: #fffdf7;
  border: 1px solid transparent;
}
.cont5 > img {
  display: block;
  margin: 5% auto;
  margin-bottom: 0px;
}
.cont5 > h1 {
  margin-top: 0%;
  color: #333333;
  text-align: center;
}
.cont5 > p {
  font-family: Favoritfreshly, sans-serif;
  font-size: 15px;
  margin: 1px 22%;
  text-align: center;
}
.cont5 > div + p {
  margin-top: 0%;
  margin-bottom: 3%;
  color: #357471;
  font-weight: bold;
}
.cont5 > button {
  display: block;
  margin: auto;
  padding: 10px 35px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border: transparent;
  background-color: #3167ff;
  font-family: "Abel", sans-serif;
  cursor: pointer;
}
.c5a {
  display: grid;
  width: 90%;
  margin: 7% auto;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 200px;
  grid-gap: 20px;
  margin-bottom: 2%;
}
.cont5 > div > div > h1 {
  color: #357471;
  font-family: Favoritfreshly, sans-serif;
  cursor: pointer;
  margin-top: 2%;
  text-align: center;
}
.c5b {
  width: 100%;
  height: 400px;
  margin-top: 4.2%;
}
.c5b > h1 {
  text-align: center;
  margin: 4% 0%;
  font-family: Favoritfreshly, sans-serif;
  font-size: 50px;
  color: #333333;
}
.c5c {
  display: grid;
  width: 80%;
  margin: auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px;
  grid-gap: 30px;
}
.c5c > div > h3 {
  font-family: "Abel", sans-serif;
  text-align: center;
  font-size: 20px;
  font-weight: lighter;
  margin-bottom: 0px;
}
.c5c > div > p {
  padding: 0% 8%;
  margin-top: 5px;
  font-family: "Abel", sans-serif;
  text-align: center;
}
.c5c > div > p + p {
  font-weight: bold;
}
.cont6 {
  width: 100%;
  height: 700px;
  border: transparent 1px solid;
  margin-top: 5%;
  background-image: url(https://assets-global.website-files.com/5d03b4e130118314af624b20/5d978a326f21d7b547d89e73_home_imageeat.jpg);
  background-repeat: no-repeat;
  background-size: 70% 100%;
  background-position: right;
}
.c6a {
  width: 60%;
  height: 50%;
  background-color: white;
  margin: 12% 0%;
}
.c6a > h1 {
  color: #333333;
  font-family: Favoritfreshly, sans-serif;
  font-size: 50px;
  padding: 5%;
  padding-bottom: 0%;
}
.c6a > p {
  font-family: Favoritfreshly, sans-serif;
  padding: 5%;
  padding-top: 0%;
  font-size: 18px;
}
.c6a > button {
  margin-left: 5%;
  font-size: 18px;
  padding: 10px 30px;
  border: transparent;
  color: white;
  font-family: "Abel", sans-serif;
  font-weight: bold;
  cursor: pointer;
  background-color: #3167ff;
}
.cont7 {
  width: 100%;
  height: 700px;
  border: transparent 1px solid;
  margin-top: 5%;
  background-image: url(https://static.onecms.io/wp-content/uploads/sites/19/2021/09/09/freshly-meal-kit-hero.jpg);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: center left;
}
.c7a {
  width: 60%;
  height: 70%;
  background-color: white;
  margin: 9% 0%;
  border: 1px transparent solid;
  margin-left: 40%;
}
.c7a > h1 {
  color: #333333;
  font-family: Favoritfreshly, sans-serif;
  font-size: 50px;
  padding: 5%;
  padding-bottom: 0%;
}
#a {
  width: 75%;
  margin-left: 5%;
  padding: 10px 12px;
  margin-bottom: 2%;
  border-radius: 5px;
  border: grey 1px solid;
}
#b {
  width: 75%;
  margin-left: 5%;
  padding: 10px 12px;
  margin-bottom: 2%;
  border-radius: 5px;
  border: grey 1px solid;
}
.c7a > button {
  width: 50%;
  margin: 1% 5%;
  padding: 10px 12px;
  background-color: #3167ff;
  border: transparent;
  font-size: 18px;
  font-family: "Abel", sans-serif;
  font-weight: bold;
  color: white;
}
.c7a > p {
  font-family: Favoritfreshly, sans-serif;
  margin-left: 5%;
  font-size: 12px;
}
.cont8 {
  display: flex;
  width: 100%;
  height: 200px;
  background-color: #f7f7f7;
  justify-content: center;
}
.cont8 > div {
  width: 16.6%;
  height: 100%;
}

#logo {
  padding: 35% 10%;
  cursor: pointer;
}
/* @media only screen and (min-width:375px) and (max-width:788px){
    .cont1{
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 50px);
        grid-gap:30px;
        grid-template-areas:
        "c1a c1b"
        "c1c .";
    }
}
@media only screen and (min-width:0px) and (max-width:375px){
    .cont1{
        display:grid;
        grid-template-columns: 100%;
        grid-template-rows: repeat(3, 50px);
        grid-gap:30px;
        grid-template-areas:
        "c1a"
        "c1b"
        "c1c";
    }
} */