/**Font Size & Font Family**/

// ------------------

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  text-transform: capitalize;
  font-family: $font-outfit;
}

h1 {
  font-size: 70px;
  font-style: normal;
  font-weight: 700;
  line-height: 80px;

  @media #{$max1399} {
    font-size: 60px;
    line-height: 70px;
  }
  @media #{$max1199} {
    font-size: 54px;
    line-height: 64px;
  }
  @media #{$max991} {
    font-size: 50px;
    line-height: 60px;
  }
  @media #{$max767} {
    font-size: 45px;
    line-height: 55px;
  }
  @media #{$max767} {
    font-size: 40px;
    line-height: 45px;
  }

  span {
    @extend h1;
  }
}

h2 {
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;

  @media #{$max1650} {
    font-size: 48px;
    line-height: normal;
  }
  @media #{$max1399} {
    font-size: 44px;
    line-height: normal;
  }
  @media #{$max1199} {
    font-size: 40px;
    line-height: normal;
  }
  @media #{$max991} {
    font-size: 36px;
    line-height: normal;
  }
  @media #{$max767} {
    font-size: 32px;
    line-height: normal;
  }
  @media #{$max575} {
    font-size: 28px;
    line-height: normal;
  }

  span {
    @extend h2;
  }
}

h3 {
  font-size: 32px;
  line-height: 130%;
}

h4 {
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: 43px;

  @media #{$max767} {
    font-size: 20px;
    line-height: normal;
  }
  @media #{$max575} {
    font-size: 18px;
    line-height: normal;
  }

  span {
    @extend h4;
  }
}

h5 {
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-transform: capitalize;

  @media #{$max1399} {
    font-size: 22px;
  }
  @media #{$max1199} {
    font-size: 18px;
  }
  span {
    @extend h5;
  }
}
h6 {
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-transform: capitalize;
  span {
    @extend h6;
  }
}

.sub-1 {
  font-size: 18px;
  line-height: 130%;
}

.sub-2 {
  font-size: 20px;
  line-height: 140%;
}

.sub-3 {
  font-size: 16px;
  line-height: 120%;
}

// font size
.fs-18 {
  font-size: 18px;
}

// font weight
.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}

p,
a,
span,
label,
li,
button {
  font-size: 16px;
  line-height: 150%;
  font-family: $font-dmsans;
}

.body-2 {
  font-size: 14px;
  line-height: 140%;
}

.body-3 {
  font-size: 12px;
  line-height: 140%;
}