:root {
  --color-primary: #0077b6;
  --color-text: #0d0300;
  --color-white: #ffffff;
  --color-bg-light: #e5f1f7;
  --color-bg-grey: #f2f2f2;
  --font-heading: 'Urbanist', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
}

p {
  margin: 0;
}

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

.container {
  width: 100%;
  max-width: 1408px; /* 1280px content + 64px padding on each side */
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 24px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0px 1px 2px 0px rgba(13, 3, 0, 0.05), inset 0px -2px 1px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 0px 1px rgba(13, 3, 0, 0.15), inset 0px 2px 1px 0px rgba(255, 255, 255, 0.25), inset 0px 32px 24px 0px rgba(255, 255, 255, 0.05);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  opacity: 0.9;
}

.btn--secondary {
  background-color: var(--color-bg-grey);
  color: var(--color-text);
}

.btn--secondary-outline {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
    box-shadow: 0px 1px 2px 0px rgba(13, 3, 0, 0.05), inset 0px -2px 1px 0px rgba(13, 3, 0, 0.05), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}

.section {
  padding-top: 112px;
  padding-bottom: 112px;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }
  .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (max-width: 768px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.container {
  width: 100%;
  padding: 0 20px;
}

/* Only box it on large desktop screens */
@media screen and (min-width: 1440px) {
  .container {
    max-width: 1650px;
    margin: 0 auto;
  }
}