:root {

     /* Fonts */
     --font-primary: 'Poppins', sans-serif;

    /* Colors */
    --primary-color: #3caab4;
    --primary-color-100:#11AAB4;
    --secondary-color: #0074A2;
    --secondary-color-100: #285064;
    --secondary-color-200: #4285F4;
    --dark-secondary-color: #102932;
    --extra-dark-secondary-color: #252A3B1C;
    --tertiary-color: #F08C3C;
    --tertiary-color-light: #F5B976;
    --green-color: #008000;
    --gray-color: #8E8E8E;
    --gray-color-100: #cccccc;
    --gray-color-200: #e0e0e0;
    --gray-color-300:#C1CFDE;
    --gray-color-400: #f0f0f1;
    --gray-color-500: #d3d3d3;
    --gray-color-light: #FAFAFA;
    --charcoal-gray: #4A494B;
    --slate-gray: #6A6A6A;
    --body-color: #1B1B1B;
    --white-color: #FFFFFF;
    --white-color-100: #E8EBEF;
    --white-color-200: #FCFCFC;
    --black-color: #000000;
    --red-color: #FF0000;
    --red-color-100: #a94442;
    --red-color-200: #f2dede;
    --success-color: #46b450;
    --success-color-100: #3c763d;
    --success-color-200: #dff0d8;

    /* Font Sizes */
    --font-size-62: 62px;
    --font-size-60: 60px;
    --font-size-56: 56px;
    --font-size-40: 40px;
    --font-size-32: 32px;
    --font-size-30: 30px;
    --font-size-h4: 28px; 
    --font-size-h3: 24px;
    --font-size-h1: 20px;
    --font-size-h2: 18px;
    --font-size-body: 16px;
    --font-size-15: 15px;
    --font-size-14: 14px;
    --font-size-0: 0;

    /* Font Weights */
    --font-weight-900: 900;
    --font-weight-700: 700;
    --font-weight-600: 600;
    --font-weight-500: 500;
    --font-weight-400: 400;

    /* Border Radius */
    --border-radius-34: 34px;
    --border-radius-18: 18px;
    --border-radius-extra-large: 16px;
    --border-radius-50: 50px;
    --border-radius-12: 12px;
    --border-radius-10: 10px;
    --border-radius-large: 8px;
    --border-radius-5: 5px;
    --border-radius: 4px;
    --border-radius-small: 2px;
    --border-radius-extra-small: 0;

}



$breakpoints: (
	'sm': 576px,  /** 576px and up */
	'md': 768px,  /** 768px and up */
	'lg': 992px,  /** 992px and up */
	'xl': 1200px, /** 1200px and up */
	'xxl': 1400px /** 1400px and up */
);