/*font-family: "Raleway", serif;
font-family: "Roboto", serif;*/
body {font-family: "Roboto", sans-serif;
    color: #434455;
    background-color: #fff;
    }
    /* defaul */
    
    ul, ol {list-style-type: none;
    margin: 0;
    padding: 0;}
    h1, h2, h3, h4, h5, h6, p{
        margin: 0;
    }
    
    a {text-decoration: none;}
    img {display: block;}
    
    /*header*/
    .header-container{
        display: flex;
        align-items: center;
    }
    .container {
        max-width: 1158px;
        padding: 0 15px;
        margin: 0 auto;
    }
    .page-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);
    }
    
    .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 .logo-part {color: #2E2F42;}
    
    .header-logo {
        padding: 24px 0;
        margin-right: 76px;
    
    }
    
    .header-nav{
        display: flex;
        align-items: center;
    }
    
    .nav-list{
        display: flex;
        align-items: center;
        gap: 40px;
    }
    .nav-link {
        display: block;
        padding: 24px 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.02em;
        color: #2e2f42;
        transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
        }
    
    .nav-link:hover {color: #404BBF;}
    .nav-link:focus, .nav-link.current {color: #404BBF;} 
    
    .contacts {font-style: normal;
    margin-left: auto;}
    .contact-list{
        display: flex;
        align-items: center;
        gap: 40px;
        color: #434455;
    }
    .contact-link {
        display: block;
        padding: 24px 0;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.02em;
        color: #434455;
        transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1);
        }
    
    .contact-link:hover {color: #404BBF;}
    .contact-link:focus {color: #404BBF;}
    
    /*footer*/
    
    .page-footer {background-color: #2E2F42;
        height: 312px;}
    .footer-logo {
  display: inline-block;
  margin-bottom: 16px;
}
    .footer-text {
  max-width: 264px;
  color: #f4f4fd;
}
    .team {background-color: #F4F4FD;
        align-items: center;}
    .button-section {
        background-color: #2e2f42;
        padding: 188px 0;
        background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url(../images/11.jpg);
       
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover; 
    }
    
    
    .button-header {font-size: 56px;
        display: block;
        
        line-height: 1.07;
        margin-left: auto;
        margin-right: auto;
        letter-spacing: 0.02em;
        color: #ffffff;
        max-width: 496px;
        text-align: center;}
    .header-button {
        background-color: #4D5AE5;
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: 0.04em;
        color: #ffffff;
        cursor: pointer;
        display: block;
        margin-right: auto;
        margin-left: auto;
        margin-top: 48px;
        padding-top: 16px;
        padding-right: 32px;
        padding-left: 32px;
        padding-bottom: 16px;
        min-width: 169px;
        height: 56px;
        border-radius: 4px;
        border: none;
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); 
    }
    .header-button:hover {background-color: #404BBF}
    .header-button:focus {background-color: #404BBF}
    .items-list {font-weight: 500;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: 0.02em;
        color: #2e2f42;
        gap: 24px;
        width: calc((100% - 72px) / 4);
        flex-shrink: 0;
        }
    .item-header {font-weight: 500;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: 0.02em;
        color: #2e2f42;
        margin-bottom: 8px;
    }
    
    .team-list {
        display: flex;
        align-items: center;
        place-items: center;
        gap: 24px;
        padding-bottom: 120px;
    }
    
    
    
    .item-paraghraf { font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.02em;
        color: #434455;
        text-align: left;
        font-weight: 400;
        max-width: 264px;
        
    }
    .team-header {font-size: 36px;
        display: block;
        line-height: 1.11;
        text-align: center;
        letter-spacing: 0.02em;
        text-transform: capitalize;
        color: #2e2f42;
        padding-bottom: 72px;
        padding-top: 120px;}
    .team-item {background-color: #FFFFFF;
        border-radius: 0px 0px 4px 4px;
        display: block;
        text-align: center;
        border-radius: 0px 0px 4px 4px;
        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-header {font-size: 36px;
        line-height: 1.11;
        letter-spacing: 0.02em;
        line-height: 1.2;
        text-transform: capitalize;
        color: #2e2f42;
        padding-bottom: 72px;
        padding-top: 120px;
        text-align: center;}
    .portfolio-title {font-weight: 500;
        font-size: 20px;
        line-height: 1.2;
        letter-spacing: 0.02em;
        color: #2e2f42;
        text-align: left; 
        margin-bottom: 8px
    }
    .portfolio-item {
        background-color: #FFFFFF;
        width: calc((100% - 48px) / 3);
        text-align: left;
        row-gap: 48px;
        transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);

    }
    .portfolio-list {
        display: flex;
        align-items: left;
        gap: 24px;
        flex-wrap: wrap;
        row-gap: 48px;
        padding-bottom: 120px;
    }
    address {font-style: normal}
    .portfolio-description {line-height: 1.5;
        letter-spacing: 0.02em;}
    .contact-item {color: #434455;}
    .benefits-container {
        display: flex;
        flex-wrap: nowrap;
        gap: 24px;
    }
    .benefits {
        align-items: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        visibility: hidden;}
    .benefits-list-container{
        display: block;
    }
    .footer-container {
  display: flex;
  align-items: baseline;
}
    .portfolio {background-color: #ffffff;
        place-items: center;
        padding-top: 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;
    }
    .item-container {padding: 32px 16px;
    display: block;

    }
    .logo-container {display: inline-block;
        margin-bottom: 16px;
    padding-top: 100px;
padding-bottom: 100px;}
    .portfolio-div {padding: 32px 16px;
        border: 1px solid #e7e9fc;
        border-top: none;
        margin-bottom: 8px;
        margin: 0;
    }
    .item-paraghrafs {
        font-size: 16px;
        display: block;
        line-height: 24px;
        letter-spacing: 2%;
        color: #434455;
        max-width: 264px;
        text-align: center;
        font-weight: 400;
    }
    .benefits-section{
        padding: 120px 0 120px
    }
    

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

    }
    .team-sm-list {
  display: flex;
  gap: 16px;
}
    .team-sm{width: 40px;
        height: 40px;
        
    }
    .link-team{
       display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color:rgba(77, 90, 229, 1);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transition: background-color 250ms ease, color 250ms ease;}
    .link-team:hover{
            background-color: #404bbf;
        }
    .link-team:focus{
            background-color: #31d0aa
        }
    .svg-soc{
    fill:rgba(244, 244, 253, 1);
    }
    .nav-link.current {
        position: relative;
    }
    .nav-link.current::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 4px;
        background-color: rgba(64, 75, 191, 1);
        border-radius: 2px;
    }
    .portfolio-item:hover {
        
        cursor: pointer;
        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);
    }
    
  .soc-media-footer {
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 16px;
}
.media-footer {
  display: flex;
  flex-direction: column;
}
.img-wrapper {
  position: relative;
  overflow: hidden;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-color: #4d5ae5;
  color: #fff;

  padding: 20px;

  transform: translateY(100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item:hover .overlay {
  transform: translateY(0);
}
.footer-content {
  margin-right: 120px;
}
  .page-footer {
  background-color: #2e2f42;
  padding: 100px 0;
}
.logo-part {color: rgba(244, 244, 253, 1);}