:root {
  --primary-color: #ec1e24;
  --secondary-color: #f4c034;
  --light-color: #ffffff;

  /* Black and Dark Tones */
  --black: #000000;
  --color-black: #111111;
  --gray_900: #202020;
  --color-black-indigo: #211f54;
  --color-dark-grey: #272622;
  --color-dark-grey-alt: #393939;

  /* Text Colors */
  --color-body-text: #4c4c4c;
  --color-medium-grey-text: #5b5b5b;
  --color-steel-gray: #6e7191;

  /* Greys */
  --color-off-white: #ededed;
  --color-grey-light-alt: #d8d8d8;
  --color-grey-light-muted: #e6e8e1;
  --color-medium-gray: #979797;
  --color-neutral-gray: #848484;
  --color-dim-gray: #707070;
  --color-dim-light: #e3e1e1;

  /* Other Shades */
  --color-light-grey: #b0b0b0;

  /* Values */
  --menu-width: 148px;
  /*------Shadow variables------*/
  --shadow-xs: 0 4px 40px 0 #0000002d;
  --shadow-sm: 0 4px 4px 0 #0000003f;

  /*------Border radius variables------*/
  --radius-xs: 12px;
  --radius-sm: 20px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;

  /*------Spacing variables------*/
  --space-xs: 8px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 16px;
  --space-xl: 18px;
  --space-2xl: 22px;
  --space-3xl: 24px;
  --space-4xl: 26px;
  --space-5xl: 32px;
  --space-6xl: 36px;
  --space-7xl: 38px;
  --space-8xl: 40px;
  --space-9xl: 44px;
  --space-10xl: 80px;
  --space-11xl: 178px;
}

/*-------------------------------------
  2. Utility CSS
--------------------------------------*/
.flex-col-center-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.flex-col-center-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-col-end-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}