//colors
$gray0: #f9f9f9;
$gray5: #f2f2f2;
$gray10: #e4e4e7;
$gray20: #c9c9cf;
$gray30: #afafb6;
$gray40: #94949e;
$gray50: #797986;
$gray60: #61616b;
$gray70: #494950;
$gray80: #303036;
$gray90: #18181b;
$gray100: #0c0c0c;
$zinc0: #fafafa;
$zinc5: #f4f4f5;
$zinc10: #e4e4e7;
$zinc20: #d0d0d6;
$zinc30: #bdbdc2;
$zinc40: #98989e;
$zinc50: #7c7c84;
$zinc60: #65656b;
$zinc70: #52525b;
$zinc80: #3f3f46;
$zinc90: #27272a;
$zinc100: #18181b;
$stone0: #fafaf9;
$stone5: #f5f5f4;
$stone10: #e7e5e4;
$stone20: #d6d3d1;
$stone30: #c2bebc;
$stone40: #a8a29f;
$stone50: #78716d;
$stone60: #57534f;
$stone70: #44403c;
$stone80: #292524;
$stone90: #1c1917;
$stone100: #0e0c0b;
$neutral0: #fafafa;
$neutral5: #f5f5f5;
$neutral10: #e5e5e5;
$neutral20: #d4d4d4;
$neutral30: #bfbfbf;
$neutral40: #a3a3a3;
$neutral50: #737373;
$neutral60: #525252;
$neutral70: #404040;
$neutral80: #262626;
$neutral90: #171717;
$neutral100: #0d0d0d;
$slate0: #f8f9fb;
$slate5: #f0f2f4;
$slate10: #e1e5ea;
$slate20: #c4cbd4;
$slate30: #a6b1bf;
$slate40: #8997a9;
$slate50: #6b7d94;
$slate60: #607085;
$slate70: #4b5768;
$slate80: #363e4a;
$slate90: #2b323b;
$slate100: #15191e;
$indigo0: #f7f8fc;
$indigo5: #eff0fa;
$indigo10: #e1e4f3;
$indigo20: #d2d6ed;
$indigo30: #b4bbe2;
$indigo40: #97a0d6;
$indigo50: #7985cb;
$indigo60: #5c6bc0;
$indigo70: #4c589e;
$indigo80: #3b457b;
$indigo90: #2a3158;
$indigo100: #1a1e35;
$blue0: #f5f8ff;
$blue5: #ebf2ff;
$blue10: #d8e6ff;
$blue20: #c4daff;
$blue30: #9dc2ff;
$blue40: #76a9ff;
$blue50: #4f91ff;
$blue60: #2979ff;
$blue70: #2264d1;
$blue80: #1b4ea3;
$blue90: #133774;
$blue100: #0c2146;
$teal0: #f0fafa;
$teal5: #e5f5f5;
$teal10: #d1ebec;
$teal20: #bbe2e2;
$teal30: #8dcfcf;
$teal40: #60bcbc;
$teal50: #33a9a9;
$teal60: #069697;
$teal70: #057b7c;
$teal80: #046061;
$teal90: #034545;
$teal100: #02292a;
$emerald0: #ecfef8;
$emerald5: #e2fbf2;
$emerald10: #d6fee9;
$emerald20: #c6f9df;
$emerald30: #a8f3d0;
$emerald40: #6ee7b7;
$emerald50: #35d39a;
$emerald60: #10b982;
$emerald70: #0b9f6e;
$emerald80: #06734f;
$emerald90: #064f3c;
$emerald100: #024231;
$green0: #f5faf5;
$green5: #ecf7ed;
$green10: #dceddd;
$green20: #cbe5cc;
$green30: #a9d3ab;
$green40: #87c289;
$green50: #65b168;
$green60: #43a047;
$green70: #37833b;
$green80: #2b662e;
$green90: #1f4921;
$green100: #132c14;
$lime0: #fbfff1;
$lime5: #f7fee7;
$lime10: #edfccb;
$lime20: #d9f99e;
$lime30: #bef264;
$lime40: #a3e636;
$lime50: #7dc80c;
$lime60: #65a30c;
$lime70: #4e7c0f;
$lime80: #3f6212;
$lime90: #365315;
$lime100: #253a0d;
$yellow0: #fffdf6;
$yellow5: #fff2cc;
$yellow10: #ffecb3;
$yellow20: #ffe699;
$yellow30: #ffdf80;
$yellow40: #ffd966;
$yellow50: #ffcc33;
$yellow60: #ffbf00;
$yellow70: #e6ac00;
$yellow80: #b38600;
$yellow90: #806000;
$yellow100: #4d3900;
$amber0: #fffdf4;
$amber5: #fffbeb;
$amber10: #fef4c7;
$amber20: #fee68a;
$amber30: #fcd34d;
$amber40: #fcbf24;
$amber50: #f59f0c;
$amber60: #d97705;
$amber70: #b5530a;
$amber80: #92400d;
$amber90: #78350f;
$amber100: #662703;
$orange0: #fff8f5;
$orange5: #fff7ee;
$orange10: #ffedd6;
$orange20: #fed8aa;
$orange30: #febb75;
$orange40: #fb923d;
$orange50: #f97316;
$orange60: #ea580b;
$orange70: #c2410c;
$orange80: #9b3412;
$orange90: #7c2c12;
$orange100: #5f1b07;
$red0: #fef2f1;
$red5: #fee8e7;
$red10: #fddcda;
$red20: #fccbc8;
$red30: #faa9a3;
$red40: #f8877f;
$red50: #f6655a;
$red60: #f44336;
$red70: #c8372d;
$red80: #9c2b23;
$red90: #6f1f19;
$red100: #43130f;
$pink0: #fff7fa;
$pink5: #fdedf2;
$pink10: #fbdce6;
$pink20: #f9cada;
$pink30: #f6a8c2;
$pink40: #f285aa;
$pink50: #ef6292;
$pink60: #ec407a;
$pink70: #c23564;
$pink80: #97294e;
$pink90: #6c1e38;
$pink100: #411222;
$purple0: #fcf9ff;
$purple5: #f2e9fd;
$purple10: #e6d0fb;
$purple20: #d9b8fa;
$purple30: #cca0f8;
$purple40: #bf88f6;
$purple50: #a659f3;
$purple60: #8c2aef;
$purple70: #7310d5;
$purple80: #590ca6;
$purple90: #400977;
$purple100: #260547;

