:root {
    --main-color: #212121;
    --selection-color: #2196F3;
    --white-color: #FFFFFF;
    --text-color: #757575;
    --bg-color: #2F303A;
    --bg-secondary: #F5F4FA;
}
body{
font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.14;
    letter-spacing: 0.02em;
    color: var(--main-color);
}
ul{
    list-style: none;
}
/*Навігаційна панель*/
.nav-header{
position: absolute;
    width: 1600px;
    height: 80px;
    left: 0px;
    top: 0px;

    background: var(--white-color);
    
border: 1px solid #ECECEC;
}
.logo-primary{
    position: absolute;
        width: 145px;
        height: 31px;
        left: 215px;
        top: 24px;
        font-family: 'Raleway';
        font-weight: 700;
        font-size: 26px;
        line-height: 1.19;
        letter-spacing: 0.03em;
        text-decoration: none;
}
.logo-primary{
    color:var(--selection-color);
}
.logo-secondary{
    color:var(--main-color);
}
.links-pages .nav-link{
    text-decoration: none;
        color:var(--main-color);
}
.address-foot:focus,
.address-foot:hover{
    color:var(--selection-color)
}
.tel-foot:hover,
.tel-foot:focus{
    color: var(--selection-color);
}
.mail-foot:hover,
.mail-foot:focus{
    color: var(--selection-color);
}
.studio{
    position: absolute;
        width: 45px;
        left: 453px;
        top: 32px;
}
.portfolio{
    position: absolute;
        width: 72px;
        left: 548px;
        top: 32px;
}
.contacts{
    position: absolute;
        width: 64px;
        left: 670px;
        top: 32px;
}
.mail{
    text-decoration: none;
    position: absolute;
        width: 135px;
        left: 1078px;
        top: 32px;
        color: var(--text-color);
}
.tel{
    text-decoration: none;
    position: absolute;
        width: 122px;
        left: 1263px;
        top: 32px;

        color: var(--text-color);
}

.mail:hover,
.mail:focus,
.tel:hover,
.tel:focus{
    color: var(--selection-color);
}
/*Замовлення*/
.order{
    position: absolute;
    width: 1600px;
    height: 600px;
    left: 0px;
    top: 80px;
    background:var(--bg-color);
}
.order > .order-header{
    position: relative;
    width: 696px;
    height: 120px;
    left: 452px;
    top: 200px;
    
    font-weight: 900;
    font-size: 44px;
    line-height: 1.36;

    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;

    color: var(--white-color);
}
.order > .order-button{
position: relative;
width: 216px;
height: 50px;
left: 692px;
top: 200px;

background: var(--selection-color);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
border-radius: 4px;

font-weight: 700;
font-size: 16px;
line-height: 1.88;
letter-spacing: 0.06em;
color: var(--white-color);
}
.order>.order-button:hover,
.order>.order-button:focus{
    cursor: pointer;
    background: #188CE8;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
}
/*Наші переваги*/
.advan h3{
    font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    
        color: var(--main-color);
}
.advan-det{
    position: absolute;
    width: 270px;
    height: 98px;
    left: 215px;
    top: 774px;

        line-height: 1.71;
    
        letter-spacing: 0.03em;

     color: var(--text-color);
}
.advan-time{
    position: absolute;
        width: 270px;
        height: 74px;
        left: 515px;
        top: 774px;
            line-height: 1.71;
        
            letter-spacing: 0.03em;
        
            color: var(--text-color);
}
.advan-plan{
    position: absolute;
        width: 270px;
        height: 74px;
        left: 815px;
        top: 774px;
        font-weight: 400;
            line-height: 1.71;
        
            letter-spacing: 0.03em;
        
            color: var(--text-color);
}
.advan-tech{
    position: absolute;
        width: 270px;
        height: 98px;
        left: 1115px;
        top: 774px;
        font-weight: 400;
            line-height: 1.71;
        
            letter-spacing: 0.03em;
        
            color: var(--text-color);
}
.advan-det > p{
font-weight: 400;
font-size: 14px;
line-height: 1.71;

letter-spacing: 0.03em;
} 
.advan-time > p{
font-weight: 400;
font-size: 14px;
line-height: 1.71;

letter-spacing: 0.03em;
} 
.advan-plan > p{
font-weight: 400;
font-size: 14px;
line-height: 1.71;

letter-spacing: 0.03em;
} 
.advan-tech > p{
font-weight: 400;
font-size: 14px;
line-height: 1.71;

letter-spacing: 0.03em;
}

/* Чим ми займаємося */

.projects>h2 {
position: absolute;
    width: 367px;
    height: 42px;
    left: 617px;
    top: 966px;

font-weight: 700;
font-size: 36px;
line-height: 1.17;
text-align: center;
letter-spacing: 0.03em;
}
.img-comp{
    position: absolute;
        width: 370px;
        height: 294px;
        left: 215px;
        top: 1058px;
}
.img-laptop{
    position: absolute;
        width: 370px;
        height: 294px;
        left: 615px;
        top: 1058px;
}
.img-color{
    position: absolute;
        width: 370px;
        height: 294px;
        left: 1015px;
        top: 1058px;
}

