@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

body { 
  font-family: sans-serif;
  margin: 0; 
  background: #f4f4f4; 
}

header { 
  background: rgba(91, 164, 70); 
  color: white; 
  padding: 1rem; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  font-family: "Bree Serif";
  letter-spacing: 2px;
}

nav { 
  display: flex; 
  justify-content: space-between;
  width: 100%;
}

.product-card {
  display: flex;
  background: white;
  margin: 20px auto;
  width: 80%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.product-left { 
  flex: 1; 
  max-width: 200px; 
  align-content: center;
}

.product-left img { 
  width: 100%; 
  height: auto; 
  display: block;
}

.product-right { 
  flex: 3; 
  padding: 20px; 
}

.dropdown { 
  position: relative; 
  display: inline-block;
}

.dropdown-content { 
  display: none; 
  position: absolute; 
  background: white; 
  min-width: 160px; 
  box-shadow: 0 8px 16px rgba(0,0,0,0.2); z-index: 1; 
}

@media (hover: hover) and (pointer: fine) {
  .dropdown:hover .dropdown-content { 
    display: block; 
  }
}

.dropdown-content.mobile-show {
  display: block !important;
}

.dropdown-content button { 
  color: black; 
  padding: 12px 16px; 
  text-decoration: none; 
  display: block; 
  width: 100%; 
  border: none; 
  background: none; 
  cursor: pointer; 
  text-align: left;
  font-size: 15px;
}

@media (max-width: 1000px) {
  .dropdown-content button {
    font-size: 40px;
  }
}
.dropdown-content button:hover { 
  background-color: #f1f1f1; 
}

.benefits-button{
  background-color: rgba(128, 106, 80);
  color: white;
  padding: 10px 0px;
  width: 310px;
  height: 70px;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  font-size: 20px;
  transition: background-color 0.3s ease, transform 0.2s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  margin-right: 20px;
}
.benefits-button:hover, .products-button:hover, .ingredients-button:hover{
  background-color: rgb(121, 90, 49);;
}

.products-button{
  background-color: rgba(128, 106, 80);
  color: white;
  padding: 10px 0px;
  width: 310px;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  font-size: 20px;
  transition: background-color 0.3s ease, transform 0.2s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  height: 70px;
  margin-right: 20px;
  margin-left: 20px;
}

.ingredients-button{
  background-color: rgba(128, 106, 80);
  color: white;
  padding: 10px 0px;
  width: 310px;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  font-size: 20px;
  transition: background-color 0.3s ease, transform 0.2s;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  font-weight: bold;
  height: 70px;
  margin-right: 20px;
}

@media (max-width: 1000px) {
  .ingredients-button, .products-button, .benefits-button {
    height: 100px;
    font-size: 25px;
  }
}

.page-name{
  color: white;
}

.ingredient-highlight-card {
  border-left: 6px solid #5ba446; 
  background-color: #fcfdfb;
}


.badge {
  background: #5ba446;
  color: white;
  padding: 4px 10px;
  font-size: 11px;
  text-transform: uppercase;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 5px;
}