body {   
    font-family: 'Roboto', sans-serif;
    color: #434455;
    background-color : #FFFFFF
}
.header {
    border-bottom: 1px solid #e7e9fc;
    box-shadow: 0px 2px 1px rgba(46, 47, 66, 0.08), 0px 1px 1px rgba(46, 47, 66, 0.16), 0px 1px 6px rgba(46, 47, 66, 0.08); 
}
.header .container {
    display: flex;
    
   
}
.header-nav {
 display: flex; 
 align-items: center;
 
}
.header-logo {
vertical-align: middle;
font-family: "Raleway", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 117%;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #4D5AE5;
margin-right: 76px;
}
.header-logo-accent {
color: #2E2F42; 
}
.header-menu {
   display: flex; 
   gap: 40px;
    
}
.header-menu-link { 
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.02em;
/*color: #2e2f42;*/
padding-top: 24px; 
padding-bottom: 24px;
position: relative;
transition:  250ms cubic-bezier(0.4, 0, 0.2, 1);
color: #404bbf;
}
.header-menu-link:hover, .header-menu-link:focus {
   color: #404bbf;
}
 .header-menu-link::after {
    content: "";
    width: 100%;
     position: absolute;
     left: 0;
     bottom: -1px;
     height: 4px;
     background-color: #404bbf;
     border-radius: 2px;
    }

.header-address {
font-style: normal;
margin-left: auto;
align-items: center;
 padding-top: 24px; 
  padding-bottom: 24px;

}
.header-address-list {
display: flex;
gap: 40px;
} 
.header-address-link {
color: #434455;
font-weight: 500;
font-size: 16px;
line-height: 150%;
letter-spacing: 0.02em;
transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.header-address-link:hover, .header-address-link:focus {
color: #404bbf;
}
.hero {
    background-color: #2E2F42;
    padding-top: 188px;
    padding-bottom: 188px;
    max-width: 1440px;
    margin-bottom: 120px;
    /*background-image: url(../images/hero-bg.jpg);*/
    background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url(../images/hero-bg.jpg); 
     background-repeat: no-repeat; 
     background-position: center;
      background-size: cover;
}
.hero-title {
font-weight: 700;
font-size: 56px;
text-align: center;
color: #FFFFFF;
line-height: 107%;
letter-spacing: 0.02em;
margin-bottom: 48px;
margin: 0 auto;
align-items: center;
padding: 188px 472px 292px 188px;
max-width: 496px;
}
.btn {
/*border-radius: 4px;*/
padding: 16px 32px;
}
.hero-btn {
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
font-weight: 500;
font-size: 16px;
height: 56px;
min-width: 169px;
color: #fff;
background-color: #4D5AE5;
cursor: pointer;
letter-spacing: 0.04em;
line-height: 150%;                                                                                         
display: block;
margin: 0 auto;
border: none;
border-radius: 4px;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);

 }
.hero-btn:hover, .hero-btn:focus {
    background-color: #404BBF;
}
.features, .portfolio {
    padding-top: 120px;
    padding-bottom: 120px;
    
}
.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;
}

.features-list {
display: flex;
gap: 24px;

}
.features-subtitle {
font-weight: 500;
font-size: 20px;
line-height: 120%;
letter-spacing: 0.02em;
color: #2e2f42;
margin-bottom: 8px;
 }
 .features-item {
  /*width: 264px;*/
   flex-basis: calc((100% - 3 * 24px) / 4) ;
 }
.features-item-text {
font-size: 16px;
line-height: 150%;
letter-spacing: 0.02em;
color: #434455
}
.team {
background-color: #F4F4FD;
/*padding-top: 188px;
padding-bottom: 188px;*/
padding: 120px 0;
}
.name {
    padding: 32px 0 ;
    text-align: center;    
width: 232px;
height: 104px;
display: block;
gap: 8px;
}

.team-item {
background-color: #FFFFFF;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
width: 264px;
height: 428px;
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;
}
.portfolio-title {
color: #2E2F42;
text-align: center;
text-transform: capitalize;
font-weight: 700;
font-size: 36px;
line-height: 111%;
letter-spacing: 0.02em;
margin-bottom: 72px;
}

.team-text {
font-size: 16px;
line-height: 24px;
letter-spacing: 0.02em;
text-align: center;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    
}
  .team-list/*.portfolio-list*/ {
    display: flex;
    gap: 24px;
justify-content: center;}

.team-title { 
color: #2E2F42;
text-align: center;
margin: 0 auto;
text-transform: capitalize;
font-weight: 700;
font-size: 36px;
line-height: 111%;
letter-spacing: 0.02em;
margin-bottom: 72px;


}
.team-subtitle {
font-weight: 500;
text-align: center;
color: #2E2F42;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
    
.portfolio-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px 24px;
    display: flex;
}
.portfolio-item {
    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); 
    
}
.portfolio-item:hover .portfolio-text {
transform: translateY(0%);
}

.portfolio-subtitle {
font-weight: 500;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.02em;
color: #2E2F42;
background-color: #E7E9FC;
margin-bottom: 8px;
}
.portfolio-text {
font-size: 16px;
line-height: 24px;
letter-spacing: 0.02em;
color: #434455;
background-color: #E7E9FC;
position: absolute; 
 top: 0;
 color: #f4f4fd;
  padding: 40px 32px;
  background-color: #4d5ae5;
   height: 100%;
   width: 100%;
    transform: translateY(100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); 
}
.descript {
    padding: 32px 16px ;
     border: 1px solid #e7e9fc;
      border-top: none;
      position: relative;
      overflow: hidden; 
}
.footer {
background-color: #2E2F42;
padding-top: 100px;
padding-bottom: 100px;
}
.footer-logo {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.17;
letter-spacing: 0.03em;
vertical-align: middle;
text-transform: uppercase;
color: #4D5AE5;
margin-bottom: 16px;
display: inline-block;

}
.footer-logo-accent {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.17;
letter-spacing: 0.03em;
vertical-align: middle;
text-transform: uppercase;
color: #F4F4FD;
display: inline-block;
}
.footer-text {
font-size: 16px;
line-height: 24px;
letter-spacing: 0.02em;
color: #F4F4FD;
max-width: 264px;
margin: 0 auto;
}
h1, h2, h3, p {
    margin-top: 0;
    margin-bottom: 0;
}
a {
    text-decoration: none;
}
img {
    display: block;
}
.features-container {
border: 1px solid #8e8f99;
border-radius: 4px;
width: 264px;
height: 112px;
padding: 24px 100px;  
background: #f4f4fd;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center; 
}
/*.social-icon {
width: 232px;
height: 40px;
display: inline-block;
margin-top: 8px;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: cen  ter;*/

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

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

.team-social-list {
/*width: 232px;
height: 40px;*/
display: flex; 
justify-content: center;
 gap: 24px;
 
}
.team-icon {
   fill: #f4f4fd;

}
.team-social-item {
    width: 40px; 
    height: 40px; 
   
}
.container {
    width: 1158px;
    margin: 0 auto;
    padding: 0 15px;
   
}

.footer-container {
 display: flex; 
    align-items: baseline;
     
    
}
.footer-logo-container {
margin-right: 120px;
}

.social-text {
     font-weight: 500;
      font-size: 16px;
      line-height: 1.5;
       letter-spacing: 0.02em;
       color: #FFFFFF;
       margin-bottom: 16px;
     
}
.social-list{
    display: flex;
    gap: 16px;
}
.social-item {
width: 40px;
height: 40px;

}
.social-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); 
}
.social-link:hover, .social-link:focus {
 background-color: #31d0aa; 
}
.social-icon {
fill: #f4f4fd;
}