//======= Variables ========//

$webex-primary-color: #3b38eb;
$webex-primary-color2: #6600d3;
$webex-primary-color3: #15ebae;
$webex-primary-color4: #fd4a18;
$webex-primary-color5: #eb9e01;
$webex-primary-color6: #da0212;
$webex-primary-color7: #e42032;
$webex-secondary-color: #0d1525;
$webex-secondary-color2: #353666;
@function hexToRGB($hex) {
  @return red($hex), green($hex), blue($hex);
}
:root {
  --webex-primary-color: #3b38eb;
  --webex-primary-color-rgb: #{hexToRGB($webex-primary-color)};
  --webex-primary-color2: #6600d3;
  --webex-primary-color2-rgb: #{hexToRGB($webex-primary-color2)};
  --webex-primary-color3: #15ebae;
  --webex-primary-color3-rgb: #{hexToRGB($webex-primary-color3)};
  --webex-primary-color4: #fd4a18;
  --webex-primary-color4-rgb: #{hexToRGB($webex-primary-color4)};
  --webex-primary-color5: #eb9e01;
  --webex-primary-color5-rgb: #{hexToRGB($webex-primary-color5)};
  --webex-primary-color6: #da0212;
  --webex-primary-color6-rgb: #{hexToRGB($webex-primary-color6)};
  --webex-primary-color7: #e42032;
  --webex-primary-color7-rgb: #{hexToRGB($webex-primary-color7)};
  --webex-secondary-color: #0d1525;
  --webex-secondary-color-rgb: #{hexToRGB($webex-secondary-color)};
  --webex-secondary-color2: #353666;
  --webex-secondary-color2-rgb: #{hexToRGB($webex-secondary-color)};

  --theme-text-gray: #a5a5a5;
  --link-color: #006cff;

  --text-white: #ffffff;
  --text-black: #303031;
  --text-gray: #d7d9f2;
  --text-blue: #447bde;
  --text-light-gray: #a7a8b4;
  --text-silver: #f1f3f8;
  --text-silver-light: #f0efff;
  --text-gray-light: #cccccc;
  --text-dark-light: #808093;

  --bg-white: #ffffff;
  --bg-light-pink: #faf3f3;
  --bg-silver: #f1f3f8;
  --bg-silver-light: #e7e3f0;
  --bg-silver-light2: #f0f1f7;
  --bg-silver-deep: #ecdaee;
  --bg-gray: #f7f7f7;
  --bg-dark-color: #0b0c26;
  --bg-blue-color: #571bcd;

  --gradient-color1: linear-gradient(45deg, var(--webex-primary-color) 0%, var(--webex-primary-color2) 100%);
  --gradient-color2: linear-gradient(45deg, var(--webex-primary-color2) 0%, var(--webex-primary-color) 100%);
  --gradient-color3: linear-gradient(45deg, var(--webex-primary-color5) 0%, var(--webex-primary-color6) 100%);
  --gradient-color4: linear-gradient(45deg, var(--webex-primary-color6) 0%, var(--webex-primary-color5) 100%);
  --gradient-section-overlay: linear-gradient(90deg, var(--webex-primary-color2) 10%, var(--webex-primary-color) 100%);

  --heading-font: "Mulish", sans-serif;
  --body-font: "Roboto", sans-serif;
  --secondary-font1: "Allison", cursive;

  --heading-font-color: #232323;
  --h1-h2-font-weight: 900;
  --h3-h4-font-weight: 800;
  --h5-h6-font-weight: 800;

  --body-font-color: #515264;
  --body-font-size: 1rem;
  --body-font-weight: 400;
  --body-font-line-height: 1.8rem;

  --header1-nav-color: #fff;
  --header1-nav-hover-color: var(--webex-primary-color3);
  --header1-nav-font-family: var(--body-font);
  --header1-nav-font-size: 16px;
  --header1-nav-font-weight: 800;

  --header1-nav-child-color: var(--heading-font-color);
  --header1-nav-child-hover-color: #fff;
  --header1-nav-child-font-size: 15px;
  --header1-nav--child-font-weight: 700;

  --header2-nav-color: var(--heading-font-color);
  --header2-nav-hover-color: var(--webex-primary-color);
  --header2-nav-font-family: var(--body-font);
  --header2-nav-font-size: 16px;
  --header2-nav-font-weight: 800;

  --header2-nav-child-color: var(--heading-font-color);
  --header2-nav-child-hover-color: #fff;
  --header2-nav-child-font-size: 15px;
  --header2-nav--child-font-weight: 700;

  --header3-nav-color: var(--heading-font-color);
  --header3-nav-hover-color: var(--webex-primary-color);
  --header2-nav-font-family: var(--body-font);
  --header3-nav-font-size: 16px;
  --header3-nav-font-weight: 800;

  --header3-nav-child-color: var(--heading-font-color);
  --header3-nav-child-hover-color: #fff;
  --header3-nav-child-font-size: 15px;
  --header3-nav--child-font-weight: 700;

  --header4-nav-color: var(--heading-font-color);
  --header4-nav-hover-color: var(--webex-primary-color1);
  --header4-nav-font-family: var(--heading-font);
  --header4-nav-font-size: 16px;
  --header4-nav-font-weight: 800;

  --header4-nav-child-color: var(--heading-font-color);
  --header4-nav-child-hover-color: #fff;
  --header4-nav-child-font-size: 15px;
  --header4-nav--child-font-weight: 700;

  --sub-title-font-size: 18px;
  --sub-title-font-weight: 700;
  --sub-title-letter-spacing: 0.02rem;

  --box-shadow: 6px 6px 25px 0px rgba(0, 0, 0, 0.08);
  --text-categories: #b5b5b5;
  --footer-text-color: #bbb7c2;

  --widget-content-bg-color: #fbf6f3;
  --widget-content-bg-text-color: var(--heading-font-color);
}