.header{
    padding-top: 40px;
    background-image: url(../img/header.jpg);
    background-repeat: no-repeat;
    background-size: 1200px 680px;
    background-position: center top;
    padding-bottom: 40px;
}

body {
 font-family: "Open Sans", sans-serif;
}

.list-nav {
display: flex;
}
.item-nav{
    margin-right: 30px;
}
.contacts{
    display: flex;
    margin-left: auto;
    gap: 40px;
}
.nav{
display: flex;
margin-bottom: 184px;
}
.link-nav:hover{
    color: var(--accient-color);
}
.link-contact:hover{
    color: var(--accient-color);
}

.item-contact{
    padding-left: 254px;
    padding-right: 40px;
}
.link-nav{
    color: white;
}
.link-contact{
      color: white;
}
.link-order:hover{
    color: var(--accient-color);
}
.link-order{
border: 1px solid #ff6c00;
border-radius: 25px;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: white;
width: 160px;
height: 40px;
padding: 12px 20px 12px 20px;
}
li:last-child{
    margin-right: 0;
}
.info{
    font-weight: 600;
font-size: 11px;
text-transform: uppercase;
color: var(--text-color);
display: flex;
align-items: center;
gap: 7px;
}
.info:before{
        content: "";
    display: block;
    width: 60px;
    height: 1px;
    background-color: gray;
}
.header-title{
font-weight: 700;
font-size: 72px;
letter-spacing: 0.05em;
color: #fff;
margin: 20px 0 20px 0;
}
.about-work{
    font-weight: 400;
font-size: 18px;
line-height: 167%;
letter-spacing: 0.02em;
color: #9da4bd;
width: 357px;
}

.info-box{

padding-left: 100px;
margin-bottom: 144px;

}

.moving{
display: flex;
justify-content: end;

}

.back{
    font-weight: 600;
font-size: 11px;
letter-spacing: 0.1em;
color: rgba(157, 164, 189, 0.6);
padding-right: 24px;
text-align: right;
}
.back:after{
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background-color: gray;
    margin-top: 8px;

}
.forward::after{
        content: "";
    display: block;
    width: 60px;
    height: 1px;
    background-color: white;
    margin-top: 8px;
}
.forward{
    font-weight: 600;
font-size: 11px;
letter-spacing: 0.1em;
text-align: right;
color: #fff;
}

.info-sub-title{
    font-weight: 700;
font-size: 42px;
letter-spacing: 0.05em;
color: #303030;
}


.info-text{
    font-weight: 400;
font-size: 18px;
line-height: 167%;
letter-spacing: 0.02em;
color: #555;
margin-bottom:20px ;
width: 470px;
}

.info-title{
    font-weight: 700;
font-size: 42px;
letter-spacing: 0.05em;
color: #303030;
    width: 470px;
    margin-bottom: 20px;
}

.info-about-us{
    font-weight: 400;
font-size: 14px;
line-height: 186%;
letter-spacing: 0.02em;
color: #555;
margin-bottom: 42px;
width: 470px;
}


.order-online{
    font-weight: 600;
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #303030;
border: 1px solid #ff6c00;
border-radius: 25px;
width: 160px;
height: 40px;
}

.about{
    padding-top: 120px;
    padding-bottom: 120px;
}

