/* 400 normal */
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/WorkSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 400 italic */
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/WorkSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 600 (Semibold) */
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/WorkSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 800 (ExtraBold) */
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/WorkSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}


body {
  line-height: 1.6;
  //font-family: $font_secondary;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  color: $text-color;
  font-family: var(--font-primary);
  font-synthesis: weight style;
}

p,
.paragraph {
  font-weight: 400;
  color: $text-color;
  font-size: 16px;
  line-height: 1.6;
  transition: 0.3s;
  //font-family: $font_secondary;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $text-dark;
  //font-family: $font-primary;
 /* text-transform: capitalize; */
  font-weight: 800;
  line-height: 1.2;
  transition: 0.3s ease;
}

h6 {
  /* padding-top:10px; */
}

h1,
.h1 {
  font-size: 40px;
}

// List in descending order to prevent extra sort function
$type-levels: 6, 5, 4, 3, 2;

@each $level in $type-levels {
  $font-size: $font-size * $font-scale;

  // Output heading styles
  h#{$level},
  .h#{$level} {
    font-size: $font-size;
    margin-bottom: 0.65em;

    // responsive for h1, h2, h3, h4
    &:not(h5, .h5, h6, .h6) {
      @include desktop {
        font-size: calc(#{$font-size} * 0.9);
        margin-bottom: 0.55em;
      }

      @include tablet {
        font-size: calc(#{$font-size} * 0.8);
      }
    }

    // responsive for h5, h6
    @include desktop {
      font-size: calc(#{$font-size} * 0.95);
      margin-bottom: 0.55em;
    }

    @include tablet {
      font-size: calc(#{$font-size} * 0.9);
    }
  }
}

.text-white a,
.text-white a:hover,
.text-white a:focus {
  color: $white;
  text-decoration: underline;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease-in-out;
  border-radius: 20px;
}

input[type="checkbox"]:hover,
input[type="checkbox"]:focus {
  border-color: #207495;
  outline: none;
}

input[type="checkbox"]:checked {
  background-color: #207495;
  border-color: #207495;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 8px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}