@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* ==========================================
   Base Elements & Global Defaults
   ========================================== */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Open Sans', system-ui, sans-serif;
  color: #111827; /* Tailwind gray-900 */
  background: #ffffff;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'Poppins', sans-serif;
      color: #38658A; /* Updated title color */
    }

/*
 * Override Tailwind teal utility classes to apply the new primary brand color #38658A.
 * This ensures all existing button and UI elements that use teal backgrounds, text, borders,
 * or gradients display the updated color without modifying individual HTML files.
 */
.bg-teal-600, .bg-teal-500, .bg-teal-50, .bg-teal-100, .bg-teal-750, .bg-teal-650 {
  background-color: #38658A !important;
}
.hover\:bg-teal-600:hover, .hover\:bg-teal-700:hover, .hover\:bg-teal-500:hover {
  background-color: #38658A !important;
}
.text-teal-700, .text-teal-500, .text-teal-600, .text-teal-50 {
  color: #38658A !important;
}
.border-teal-100, .border-teal-200, .border-teal-600, .border-teal-800 {
  border-color: #38658A !important;
}
.from-teal-600, .from-teal-650, .from-teal-500, .to-teal-800, .to-teal-700, .to-teal-600 {
  --tw-gradient-from: #38658A !important;
  --tw-gradient-to: #38658A !important;
}

/* ==========================================
   Custom Shared Components & Layouts
   ========================================== */

.accent-line {
  display: block;
  width: 48px;
  height: 3px;
  background: #C8813A;
  margin-bottom: 1.5rem;
}

.step-number {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  color: #0f766e;
  opacity: 0.4;
}

.divider {
  border: none;
  border-top: 2px solid rgba(0, 0, 0, 0.15);
}

.btn-primary {
  background: #38658A; /* Updated primary color */
  color: #ffffff; /* white text */
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0.375rem;
  transition: background 0.2s ease-in-out, box-shadow 0.2s;
}

.btn-primary:hover {
  background: #38658A; /* Updated primary hover color */
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
}

.btn-secondary {
  background: #e5e7eb; /* gray-200 */
  color: #111827; /* gray-900 */
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  transition: background 0.2s ease-in-out;
}

.btn-secondary:hover {
  background: #d1d5db; /* gray-300 */
}

.cta-primary {
  display: inline-block;
  background: #0f766e;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 1.25rem 3rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  text-align: center;
  border-radius: 0.375rem;
}

.cta-primary:hover {
  background: #115e59; /* teal-800 */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
}

.cta-secondary {
  font-size: 1.15rem;
  font-weight: 600;
  color: #4b5563; /* Tailwind gray-600 */
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cta-secondary:hover {
  color: #111827; /* Tailwind gray-900 */
}

.tag {
  display: inline-block;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #0f766e;
  border: 2px solid rgba(15, 118, 110, 0.5);
  padding: 0.4rem 1rem;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
}

.problem-card {
  border-left: 4px solid rgba(15, 118, 110, 0.4);
  padding-left: 2rem;
  transition: border-color 0.2s ease;
}

.problem-card:hover {
  border-left-color: #0f766e;
}

.check-item {
  display: flex;
  align-items: flex-start;
}

.check-item::before {
  content: "→";
  color: #0f766e;
  font-weight: 700;
  margin-right: 0.8rem;
  flex-shrink: 0;
}

.price {
  font-family: 'Merriweather', Georgia, serif;
  color: #0f766e;
}

/* Base button utilities */
/* Base button utilities */
.btn-primary {
  background: #38658A; /* Updated primary color */
  color: #ffffff; /* white */
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: 0.375rem;
  transition: background 0.2s ease-in-out, box-shadow 0.2s;
}

.btn-primary:hover {
  background: #38658A; /* Updated primary hover color */
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
}

.btn-secondary {
  background: #e5e7eb; /* gray-200 */
  color: #111827; /* gray-900 */
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  transition: background 0.2s ease-in-out;
}

.btn-secondary:hover {
  background: #d1d5db; /* gray-300 */
}

.premium-gradient {
  background: radial-gradient(120% 120% at 50% 10%, #ffffff 40%, #f0fafb 100%);
}

.glow-effect {
  box-shadow: 0 0 40px -10px rgba(13, 148, 136, 0.15);
}

.glow-amber {
  box-shadow: 0 0 40px -10px rgba(245, 158, 11, 0.2);
}