$box_shadow : 0px 2px 12px 0px rgba(20, 20, 28, 0.1);
$button_black_shadow : 0 5px 15px 0 rgba(0, 0, 0, 0.5);

$min992: "only screen and (min-width: 992px)";
$min576: "only screen and (min-width: 576px)";

$max1650: "only screen and (max-width: 1650px)";
$max1366: "only screen and (max-width: 1366px)";
$max1200: "only screen and (max-width: 1280px)";
$max1199: "only screen and (max-width: 1199.98px)";
$max991: "only screen and (max-width: 991.98px)";
$max767: "only screen and (max-width: 767.98px)";
$max640: "only screen and (max-width: 640px)";
$max575: "only screen and (max-width: 575.98px)";
$max480: "only screen and (max-width: 480px)";
$max375: "only screen and (max-width: 375px)";
$max320: "only screen and (max-width: 320px)";


// Template Responsive
$tfmax360: "only screen and (min-width: 320px) and (max-width:360px)";
$tfmax767: "only screen and (max-width: 767.98px)";
$tfmax991: "only screen and (min-width: 767.99px) and (max-width: 991px)"; // 767 to 991

// Templates Variables
//Fonts
$font-primary: 'Jost', sans-serif;
$font-secondary: 'Ubuntu', sans-serif;

$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;
$font-size-large: 30px;
$font-size-medium: 24px;
$font-size-normal: 16px;
$font-size-small: 14px;
$font-size-xs: 12px;


//colors
$color-primary: #686E7A;
$color-theme: #0E3DD8;
$color-theme-light: #E3E7F2;
$color-gray-light: #F3F7FA;
$color-black: #060D1C;
$color-black-light: #060D1C;
$color-bdr: #E3E6F0;
$color-bg-light: #ECF2FF;
$color-hover-normal: #deddeb;
$color-hover-primary: #0e2e96;
$color-hover-secondary: #bbc4dd;

//Spacing
$tf-space-4: 4px;
$tf-space-8: 8px;
$tf-space-12: 12px;
$tf-space-16: 16px;
$tf-space-24: 24px;
$tf-space-30: 30px;

//Border
$tf-brds-default: 5px;
$box-shadow-primary: 0px 13px 30px #E0E8EE;