/**
  * Variables naming rule: --{selector aka component aka namespace}-{css property}-{pseudo class or media query name} eg. --p-background-color-hover 
  * NOTE: Within the component don't use any name spacing eg. component header don't use --header-default-color just use --color the namespace can be added by the Shadow as an html attribute
  * - if a component holds other components or nodes you can declare or remap classes eg. :host > h1 {--color: var(--h1-color, white);}
  * - if a component holds other components you should share the attribute namespace with its children
  */
/* font tracking */
@import url("https://cdn.fonts.net/t/1.css?apiType=css&projectid=ae6aa7d0-cd17-11ec-9404-069abf4c3446");

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@800&display=swap');

:root {
  --color-disabled: #c2cce2;
  --color-hover: #6b7cbc;
  --color-secondary: #261954;
  --color-active:#261954 !important;
  --footer-default-invert-background-color-custom: #261A55;
  --footer-default-invert-a-color-hover-custom:#8197cd;
  --footer-default-invert-orange-background-color-custom: white;
  --footer-default-invert-orange-color-custom: #333333;
  --header-default-a-logo-top-custom: calc(62px / 2 - 90px / 2);
  --header-default-a-menu-icon-background-color-custom: var(--color);
  --header-default-background-color-custom: var(--background-color);
  --header-default-border-bottom-custom: 1px solid var(--m-gray-300);
  --header-default-logo-width-custom: 190px;
  --navigation-default-color-custom: var(--color);
  --h1-font-family: "Manrope", sans-serif;
  --h1-font-weight: 800;
  --h2-font-family: var(--h1-font-family);
  --h2-font-weight: var(--h1-font-weight);
  --h3-font-family: var(--h1-font-family);
  --h3-font-weight: var(--h1-font-weight);
  --h4-font-family: var(--h1-font-family);
  --h4-font-weight: var(--h1-font-weight);
  --h5-font-family: var(--h1-font-family);
  --h5-font-weight: var(--h1-font-weight);
  --h6-font-family: var(--h1-font-family);
  --h6-font-weight: var(--h1-font-weight);
  --h6-font-size: 1em;
  --carousel-two-default-nav-background-color-active-custom: var(--color-secondary);
  --footer-default-invert-orange-a-color-custom: var(--color);
}