body {
      font-family: "Roboto", sans-serif;
      color: #434455;
      background-color: #fff;
    }
  
    .container {
      max-width: 1158px;
      padding-left: 15px;
      padding-right: 15px;
      margin: 0 auto;
    }
  
    section {
      padding: 120px 0;
    }
  
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      border: 0;
      padding: 0;
      white-space: nowrap;
      clip-path: inset(100%);
      clip: rect(0 0 0 0);
      overflow: hidden;
    }
  
    ul,
    ol {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: 0;
    }
  
    a {
      text-decoration: none;
    }
  
    .page-header {
      border-bottom: 1px solid #e7e9fc;
      box-shadow: 0 1px 6px 0 rgba(46, 47, 66, 0.08), 0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 2px 1px 0 rgba(46, 47, 66, 0.08);
    }

    .nav-link.current::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      background-color: #404BBF;
      width: 100%;
      height: 4px;
      border-radius: 2px;
    }

    .header-container {
      display: flex;
      align-items: center;
    }

    .nav-link.current {
      position: relative;
    }
  
    .header-nav {
      display: flex;
      align-items: center;
    }
  
    .nav-list {
      display: flex;
      align-items: center;
      gap: 40px;
    }
  
  
    .logo {
      font-family: "Raleway", sans-serif;
      font-weight: 700;
      font-size: 18px;
      line-height: 1.17;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #4d5ae5;
    }
  
    .header-logo {
      padding: 24px 0;
      margin-right: 76px;
    }
  
    .header-logo .logo-part {
      color: #2e2f42;
    }
  
    .nav-link {
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #2e2f42;
      padding: 24px 0;
      display: block;
      transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  
    .contacts {
      font-style: normal;
      margin-left: auto;
    }
  
    .contacts-list {
      display: flex;
      align-items: center;
      gap: 40px;
    }
  
    .contacts-link {
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #434455;
      display: block;
      padding: 24px 0;
      transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  
    .nav-link:hover,
    .nav-link:focus,
    .contacts-link:hover,
    .contacts-link:focus,
    .nav-link.current {
      color: #404bbf;
    }
  
    .main-section {
      background-color: #2e2f42;
      display: flex;
      padding: 188px 0;
      background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), 
      url(../images/people-office.jpg); 
      max-width: 1440px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      margin: 0 auto;
    }
  
    .main-title-one {
      font-weight: 700;
      font-size: 56px;
      line-height: 1.07;
      letter-spacing: 0.02em;
      text-align: center;
      color: #fff;
      max-width: 496px;
      margin-bottom: 48px;
    }
  
    .button-title-one {
      font-family: "Roboto", sans-serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.04em;
      color: #fff;
      cursor: pointer;
      border: none;
      background-color: #4d5ae5;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      min-width: 169px;
      height: 56px;
      display: block;
      margin: 0px auto;
      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  
    .button-title-one:hover,
    .button-title-one:focus,
    .team-media-link:hover,
    .team-media-link:focus {
      background-color: #404bbf;
    }
  
    .section-features {
      padding: 120px 0;
    }
  
    .features-list {
      display: flex;
      gap: 24px;
    }
  
    .features-item {
      width: calc((100% - 72px) / 4);
    }

    .mark {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 112px;
      background-color: #f4f4fd;
      border-radius: 4px;
      border: 1px solid #8e8f99;
      margin-bottom: 8px;

    }
  
    .features-title-three {
      font-weight: 500;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: 0.02em;
      color: #2e2f42;
      margin-bottom: 8px;
    }
  
    .paragraph-features {
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.02em;
    }
  
    .images-team {
      display: block;
    }
  
    .section-team {
      background-color: #f4f4fd;
      padding: 120px 0;
    }
  
    .team-list {
      display: flex;
      gap: 24px;
    }
  
    .team-item {
      background-color: #FFFFFF;
      width: calc((100% - 72px) / 4);
      border-radius: 0 0 4px 4px;
      box-shadow: 0 2px 1px 0 rgba(46, 47, 66, 0.08), 0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 1px 6px 0 rgba(46, 47, 66, 0.08);
    }
  
    .team-title-two {
      text-transform: capitalize;
      font-size: 36px;
      line-height: 1.11;
      letter-spacing: 0.02em;
      text-align: center;
      color: #2e2f42;
      margin-bottom: 72px;
    }
  
    .team-title-three {
      font-weight: 500;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: 0.02em;
      text-align: center;
      color: #2e2f42;
      margin-bottom: 8px;
    }
  
    .description-team {
      padding: 32px 0;
    }
  
    .paragraph-team {
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-align: center;
      margin-bottom: 8px;
    }

    .team-media-images,
    .footer-images {
      fill: #f4f4fd;
    }

    .team-list-media {
      display: flex;
      justify-content: center;
      gap: 24px;
    }

    .team-media-link {
      width: 100%;
      height: 100%;
      background-color: #4d5ae5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .team-media {
      width: 40px;
      height: 40px;
    }
  
    .images-portfolio {
      display: block;
    }
  
    .portfolio-section {
      padding-top: 120px;
      padding-bottom: 120px;
    }
  
    .portfolio-list {
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      row-gap: 48px;
      column-gap: 24px;
     }
    .portfolio-item {
      background: #fff;
      width: calc((100% - 48px) / 3);
      transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .portfolio-item:hover {
      box-shadow: 0px 1px 6px rgba(46, 47, 66, 0.08), 0px 1px 1px rgba(46, 47, 66, 0.16), 0px 2px 1px rgba(46, 47, 66, 0.08);
    }
  
    .description-portfolio {
      border: 1px solid #e7e9fc;
      padding: 32px 16px;
      border-top: none;
    }
  
    .portfolio-title-two {
      text-transform: capitalize;
      font-size: 36px;
      line-height: 1.11;
      letter-spacing: 0.02em;
      text-align: center;
      color: #2e2f42;
      margin-bottom: 72px;
    }
  
    .portfolio-title-three {
      font-weight: 500;
      font-size: 20px;
      line-height: 1.2;
      letter-spacing: 0.02em;
      color: #2e2f42;
      margin-bottom: 8px;
    }
    
    .paragraph-portfolio {
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.02em;
  
    }
  
    .box {
      position: relative;
      overflow: hidden;
    }
  
    .overlay {
      position: absolute;
      top: 0;
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #f4f4fd;
      padding: 40px 32px;
      width: 100%;
      height: 100%;
      background-color: #4d5ae5;
      transform: translateY(100%);
      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  
    .portfolio-item:hover .overlay {
      transform: translateY(0%);
    }
  
    .page-footer {
      background-color: #2e2f42;
      padding: 100px 0;
    }
  
  
    .footer-logo .logo-part {
      color: #f4f4fd;
    }
  
  
    .footer-logo {
      display: inline-block;
      margin-bottom: 16px;
    }
  
    .paragraph-footer {
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #f4f4fd;
      width: 264px;
    }

    .footer-container {
      display: flex;
      align-items: baseline;
    }

    .box-footer {
      margin-right: 120px;
    }

    .paragraph-footer-two {
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: #FFFFFF;
      margin-bottom: 16px;
    }

    .footer-list-media {
      display: flex;
      gap: 16px;
    }

    .footer-item {
      width: 40px;
      height: 40px;
    }

    .footer-link {
      width: 100%;
      height: 100%;
      background-color: #4d5ae5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .footer-link:hover,
    .footer-link:focus {
      background-color: #31d0aa;
    }