*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

*::selection {
  background: var(--color-dark);
  color: white;
}

html {
  scroll-behavior: smooth;
  font: var(--fw-regular) var(--fs-base) var(--ff-secondary-font);
  letter-spacing: var(--ls-tight);
}
body{
    position: relative;
    background-color: var(--color-canvas-bg);
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul li,
ul, ol{
    list-style: none;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  font-family: var(--ff-primary-font);
}

p {
  text-wrap: pretty;
}

a{
  text-decoration: none;
  color: inherit;
}


.container_fluid{
    width: calc(100% - 4rem);
    margin: 0 auto;
    padding: 0 40px;
}

.custom_button{
    display: block;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;

    padding: 12px 26px;
    border-radius: 6px;
    border: 2px solid transparent;

    color: var(--color-light);
    transition: .3s ease all;

    font-weight: var(--fw-medium);
}

.custom_button.solid{
  background-color: var(--color-dark);
}
.custom_button.solid:hover{
  background-color: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.custom_button.outline{
  background-color: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.custom_button.outline:hover{
  background-color: var(--color-dark);
  color: var(--color-light);
}


.spacer.spacer-50{
  height: 50px;
}
.spacer.spacer-100{
  height: 100px;
}


.pill{
  width: fit-content;
  padding: 5px 10px;
  border-radius: 35px;
  gap: 6px;
  font-family: var(--ff-secondary-font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.pill::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    flex-shrink: 0;
}

.pill.light{
  background-color: var(--color-canvas-bg);
  color: var(--color-dark);
}
.pill.light::before{
  background-color: var(--color-dark);
}
.pill.green{
  background-color: var(--color-dark-green);
  color: var(--color-light);
}
.pill.green::before{
  background-color: var(--color-light);
}
.pill.outline-green{
  background-color: transparent;
  border: 1.5px solid var(--color-dark-green);
  color: var(--color-dark-green);
}
.pill.outline-green::before{
  background-color: var(--color-dark-green);
}

.section_head .section_head_title{
  font: var(--fw-medium) var(--fs-4xl) var(--ff-secondary-font);
  line-height: var(--lh-tight);
}
.section_head .section_head_title em{
  font-family: var(--ff-primary-font);
  font-style: italic;
}
.section_head.dark .section_head_title{
  color: var(--color-dark);
}
.section_head.dark .section_head_title em{
  color: var(--color-dark-green);
}
.section_head.light .section_head_title{
  color: var(--color-light);
}
.section_head.light .section_head_title em{
  color: var(--color-light-green);
}
.section_head .section_head_descWrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
}
.section_head .section_head_descWrap .para-desc{
  font: var(--fw-regular) var(--fs-base) var(--ff-secondary-font);
  line-height: var(--lh-relaxed);
  color: var(--color-body-darkGrey);

}


.section_head .para-desc{
  margin-top: 10px;
}
.section_head.flex{
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.section_head.flex .para-desc{
  margin-top: 0;
}
.section_head.center{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: center;
}

.section_head.center .section_head_title{
  text-align: center;
  margin: 0 auto;
}


@media screen and (max-width: 767px) {
  .section_head .section_head_title{
    font: var(--fw-medium) var(--fs-3xl) var(--ff-secondary-font);
    line-height: var(--lh-heading);
  }
  .section_head .section_head_descWrap .para-desc{
    line-height: var(--lh-tight);
    margin-top: 10px;
  }
}