@import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');

:root {
  --white: #fff;
  --black: #202020;

  --body-color: #939393;

  --accent-color: #B8E986;
  --accent-color-dark: #83c93e;

  --hero-title-color: var(--white);
  --hero-paragraph-color: var(--white);

  --hero-btn-accent: var(--white);
  --hero-btn-color: var(--white);
  --hero-btn-color-hover: var(--black);

  --section-title-color: var(--accent-color);

  --btn-bg: var(--accent-color);
  --btn-color: var(--white);
  --btn-bg-hover: var(--accent-color-dark);
  --btn-color-hover: var(--white);

  --form-link-color: var(--accent-color);
  --form-link-color-hover: var(--accent-color-dark);

  --footer-bg: #333;
  --footer-text-color: inherit;
  --footer-link-color: var(--white);
  --footer-link-color-hover: var(--accent-color);

  --doc-title-color: var(--accent-color);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 16px;
  color: var(--body-color);
}

a {
  color: var(--accent-color);
}

a:hover {
  color: var(--accent-color-dark);
}

h2 {
  font-size: 4.5rem;
  color: var(--hero-title-color);
  line-height: 1;
  font-weight: 700;
}

h3 {
  font-size: 2.5rem;
  color: var(--section-title-color);
}

h4 {
  font-size: 1.5rem;
  color: var(--section-title-color);
}

section {
  padding: 100px 0;
}

section img {
  width: 100%;
}

.btn-hero {
  padding: 8px 20px;
  color: var(--hero-btn-color);
  border: 3px solid var(--hero-btn-accent);
  transition: all 0.2s ease-in-out;
}

.btn-hero:hover {
  background-color: var(--hero-btn-accent);
  color: var(--hero-btn-color-hover);
}

.section-1 {
  padding: 200px 0 100px;
  background-image: url(../img/1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.section-1 .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 60%;
  text-align: center;
}

.section-1 p {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.8);
}

.section-2 .icon {
  width: 60px;
}

.section-4 h3,
.section-5 h3 {
  text-align: center;
}

.section-4 h4 {
  font-size: 2rem;
}

@media screen and (max-width: 768px) {
  section {
    padding: 80px 0;
  }

  h2 {
    font-size: 3rem;
  }

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.2rem;
  }

  .section-1 .container {
    max-width: unset;
  }

  .section-4 h4 {
    font-size: 1.5rem;
  }

  .section-1 p {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 576px) {
  section {
    padding: 60px 0;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.8rem;
  }

  h4 {
    font-size: 1.2rem;
  }

  .section-4 h4 {
    font-size: 1.4rem;
  }

  .section-1 p {
    font-size: 1.1rem;
  }
}