:root {
    /* Fonts */
    --font-default: 'Poppins', 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: #191e22;
    --color-default-rgb: 25, 30, 34;
    /* Defult links color */
    --color-links: #54459B;
    --color-links-hover: #4F609D;
    /* Primay colors */
    --color-primary: #005199;
    --color-primary-light: #62adca;
    --color-primary-rgb: 0, 81, 153;
    --color-primary-light-rgb: 98, 173, 202;
    /* Secondary colors */
    --color-secondary: #0291dd;
    --color-secondary-light: #4bb9ed;
    --color-secondary-rgb: 2, 145, 221;
    --color-secondary-light-rgb: 75, 185, 237;
    /* 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;
}