:root {
  --basp-green: #2d5a27;

  --basp-darkgreen: #23441f;

  --basp-gold: #d4a017;

  --basp-white: #ffffff36;
}

body {
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;

  color: #334155;
}

h1,
h2,
h3,
.navbar-brand,
.nav-link {
  font-family: "Montserrat", sans-serif;
}

.text-basp-green {
  color: var(--basp-green);
}

.text-basp-darkgreen {
  color: var(--basp-darkgreen);
}

.icon-border {
  border-width: 1px;
  border-style: solid;
  border-color: var(--basp-darkgreen);
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.btn-green {
 background-color: var(--basp-gold);
  color: black;
  padding: 15px;
  border-radius: 5px;
  transition: all 0.5s ease;
}

.btn-green:hover {
  background-color: var(--basp-green);
  color: white;
}

.bg-basp-green {
  background-color: var(--basp-green);
}

.bg-basp-blur {
  backdrop-filter: blur(5px);
}

.bg-basp-blur:hover {
  background-color: var(--basp-white);

  backdrop-filter: blur(10px);
}

.bg-basp-gold {
  background-color: var(--basp-gold);
}

.border-basp-gold {
  border-color: var(--basp-gold);
}

.hover-gold:hover {
  color: var(--basp-gold) !important;
}

.nav-link.active,
.nav-link:hover {
  color: var(--basp-green) !important;
}

.hero {
  background:
    linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent),
    url("../images/slider-image.jpg") center/cover no-repeat fixed;

  color: white;
}

.hero-h100 {
  height: 500px;
}

.hero-h80 {
  height: 400px;
}

.hero-h50 {
  height: 250px;
}

.img-card {
  transition: all 0.3s ease;
}

.img-card img {
  transition: transform 0.6s ease;
}

.img-card:hover img {
  transform: scale(1.08);
}

.product-title {
  color: var(--basp-green);

  transition: all 1s ease;
}

.product-title:hover {
  color: var(--basp-gold);
}

.product-card {
  transition: all 0.3s ease;

  border: 1px solid #e5e7eb;
}

.product-card:hover {
  transform: translateY(-8px);

  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.product-card img {
  transition: transform 0.6s ease;
}

.product-card:hover img {
  transform: scale(1.08);
}

.category {
  transition: all 0.3s ease;
}

.category img {
  transition: transform 0.6s ease;
}

.category:hover img {
  transform: scale(1.04);
}

footer a:hover {
  color: var(--basp-gold) !important;
}