img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

ul.list-style,
ol.list-style {
  padding: 0;
}

ul.list-style li::marker,
ol.list-style li::marker {
  color: $accent-1;
}

.unstyled {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

.row {
  margin-right: calc(-0.33333* var(--bs-gutter-x));
  margin-left: calc(-0.33333* var(--bs-gutter-x));
}
.row > * {
  padding-right: calc(var(--bs-gutter-x) * 0.33333);
  padding-left: calc(var(--bs-gutter-x) * 0.33333);
}


/*-------------------------
  Typography
-------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  font-family: $font-primary;
  color: $dark-gray;
  background-color: $white;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: clamp(15px, 0.833vw, 22px);
  font-weight: 400;
  line-height: 140%;
  height: 100%;
  overflow-x: hidden;


  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background-color: #ebebeb;
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #6d6d6d;
  }

}

a {
  display: inline-block;
  text-decoration: none;
  color: unset;
  transition: $transition;

  &:hover {
    color: $accent-1;
    transition: $transition;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
address,
p,
pre,
blockquote,
table,
hr {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  a {
    color: inherit;
  }
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-bottom: 0;
}

h1,
.h1 {
  font-family: $font-sec;
  font-weight: 500;
  font-size: clamp(42px, 2.5vw, 60px);
  /*48*/
  line-height: 120%;
  letter-spacing: -0.47px;


  @media(max-width: 820px) {
    font-size: clamp(32px, 4.39vw, 48px);
    /*36*/
  }

  @media(max-width: 490px) {
    font-size: clamp(24px, 5.714vw, 38px);
    /*28*/
  }

  &.bold {
    letter-spacing: -1.44px;
    font-weight: 700;
  }
}

h2,
.h2 {
  font-family: $font-sec;
  font-weight: 500;
  font-size: clamp(36px, 2.083vw, 60px);
  /*40*/
  line-height: 120%;


  @media(max-width: 820px) {
    font-size: clamp(24px, 3.293vw, 34px);
    /*27*/
  }

  @media(max-width: 490px) {
    font-size: clamp(22px, 4.694vw, 27px);
    /*21*/
  }
}

h3,
.h3 {
  font-family: $font-sec;
  font-weight: 500;
  font-size: clamp(29px, 1.719vw, 48px);
  /*33*/
  line-height: 125%;
  letter-spacing: -0.47px;

  @media(max-width: 820px) {
    font-size: clamp(23px, 2.927vw, 48px);
    /*24*/
  }

  @media(max-width: 490px) {
    font-size: clamp(21px, 4.49vw, 38px);
    /*22*/
  }
}


h4,
.h4 {
  font-family: $font-sec;
  font-size: clamp(24px, 1.458vw, 38px);
  /* 28px */
  font-style: normal;
  font-weight: 500;
  line-height: 120%;

  @media (max-width: 1024px) {
    font-size: clamp(21px, 2.246vw, 36px);
  }

  @media (max-width: 768px) {
    font-size: clamp(20px, 2.474vw, 32px);
  }

  @media (max-width: 490px) {
    font-size: clamp(19px, 3.878vw, 28px);
  }
}

h5,
.h5 {
  font-family: $font-sec;
  font-size: clamp(19px, 1.198vw, 27px);
  /* 23px */
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.021875vw;

  @media (max-width: 1024px) {
    font-size: clamp(18px, 1.953vw, 24px);
  }

  @media (max-width: 768px) {
    font-size: clamp(18px, 2.344vw, 21px);
  }

  @media (max-width: 490px) {
    font-size: 21px;
  }
}

h6,
.h6 {
  font-family: $font-sec;
  font-size: clamp(17px, 0.99vw, 21px);
  /*19*/
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.32px;


  @media(max-width: 820px) {
    font-size: clamp(16px, 2.195vw, 22px);
    /*18*/
  }

  @media(max-width: 490px) {
    font-size: clamp(17px, 3.673vw, 21px);
    /*16*/
  }
}

p,
.text-16 {
  font-family: $font-primary;
  font-size: clamp(15px, 0.833vw, 22px);
  font-weight: 400;
  line-height: 150%;
}


.lead {
  font-size: clamp(17px, 0.99vw, 21px);
  font-weight: 400;
  line-height: 150%;

}

.eyebrow {
  color: $black;
  text-transform: uppercase;
  font-size: clamp(14px, 0.833vw, 24px);
  font-family: $font-primary;
  font-weight: 400;
  line-height: 120%;
}


.subtitle {
  font-size: 14px; /* 14px */
  font-family: $font-primary;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  
}

.caption {
  font-size: clamp(12px, 0.677vw, 16px);
  /* 13px */
  font-style: normal;
  font-weight: 400;
  line-height: 120%;

  @include media-query(1499px) {
    font-size: 13px;
  }
}

span {
  display: inline-block;
}

b,
strong {
  font-family: $font-primary;
}

.hr-line{
  height: 1px;
  width: 100%;
  background: $black;
}