/***custom CSS Variables
****/

:root {
  --color-primary: #008AC4;
  --color-secondary: #8C3FAF;
  --color-accent: #8C3FAF;
  --color-dark: #1A1A1A;
  --color-light: #f4f4f4;
  --color-dark-highlight: #002b64;
  --color-white: #ffffff;
  --color-grey-border: #dee2e6;

  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Source Sans Pro', sans-serif;
  --font-color: #1B1B1B;

  --radius-soft: 15px;
  --radius-pill: 50px;

  --transition-speed: 0.3s;

  --container-padding: 1rem;
  --gap: 1rem;
  
  --hero-bg-gradient: linear-gradient(90deg, rgba(0, 0, 0, 0.745) 0%, rgba(128, 128, 128, 0) 100%);
  --hero-height: 100%;
  --hero-heading: 70px;
  --h2-size: 40px;
  --h2-color: #1A1A1A;
  --h2-margin-bottom: 30px;
  --h3-size: 32px;
  --h3-color: #231f20;
  --h2-margin-bottom:30px;
  --h4-size: 20px;
  --h4-color: #008AC4;
  --h4-margin-bottom:20px;
  --icon-color: #D6E947;
  --contact-text-size: 18px; 
  --contact-text-color: #C9A878;
  --paragraph-text-size: 16px;  

}