/* ============================
   TYPOGRAPHY SYSTEM (GLOBAL)
   ============================ */
*{
  box-sizing: border-box;
  scroll-behavior: smooth;
}
:root {
  /* Font families */
  --font-primary: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;

  /* Responsive Font Sizes (Fluid using clamp) */
  --fs-xs: clamp(0.70rem, 0.74vw, 0.80rem);
  --fs-sm: clamp(0.85rem, 0.88vw, 0.95rem);
  --fs-base: clamp(1rem, 1vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1.3vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 2vw, 2rem);
  --fs-2xl: clamp(2rem, 3vw, 3rem);
  --fs-3xl: clamp(2.5rem, 4vw, 4rem);

  /* ============================
   SPACINGS
   ============================ */
   --space-1: 1rem;
   --space-2: 1.5rem;
   --space-3: 2rem;
   --space-4: 2.5rem;
   --space-5: 3rem;
   --space-6: 3.5rem;
   --space-7: 4rem;
   --space-8: 4.5rem;
   --space-9: 5rem;
   --space-10: 6rem;
}

/* ============================
   BASE STYLING
   ============================ */

body {
  padding: 0;
  margin: 0;
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
}

/* ============================
   HEADINGS
   ============================ */

/* Fluid responsive headings */
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }

/* ============================
   SPACING UTILITIES
   ============================ */

/* Margin Top */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.mt-10 { margin-top: var(--space-10); }

/* Margin Bottom */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-9 { margin-bottom: var(--space-9); }
.mb-10 { margin-bottom: var(--space-10); }

/* Margin Left */
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-7 { margin-left: var(--space-7); }
.ml-8 { margin-left: var(--space-8); }
.ml-9 { margin-left: var(--space-9); }
.ml-10 { margin-left: var(--space-10); }

/* Margin Right */
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-7 { margin-right: var(--space-7); }
.mr-8 { margin-right: var(--space-8); }
.mr-9 { margin-right: var(--space-9); }
.mr-10 { margin-right: var(--space-10); }

/* ============================
   PADDING UTILITIES
   ============================ */

/* Padding Top */
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-7 { padding-top: var(--space-7); }
.pt-8 { padding-top: var(--space-8); }
.pt-9 { padding-top: var(--space-9); }
.pt-10 { padding-top: var(--space-10); }

/* Padding Bottom */
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-7 { padding-bottom: var(--space-7); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-9 { padding-bottom: var(--space-9); }
.pb-10 { padding-bottom: var(--space-10); }

/* Padding Left */
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }
.pl-7 { padding-left: var(--space-7); }
.pl-8 { padding-left: var(--space-8); }
.pl-9 { padding-left: var(--space-9); }
.pl-10 { padding-left: var(--space-10); }

/* Padding Right */
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }
.pr-7 { padding-right: var(--space-7); }
.pr-8 { padding-right: var(--space-8); }
.pr-9 { padding-right: var(--space-9); }
.pr-10 { padding-right: var(--space-10); }

/* ============================
   OPTIONAL EXTRAS (RECOMMENDED)
   ============================ */


/* Nicely spaced container */
.container {
  width: 90%;
  margin: auto;
}


/* ============================
   RESPONSIVE BREAKPOINTS
   ============================ */

@media (max-width: 768px) {
:root{
  font-size: 15px;
}
}

@media (max-width: 480px) {
:root{
  font-size: 14px;
}
}




/* ============================
   TYPOGRAPHY SYSTEM (GLOBAL)
   ============================ */
*{
  box-sizing: border-box;
  scroll-behavior: smooth;
}
:root {
  /* Font families */
  --font-primary: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;

  /* Responsive Font Sizes (Fluid using clamp) */
  --fs-xs: clamp(0.70rem, 0.74vw, 0.80rem);
  --fs-sm: clamp(0.85rem, 0.88vw, 0.95rem);
  --fs-base: clamp(1rem, 1vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1.3vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 2vw, 2rem);
  --fs-2xl: clamp(2rem, 3vw, 3rem);
  --fs-3xl: clamp(2.5rem, 4vw, 4rem);

  /* ============================
   SPACINGS
   ============================ */
   --space-1: 1rem;
   --space-2: 1.5rem;
   --space-3: 2rem;
   --space-4: 2.5rem;
   --space-5: 3rem;
   --space-6: 3.5rem;
   --space-7: 4rem;
   --space-8: 4.5rem;
   --space-9: 5rem;
   --space-10: 6rem;
}

/* ============================
   BASE STYLING
   ============================ */

body {
  padding: 0;
  margin: 0;
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
}

/* ============================
   HEADINGS
   ============================ */

/* Fluid responsive headings */
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }

/* ============================
   SPACING UTILITIES
   ============================ */

/* Margin Top */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-9 { margin-top: var(--space-9); }
.mt-10 { margin-top: var(--space-10); }

/* Margin Bottom */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-9 { margin-bottom: var(--space-9); }
.mb-10 { margin-bottom: var(--space-10); }

/* Margin Left */
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }
.ml-7 { margin-left: var(--space-7); }
.ml-8 { margin-left: var(--space-8); }
.ml-9 { margin-left: var(--space-9); }
.ml-10 { margin-left: var(--space-10); }

/* Margin Right */
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }
.mr-7 { margin-right: var(--space-7); }
.mr-8 { margin-right: var(--space-8); }
.mr-9 { margin-right: var(--space-9); }
.mr-10 { margin-right: var(--space-10); }

/* ============================
   PADDING UTILITIES
   ============================ */

/* Padding Top */
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }
.pt-7 { padding-top: var(--space-7); }
.pt-8 { padding-top: var(--space-8); }
.pt-9 { padding-top: var(--space-9); }
.pt-10 { padding-top: var(--space-10); }

/* Padding Bottom */
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }
.pb-7 { padding-bottom: var(--space-7); }
.pb-8 { padding-bottom: var(--space-8); }
.pb-9 { padding-bottom: var(--space-9); }
.pb-10 { padding-bottom: var(--space-10); }

/* Padding Left */
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }
.pl-7 { padding-left: var(--space-7); }
.pl-8 { padding-left: var(--space-8); }
.pl-9 { padding-left: var(--space-9); }
.pl-10 { padding-left: var(--space-10); }

/* Padding Right */
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }
.pr-7 { padding-right: var(--space-7); }
.pr-8 { padding-right: var(--space-8); }
.pr-9 { padding-right: var(--space-9); }
.pr-10 { padding-right: var(--space-10); }

/* ============================
   OPTIONAL EXTRAS (RECOMMENDED)
   ============================ */


/* Nicely spaced container */
.container {
  width: 90%;
  margin: auto;
}


/* ============================
   RESPONSIVE BREAKPOINTS
   ============================ */

@media (max-width: 768px) {
:root{
  font-size: 15px;
}
}

@media (max-width: 480px) {
:root{
  font-size: 14px;
}
}