:root {
    --primary-text-color: #757575;
    --title-text-color: #212121;
    --accent-color: #2196F3;
    --text-color-white: #ffffff;
    --backgraund-color-grey: #F5F4FA;
    --backgraund-color-dark: #2F303A;
    --icon-color-white: #ffffff;
    --icon-color-grey: #AFB1B8;
    /* Other */
    --indent: 30px;
    --item: 4;
}
body{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 0.03em;
    color: var(--primary-text-color);
}
/* Частковий ресет */
h1, h2, h3, h4, h5, h6, p{
    margin: 0;
}
ul{
    padding: 0;
    margin: 0;
}
img{
    display: block;
    height: auto;
    max-width: 100%;
}
/* Visually-hidden */
.visually-hidden {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
}
/* Утилітарні */
.section{
    padding-top: 94px;
    padding-bottom: 94px;
}
.card-set{
    display: flex;
    flex-wrap: wrap;
    gap: var(--indent);
}
.card-item{
    flex-basis: calc((100% - var(--indent) * (var(--item) - 1)) / var(--item));
}
/* Хедер */
.logo{
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.02em;
    line-height: 1.19;
    color: var(--accent-color);
    text-decoration: none;
}
.header .logo{
    margin-right: 93px;
}
.logo-black{
    color: #000000;
}
.logo-white{
    color: var(--text-color-white)
}
.list{
    list-style: none;  
}
.link{
    color: currentColor;
    text-decoration: none;
}
.header{
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: 0.02em;
}
.header-link{
    display: flex;
    padding: 32px 0;
    align-items: center;
}
.header-link:hover,
.header-link:focus {
    color: var(--accent-color);
}
.site-nav{
    color: var(--title-text-color);
}
.site-nav .current{
    color: var(--accent-color);
}   
.title{
    font-weight: 700;
    color: var(--title-text-color);
}
.container{
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.header .container{
    display: flex;
    align-items: center;
}
.site-nav .list,
.contacts-list{
    display: flex;
}
.contacts-list{
    margin-left: auto;
}
.site-nav-item:not(:last-child),
.contacts-item:not(:last-child){
    margin-right: 50px;
}
/* Герой */
.hero{
    background-color: var(--backgraund-color-dark);
    background-image: linear-gradient(to right, rgba(47, 48, 58, 0.4),
    rgba(47, 48, 58, 0.4)), url(../images/hero/img.jpg);
    max-width: 1600px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    padding-top: 200px;
    padding-bottom: 200px;
}
.hero-bg{
    align-items: center;
    justify-content: center;
}
.hero-title{
    font-weight: 900;
    font-size: 44px;
    width: 696px;
    line-height: 1.36;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-color-white);
    margin: 0 auto;
    margin-bottom: 30px;
}
.hero-btn{
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.87;
    letter-spacing: 0.06em;
    background-color: var(--accent-color);
    color: var(--text-color-white);
    border: none;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    padding-top: 10px;
    padding-right: 32px;
    padding-bottom: 10px;
    padding-left: 32px;
}
/* Особенности  */
.features-title{
    font-size: 14px;
    line-height: 1.14;
    text-transform: uppercase;
    margin-bottom: 10px;
}
/* Чем мы занимаемся */
.section-title {
    font-size: 36px;
    line-height: 1.16;
    color: var(--title-text-color);
    text-align: center;
    margin-bottom: 50px;
}
.work-types{
    padding-top: 0;
}
.work-types-list{
    --item: 3;
}
/* Наша команда */
.team{
    background-color: var(--backgraund-color-grey);
}
.team-item{
    background-color: #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-wrapper{
    padding: 30px;
}
.team-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.18;
    color: var(--title-text-color);

    text-align: center;
    margin-bottom: 10px;
}
.team-descr{
    font-size: 16px;
    line-height: 1.18;
    margin-bottom: 16px;
    text-align: center;
}
/* Footer */
.footer{
    display: flex;
    background-color: var(--backgraund-color-dark);
    padding-top: 60px;
    padding-bottom: 60px;
}
.footer .logo{
    margin-bottom: 20px;
    display: block;
}
.footer-list{
    gap: 9px;
    display: flex;
    flex-direction: column;
}
.footer-link{
    margin-bottom: 9px;
}
.footer-link:hover,
.footer-link:focus{
    color: var(--accent-color);
}
.footer-container{
    display: flex;
    gap: 70px;
    align-items: baseline;
}
.join-descr{
    font-weight: 700;
    line-height: 1.14;
    text-transform: uppercase;
    color: var(--text-color-white);
    margin-bottom: 20px;
}
.address{
    font-style: inherit;
    color: rgba(255, 255, 255, 0.6);
}
.address-descr{
    color: var(--text-color-white);
    margin-bottom: 20px;
}
/* Портфоліо */
.header-portfolio{
    border: 1px solid #ECECEC;
}
.filter-list{
    display: flex;
    margin-bottom: 50px;
    justify-content: center;
}
.filter-btn{
    font-family: inherit;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.62;
    text-align: center;
    letter-spacing: 0.03em;
    color: var(--title-text-color);
    cursor: pointer;
    border: none;
    border-radius: 4px;
    padding: 6px 22px;
    display: block;
}   
.filter-btn:hover,
.filter-btn:focus{
    box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.12);
}
.filter-item:not(:last-child){
    margin-right: 8px;
}
.filter-btn:hover,
.filter-btn:focus{
    color: var(--text-color-white);
    background-color: var(--accent-color);
}
.portfolio-list{
    --item: 3;
}
.portfolio-container{
    padding-top: 20px;
    padding-right: 24px;
    padding-bottom: 20px;
    padding-left: 24px;
    border: 1px solid #EEEEEE;
    border-top: none;
}
.portfolio-link{
    display: block;
}
.portfolio-link:hover,
.portfolio-link:focus{
    box-shadow: 
    0px 1px 1px rgba(0, 0, 0, 0.12), 
    0px 4px 4px rgba(0, 0, 0, 0.06), 
    1px 4px 6px rgba(0, 0, 0, 0.16);
}
.portfolio-title{
    margin-bottom: 4px;
}
.portfolio .portfolio-title{
    font-size: 18px;
    line-height: 2;
    letter-spacing: 0.06em;
}
.portfolio .portfolio-discr{
    font-size: 16px;
    line-height: 1.87;
}
/* Contacts-icon */
.contacts-icon{
    margin-right: 10px;
    fill: currentColor;
}
/* Features icons */
.features-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 25px;
    padding-right: 100px;
    padding-bottom: 25px;
    padding-left: 100px;
    background-color: var(--backgraund-color-grey);
    margin-bottom: 30px;
}
.social-list {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.social-link{
    display: flex;
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.social-icon{
    fill: var(--icon-color-grey)
}
.social-link:hover,
.social-link:focus{
    background-color: var(--accent-color);
}
.social-link:hover .social-icon,
.social-link:focus .social-icon{
    fill: var(--icon-color-white);
}
/* Footer socials icon */
.footer .social-icon{
    fill: var(--icon-color-white);
}
.footer .social-link{
    background: rgba(255, 255, 255, 0.1);
}
.footer .social-link:hover,
.footer .social-link:focus{
    background-color: var(--accent-color);
}
/* Постоянные клиенты */
.clients-item{
    display: flex;
    width: 170px;
    height: 92px;
    align-items: center;
    justify-content: center;
    flex-basis: calc((100% - var(--indent) * (var(--item) - 1)) / var(--item));
    --item: 6;
}
.clients-link{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 16px;
    padding-right: 32px;
    padding-bottom: 16px;
    padding-left: 32px;
    border: 1px solid var(--icon-color-grey);
    border-radius: 4px;
    fill: var(--icon-color-grey);
}
.clients-link:hover,
.clients-link:focus{
    fill: var(--accent-color);
    border: 1px solid var(--accent-color)
}