:root {
    --font-heading: "Lora", serif;
    --font-body: "Roboto", sans-serif;
    --font-icon: "Font Awesome 5 Pro";
    --font-base: 16px;
    --font-sm: 14px;
    --font-xsm: 12px;
    --font-lg: 18px;
    --font-normal: 400;
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
    --font-size--h1: 64px;
    --font-size--h2: 48px;
    --font-size--h3: 32px;
    --font-size--h4: 24px;
    --font-size--h5: 20px;
    --font-size--h6: 18px;
    --color-primary: #4F5AE4;
    --color-red: #EB4C4C;
    --color-green: #00B67A;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-dark: #121212;
    --color-light: #dcdcdc;
    --color-medium: #747474;
    --color-primary-rgb: 79, 90, 228;
    --color-red-rgb: 235, 76, 76;
    --color-green-rgb: 0, 182, 122;
    --color-white-rgb: 255, 255, 255;
    --color-black-rgb: 0,0,0;
    --color-dark-rgb: 18, 18, 18;
    --color-medium-rgb: 141, 141, 141;
    --color-light-rgb: 242, 242, 242;
    --border-color: #e8e8e8;
    --border-color-2: #a7a7a7;
    --text-dark: var(--color-dark);
    --text-medium: var(--color-medium);
    --text-white: var(--color-white);
    --text-light: var(--color-light);
    --btn-color: var(--text-white);
    --btn-hover-color: var(--text-white);
    --bg-1: #F3F3F3;
    --bg-2: #F8F8F8;
    --bg-white: var(--color-white);
    --bg-dark: var(--color-dark);
    --bg-primary-light: rgba(var(--color-primary-rgb), .05);
    --gradient-1: linear-gradient(135deg, rgba(var(--color-white-rgb), .4) 0%, var(--color-primary) 100%);
    --shadow-md: 0 5px 30px -5px rgb(8, 0, 42, .08);
    --shadow-round: 0 10px 30px -5px rgb(8, 0, 42, .08);
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-xl: 15px;
    --radius-lg: 20px;
  }