@font-face {
  font-family: "Circular Std";
  src: url("https://139693755.fs1.hubspotusercontent-eu1.net/hubfs/139693755/CircularStd-Medium.woff") format("woff");
  font-weight: 500;
}

@font-face {
  font-family: "Circular Std";
  src: url("https://139693755.fs1.hubspotusercontent-eu1.net/hubfs/139693755/CircularStd-Bold.woff") format("woff");
  font-weight: 600;
}

@font-face {
  font-family: "KievitOT";
  src: url("https://139693755.fs1.hubspotusercontent-eu1.net/hubfs/139693755/KievitOT-Bold.woff") format("woff");
  font-weight: 700;
}

@font-face {
  font-family: "KievitOT";
  src: url("https://139693755.fs1.hubspotusercontent-eu1.net/hubfs/139693755/KievitOT-Medium.woff") format("woff");
  font-weight: 500;
}

@font-face {
  font-family: "KievitOT";
  src: url("https://139693755.fs1.hubspotusercontent-eu1.net/hubfs/139693755/KievitOT-Regular.woff") format("woff");
  font-weight: 400;
}

@font-face {
  font-family: "KievitOT";
  src: url("https://139693755.fs1.hubspotusercontent-eu1.net/hubfs/139693755/KievitOT-Light.woff") format("woff");
  font-weight: 300;
}

@font-face {
  font-family: "KievitOT";
  src: url("https://139693755.fs1.hubspotusercontent-eu1.net/hubfs/139693755/KievitOT-ExtraLight.woff") format("woff");
  font-weight: 200;
}

@font-face {
  font-family: "KievitOT";
  src: url("https://139693755.fs1.hubspotusercontent-eu1.net/hubfs/139693755/KievitOT-Thin.woff") format("woff");
  font-weight: 100;
}

.c-banner {
  font-family: "KievitOT";
  font-weight: 400;
}

.c-banner-title {
  color: #31353E;
  font-family: "Circular Std";
  font-size: 60px;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 70px;
}

.c-banner-subtitle {
  font-family: "KievitOT";
  font-size: 50px;
  font-weight: 300;
  font-style: italic;
  line-height: 50px;
  margin: 0 0 20px 0;
}

.c-banner--small .c-banner-title {
  font-size: 40px;
  line-height: 50px
}
.c-banner--small .c-banner-subtitle {
  font-size: 25px;
  line-height: 35px
}
.c-banner--small .c-banner-extra {
  font-size: 20px;
  line-height: 30px
}

.c-banner-extra {
  font-family: "Circular Std";
  font-weight: 500;
  font-size: 30px;
  margin: 60px 0 40px 0;
}

.c-banner-btn {
  display: block;
  width: fit-content;
  font-family: "Circular Std";
  font-weight: 500;
  font-size: 18px;
  text-decoration: none;
  color: #31353E;
  padding: 6px 30px;
  border-radius: 30px;
  border: 1px solid var(--Orange, #FCAF17);
  background: var(--White, #FFF);
  text-decoration: none;
}

.c-banner-btn:hover {
  background-color: #FCAF17;
  color: white;
  font-family: "Circular Std"; !important;
  font-weight: 500;
  text-decoration: none !important;
}

.c-banner-image {
  margin-top: 60px;
  width: 100%;
  border-radius: 8px;
}

@media only screen and (max-width: 768px) {
  .c-banner-title {
    font-size: 40px;
    line-height: 50px;
  }

  .c-banner-subtitle {
    font-size: 40px;
    line-height: 50px;
  }
  
  .c-banner-subtitle--small{
    font-size: 30px;
    line-height: 40px;
  }
  
  .c-banner-image {
    margin-top: 30px;
  }
}