@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&family=Open+Sans&display=swap');

/*----- Variables -----*/
:root {

  /* Typography */
  --primary-font: 'Montserrat', sans-serif;
  --secondary-font: 'Open Sans', sans-serif;
  --base-font-size: 0.875rem; /* 14px */
  --base-line-height: 1.25rem; /* 20px */
  --small-font-size: 0.875rem; /* 12px */

  /* Font Sizes */
  --h1-font-size: clamp(2rem, 6vw, 2.75rem);
  --h1-line-height: 2.75rem; /* 44px */
  --h2-font-size: clamp(1.5rem, 4vw, 1.875rem);
  --h2-line-height: 2.5rem; /* 40px */
  --h3-font-size: clamp(1.125rem, 3vw, 1.25rem);
  --h3-line-height: 1.625rem; /* 26px */
  --h4-font-size: 1.125rem; /* 18px */
  --h4-line-height: 1.625rem; /* 26px */

  /* Box Model */
  --spacer: 40px;
  --spacer-2x: 80px;
  --spacer-half: 20px;

  /* Colors */
  --color-first: #f5821f;
  --color-second: #141e28;
  /* --dark-gray: #505050; */
  /* --lz-gray: #969696; */
  /* --light-gray: #f0f0f0; */
  --very-light-gray: #f7f8f9;
}

/*----- Global Styles ----- */
body {
  font-family: var(--secondary-font);
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  font-weight: 400; /* normal */
  color: var(--color-second);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  text-wrap: balance;
}

h1 {
  font-family: var(--primary-font);
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  font-weight: 700; /* bold */
  color: var(--color-second);
}

h2 {
  font-family: var(--primary-font);
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  font-weight: 700; /* bold */
  color: var(--color-second);
}

h3 {
  font-family: var(--primary-font);
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
  font-weight: 700; /* bold */
  /*color: var(--white);*/
}

h4 {
  font-family: var(--secondary-font);
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
  font-weight: 400; /* normal */
  color: var(--color-second);
}

@media (max-width: 1200px) {
  :root {
    --base-font-size: 0.875rem;
    --base-line-height: 1.5rem;
    --small-font-size: 0.75rem;
  }
}

@media screen and (max-width: 992px) {
  :root {
    --spacer: 1.25rem;
    --spacer-2x: 2.5rem;
    --spacer-half: 0.625rem;
  }
}