.hero-section {
  text-align: center;
  padding: var(--spacing-12) 0;
}

.hero-section h1 {
  margin-bottom: var(--spacing-6);
}

.hero-section img {
  margin: var(--spacing-8) auto 0;
  border-radius: var(--radius-lg);
}

.cta-section {
  text-align: center;
  padding: var(--spacing-12) 0;
}

.cta-section .btn {
  margin-top: var(--spacing-6);
}

@media (max-width: 768px) {
  .hero-section {
    padding: var(--spacing-8) 0;
  }

  .hero-section h1 {
    font-size: var(--font-size-3xl);
  }
}