:root {
  --color-primary: #0066CC;
  --color-primary-dark: #004D99;
  --color-primary-active-dark: #133062;
  --color-primary-light: #06C;
  --color-text-dark: #4D4B46;
  --color-text-white: #FFFFFF;
  --color-accent: #9C44C0;
  --corner-lg: 32px;
  --text-heading: var(--color-primary-light);
  --button-primary: var(--color-primary-light); }

@font-face {
  font-family: UnileverDesire;
  src: url("../fonts/UnileverDesire-Regular.woff") format("woff"); }
@font-face {
  font-family: UnileverDesireBold;
  src: url("../fonts/UnileverDesire-Bold.woff") format("woff"); }
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; }

.content-width {
  max-width: 90ch;
  margin: 0 auto;
  padding-top: 2rem; }

.content-width h1,
.content-width p,
.content-width ul {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 60px; }

.content-width h1 {
  margin-bottom: 28px;
  text-align: left; }

html {
  scroll-behavior: smooth; }

body {
  font-family: UnileverDesire; }

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

a:hover,
a:focus {
  text-decoration: none; }

header {
  color: var(--color-text-white);
  background: url(../images/header-bg.png) 70% 100%/cover no-repeat;
  padding-bottom: 100px; }
  @media screen and (min-width: 1024px) {
    header {
      background: url(../images/big-icons.png) 100% 0/contain no-repeat, url(../images/header-bg.png) 50% 100%/cover no-repeat; } }
  header .button {
    margin-bottom: 0; }
  header .logo-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto; }
    header .logo-wrapper img {
      width: 150px;
      margin: 30px; }
      @media screen and (min-width: 562px) {
        header .logo-wrapper img {
          width: 170px; } }
      @media screen and (min-width: 768px) {
        header .logo-wrapper img {
          width: 220px; } }
      header .logo-wrapper img.ptp {
        max-width: 80px; }
        @media screen and (min-width: 768px) {
          header .logo-wrapper img.ptp {
            max-width: 110px; } }
  header .header-wrapper {
    padding: 0 30px; }
    @media screen and (min-width: 1024px) {
      header .header-wrapper {
        padding: 0 550px 5vw 30px;
        max-width: 1200px;
        margin: 0 auto; } }

main {
  color: var(--color-text-dark); }

.article-wrapper {
  background: #F6F7F0;
  padding: 3rem 30px; }
  @media screen and (min-width: 768px) {
    .article-wrapper {
      padding: 4rem 30px; } }
  .article-wrapper:nth-child(odd) {
    background-color: white; }

article {
  max-width: 90ch;
  margin: 0 auto; }
  article img {
    margin: 2rem 0; }

h1, h2, h3 {
  font-family: UnileverDesireBold; }

h1 {
  font-size: 2.5rem;
  line-height: 1.1;
  margin-bottom: 2rem;
  letter-spacing: -0.1rem; }
  @media screen and (min-width: 562px) {
    h1 {
      font-size: 3rem; } }
  @media screen and (min-width: 768px) {
    h1 {
      font-size: 4.5rem; } }

p,
ul {
  line-height: 1.6;
  margin-bottom: 1.4rem; }
  @media screen and (min-width: 562px) {
    p,
    ul {
      font-size: 1rem; } }
  @media screen and (min-width: 768px) {
    p,
    ul {
      font-size: 1.15rem; } }
  p.lead,
  ul.lead {
    font-size: 120%; }

h2 {
  color: var(--color-primary);
  margin: 0 0 0.85rem;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.03rem;
  padding-top: 20px; }
  @media screen and (min-width: 562px) {
    h2 {
      font-size: 2rem; } }
  @media screen and (min-width: 768px) {
    h2 {
      font-size: 2.4rem; } }

h3 {
  font-family: UnileverDesireBold;
  background-color: #8652DF;
  margin: 1.6rem 0 1rem;
  font-size: 1.2rem;
  color: white;
  line-height: 1.15;
  letter-spacing: -0.02rem;
  padding: 5px; }
  @media screen and (min-width: 562px) {
    h3 {
      font-size: 1.3rem; } }
  @media screen and (min-width: 768px) {
    h3 {
      font-size: 1.4rem;
      margin: 2.2rem 0 0.8rem; } }

ul {
  list-style: none;
  padding-left: 1rem;
  margin-bottom: 2.2rem; }
  ul li {
    margin-bottom: 12px; }
    ul li:before {
      content: "";
      width: 6px;
      height: 6px;
      aspect-ratio: 1/1;
      background-color: var(--text-heading);
      border-radius: 50%;
      display: inline-block;
      margin-right: 0.5rem;
      margin-left: -1rem;
      vertical-align: middle; }

.button {
  background: #8652DF;
  padding: 15px 25px;
  line-height: 1.1;
  color: white;
  font-family: UnileverDesireBold;
  border-radius: 1000px;
  display: inline-block;
  text-decoration: none;
  font-size: 17px;
  margin-bottom: 16px; }
  .button:hover, .button:focus {
    background-color: #5E24C1; }
  @media screen and (min-width: 768px) {
    .button {
      font-size: 19px; } }
  .button.arrow {
    background: url(../images/arrow-down.png) 19px 15px/20px 20px no-repeat #8652DF;
    padding-left: 50px; }
    .button.arrow:hover, .button.arrow:focus {
      background-color: #5E24C1; }
  .button.small {
    font-size: 15px;
    background: transparent;
    color: #8652DF;
    border: 2px solid #8652DF;
    margin-bottom: 0; }
    .button.small:hover, .button.small:focus {
      border-color: #5E24C1;
      background-color: transparent; }
    .button.small.arrow {
      background: url(../images/arrow-up.png) 19px 15px/20px 20px no-repeat transparent;
      padding-left: 50px; }
      .button.small.arrow:hover, .button.small.arrow:focus {
        background-color: transparent; }

footer {
  background: url(../images/footer.jpg) 50% 50%/cover no-repeat;
  text-align: center;
  padding: 30px; }
  footer img {
    max-width: 100px; }
    @media screen and (min-width: 768px) {
      footer img {
        max-width: 200px; } }

/*# sourceMappingURL=styles.css.map */