:root{
  --lookaza: #187d00;
  --ink-900: #0f2a14;
  --ink-700: #335a3b;
  --ink-500: #6b8e73;
  --muted: #6b8e73; /* muted text tone */
}

.hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;          /* Keeps it fluid */
  max-height: 520px;
  background-size: cover;
  background-position: center;
  border-radius: .75rem;
  overflow: hidden;
}

/* Tablet */
@media (max-width: 991.98px) {
  .hero-photo {
    aspect-ratio: 4/3;
    max-height: 400px;
  }
  .hero-gradient h1 {
    font-size: 2rem;           /* slightly smaller */
  }
  .hero-gradient p.lead {
    font-size: 1.05rem;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .hero-photo {
    aspect-ratio: 1/1;         /* Square */
    max-height: 280px;
  }
  .hero-gradient h1 {
    font-size: 1.6rem;         /* shrink heading */
    line-height: 1.3;
  }
  .hero-gradient p.lead {
    font-size: 1rem;
  }
  .btn.btn-lg {
    width: 100%;               /* full width buttons */
    justify-content: center;
  }
}

  

/* Eyebrow label */
.eyebrow{
  display: inline-block;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--lookaza);
  background: #eaf6e8;
  border: 1px solid #e0f0dd;
}

/* Muted subtitle */
.why-muted{
  color: var(--muted);
  margin: .75rem 0 0 0; /* subtle spacing below the label */
  max-width: 56ch;
}

/* Cards */
.why-card{
  border: 1px solid #e8ece9;
  border-radius: 14px;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 1px 2px rgba(16,24,16,0.03);
}
.why-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(16,24,16,0.06);
  border-color: #e2efe0;
}

/* Icon circle—minimalist */
.icon-circle{
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f0f7ee;
  color: var(--lookaza);
  border: 1px solid #e3efe1;
}
.icon-circle i{
  font-size: 1.2rem;
  line-height: 1;
}

.card-title{
  color: #0e1a12;
  font-weight: 700;
  margin-bottom: .25rem;
}
.card-text{
  color: var(--ink-700);
  margin: 0;
}

/* Spacing utilities for this section */
.px-section{ padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 992px){
  .px-section{ padding-left: 2rem; padding-right: 2rem; }
}

    /* Step Cards - Match Why Lookaza */
.step-card {
  border: 1px solid #e8ece9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,16,0.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(16,24,16,0.06);
  border-color: #e2efe0;
}

/* Step Number Badge */
.step-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  background: #f0f7ee;           /* light green bg */
  color: var(--lookaza);         /* brand green text */
  border: 1px solid #e3efe1;     /* subtle border */
  margin: 0 auto;
}
.final-step .step-num {
  background: var(--lookaza);
  color: #fff;
  font-size: 1.3rem;
  border: none;
}

/* Text Styling */
.step-card h6 {
  color: #0e1a12;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: .35rem;
}
.step-card .step-text {
  color: var(--ink-700);
  font-size: .9rem;
  margin: 0;
}