:root {
  --green-600: #4caf50;
  --green-500: #4caf50;
  --green-100: rgba(36, 122, 77, 0.08);

  --text-primary: #0B2C24;
  --text-secondary: #6C8A7B;

  --bg-app: #F6F8F7;
  --bg-card: #FFFFFF;

  --border-subtle: rgba(0, 0, 0, 0.06);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --transition-fast: 0.15s ease;
}

.hero {
    /***
    background: url("https://images.pexels.com/photos/769289/pexels-photo-769289.jpeg");
    background: url("https://images.pexels.com/photos/2983101/pexels-photo-2983101.jpeg");
    **/
    background: linear-gradient(
          rgba(0, 0, 0, 0.0), 
          rgba(0, 0, 0, 0.3)
        ), url("https://images.pexels.com/photos/326281/pexels-photo-326281.jpeg");
    background-size: cover;
    color: white;
}


.hero {
    font-family: "Libre Baskerville", serif;
    font-weight: strong
}


.hero h1 {
    color: #fff;
    font-size: 4rem;
    font-weight: 800;
}

.hero .hero-desc {
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.5rem 1.25rem;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.modal .btn {
  justify-content: flex-start;
}

.btn-primary {
  background-color: var(--green-600);
  border-color: var(--green-600);
  color: white;
}

h2 {
  font-family: "Libre Baskerville", serif;
  font-weight: strong
}

h3 {
    font-family: "Libre Baskerville", serif;
    font-weight: strong;
}

.serif {
    font-family: "Cormorant Garamond", serif;
}

.white {
    color: white;
}