/* Base HighlightBox Class */
.highlight-box {
  padding: 3rem;
  margin-bottom: 3rem;
}
.highlight-box p {
  margin-bottom: 0 !important;
}
/* Add Class If Box Rounded Corners */
.rounded {
  border-radius: 15px;
}
/* Primary Background-Color Palette Fill*/
.box-fill-primary{
  background-color: var(--primary);
  color: var(--white);
}
.box-fill-primary-dark {
  background-color: var(--primary-dark);
  color: var(--white);
}
/* Secondary background-Color Palette Fill*/
.box-fill-secondary {
  background-color: var(--secondary-brown);
  color: var(--white);
}
.box-fill-secondary-lightbrown {
  background-color: var(--secondary-lightbrown);
  color: var(--black);
}
.box-fill-secondary-berry {
  background-color: var(--secondary-berry);
  color: var(--white);
}
.box-fill-secondary-peach {
  background-color: var(--secondary-peach);
  color: var(--black);
}
.box-fill-secondary-blue {
  background-color: var(--secondary-blue);
  color: var(--white);
}
.box-fill-secondary-lightest {
  background-color: var(--secondary-lightest);
  color: var(--black);
}
/* Accent background-Color Pallet: Neutral background-Colors Fill*/
.box-fill-accent-dark {
  background-color: var(--accent-dark);
  color: var(--white);
}
.box-fill-accent-gray {
  background-color: var(--accent-gray);
  color: var(--black);
}
/* Accent background-Color Pallet: Bright background-Colors for Charts and Graphs Only Fill*/
.box-fill-accent-purple {
  background-color: var(--accent-purple);
  color: var(--white);
}
.box-fill-accent-green {
  background-color: var(--accent-green);
  color: var(--white);
}

/* OUTLINE HIGHLIGHT BOX */

/* Primary background-Color Palette -Outline*/
.box-outline-primary{
  border: 2px solid var(--primary);
}
.box-outline-primary-dark {
  border: 2px solid var(--primary-dark);
}
/* Secondary background-Color Palette -Outline*/
.box-outline-secondary {
  border: 2px solid var(--secondary-brown);
}
.box-outline-secondary-lightbrown {
  border: 2px solid var(--secondary-lightbrown);
}
.box-outline-secondary-berry {
  border: 2px solid var(--secondary-berry);
}
.box-outline-secondary-peach {
  border: 2px solid var(--secondary-peach);
}
.box-outline-secondary-blue {
  border: 2px solid var(--secondary-blue);
}
.box-outline-secondary-lightest {
  border: 2px solid var(--secondary-lightest);
}
/* Accent background-Color Pallet: Neutral background-Colors -Outline*/
.box-outline-accent-dark {
  border: 2px solid var(--accent-dark);
}
.box-outline-accent-gray {
  border: 2px solid var(--accent-gray);
}
/* Accent background-Color Pallet: Bright background-Colors for Charts and Graphs Only -Outline*/
.box-outline-accent-purple {
  border: 2px solid var(--accent-purple);
}
.box-outline-accent-green {
  border: 2px solid var(--accent-green);
}

/* Highlight Box Button Colors */

/* Primary Background-Color Palette -Buttons*/
.box-btn-primary{
  background-color: var(--primary);
  color: var(--white);
}
.box-btn-primary-dark {
  background-color: var(--primary-dark);
  color: var(--white);
}
/* Secondary background-Color Palette -Buttons*/
.box-btn-secondary {
  background-color: var(--secondary-brown);
  color: var(--white);
}
.box-btn-secondary-lightbrown {
  background-color: var(--secondary-lightbrown);
  color: var(--black);
}
.box-btn-secondary-berry {
  background-color: var(--secondary-berry);
  color: var(--white);
}
.box-btn-secondary-peach {
  background-color: var(--secondary-peach);
  color: var(--black);
}
.box-btn-secondary-blue {
  background-color: var(--secondary-blue);
  color: var(--white);
}
.box-btn-secondary-lightest {
  background-color: var(--secondary-lightest);
  color: var(--black);
}
/* Accent background-Color Pallet: Neutral background-Colors -Buttons*/
.box-btn-accent-dark {
  background-color: var(--accent-dark);
  color: var(--white);
}
.box-btn-accent-gray {
  background-color: var(--accent-gray);
  color: var(--black);
}
/* Accent background-Color Pallet: Bright background-Colors for Charts and Graphs Only -Buttons*/
.box-btn-accent-purple {
  background-color: var(--accent-purple);
  color: var(--white);
}
.box-btn-accent-green {
  background-color: var(--accent-green);
  color: var(--white);
}

/* Highlight Box Heading Colors */

/* Primary Background-Color Palette -Heading*/
.box-heading-primary{
  color: var(--primary) !important;
}
.box-heading-primary-dark {
  color: var(--primary-dark) !important;
}
/* Secondary background-Color Palette -Heading*/
.box-heading-secondary {
  color: var(--secondary-brown) !important; 
}
.box-heading-secondary-lightbrown {
  color: var(--secondary-lightbrown) !important;
}
.box-heading-secondary-berry {
  color: var(--secondary-berry) !important;
}
.box-heading-secondary-peach {
  color: var(--secondary-peach) !important;
}
.box-heading-secondary-blue {
  color: var(--secondary-blue) !important;
}
.box-heading-secondary-lightest {
  color: var(--secondary-lightest) !important;
}
/* Accent background-Color Pallet: Neutral background-Colors -Heading*/
.box-heading-accent-dark {
  color: var(--accent-dark) !important;
}
.box-heading-accent-gray {
  color: var(--accent-gray) !important;
}
/* Accent background-Color Pallet: Bright background-Colors for Charts and Graphs Only -Heading*/
.box-heading-accent-purple {
  color: var(--accent-purple) !important;
}
.box-heading-accent-green {
  color: var(--accent-green) !important;
}
/* Black and White Color Headings */
.box-heading-white{
  color: var(--white) !important;
}.box-heading-black{
  color: var(--black) !important;
}