@font-face {
  font-family: 'Quicksand';
  src: url('../font/Quicksand-VariableFont_wght.ttf') format('truetype');
  font-weight: 1 999;
}

:root {
  --nk-background: #eaebe7;
  --nk-blue: #1e569d;
  --nk-orange: #f26a22;
  --nk-gray: #545454;
  --nk-orange-faded-1: #f8c5ad;
  --nk-orange-faded-2: #fce9df;
}

html,
body {
  font-family: 'Quicksand', Arial, Helvetica, sans-serif;
}

.bg-nk-background {
  background-color: var(--nk-background);
}

.logo {
  width: 120px;
  height: auto;
}

.text-nk-gray {
  color: var(--nk-gray);
}

.text-nk-blue {
  color: var(--nk-blue);
}

.text-nk-orange {
  color: var(--nk-orange);
}

.bg-nk-gray {
  background-color: var(--nk-gray);
}

.bg-nk-blue {
  background-color: var(--nk-blue);
}

.bg-nk-orange {
  background-color: var(--nk-orange);
}

.nk-button-orange {
  color: white;
}
.nk-button-orange:hover {
  background-color: var(--nk-orange-faded-1);
  color: var(--nk-gray);
}

.title-spacer {
  background-color: var(--nk-orange-faded-1);
  height: 2px;
  margin-right: -1.5rem;
}

@media (max-width: 767px) {
  .title-spacer {
    margin-left: -1.5rem;
  }
}
.hex-container {
  position: relative;
  width: 400px;
  height: 300px;
}
.hex {
  transition: transform, fill-opacity, stroke-width;
  -webkit-transition: transform, fill-opacity, stroke-width;
  transition-duration: 1s;
  -webkit-transition-duration: 1s;
}
.hex-svg {
  height: 230px;
  width: 230px;
  position: absolute;
}
.woman-hex {
  top: 0;
  left: 0;
}
.man-hex {
  transform: translateX(71%) translateY(44%);
}
.hex-download img {
  width: 115px;
  height: 100px;
}
.hex-column-title {
  height: 3em;
}
.hex-info-content {
  height: 2.5em;
}

.info {
  font-size: 1rem;
}

.hex-info {
  font-size: 0.8rem;
}

.slogan {
  font-size: 1.5rem;
}
@media (max-width: 992px) {
  .slogan {
    font-size: 1.25rem;
  }
  .info {
    font-size: 0.95rem;
  }
  .hex-info {
    font-size: 0.7rem;
  }
  .hex-container {
    width: 300px;
    height: 225px;
  }
  .hex-svg {
    height: 160px;
    width: 160px;
  }
}
@media (max-width: 768px) {
  .slogan {
    font-size: 1rem;
  }
  .info {
    font-size: 0.9rem;
  }
  .hex-info {
    font-size: 0.6rem;
  }
  /* .hex-container {
    width: 300px;
    height: 225px;
  }
  .hex-svg {
    height: 160px;
    width: 160px;
  } */
}

/* $grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
); */