:root {
  --color-white: #fff;
  --color-primary: hsl(203, 100%, 46%);
  --color-secondary: #fc6c40;
  --color-text: #201c1d;
  --color-accent: #062759;

  --primary-font-size: 54px;
  --primary-font-lineheight: 0.9em;
  --secondary-font-size: 44px;
  --secondary-font-lineheight: 0.9em;
  --text-font-size: 14px;
  --text-font-lineheight: 1.7em;
  --accent-font-size: 18px;
  --accent-font-lineheight: 1.2rem;

  --mdl-font-size: 26px;
  --mdl-font-lineheight: 1.3;
}
@media (min-width: 768px) {
  :root {
    --primary-font-size: 72px;
    --secondary-font-size: 54px;
    --mdl-font-size: 28px;
    --accent-font-size: 20px;
    --accent-font-size: 30px;
  }
}
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 84px;
    --secondary-font-size: 64px;
    --accent-font-size: 24px;

    --mdl-font-size: 32px;
  }
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
a {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Barlow", sans-serif;
  font-style: normal;
  font-weight: bold;
}
p,
span,
div {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
}
.primary-text {
  font-size: var(--primary-font-size);
  line-height: var(--primary-font-lineheight);
}
.secondary-text {
  font-size: var(--secondary-font-size);
  line-height: var(--secondary-font-lineheight);
}
.third-text {
  font-size: var(--mdl-font-size);
  line-height: var(--mdl-font-lineheight);
}
.body-text {
  font-size: var(--text-font-size);
  line-height: var(--text-font-lineheight);
}
.primary-bttn {
  background-color: var(--color-primary);
  color: #fff !important;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: bold;
  border-style: none;
  border-radius: 5px 5px 5px 5px;
  padding: 14px 20px 14px 20px;
  line-height: 1em;
}
.white-bttn {
  background-color: transparent;
  color: #fff !important;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: bold;
  border-style: none;
  border-radius: 5px 5px 5px 5px;
  padding: 14px 20px 14px 20px;
  line-height: 1em;
}
.color-secondary {
  color: var(--color-secondary);
}
.color-primary {
  color: #0d6efd !important;
}
.bg-primary {
  background-color: var(--color-primary) !important;
}
.btn-outline-info {
  border-color: #0d6efd !important;
}
.btn-outline-info:hover {
  background: #0d6efd !important;
}