:root {
  --primary-dark: #4A3A2A;
  --cream: #FBF2E6;
  --accent: #D7B48A;
}

body {
  font-family: 'Assistant', sans-serif;
  color: var(--primary-dark);
  background-color: #fff;
}

h1, h2, h3, h4, h5 {
  font-family: 'Gloock', serif;
  letter-spacing: 0.2px;
}


.hero {
  background: linear-gradient(to right, #3c2f25, #6a4b3a);
  padding: 80px 0;
}

.hero h1 {
  font-size: 42px;
}

.hero-img {
  max-height: 420px;
}

.section {
  padding: 80px 0;
}

.bg-cream {
  background: var(--cream);
}

.product-card {
  border: none;
  text-align: center;
  background: transparent;
}

.product-card p {
  margin-top: 12px;
  font-weight: 500;
}

.label {
  font-size: 12px;
  letter-spacing: 2px;
  color: #a58b6f;
}

.stats {
  background: #3c2f25;
  color: #fff;
  padding: 70px 0;
}

.footer {
  background: #3c2f25;
  color: #fff;
  padding: 50px 0;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
  }
  .section {
    padding: 50px 0;
  }
}


.hero-section {
  background: url("../images/header.png") center center / cover no-repeat;
  min-height: 85vh;
  position: relative;
  display: flex;
  align-items: center;
}

.hero-overlay {
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(58, 43, 31, 0.75),
    rgba(58, 43, 31, 0.35),
    rgba(58, 43, 31, 0.1)
  );
  padding: 90px 0;
}

.hero-content {
  max-width: 600px;
  color: #fff;
}

.hero-content h1 {
  font-size: 44px;
  margin-bottom: 16px;
}

.hero-content p {
  font-size: 16px;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 70vh;
  }

  .hero-content h1 {
    font-size: 32px;
  }
}


.btn-primary-custom {
  background-color: #EAD3B2;
  color: #3B2A1D;
  border-radius: 30px;
  padding: 10px 28px;
  font-weight: 500;
  border: none;
}

.btn-primary-custom:hover {
  background-color: #e2c59e;
  color: #3B2A1D;
}

.btn-secondary-custom {
  border: 1px solid #ffffff;
  color: #ffffff;
  border-radius: 30px;
  padding: 10px 28px;
  font-weight: 500;
  background: transparent;
}

.btn-secondary-custom:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}


.testimonials-section {
  background: var(--cream);
  padding: 80px 0;
}

.testimonial-card {
  background: transparent;
  padding: 10px 20px;
}

.testimonial-card .stars {
  color: #F5B942;
  font-size: 18px;
  margin-bottom: 10px;
}

.testimonial-card .quote {
  font-size: 15px;
  margin-bottom: 12px;
  color: #4A3A2A;
}

.testimonial-card .author strong {
  display: block;
  font-size: 14px;
}

.testimonial-card .author span {
  font-size: 13px;
  opacity: 0.7;
}