body {
  font-size: 24px;
  font-family: "Work Sans", sans-serif;
  background-color: var(--bs-black); }
  @media (max-width: 767px) {
    body {
      font-size: 18px; } }

h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 102px;
  font-weight: bold;
  max-width: 720px; }
  @media (max-width: 1199px) {
    h1 {
      font-size: 80px; } }
  @media (max-width: 991px) {
    h1 {
      font-size: 60px; } }
  @media (max-width: 767px) {
    h1 {
      font-size: 40px; } }

@media (min-width: 1500px) {
  .container {
    max-width: 1420px; } }
@media (min-width: 1600px) {
  .container {
    max-width: 1520px; } }
@media (min-width: 1700px) {
  .container {
    max-width: 1620px; } }

:root {
  --bs-yellow: #fed900; }

.bg-image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0; }
  .bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

section.hero {
  min-height: 100vh;
  color: var(--bs-white);
  opacity: 0;
  transition: 500ms; }
  section.hero .subheading {
    font-size: 38px;
    margin-bottom: 10vh; }
    @media (max-width: 767px) {
      section.hero .subheading {
        font-size: 30px; } }
    @media (max-width: 575px) {
      section.hero .subheading {
        font-size: 25px; } }
  section.hero .cta {
    background-color: var(--bs-yellow);
    padding: 21px 45px;
    max-width: 1100px;
    color: var(--bs-black); }
    @media (max-width: 575px) {
      section.hero .cta span {
        display: block; } }
    section.hero .cta a {
      text-decoration: none;
      color: inherit; }
      section.hero .cta a:hover {
        text-decoration: underline; }
    @media (max-width: 767px) {
      section.hero .cta {
        padding: 20px; } }
  @media (max-width: 767px) {
    section.hero {
      text-align: center; } }
  section.hero.animate {
    opacity: 1; }

.fade-up {
  transition: 300ms;
  transform: translateY(20px);
  opacity: 0; }
  .fade-up.animate {
    transform: translateY(0);
    opacity: 1; }

/*# sourceMappingURL=style.css.map */