.about-box{
    display: flex;
    gap: 30px;
}
.info-sub-text{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.info-sub-text::before{
        content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: rgba(157, 164, 189, 0.6);
}

.price-sub-text{
    font-weight: 600;
font-size: 11px;
text-transform: uppercase;
color: rgba(157, 164, 189, 0.6);
padding-top: 120px;
padding-bottom: 20px;
display: flex;
align-items: center;
gap: 20px;
}

.price-sub-text::before{
            content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: rgba(157, 164, 189, 0.6);
}

.price-title{
    font-weight: 700;
font-size: 42px;
letter-spacing: 0.05em;
color: #fff;
padding-bottom: 44px;
}

.price-button{
    font-weight: 600;
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #fff;
border: 1px solid #ff6c00;
border-radius: 25px;
width: 160px;
height: 40px;
margin-left: 500px;
margin-bottom: 110px;
background-color: transparent;
}
.price{
    background-image: linear-gradient(rgba(17, 19, 25, 0.7),rgba(17, 19, 25, 0.7)) ,url(../img/bck-price.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.prices{
width: 570px;
padding: 30px 21px;
display: flex;
flex-direction: column;
gap: 20px;
background: linear-gradient(180deg, #090b13 0%, rgba(9, 11, 19, 0.2) 100%);
}
.prices:nth-child(1){

}
.price-item .prices{
background: linear-gradient(180deg, #171a24 0%, rgba(23, 26, 36, 0.2) 100%);
}
.haircut-price:after{
    content: "";
    display:block ;
    background: rgba(157, 164, 189, 0.12);
   width: 1px;
}
.item-price{
    width: 570px;


}
.haircut-price{
    font-weight: 400;
font-size: 18px;
line-height: 167%;
letter-spacing: 0.02em;
color: #9da4bd;
}
.item-prices{
display: flex;
justify-content: space-between;

}

.price-haircut{
    font-weight: 400;
font-size: 18px;
line-height: 167%;
letter-spacing: 0.02em;
text-align: right;
color: #9da4bd;
}
.price-ul{
display: flex;
gap: 30px;
padding-bottom: 44px;
}

.people .container{
    display: flex;
    justify-content: space-evenly;
}
.people{
    padding-bottom:120px ;
    padding-top: 120px;
}
.people-sub-text{
    font-weight: 600;
font-size: 11px;
text-transform: uppercase;
color: #303030;
width: 226px;
display: flex;
align-items: center;
gap: 20px;
}

.people-sub-text::before{
    content: "";
    display: block;
    width: 60px;
    height: 1px;
background: #303030;
}

.people-title{
    font-weight: 700;
font-size: 42px;
letter-spacing: 0.05em;
color: #303030;
padding-bottom: 20px;
width: 430px;
margin-top: 20px;
margin-bottom:20px ;
font-family: Raleway;
}
.people-info{
    font-weight: 400;
font-size: 18px;
line-height: 167%;
letter-spacing: 0.02em;
color: #555;
width: 500px;
}

.people-box{
    width: 170px;
height: 133px;
background: #f7f7f7;
display: flex;
flex-direction: column;
align-items: center;
}
.number-of-people{
    font-weight: 700;
font-size: 42px;
letter-spacing: 0.05em;
text-align: center;
color: #303030;
padding-top:20px ;
padding-right: 45px;
padding-left: 45px;
padding-bottom: 6px;
}

.people-about-us{
    font-weight: 600;
font-size: 11px;
text-align: center;
color: #303030;
width: 122px;

}
.people-ul{
display: flex;
gap: 30px;
flex-wrap:wrap ;
width: 370px;
order: -1;
}

.barbers-info-list{
display: flex;
gap: 30px;

}
.employees{
    background: #f7f7f7;
    padding-top: 120px;
padding-bottom: 120px;
}
.employee-text{
    font-weight: 600;
font-size: 11px;
text-transform: uppercase;
color: #303030;
display: flex;
align-items: center;
gap: 7px;
}

.employee-text::before{
content: "";
display: block;
width: 60px;
height: 1px;
background-color: gray;
}

.employee-berbers{
    margin-top:20px;
    margin-bottom: 44px;
    font-weight: 700;
font-size: 42px;
letter-spacing: 0.05em;
color: #303030;
}

.barbers-name {
    margin-top: 30px;
    font-weight: 400;
font-size: 18px;
letter-spacing: 0.02em;
text-align: center;
color: #303030;
}

.barbers-info{
    margin-top: 8px;
    margin-bottom: 30px;
    font-weight: 400;
font-size: 14px;
letter-spacing: 0.02em;
text-align: center;
color: #ff6c00;
}

.icon{

}
.ul-icon{
display: flex;

}
.item-icon{
    
}
.icon:hover{
fill: #ff6c00;
}

.list-social-networks{
    display: flex;
justify-content: center;
gap: 10px;
}

.link-social-networks{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content:center ;
align-items: center;
}

.photo-text{
    font-weight: 600;
font-size: 11px;
text-transform: uppercase;
color: #303030;
margin-bottom: 44px;
display: flex;
align-items: center;
gap: 7px;
}
.photo-text::before{
    content: "";
    width: 60px;
height: 1px;
display: block;
background-color: gray;
}

.img-photo{
width: 270px;
height: 360px;
}
.photo{
    padding-top: 120px;
    padding-bottom: 120px;
}

.ul-photo{
    display: flex;
    gap: 30px;
}


.contacts{
    background: #191c26;
    padding-top: 130px;
    padding-bottom: 120px;
background-image: linear-gradient(rgba(25, 28, 38, 0.9),rgba(25, 28, 38, 0.9)),url(../img/contact-bg.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: 50% 700px;

}

.container-contacts{
display: flex;
}

.contact-box{
flex-basis: 50%;
}
.contact-box2{
    flex-basis: 50%;
    padding-left: 100px;
}
.title-contacts{
    font-weight: 700;
font-size: 42px;
letter-spacing: 0.05em;
color: #fff;
margin-bottom: 44px;
}

.form-contacts{
    display: flex;
    flex-wrap: wrap;
}
.text-contacts{
    font-weight: 600;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(157, 164, 189, 0.4);
background-color: transparent;
border: none;
border-bottom: 1px solid;
width: 270px;
}

.text-contacts[placeholder="Name*"]{
margin-right: 30px;
}
.gmail-contacts{
    font-weight: 600;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(157, 164, 189, 0.4);
width: 570px;
height: 76px;
resize: none;
margin-top: 44px;
background-color: transparent;
border: none;
border-bottom: 1px solid rgb(157, 164, 189, 0.4);
margin-bottom: 44px;
}


.link-contacts{
    font-weight: 700;
font-size: 18px;
line-height: 167%;
letter-spacing: 0.02em;
color: #9da4bd;
}
.link-phone{
    font-weight: 400;
font-size: 18px;
line-height: 167%;
letter-spacing: 0.02em;
color: #9da4bd;
}
.link-gmail{
    font-weight: 400;
font-size: 18px;
line-height: 167%;
letter-spacing: 0.02em;
text-decoration: underline;
text-decoration-skip-ink: none;
color: #9da4bd;
}
.item-contacts{
width: 230px;
margin-bottom: 20px;
display: flex;
gap: 6px;
align-items: center;
}
.img-contact{
    width: 24px;
    height: 24px;
}
.item-contacts:last-child{
    margin-bottom: 70px;
}
.button-contacts{
    font-weight: 600;
font-size: 12px;
letter-spacing: 0.09em;
text-transform: uppercase;
text-align: center;
color: #fff;
background:none;
border: 1px solid #ff6c00;
border-radius: 25px;
width: 160px;
height: 40px;
}

.sub-title-contacts{
    font-weight: 700;
font-size: 42px;
letter-spacing: 0.05em;
color: #fff;
margin-bottom: 40px;
}
.text-hours{
    font-weight: 600;
font-size: 11px;
text-transform: uppercase;
color: #fff;
display: flex;
gap: 7px;
align-items: center;
margin-bottom: 20px;
}
.text-hours::before{
width: 60px;
height: 1px;
content:"";
display: block;
background: rgba(157, 164, 189, 0.4);
}
.text-info-hours{
    font-weight: 400;
font-size: 18px;
line-height: 167%;
letter-spacing: 0.02em;
color: #9da4bd;
}