:root {
  /* Primary Colors */
  --color-primary: #007DB7;

  /* COLORS */
  --color-black: #171717;
  --color-white: #FFFFFF;

  /* Gray */
  --color-gray-50:  #F0F4F8;
  --color-gray-100: #E9EDF2;
  --color-gray-200: #D7DCE0;
  --color-gray-300: #C3CAD4;
  --color-gray-400: #939BAE;
  --color-gray-500: #646E82;
  --color-gray-600: #454F62;
  --color-gray-700: #2E3646;
  --color-gray-800: #252B37;
  --color-gray-900: #1E232E;

  /* Utility Colors */
  --color-text: #252B37;
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-overlay: rgba(0, 0, 0, 0.2);
  --color-border: #E2E0DA;

  /* TRANSITION */
  --transition-default: all 0.3s ease-in-out;

  /* FONT: FAMILY */
  --font-family-primary: 'Montserrat', sans-serif;
  --font-family-secondary: 'Poppins', sans-serif;

  /* PX TO REM */
  --px-base: 16;
  --px-to-rem: 1rem;

  /* PX TO REM: 10-20 */
  --px-10: calc(10 / var(--px-base) * var(--px-to-rem));
  --px-12: calc(12 / var(--px-base) * var(--px-to-rem));
  --px-13: calc(13 / var(--px-base) * var(--px-to-rem));
  --px-14: calc(14 / var(--px-base) * var(--px-to-rem));
  --px-16: calc(16 / var(--px-base) * var(--px-to-rem));
  --px-18: calc(18 / var(--px-base) * var(--px-to-rem));
  --px-20: calc(20 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 20-30 */
  --px-20: calc(20 / var(--px-base) * var(--px-to-rem));
  --px-21: calc(21 / var(--px-base) * var(--px-to-rem));
  --px-22: calc(22 / var(--px-base) * var(--px-to-rem));
  --px-24: calc(24 / var(--px-base) * var(--px-to-rem));
  --px-26: calc(26 / var(--px-base) * var(--px-to-rem));
  --px-27: calc(27 / var(--px-base) * var(--px-to-rem));
  --px-28: calc(28 / var(--px-base) * var(--px-to-rem));
  --px-29: calc(29 / var(--px-base) * var(--px-to-rem));
  --px-30: calc(30 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 32-40 */
  --px-32: calc(32 / var(--px-base) * var(--px-to-rem));
  --px-34: calc(34 / var(--px-base) * var(--px-to-rem));
  --px-36: calc(36 / var(--px-base) * var(--px-to-rem));
  --px-39: calc(39 / var(--px-base) * var(--px-to-rem));
  --px-40: calc(40 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 42-50 */
  --px-42: calc(42 / var(--px-base) * var(--px-to-rem));
  --px-44: calc(44 / var(--px-base) * var(--px-to-rem));
  --px-48: calc(48 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 52-60 */
  --px-52: calc(52 / var(--px-base) * var(--px-to-rem));
  --px-54: calc(54 / var(--px-base) * var(--px-to-rem));
  --px-56: calc(56 / var(--px-base) * var(--px-to-rem));

  /* PX TO REM: 62-70 */
  --px-62: calc(62 / var(--px-base) * var(--px-to-rem));
  --px-64: calc(64 / var(--px-base) * var(--px-to-rem));

  /* === CONTAINER === */
  --container: 100%;
}

@media (min-width: 1025px) {
  :root {
    --container: 1216px;
  }
}