:root {

  /* Fonts */
  --font-default: 'Montserrat', sans-serif;

  /* Colors */
  /* The *-rgb color names are simply the RGB converted value of the corresponding color for use in the rgba() function */

  /* Default text color */
  --color-default: #141414;
  --color-default-rgb: 20, 20, 20;

  /* Defult links color */
  --color-links: #02175B;
  --color-links-hover: #2d4182;

  /* Primay colors */
  --color-primary: #FFC72A;
  --color-primary-light: #ffda74;

  --color-primary-rgb: 255, 199, 42;
  --color-primary-light-rgb: 255, 218, 116;

  /* Secondary colors */
  --color-secondary: #02175B;
  --color-secondary-light: #2d4182;

  --color-secondary-rgb: 2, 23, 91;
  --color-secondary-light-rgb: 45, 65, 130;

  /* General colors */
  --color-red: #df1529;
  --color-red-rgb: 223, 21, 4;

  --color-blue: #3e96fc;
  --color-blue-rgb: 62, 150, 252;

  --color-orange: #f3745a;
  --color-orange-rgb: 243, 116, 90;

  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;

  --color-gray: #6c757d;
  --color-gray-rgb: 108, 117, 125;

  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;

}

/*--------------------------------------------------------------
# 2. Set color and background class names
--------------------------------------------------------------*/
/* Fonts */
.font-default {
  font-family: var(--font-default) !important;
}

/* Text Colors */
.color-default {
  color: var(--color-default) !important;
}

.color-links {
  color: var(--color-links) !important;
}

.color-links:hover {
  color: var(--color-links-hover) !important;
}

.color-primary {
  color: var(--color-primary) !important;
}

.color-primary-light {
  color: var(--color-primary-light) !important;
}

.color-secondary {
  color: var(--color-secondary) !important;
}

.color-secondary-light {
  color: var(--color-secondary-light) !important;
}

.color-red {
  color: var(--color-red) !important;
}

.color-orange {
  color: var(--color-orange) !important;
}

.color-blue {
  color: var(--color-blue) !important;
}

.color-white {
  color: var(--color-white) !important;
}

.color-gray {
  color: var(--color-gray) !important;
}

.color-black {
  color: var(--color-black) !important;
}

/* Background Colors */
.bg-default {
  background-color: var(--color-default) !important;
}

.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-primary-light {
  background-color: var(--color-primary-light) !important;
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
}

.bg-secondary-light {
  background-color: var(--color-secondary-light) !important;
}

.bg-red {
  background-color: var(--color-red) !important;
}

.bg-orange {
  background-color: var(--color-orange) !important;
}

.bg-blue {
  background-color: var(--color-blue) !important;
}

.bg-white {
  background-color: var(--color-white) !important;
}

.bg-gray {
  background-color: var(--color-gray) !important;
}

.bg-black {
  background-color: var(--color-black) !important;
}