:root {
  --coffee-brown: #372210;
  --coffee-gold: #dba46d;
  --font-light: #f9f2ef;
}

body {
  font-family: "Poppins", sans-serif;
  color: #442a14;
}
.brown {
  color: #563821;
}
.gold {
  color: var(--coffee-gold);
}
#menu,
#contact {
  background-color: #f9f2ef;
}
#about {
  background-color: rgb(246, 229, 192);
}
.navbar,
footer {
  background-color: var(--coffee-brown) !important;
}

.navbar-brand {
  color: var(--coffee-gold) !important;
  font-weight: 700;
  font-size: 1.8rem;
  text-transform: capitalize;
}

.nav-link {
  color: var(--font-light) !important;
  transition: 0.3s;
}

.nav-link:hover {
  color: var(--coffee-gold) !important;
}

.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.342), rgba(0, 0, 0, 0.342)),
    url("../media/background.jpg") center/cover no-repeat;
  color: var(--font-light);
  min-height: 95vh;
}

.btn-custom {
  background-color: var(--coffee-brown);
  color: var(--coffee-gold);
  border: none;
}

.btn-custom:hover {
  background-color: var(--coffee-gold);
  color: var(--coffee-brown);
}

.coffee-card img {
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.coffee-card img:hover {
  transform: scale(1.03);
  opacity: 0.8;
}

footer {
  color: var(--font-light);
}
.card {
  background-color: beige !important;
  cursor: pointer;
}