/* section {
  margin-bottom: 20px;
} */

/*intro - advert for new product drop*/
#intro {
  width: 100%;
  background-image: url(../images/intro_background.jpeg);
  background-size: cover;
  text-align: left;
}

#prod-text {
  padding: 100px 75px;
  padding-bottom: 75px;
}

#learn-btn {
  margin-top: 50px;
  width: 200px;
}

.button a {
  color: var(--cream)
}

.button:hover {
  border: 1px solid var(--green-600);
}

.button a:hover {
  color: var(--green-500)
}

#intro h4 {
  font-weight: bold;
  font-size: 32px;
  color: var(--green-600);
}

#intro h1 {
  font-weight: 800;
}

#intro img {
  position: relative;
  bottom: 0;
  padding-left: 100px;
  margin-bottom: -4px;
}

#flan-bottle {
  transform: rotate(15deg);
  z-index: 999;
  position: absolute;
  bottom: -7rem;
  left: 60%;
  width: 36%;
}

/*benefits*/
#benefits {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  margin: 5%;
}

/* .benefit {
  height: 250px;
} */


/*shop preview*/
#explore_shop {
  /* width: 100%; */
  /* height: 100vh; */
  padding: 5%;
  padding-bottom: 150px;
  align-content: center;
  text-align: center;
  background: var(--gradient-orange, linear-gradient(180deg, #EFCDA9FF 0%, #EEB377FF 100%));
  /* background-image: url(../images/wave-bkg.svg);
  background-size: contain;
  background-repeat: no-repeat;*/
  position: relative;
}

.product_button {
  margin: 15px auto;
  padding: 20px;
  max-width: 360px;
  height: 400px;
  color: var(--brown);
  background-color: var(--cream);
  overflow: hidden;
  border-radius: 20px;
  transition: transform 0.3s ease-in-out;
}

.product_button img {
  width: 100%;
  height: 400px;
  margin-bottom: 5%;
  object-fit: cover;
  transition: 0.3s;
}

#product-category1 {
  background-image: url(../images/flan_mockup.png);
  background-size: cover;
  background-position-x: center;
}

#product-category1:hover,
#product-catgegory1:active {
  background-image: url(../images/latte_hover.png);
  background-size: cover;
  background-position-x: center;
}

#product-category2 {
  background-image: url(../images/gourd_blue.png);
  background-size: cover;
  background-position-x: center;

}

#product-category2:hover,
#product-catgegory2:active {
  background-image: url(../images/access_hover.png);
  background-size: cover;
  background-position-x: center;
}

#product-category3 {
  background-image: url(../images/teabag_mockup.png);
  background-size: cover;
  background-position-x: center;
}

#product-category3:hover,
#product-catgegory3:active {
  background-image: url(../images/tea_hover.png);
  background-size: cover;
  background-position-x: center;
}



/*values*/
#values {
  /* text-align: center; */
  height: 70vw;
  background-image: url(../images/value-leaves.svg);
  background-size: 75%;
  background-position-y: center;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 60px;
}

#values h2 {
  text-align: center;
}

.info {
  display: block;
  width: 300px;
  text-align: center;
  position: absolute;
}

#v_1 {
  /* position: absolute;
  top: 2950px;
  left: 450px; */
  top: 23%;
  left: 25%;
}

#v_2 {
  /* position: absolute;
  top: 3025px;
  left: 1425px; */
  top: 37%;
  left: 73%;
}

#v_3 {
  /* position: absolute;
  top: 3460px;
  left: 1000px; */
  top: 70%;
  left: 57%;
}


/*testimonials*/
#testimonials {
  width: 90vw;
  margin: auto;
  padding: 20px;
  background-color: var(--green-600);
  border-radius: 10px;
  align-content: center;
  color: var(--cream);
}

.test {
  height: 250px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

.test h3 {
  margin-bottom: 10px;
}