/* Reset css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography */
body {
  /* font-family: "AmpleSoft", sans-serif; */
  font-family: "Montserrat", sans-serif;
  font-weight: 400; /* AmpleSoft Regular */
}

p,
a,
li,
span {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  margin-bottom: 1rem;
}

h1 {
  font-weight: 600; /* AmpleSoft Bold */
}

h2 {
  font-size: 40px;
  font-weight: 600; /* AmpleSoft Bold */
}

h3 {
  font-weight: 500; /* AmpleSoft Medium */
}

h4 {
  font-weight: 500; /* AmpleSoft Medium */
}

h5 {
  font-weight: 400; /* AmpleSoft Regular */
}

h6 {
  font-weight: 300; /* AmpleSoft Light */
}

strong,
span,
b {
  font-weight: 700; /* AmpleSoft Bold */
}

:root {
  --gray-bg: #eaeaea;
  --white-bg: #fff;
}

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 4rem 1rem 4rem 1rem;
}

@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (max-width: 1024px) {
  .container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}