:root {
--color-white: #FFFFFF;
--color-black: #211915;
--color-primary: #92BD24;
--color-secondary: #00652E;

--color-1: #46B258;
--color-2: #45A78F;
--color-3: #1D4851;

--gray-1: #4C4C4C;
--gray-2: #7E7E7E;
--gray-3: #B9B9B9;
--gray-4: #F4F4F4;
--gray-5: #F9FAFB;
  --fs-h1-mobile: 3.4rem;
  --fs-h1-desktop: 4.2rem;
  --fs-h2-mobile: 2.6rem;
  --fs-h2-desktop: 3.4rem;
  --fs-h3-mobile: 2.2rem;
  --fs-h3-desktop: 2.6rem;
  --fs-h4-mobile: 2rem;
  --fs-h4-desktop: 2.2rem;
  --fs-h5-mobile: 1.8rem;
  --fs-h5-desktop: 2rem;
  --fs-p-mobile: 1.4rem;
  --fs-p-desktop: 1.5rem;
}
h1,
.h1 {
  font-size: var(--fs-h1-mobile);
}

@media (min-width: 1024px) {
  h1,
  .h1 {
    font-size: var(--fs-h1-desktop);
  }
}

h2,
.h2 {
  font-size: var(--fs-h2-mobile);
}

@media (min-width: 1024px) {
  h2,
  .h2 {
    font-size: var(--fs-h2-desktop);
  }
}

h3,
.h3 {
  font-size: var(--fs-h3-mobile);
}

@media (min-width: 1024px) {
  h3,
  .h3 {
    font-size: var(--fs-h3-desktop);
  }
}

h4,
.h4 {
  font-size: var(--fs-h4-mobile);
}

@media (min-width: 1024px) {
  h4,
  .h4 {
    font-size: var(--fs-h4-desktop);
  }
}

h5,
.h5 {
  font-size: var(--fs-h5-mobile);
}

@media (min-width: 1024px) {
  h5,
  .h5 {
    font-size: var(--fs-h5-desktop);
  }
}

p,
.p {
  font-size: var(--fs-p-mobile);
}

@media (min-width: 1024px) {
  p,
  .p {
    font-size: var(--fs-p-desktop);
  }
}

.button{
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: .8rem;
font-weight: 600;
transition: all .3 ease;
}

.button .right svg{
padding-left: .6rem;
width: 3rem
}
.button .left svg{
padding-right: .6rem;
width: 3rem
}
.button-sm{
padding: .8rem 1.2rem;
}

.button-md{
padding: 1rem 1.4rem;
}

.button-lg{
padding: 1.2rem 1.8rem;
}

.button-xl{
padding: 1rem 1.4rem;
}

.button-2xl{
padding: 1rem 2.2rem;
}
.button:hover svg {
stroke: inherit;
transition: stroke 0.3s ease;
}
.button-1 {
  background-color: #92BD24;
  color: #FFFFFF;
}
.button-1:hover,.button-1.active {
  background-color: #A2CD66;
  color: #211915;
  border-color: #A2CD66;
  transition: all 0.3s ease;
}
.button-1:focus {
  box-shadow: box-shadow: 0px 0px 0px 4px #00652E1F;
box-shadow: 0px 1px 2px 0px #00652E0D;;
}
.button-1:disabled {
  background-color: #F9FAFB;
  color: #B9B9B9;
  border-color: #F9FAFB;
  cursor: not-allowed;
  opacity: 0.4;
}
.button-1.disabled {
  pointer-events: none;
}
.button-2 {
  background-color: #00652E;
  color: #FFFFFF;
}
.button-2:hover,.button-2.active {
  background-color: #3C865E;
  color: #FFFFFF;
  border-color: #3C865E;
  transition: all 0.3s ease;
}
.button-2:focus {
  box-shadow: box-shadow: 0px 0px 0px 4px #00652E1F;
box-shadow: 0px 1px 2px 0px #00652E0D;;
}
.button-2:disabled {
  background-color: #F9FAFB;
  color: #B9B9B9;
  border-color: #F9FAFB;
  cursor: not-allowed;
  opacity: 0.4;
}
.button-2.disabled {
  pointer-events: none;
}
.button-3 {
  background-color: rgba(0,101,46,0);
  color: rgb(0,101,46);
}
.button-3:hover,.button-3.active {
  background-color: rgb(209,230,179);
  color: rgb(0,101,46);
  border-color: rgb(209,230,179);
  transition: all 0.3s ease;
}
.button-3:focus {
  box-shadow: box-shadow: 0px 0px 0px 4px #00652E1F;
box-shadow: 0px 1px 2px 0px #00652E0D;;
}
.button-3:disabled {
  background-color: #F9FAFB;
  color: #B9B9B9;
  border-color: #F9FAFB;
  cursor: not-allowed;
  opacity: 0.4;
}
.button-3.disabled {
  pointer-events: none;
}
.button-4 {
  background-color: rgb(255,255,255);
  color: rgb(0,101,46);
  border-color: rgb(0,101,46);
}
.button-4:hover,.button-4.active {
  background-color: rgb(244,244,244);
  color: rgb(0,101,46);
  border-color: rgb(244,244,244);
  transition: all 0.3s ease;
}
.button-4:focus {
  box-shadow: box-shadow: 0px 0px 0px 4px #00652E3D;

box-shadow: 0px 1px 2px 0px #00652E0D;
;
}
.button-4:disabled {
  background-color: #F9FAFB;
  color: #B9B9B9;
  border-color: #F9FAFB;
  cursor: not-allowed;
  opacity: 0.4;
}
.button-4.disabled {
  pointer-events: none;
}
.button-5 {
  background-color: #00652E;
  color: #FFFFFF;
}
.button-5:hover,.button-5.active {
  background-color: #3C865E;
  color: #FFFFFF;
  border-color: #3C865E;
  transition: all 0.3s ease;
}
.button-5:focus {
  box-shadow: box-shadow: 0px 0px 0px 4px #00652E1F;
box-shadow: 0px 1px 2px 0px #00652E0D;;
}
.button-5:disabled {
  background-color: #F9FAFB;
  color: #B9B9B9;
  border-color: #F9FAFB;
  cursor: not-allowed;
  opacity: 0.4;
}
.button-5.disabled {
  pointer-events: none;
}
.button-6 {
  background-color: rgba(255,255,255,0);
  color: rgb(0,101,46);
}
.button-6:hover,.button-6.active {
  background-color: rgb(209,230,179);
  color: rgb(0,101,46);
  border-color: rgb(209,230,179);
  transition: all 0.3s ease;
}
.button-6:focus {
  box-shadow: ;
}
.button-6:disabled {
  background-color: #F9FAFB;
  color: #B9B9B9;
  border-color: #F9FAFB;
  cursor: not-allowed;
  opacity: 0.4;
}
.button-6.disabled {
  pointer-events: none;
}