:root {
  --template-color-0: #f8bc1a;
  --template-color-1: #3c0e78;
  --font-heading: "Poppins", sans-serif;
  --font-paragraph: "Poppins", sans-serif;
  --font-navigation: "Poppins", sans-serif;

  --section-width: 1200px;
  --section-col-start: 6;
  --section-col-end: 46;
  --section-padding-y: 96px;
  --section-radius: 0px;

  --button-radius: 8px;

  --radius-xs: 8x;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 14px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-full: 9999px;
  --radius-input: 12px;

  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;

  --heading-color: #1e1e1e;

  --heading-1-font-size: 56px;
  --heading-1-font-weight: 600;

  --heading-2-font-size: 40px;
  --heading-2-font-weight: 500;

  --heading-3-font-size: 24px;
  --heading-3-font-weight: 500;

  --heading-4-font-size: 24px;
  --heading-4-font-weight: 500;

  --heading-5-font-size: 16px;
  --heading-5-font-weight: 500;

  --heading-6-font-size: 16px;
  --heading-6-font-weight: 500;

  --heading-7-font-size: 16px;
  --heading-7-font-weight: 500;

  --paragraph-font-size: 16px;
  --paragraph-font-weight: 400;
  --paragraph-color: #434343;

  --label-font-size: 16px;
  --label-font-weight: 500;

  --heading-align: start;
  --paragraph-align: start;

  --primary-button-bg: var(--template-color-0);
  --primary-button-bg-hover: color-mix(in srgb, var(--primary-button-bg), white 20%);
  --primary-button-radius: var(--button-radius);
  --primary-button-font-size: 16px;
  --primary-button-font-weight: 500;
  --primary-button-font-family: "Poppins", sans-serif;
  --primary-button-padding: var(--spacing-sm) var(--spacing-xl);
  --primary-button-border: none;
  --primary-button-cursor: pointer;
  --primary-button-transition: all 0.3s ease;
  --primary-button-shadow: none;
  --primary-button-color: white;
  --primary-button-color-hover: white;

  --secondary-button-bg: color-mix(in srgb, white, transparent 30%);
  --secondary-button-bg-hover: var(--template-color-1);
  --secondary-button-radius: var(--button-radius);
  --secondary-button-font-size: 16px;
  --secondary-button-font-weight: 500;
  --secondary-button-font-family: "Poppins", sans-serif;
  --secondary-button-padding: var(--spacing-sm) var(--spacing-xl);
  --secondary-button-border: 2px solid color-mix(in srgb, var(--template-color-1), black 20%);
  --secondary-button-cursor: pointer;
  --secondary-button-transition: all 0.3s ease;
  --secondary-button-shadow: none;
  --secondary-button-color: var(--template-color-1);
  --secondary-button-color-hover: white;
}

body {
  font-family: var(--font-paragraph);
  color: #161616;
  background-color: white;
}

.add-before {
  position: relative;
  padding-bottom: 6px;
}
.add-before::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 4px;
  border-radius: var(--radius-xs);
  background-color: var(--template-color-0);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}