/* Typography & Layout Helpers */
h1 {
  @apply text-4xl md:text-5xl font-bold leading-tight text-center mb-4;
}
h2 {
  @apply text-5xl font-bold text-center mb-12 leading-tight;
}
h3 {
  @apply text-3xl font-bold mb-4 text-center;
}
p {
  @apply text-xl leading-relaxed;
}

/* Generic Section Padding */
.section-padding {
  @apply py-20 px-4;
}

/* Common 3-column grid wrapper */
.section-grid {
  @apply grid md:grid-cols-3 gap-10 max-w-6xl mx-auto text-left;
}

/* A basic card style */
.card {
  @apply bg-white p-8 rounded-xl shadow-md border text-center;
}

/* Two-column layout wrapper */
.section-wrapper {
  @apply max-w-6xl mx-auto grid md:grid-cols-2 gap-8 items-center;
}

/* Simple image wrapper */
.image-wrapper {
  @apply w-full rounded-xl shadow;
}

.bg-tan {
  background-color: #faf6f1;
}

.section-learn {
  background-color: #faf6f1;
}

.bg-reviews {
  background-color: #ff1919;
}

.card-light-gray {
  background-color: #ecf0f1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 30px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.section-bonus {
  background-color: #ffe7e7;
}

.section-dark {
  background-color: #1e1e1e;
}

.footer-dark {
  background-color: #2d2d2d;
}

.red-glow {
  box-shadow: 0 0 60px 8px rgba(242, 40, 40, 0.8);
}

.link {
  color: #188bf6;
  transition: color 0.3s ease;
}

.link:hover {
  color: #ffffff;
}

.card-faq {
  background-color: #ebe8e3;
}

/* Reusable CTA button */
.cta-button {
  display: inline-block;
  background-color: #27ae60; /* green-500 */
  color: #fff;
  padding: 1rem 3rem; /* increased: py-4 px-12 */
  border-radius: 0.5rem; /* more rounded corners */
  font-size: 1.75rem; /* text-xl => 20px */
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  text-align: center;
  width: 80%;
  /* keeps it from getting too wide */
}

.bg-button {
  background-color: #27ae60;
  color: #fff;
}

.cta-button:hover {
  background-color: #059669; /* green-600 */
}

.checkmark-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.checkmark-icon {
  width: 2rem;
  height: 2rem;
  margin-top: 0.3rem;
  flex-shrink: 0;
}