body {
  font-family: "Roboto", sans-serif;
  color: #434455; 
  background-color: #ffffff;
margin: 0;}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;

}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

address {
  font-style: normal;
}

button {
  cursor: pointer;
}

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

.container {
  width: 320px;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 auto;
}

/*-------наигация------*/
.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);
  background: #fff;
}

.header .container {
  display: flex;
   align-items: center;
  justify-content: space-between;}

  .nav-list, .contacts {
    display: none;
  }

.main-nav .logo {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.17;
  letter-spacing: 0.03em;
  text-transform: uppercase ;
  font-family: "Raleway", sans-serif;
  color: #4d5ae5;
}

.header-logo {padding: 16px 0;
display: block;}

.main-nav .logo .studio {
  color: #2e2f42;
}

.burger-btm {padding: 0;
border: none;
background-color: transparent;}

.icon-burger {display: block;
fill: #2f2f37;}

  .header { font-family: "Roboto", sans-serif;
  color: #2e2f42;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #e7e9fc;
  }

    /*------ mobile-menu------- */

        .mobile-menu {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #fff;
          
          opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms cubic-bezier(0.4, 0, 0.2, 1)
        }
 
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu>.container {align-items: flex-start;}

.mobile-menu-container {
  position: relative;
  padding-top: 72px;
  padding-bottom: 40px;
  flex-direction: column;
  height: 100%;
}

.mobile-close-btn {position: absolute;
top: 24px;
right: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: #e7e9fc;
  color: #2e2f42;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-close-btn:hover,
.mobile-close-btn:focus {background-color: #404bbf;
  border: none;
  }

.mobile-close-btn:hover .icon-close,
.mobile-close-btn:focus .icon-close {
    fill: #ffffff;
  }

  .mobile-menu-nav 

  .mobile-menu-list {display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: left;
    }

  .mobile-menu-text {font-weight: 700;
    font-size: 36px;
    line-height: 111%;
    letter-spacing: 0.02em;
    color: #2e2f42;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1)}

    .blue {
      color: #404bbf;
      transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-menu-text:hover,
        .mobile-menu-text:focus { color: #404bbf;}

        .mobile-contacts:hover,
        .mobile-contacts:focus {
          color: #404bbf;
        }

    .mobile-contacts-list {display: flex;
      gap: 24px;
    flex-direction: column;
  margin-bottom: 48px;}
    
    .mobile-address {
      transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: 500;
      font-size: 20px;
      line-height: 120%;
      letter-spacing: 0.02em;
      color: #434455;}

    .mobile-address:hover,
    .mobile-address:focus {
      color: #404bbf;
    }

   .mobile-icon-list{display: flex;
    justify-content: center;
    gap: 40px;
  }

.mobile-menu-nav {margin-bottom: auto;}

        @media screen and (min-width: 768px) {
          .mobile-menu {display: none;}
        }

  /*-------адаптив------*/

    @media screen and (min-width: 768px) {
.burger-btm {
display: none;
  }

.header-logo {padding: 24px 0;
margin-right: 120px;}

  .main-nav { display: flex;
  font-family: "Roboto", sans-serif;
  color: #2e2f42;
  align-items: center;}
   
.nav-list,
.contacts {
 gap: 40px;
    display: flex;
  align-items: center; }

  .contacts {display: block;
  font-style: normal;}
  
     .contacts:hover,
     .contacts:focus {
       color: #404bbf;
     }

   .contacts-list {display: flex; 
    flex-direction: column;
    gap: 12px;
    } 

  .address {display: block;
  line-height: 1.17;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.04em;
  color: #434455;
  font-size: 12px;
}

   .address:hover,
   .address:focus {
    color: #404bbf;
}

 .header:hover,
 .header:focus {
   color: #404bbf;}

.link {
  display: block;
  padding-top: 24px;
  padding-bottom: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #2e2f42;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1)
}

.main-nav .link:hover,
.main-nav .link:focus {
  color: #404bbf;
}

.blue {position: relative;
color: #404bbf;
transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

 .blue::after {
   content: "";
   position: absolute;
   bottom: -1px;
   left: 0;
   width: 100%;
   height: 4px;
   background-color: #404bbf;
   border-radius: 2px;
}}

  @media screen and (min-width: 1158px) {

    .header .container {margin: 0 auto;
    max-width: 1158px;}

.header-logo {
    margin-right: 76px;
  }

     .contacts-list {
      flex-direction: row;
       /* flex-direction: column; */
       gap: 40px;
     }

  .address {padding: 24px 0;
   font-weight: 400;
   font-size: 16px;
 line-height: 150%;
   letter-spacing: 0.02em;
        }
        }

/*-------главный блок перая секция------*/
  .main-section {background-color: #2e2f42;
 background-image: linear-gradient(rgba(46, 47, 66, 0.7),
 rgba(46, 47, 66, 0.7)),
  url(../images/people-office-mb.jpg);
  /* max-width: 768px; */
 background-repeat: no-repeat;
 background-position: center;
  background-size: cover;
 margin: 0 auto;
padding: 72px 0}

 @media screen and (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2) {
   .main-section {
     background-color: #2e2f42;
     background-image: linear-gradient(rgba(46, 47, 66, 0.7),
     rgba(46, 47, 66, 0.7)), url(../images/people-office-mb-x.jpg);
   }
 }

   .main-title {max-width: 216px;
    margin: 0 auto 72px auto;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    color: #fff;
    font-size: 36px;
    line-height: 111%;
   }

  .main-button {font-family: "Roboto", sans-serif;
    display: block;
    margin: 0 auto;
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.04em;
    color: #fff;
  background-color: #4D5AE5; 
  border: none; 
  border-radius: 4px;
  padding: 16px 32px;
min-width: 169px;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) }

  .main-button:hover,
  .main-button:focus {background-color: #404BBF;
  cursor: pointer;}

 @media screen and (min-width: 768px) {
 .main-section {
  background-image: linear-gradient(rgba(46, 47, 66, 0.7),
 rgba(46, 47, 66, 0.7)),
  url(../images/people-office-tab.jpg);
   /* max-width: 1158px; */
  padding: 112px 0 }
  
.main-title {max-width: 496px;
    margin: 0 auto 36px auto;
  font-size: 56px;
  line-height: 107%;
}

 @media screen and (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2) {
  .main-section {background-color: #2e2f42; 
  background-image: linear-gradient( 
    rgba(46, 47, 66, 0.7),
     rgba(46, 47, 66, 0.7)),
  url(../images/people-office-tab-x.jpg);}
 }
}

 @media screen and (min-width: 1158px) {
   
  .main-section {
      background-color: #2e2f42;
   background-image: linear-gradient(rgba(46, 47, 66, 0.7),
    rgba(46, 47, 66, 0.7)),
   url(../images/people-office.jpg);
   max-width: 1440px;
    padding: 188px 0
   }
  
 @media screen and (min-resolution: 2x), (-webkit-min-device-pixel-ratio: 2) {
.main-section {
 background-color: #2e2f42;
 background-image: linear-gradient(rgba(46, 47, 66, 0.7),
  rgba(46, 47, 66, 0.7)),
  url(../images/people-office-x.jpg);
          }
        }
    .main-title {
      margin: 0 auto 48px auto;}
    }

    /*-------вторая секция------*/

    .main-section-feature {
      padding-top: 96px;
      padding-bottom: 96px;
    }

       .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;}

    .main-feature-list {display: flex;
      flex-wrap: wrap;
      gap: 72px;}

      .main-list { width: 100%;
        /* width: calc((100% - 72px) / 4); */
      }

    .icon-strategy {display: none;}

    .main-feature-subtitle  {font-weight: 700;
      font-size: 36px;
      line-height: 111%;
      letter-spacing: 0.02em;
      text-align: center;
      color: #2e2f42;
      margin-bottom: 8px;}

   .main-feature-lead {font-weight: 500;
        font-size: 16px;
        line-height: 150%;
        letter-spacing: 0.02em;
        color: #434455;}

      /*-------третья секция------*/
    .main-section-team {background-color: #f4f4fd;
      padding-top: 96px;
      padding-bottom: 96px;
    min-width: 288px;}

      .main-team {font-weight: 700;
        font-size: 36px;
        line-height: 1.11;
          margin-bottom: 72px;
          letter-spacing: 0.02em;
          text-align: center;
          text-transform: capitalize;
          color: #2e2f42;
        }
          
.list {width: 100%;
  display: flex;
  gap: 72px;
  flex-wrap: wrap;
  justify-content: center;
 }

.main-team-list {background-color: #FFFFFF;
        border-radius: 0 0 4px 4px;
        /* width: calc((100% - 3 * 24px) / 4); */
      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-card {
       padding: 32px 0;
            }

      .main-team-subtitle {font-weight: 500;
        font-size: 20px;
        line-height: 120%;
        letter-spacing: 0.02em;
        text-align: center;
        color: #2e2f42;
        margin-bottom: 8px;}

        .main-team-lead { font-weight: 400;
          font-size: 16px;
          line-height: 150%;
          letter-spacing: 0.02em;
          text-align: center;
          color: #434455;
        margin-bottom: 8px}

    .main-section-team .icon-list {display: flex;
    gap: 24px;
    list-style: none;
      margin: 0;
      padding: 0;
  justify-content: center;
    align-items: center;}

      .main-icon-item {
      width: 40px;
      height: 40px;
    }

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

    .social-icon:hover,
    .social-icon:focus {background-color: #404bbf; }

      .icons-social {fill: #f4f4fd; }

      /*-------четвертая секция------*/

   .main-portfolio {padding-top: 96px;
        padding-bottom: 96px;
      min-width: 288px;}

   .main-portfolio-title {font-size: 36px;
      font-weight: 700;
            line-height: 111%;
            letter-spacing: 0.02em;
            text-align: center;
            color: #2e2f42;
            text-transform: capitalize;
          margin-bottom: 72px;}

    .main-portfolio-listing {width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 48px;
      /* row-gap: 48px; */
     }

  .main-portfolio-list {transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
    /* width: calc((100% - 48px) / 3); */
  } 

     .main-portfolio-list:hover { 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);
      background: #fff;
    }
    
      .main-portfolio-list:hover .portfolio-desc {
     transform: translateY(0%);}

     .image-container {position: relative;
      overflow: hidden;}

  .applications {padding: 32px 16px;
     border: 1px solid #e7e9fc;
  border-top: none;
position: relative;
overflow: hidden;
box-shadow: 0 1px 6px 0 rgba(46, 47, 66, 0.08);} 

  .main-portfolio-subtitle {font-weight: 500;
            font-size: 20px;
            line-height: 120%;
            letter-spacing: 0.02em;
            color: #2e2f42;
            margin-bottom: 8px;}

            :root {
  --text-light: #f4f4fd;
}

.portfolio-desc {
  position: absolute;
  top: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-light);
  padding: 40px 32px;
  background-color: #4d5ae5;
  height: 100%;
  width: 100%;
  transform: translateY(100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.main-portfolio-desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.02em;
    color: #434455;
  }

.main-portfolio-list:hover .portfolio-desc {
  transform: translateY(0%);}


    /*-------футер------*/

      .footer { background-color: #2e2f42;
        padding-top: 96px;
        padding-bottom: 96px;
    }

.footer-up { display: flex;
flex-direction: column;
  gap: 16px;
}

.footer-text {
/* margin-bottom: 16px; */
font-weight: 500;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.02em;
color: #ffffff;
text-align: center;
}

.footer-form {display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}


.modal-input-footer {width: 288px;
height: 40px;
border: 1px solid #fff;
background-color: transparent;
font-size: 12px;
line-height: 2;
letter-spacing: 0.04em;
padding-left: 16px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
border-radius: 4px;
color: #fff;
/* margin-bottom: 16px; */
}

.modal-input-footer::placeholder {color: #ffffff;}

.footer-submit-btn {
  min-width: 165px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #ffffff;
  cursor: pointer;
  background-color: #4D5AE5;
  border: none;
  border-radius: 4px;
}

.footer-submit-icon {
  margin-left: 16px;
  fill: #ffffff;
}

        .footer-decor { display: flex;
          flex-direction: column;
          margin-bottom: 72px;
        }

      .footer-logo {
        margin-bottom: 16px;
        font-weight: 700;
          font-size: 18px;
          line-height: 1.17;
          letter-spacing: 0.03em;
          text-transform: uppercase;
          font-family: "Raleway", sans-serif;
          color: #4d5ae5;
          text-align: center;
      }

       .footer-logo .footer-studio {
         color: #f4f4fd;
         text-align: center;
        }

    .footer-lead {max-width: 288px;
      font-weight: 400;
      font-size: 16px;
      line-height: 150%;
      letter-spacing: 0.02em;
      color: #f4f4fd;
      /* margin-bottom: 72px; */
    }
 
      .footer-contacts {
        gap: 40px;
      }

     .social-media {font-weight: 500;
      text-align: center;
    font-size: 16px;
  line-height: 1.5;
letter-spacing: 0.02em;
color: #FFFFFF;
margin-bottom: 16px;}

      .icon-list {display: flex;
      justify-content: center;
        gap: 16px;
        margin-bottom: 72px;
}
      
      .footer-icon-item {width: 40px;
      height: 40px;
    }

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

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


    /*-------модальное окно------*/

    .backdrop {position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(46, 47, 66, 0.4);
      z-index: 10;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms cubic-bezier(0.4, 0, 0.2, 1)
    }

    .is-open {opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .modal {width: 288px;
      min-height: 623px;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 1px 0 rgba(0, 0, 0, 0.2);
background: #fcfcfc;
      border-radius: 4px;
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 72px 16px 24px 16px;
      transform: translate(-50%, -50%);
      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
      }

      .modal-close-btn {position: absolute;
        top: 24px;
        right: 24px;
        width: 24px;
        height: 24px;
        padding: 0;
        background-color: #e7e9fc;
        color: #2e2f42;
        cursor: pointer;
        border-radius: 50%;
        border: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border 250ms cubic-bezier(0.4, 0, 0.2, 1);
      }

      .modal-close-btn:hover,
      .modal-close-btn:focus {background-color: #404bbf;
        border: none;
        }

       .modal-close-btn:hover .icon-close,
       .modal-close-btn:focus .icon-close {
       fill: #ffffff;}

      .icon-close {
     
        fill: #2e2f42;
        position: absolute;
        stroke: #2e2f42;
transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
      }

      .icon-close:hover,
      .icon-close:focus {fill: #f4f4fd;}
      
      .modal-title {font-weight: 500;
        font-size: 16px;
        line-height: 150%;
        letter-spacing: 0.02em;
        text-align: center;
        color: #2e2f42;
        margin-bottom: 16px;
      }

      .modal-input {width: 100%;
     border: 1px solid rgba(46, 47, 66, 0.4);
border-radius: 4px;
width: 256px;
height: 40px;
padding-left: 38px;
padding-right: 16px;
outline: transparent;
transition: 0.3s border-color ease-in-out;
background-color: transparent;
transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-input:focus {border: 1px solid #4d5ae5;}

.modal-input:focus + .input-icon {stroke: #404bbf;
  fill: #4D5AE5;}

.modal-label {
  display: block;
  font-size: 12px;
  line-height: 117%;
  letter-spacing: 0.04em;
  color: #8e8f99;
  margin-bottom: 4px;}

  .modal-icon {margin-bottom: 8px;}

  .input-icon {left: 16px;
    top: 50%;
    transform: translateY(-50%);
    fill: #2e2f42;
    position: absolute;
      stroke: #2e2f42;
      transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);    
  }

.user-icon { position: relative;
  
}

.modal-textarea {width: 100%;
  background-color: transparent;
  border: 1px solid rgba(46, 47, 66, 0.4);
  border-radius: 4px;
  width: 256px;
  height: 120px;
  padding: 8px 16px;
  outline: transparent;
  transition: 0.3s border-color ease-in-out;
resize: none;
font-size: 12px;
line-height: 1.17;
letter-spacing: 0.04em;
color: rgba(46, 47, 66, 0.4);
transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);}

.modal-textarea:focus {border-color:#4d5ae5;}

.modal-icon-checkbox {margin-bottom: 24px;}

.modal-label-checkbox {font-size: 12px;
  line-height: 117%;
  letter-spacing: 0.04em;
  color: #8e8f99;
  align-items: center;
  display: flex;
}

.modal-label-checkbox a {line-height: 133%;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  color: #4d5ae5;}

  .modal-label-box {
    display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 2px;
      fill: transparent;
      background-color: transparent;
      transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border 250ms cubic-bezier(0.4, 0, 0.2, 1), fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid rgba(46, 47, 66, 0.4);
      margin-right: 8px;
    flex-shrink: 0;}

    .modal-checkbox:checked+.modal-label-checkbox .modal-label-box {
      fill: #f4f4fd;
      background-color: #404bbf;
      border: none;
     }

:root {
  --text-light: #f4f4fd;
  --link-color: #4d5ae5;
}

.modal-text {
  color: var(--link-color);
line-height: 133%;
  text-decoration: underline;
  text-decoration-skip-ink: none;}

.modal-button {border: none; 
  position: relative;
    left: auto;
    transform: none;
    margin: 24px auto 0 auto;
  display: block;
  min-width: 169px;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
background-color: #4d5ae5;
border-radius: 4px;
  padding: 16px 32px;
  width: 169px;
  height: 56px;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
 }

 .modal-button:hover,
 .modal-button:focus {
   background-color: #404bbf;}

 .checkbox-container {margin-bottom: 16px}

@media screen and (min-width: 768px) {

 .modal {
  width: 408px;
  min-height: 584px;
  padding: 72px 24px 24px 24px;}

 .modal-input,
 .modal-textarea {
   width: 360px;
 }

 .modal-label-checkbox span br {
   display: none;
 }

 .modal-label-checkbox {
   align-items: center;
 }

 .modal-label-checkbox .modal-label-box {
   margin-top: 0;
 }

 .modal-label-box {flex-shrink: 0}
}
/*-------адаптив------*/

@media screen and (min-width: 768px) {

  /*-------секция 2------*/
  .container {
    width: 768px;
  }

    /* .main-section-feature>.container {
        width: 736px;} */

  /* .main-section-feature .container {
   border: none;
   box-shadow: none;
    } */

  .main-section-feature {
    min-width: 736px;
  }

  .main-feature-list {
    gap: 32px;
    row-gap: 72px;
  }

  .main-list {
    width: calc((100% - 32px) / 2);
  }

  .main-feature-subtitle {
    text-align: left;
  }

  /*-------секция 3------*/

     .main-section-team {
      min-width: 768px;
    } 
  
    .list {
      display: flex;
      gap: 24px;
      row-gap: 64px;
    }

    /*-------секция 4------*/
  .main-portfolio {
 min-width: 768px;
  }

    .main-portfolio>.container {
      width: 736px;
      padding-left: 0;
      padding-right: 0;
    }
      
  .main-portfolio-listing {
   gap: 24px;
   row-gap: 72px;
     }

 .main-portfolio-list {
   width: calc((100% - 24px) / 2);
 }
/*------- футер------*/

.footer .container {display: flex;
  flex-wrap: wrap;
  row-gap: 72px;
  column-gap: 24px;
  padding: 0 108px;}

    .footer-decor {margin-bottom: 0;}

  .icon-list {margin-bottom: 0;
    }

  .footer-form {flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    
    }

  .modal-input-footer {width: 264px;
    margin-bottom: 0;
    }

  .footer-text {text-align: left;
    }

  .footer-logo {text-align: left;}

  .social-media {text-align: left;
    }
  }
/*------ дисплей------*/

/*-------секция 2------*/
@media  screen and (min-width: 1158px) {
  .container {max-width: 1440px;}

   .container, .main-section-feature>.container {
   width: 1158px;
   max-width: 1440px;
    padding-left: 15px;
  padding-right: 15px;
}

  .main-section-feature {
   padding-top: 120px;
   padding-bottom: 120px;}
          
   .main-feature-list {display: flex;
    flex-direction: row;
      flex-wrap: nowrap;
    gap: 24px;}
          
   .main-list { width: calc((100% - 72px) / 4);}
          
   .icon-strategy {margin-bottom: 8px;
    width: 264px;
    height: 112px;
     background-color: #f4f4fd;
    border-radius: 4px;
  border: 1px solid #8e8f99;
     display: flex;
     justify-content: center;
     align-items: center;
       }

   .main-feature-subtitle 
    {font-weight: 500;
     font-size: 20px;
       line-height: 120%;
        letter-spacing: 0.02em;
       color: #2e2f42;
        margin-bottom: 8px;}
          
     .main-feature-lead {font-weight: 400;
     font-size: 16px;
       line-height: 150%;
        letter-spacing: 0.02em;
         color: #434455;}
            

     /*-------секция 3------*/

    .main-section-team {
      padding-top: 120px;
      padding-bottom: 120px;
    }

    .list {display: flex;
      flex-direction: row;
      flex-wrap: nowrap;}

      

    /*-------секция 4------*/

   .main-portfolio {
    padding-top: 120px;
     padding-bottom: 120px;
    min-width: 1158px;
         }

    .main-portfolio>.container {
      width: 1158px;
      padding-left: 15px;
      padding-right: 15px;
    }
    
   .main-portfolio-listing {
    gap: 24px;
     row-gap: 48px;
         }
    
  .main-portfolio-list {
   transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
   width: calc((100% - 48px) / 3);
    }

   .applications {box-shadow: none}

/*-------футер------*/

  .footer {
  padding-top: 100px;
     padding-bottom: 100px;
    }
      
  .footer .container {
  display: flex;
  align-items: baseline;
  column-gap: 0;
min-width: 1158px;
  margin: 0 auto;
  padding: 0 15px;
  }
  
    .footer-text {text-align: left;}

   .footer-form {
    flex-direction: row;
     align-items: flex-start;
     gap: 24px;
            }
      
      
    .modal-input-footer {
   width: 264px; 
     }
      
      
 .footer-decor {
  align-items: flex-start;
     margin-right: 120px
   }
      
 .footer-logo {
   display: inline-block;
    }
      
  .footer-lead {
   max-width: 264px;
    margin-bottom: 0;
   }
      
   .social-media {
   text-align: left;
   }

.footer-contacts {margin-right: 80px;}
      
   .icon-list {
  justify-content: flex-start;
            }
      
  }