@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");
/* ✅ 2. Global CSS Variables (Best Practice) */
:root {
  /* Fonts */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Colors */
  --color-heading: #0f172a;
  --color-text: #475569;
  --color-muted: #64748b;
  --color-primary: #00a9a4;

  /* Font Sizes */
  --h1: 40px;
  --h2: 32px;
  --h3: 24px;
  --h4: 20px;

  --text-lg: 18px;
  --text-md: 16px;
  --text-sm: 14px;
}
/* ✅ 4. Headings (Global) */
body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-text);
  background-color: #ffffff;
}
/* ✅ 4. Headings (Global) */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.3;
  margin: 0 0 10px;
}

h1 {
  font-size: var(--h1);
  font-weight: 700;
}
h2 {
  font-size: var(--h2);
  font-weight: 600;
}
h3 {
  font-size: var(--h3);
  font-weight: 600;
}
h4 {
  font-size: var(--h4);
  font-weight: 500;
}
/* ✅ 5. Sub-Headings (Reusable Class) */
.sub-heading {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-muted);
  margin-bottom: 10px;
}
/* ✅ 6. Paragraph / Content Text */
p {
  font-size: var(--text-md);
  margin-bottom: 12px;
}

.text-small {
  font-size: var(--text-sm);
}

.text-large {
  font-size: var(--text-lg);
}
/*  ✅ 7. Links (Global)*/

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
/* 8. Section Spacing (Optional but Recommended) */
.section {
  padding: 60px 20px;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}
/* ✅ 9. Mobile Responsive Typography */
@media (max-width: 768px) {
  :root {
    --h1: 30px;
    --h2: 26px;
    --h3: 22px;
    --text-lg: 17px;
    --text-md: 15px;
  }
}