@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i&display=swap');

:root {
  --font-family-1: Roboto;
  --font-family-2: Lora;

  /* Settings Body */
  --font-body-family: Roboto;
  --font-body-size: 16px;
  --font-body-weight: 400;
  --body-line-height: 25px;
  --body-letter-spacing: 0;

  /* Settings Heading */
  --font-heading-family: Roboto;
  --font-heading-size: 21px;
  --font-heading-weight: 700;
  --font-heading-style: normal;
  --heading-line-height: 34px;
  --heading-letter-spacing: 0;
  --heading-text-transform: none;
  --heading-border-height: 1px;

  /* Menu Lv1 */
  --font-menu-lv1-family: Roboto;
  --font-menu-lv1-size: 16px;
  --font-menu-lv1-weight: 500;
  --menu-lv1-line-height: 12px;
  --menu-lv1-letter-spacing: 0;
  --menu-lv1-text-transform: none;

  /* Menu Lv2 */
  --font-menu-lv2-family: Roboto;
  --font-menu-lv2-size: 14px;
  --font-menu-lv2-weight: 400;
  --menu-lv2-line-height: 16px;
  --menu-lv2-letter-spacing: 0;
  --menu-lv2-text-transform: none;

  /* Menu Lv3 */
  --font-menu-lv3-family: Roboto;
  --font-menu-lv3-size: 14px;
  --font-menu-lv3-weight: 400;
  --menu-lv3-line-height: 24px;
  --menu-lv3-letter-spacing: 0;
  --menu-lv3-text-transform: none;

  /* Mega Menu Lv2 */
  --font-mega-menu-lv2-family: Roboto;
  --font-mega-menu-lv2-size: 16px;
  --font-mega-menu-lv2-weight: 700;
  --font-mega-menu-lv2-style: normal;
  --mega-menu-lv2-line-height: 22px;
  --mega-menu-lv2-letter-spacing: 0;
  --mega-menu-lv2-text-transform: none;

  /* Mega Menu Lv3 */
  --font-mega-menu-lv3-family: Roboto;
  --font-mega-menu-lv3-size: 14px;
  --font-mega-menu-lv3-weight: 400;
  --mega-menu-lv3-line-height: 24px;
  --mega-menu-lv3-letter-spacing: 0.02em;
  --mega-menu-lv3-text-transform: none;

  /* General Color */
  --color-text: #515150;
  --color-text2: #3c3c3c;
  --color-global: #515150;
  --color-white: #727272;
  --color-grey: #868686;
  --color-black: #515150;
  --color-base-text-rgb: 81, 81, 80;
  --color-base-text2-rgb: 60, 60, 60;
  --color-background: #ffffff;
  --color-background-rgb: 255, 255, 255;
  --color-link: #28a745;
  --color-link-hover: #f27300;
  --border-global: #e6e6e6;
  --bg-global: #fafafa;
  --bg-white: #ffffff;
  --bg-black: #000000;
  --color-background-10: #eeeeee;
  --color-foreground-50: rgba(35, 35, 35, 0.5);

  /* Font weight (menu-drawer / theme utilities) */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Conatiner */
  --body-custom-width-container: 1600px;

  /* Duration */
  --duration-short: 100ms;
  --duration-default: 350ms;
  --duration-long: 500ms;
}