/*Наша команда*/
.team{
    position: absolute;
        width: 1600px;
        height: 648px;
        left: 0px;
        top: 1446px;
    
        background: #F5F4FA;
}
.team > h2 {
    position: absolute;
        width: 265px;
        height: 42px;
        left: 668px;
        top: 94px;
    
        font-weight: 700;
        font-size: 36px;
        line-height: 1.17;
        text-align: center;
        letter-spacing: 0.03em;
    
        color: var(--main-color);
}
.team-dem{
    position: absolute;
        width: 270px;
        height: 368px;
        left: 215px;
        top: 186px;

        background: #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-rep{
    position: absolute;
        width: 270px;
        height: 368px;
        left: 515px;
        top: 186px;

        background: #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-tar{position: absolute;
    width: 270px;
    height: 368px;
    left: 815px;
    top: 186px;

    background: #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-erm{position: absolute;
    width: 270px;
    height: 368px;
    left: 1115px;
    top: 186px;

    background: #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 h3 {
        font-weight: 500;
        font-size: 16px;
        line-height: 1.19;
    
        text-align: center;
        letter-spacing: 0.03em;
}
.team p {
        font-weight: 400;
        font-size: 16px;
        line-height: 1.19;
    
        text-align: center;
        letter-spacing: 0.03em;
    
        color: var(--text-color);
}

    /*Footer*/
footer{
    position: absolute;
        width: 1600px;
        height: 252px;
        left: 0px;
        top: 2094px;

        background: var(--bg-color);
}
.logo-foot-prim{
    position: absolute;
        width: 145px;
        height: 31px;
        left: 215px;
        top: 60px;
 
        font-family: 'Raleway';
        font-weight: 700;
        font-size: 26px;
        line-height: 1.19;
    
        letter-spacing: 0.03em;
        text-decoration: none;
    color:var(--selection-color);
}
.logo-foot-sec{
    color: var(--white-color);
}
.foot-contacts{
    position: absolute;
        width: 231px;
        height: 81px;
        left: 175px;
        top: 111px;
        
        font-style: normal;
}
.address-foot{
    text-decoration: none;
    color: var(--white-color);

    font-style: normal;
}
.tel-foot,
.mail-foot{
    text-decoration: none;
    color: rgba(255, 255, 255, 0.6);

    font-style: normal;
}
.foot-contacts>li{
    margin: 9px;
}
.foot-contacts>li:hover,
.foot-contacts>li:focus{
    color: var(--selection-color);
}

/*Фільтри*/
.filter-button{
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 16px;
    line-height: 1.63;

    text-align: center;
    letter-spacing: 0.03em;

        border-radius: 4px;
        background-color: var(--bg-secondary);
        border: none;

    cursor: pointer;
}
.filter-button:hover,
.filter-button:focus{
    color: var(--white-color);
    background-color: var(--selection-color);
    box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}
.all{
    position: absolute;
        width: 73px;
        height: 38px;
        left: 512px;
        top: 174px;
}
.web{
    position: absolute;
        width: 125px;
        height: 38px;
        left: 593px;
        top: 174px;
}
.application{
    position: absolute;
        width: 112px;
        height: 38px;
        left: 726px;
        top: 174px;
}
.design{
    position: absolute;
        width: 103px;
        height: 38px;
        left: 846px;
        top: 174px;
}
.marketing{
    position: absolute;
        width: 130px;
        height: 38px;
        left: 957px;
        top: 174px;
}
.cont-tech{
    box-sizing: border-box;
    
        position: absolute;
        width: 370px;
        height: 404px;
        left: 215px;
        top: 262px;
    
        background: #FFFFFF;
        border: 1px solid #EEEEEE;
        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);
}
.cont-poster {
    box-sizing: border-box;

    position: absolute;
    width: 370px;
    height: 404px;
    left: 615px;
    top: 262px;
}
.cont-rest {
    box-sizing: border-box;

    position: absolute;
    width: 370px;
    height: 404px;
    left: 1015px;
    top: 262px;
}
.cont-prime{
    position: absolute;
        width: 370px;
        height: 404px;
        left: 215px;
        top: 696px;
}
.cont-boxes{
    position: absolute;
        width: 370px;
        height: 404px;
        left: 615px;
        top: 696px;
}
.cont-insp{
    position: absolute;
    width: 370px;
    height: 404px;
    left: 1015px;
    top: 696px;
}
.cont-book{
    position: absolute;
        width: 370px;
        height: 404px;
        left: 215px;
        top: 1130px;
}
.cont-lab{
    position: absolute;
        width: 370px;
        height: 404px;
        left: 615px;
        top: 1130px;
}
.cont-business{
    position: absolute;
        width: 370px;
        height: 404px;
        left: 1015px;
        top: 1130px;
}
.contents>li{
    background: #FFFFFF;
        border: 1px solid #EEEEEE;
        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);
}
.contents>li>h2{
    font-weight: 700;
        font-size: 18px;
        line-height: 2.0;
    
        letter-spacing: 0.06em;
    
    position: relative;
    left: 24px;
    top: 20px;
}
.contents>li>p{
    position: relative;
    left: 24px;
    top:4px;

    font-weight: 400;
        font-size: 16px;
        line-height: 1.88;
    
        letter-spacing: 0.03em;
    color: var(--text-color);
}