@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap");

.navbar img {
  width: 220px;
}

.btn-heart {
  width: 50px;
  height: 50px;
}

body {
  overflow-x: hidden;
}

h1 {
  font-family: "Merriweather Sans", sans-serif;
  font-size: 63px !important;
  color: #364A15 !important;
}

h2,
span,
p {
  font-family: "Jost", sans-serif !important;
}

.card-fixing {
  margin: -50px !important;
}

.cards-bg-fix {
  min-height: 200px;
}

.hero-section {
  height: 100vh;
}

.btn-position {
  top: 10px ;
  left: 10px;
}

.price {
  color: #9A6C1D !important;
}

.cards-bg-img-1 {
  background-image: url(.././../imgs/apple-img.png);
}

.cards-bg-img-2 {
  background-image: url(.././../imgs/banana-img.png);
}

.cards-bg-img-3 {
  background-image:url(.././../imgs/cherry-img.png)
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}