:root {
  --primary-title-color: #ffffff;
  --secondary-title-color: #212121;
  --secondary-text-color: #757575;
  --accent-color: #2196f3;
}

body {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.03em;
}

.link {
  text-decoration: none;
}

.list {
  list-style: none;
}

.logo {
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  font-size: 26px;
  line-height: 1.19;
  color: #000;
}

.footer-logo {
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  font-size: 26px;
  line-height: 1.19;
  color: #fff;
}

.link-span {
  font-family: Raleway;
  font-style: normal;
  font-weight: bold;
  font-size: 26px;
  line-height: 1.19;
  color: var(--accent-color);
}

/* Header */

.header-link {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.02em;
  color: var(--secondary-title-color);
}

.header-link.active {
  color: var(--accent-color);
}

.header-link:hover {
  color: var(--accent-color);
}

.header-email-link {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.02em;
  color: var(--secondary-text-color);
}

.header-email-link:hover {
  color: var(--accent-color);
}

.header-tel-link {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.02em;
  color: var(--secondary-text-color);
}

.header-tel-link:hover {
  color: var(--accent-color);
}

/* First Section */

.first-section {
  background-color: #2f303a;
}

.first-title {
  font-weight: 900;
  font-size: 44px;
  line-height: 1.36;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-title-color);
}

.first-section-btn {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.87;
  text-align: center;
  letter-spacing: 0.06em;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--accent-color);
  color: var(--primary-title-color);
}

/* Benefits Section */

.benefits-list-title {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--secondary-title-color);
}

.benefits-list-description {
  font-weight: normal;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0.03em;
  color: var(--secondary-text-color);
}

/* What we do section */

.wwd-title {
  font-weight: bold;
  font-size: 36px;
  line-height: 1.16;
  letter-spacing: 0.03em;
  color: var(--secondary-title-color);
}

/* Our team section */

.team-section {
  background-color: #f5f4fa;
}

.team-title {
  font-weight: bold;
  font-size: 36px;
  line-height: 1.16;
  letter-spacing: 0.03em;
  color: var(--secondary-title-color);
}

.team-list-item {
  background: #ffffff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.14),
    0px 2px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 4px 4px;
}

.team-list-item-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.18;
  text-align: center;
  letter-spacing: 0.03em;
  color: var(--secondary-title-color);
}

.team-list-item-text {
  font-weight: normal;
  font-size: 16px;
  line-height: 1.18;
  text-align: center;
  letter-spacing: 0.03em;
  color: var(--secondary-text-color);
}

/* Footer */

.footer {
  background-color: #2f303a;
}

.footer-address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0.03em;
  color: var(--primary-title-color);
}

.footer-email-link {
  font-weight: normal;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0.03em;
  color: var(--primary-title-color);
  opacity: 0.6;
}

.footer-tel-link {
  font-weight: normal;
  font-size: 14px;
  line-height: 1.71;
  letter-spacing: 0.03em;
  color: var(--primary-title-color);
  opacity: 0.6;
}

/* Portfolio */
/* Filter */

.filter-link {
  background-color: var(--filter-btn);
  border-radius: 4px;
  padding: 6px 22px;
  color: var(--secondary-title-color);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.62;
  text-align: center;
  letter-spacing: 0.03em;
}

.filter-link:hover {
  background-color: var(--accent-color);
  color: var(--primary-title-color);
}

.filter-link.active {
  background-color: var(--accent-color);
  color: var(--primary-title-color);
}

/* Product */

.product-item {
  background: #ffffff;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
}

.product-title {
  font-weight: bold;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--secondary-title-color);
}

.product-description {
  font-weight: normal;
  font-size: 16px;
  line-height: 1.87;
  letter-spacing: 0.03em;
  color: var(--secondary-text-color);
}