:root {
  --color-main-: #212121;
  --color-blue-: #2196f3;
  --color-ser-: #2f303a;
  --color-grey-: #fff;
  --color-black-: #000;
  --color-transparent-: #757575;
}

body {
  color: var(--color-main-);
  font-weight: 400;
  font-family: "Roboto", sans-serif;
}
a , input{outline: none;
  text-decoration: none;
}
ul {
  list-style-type: none;
}

/* header { display: flex;
    height: 82px;
    width: auto;
}

nav { display: inline-block;} */



.header-logo {
  color: var(--color-black-);
  
font-family: Raleway;
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.78px;
  text-decoration: none;
  /* margin: 25px 0px 25px 0px; */
}
.header-logo > span {
  color: var(--color-blue-);
}

.header-link {
  color: var(--color-main-);
  font-family: "Roboto";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: 0.28px;
  margin-left: 30px;
  justify-content: center;
  
 
}
.header-links {display: flex; align-items: center;justify-content: space-evenly;
}


.header-link:hover {
  color: var(--color-blue-);
  border-bottom:4px solid #2196F3 ;
  
}

.header-link:focus {
  color: var(--color-blue-);
}

.contacts-link { 
  color: #757575;
  display: block;
  
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.28px;

/* margin-top: 34px;
margin-bottom: 32px;
   */
}
.contacts-links { margin-left: 150px;
display: flex;}
.tel { margin-left: 80px;}



.contacts-link:hover {
  color: var(--color-blue-);
}
.contacts-link:focus {
  color: var(--color-blue-);
}





/* .header-links { display: inline-block;
margin:30px 50px 36px 0px ;}
.header-logo { display: inline-block;
margin-left: 140px;} */

.hero-section {background: rgba(47, 48, 58, 0.40);
  background: url(../images/team.jpg) center;
  background-size: cover;
 height: 600px;
 position: relative;
}

.hero-title {
  color: var(--color-grey-);
  padding-top: 200px;
  
  padding-left: auto;
  padding-right: auto;
  box-sizing: border-box;
  
 
text-align: center;
font-family: Roboto;
font-size: 44px;
font-style: normal;
font-weight: 900;
line-height: 1.36;
letter-spacing: 2.64px;
text-transform: uppercase;
}

.hero-button {
  color: var(--color-grey-);
  text-align: center;
  border: none;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.875;
  letter-spacing: 0.96px;
  border-radius: 4px;
  background: var(--color-blue-);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  width: 216px;
  height: 50px;
  flex-shrink: 0;
  cursor: pointer;
 
}
.but-nav { text-align: center;
    box-sizing: border-box;
    width: 216px;
    margin-left: -108px;
    left: 50%;
    

    
}

.btns-box { 
text-align: center;}
.btns-box>div { display: inline-block;}
.button-sec {
  cursor: pointer;
  background: #F5F4FA;
  border: none;
margin: 0 4px 0 4px;
  color: #212121;
  text-align: center;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 162.5%;
  letter-spacing: 0.48px;
}

.button-sec:hover {
  background: var(--color-blue-);
  color: var(--color-grey-);
}



.section-title {
  color: #212121;
  text-align: center;
  font-family: Roboto;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.08px;
}


/* benefits */


.benefits { 
box-sizing: border-box;
text-align: left;
margin: 50px 15px 0px 15px;

  width: 270px;
  box-sizing: border-box;
  padding: 0;}
  .benefits>h3 { margin-bottom: 10px;
  margin-top: 30px;}

.benefit-title {
  color: var(--color-black-);
  font-family: "Roboto";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.42px;
  text-transform: uppercase;
}

.benefit-text {
  color: #757575;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 171.429%;
  letter-spacing: 0.42px;
}
/* what we do  */
.what-we-do>div { 
  display: block;
  box-sizing: border-box;
  width: 370px;
  height: 294px;
  margin-bottom: 94px;
  padding-left: 0;
  
}
.row>* { padding-right: 0;}
.what-we-do>div:nth-child(1) { background-image: url(../images/coding.jpg);
  background-size: cover;
display: flex;
align-items: end;}

.what-we-do>div:nth-child(2) { background-image: url(../images/testing.jpg);
  background-size: cover;
  margin-left: 30px;
  margin-right: 30px;
  display: flex;
align-items: end;

}


  .what-we-do>div:nth-child(3) { 

background-image: url(../images/design.jpg);
  background-size: cover;
  display: flex;
align-items: end;
  }

.what-we-do>div>div{ background: rgba(47, 48, 58, 0.6);
width: 100%;
height: 70px;
flex-shrink: 0;
display: flex;


  align-items: center;
justify-content: center;}
.what-we-do>div>div>p { 
  margin-bottom: 0;
  
color: #FFF;
text-align: center;
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.42px;
text-transform: uppercase;}




/* team section */
.row {
box-sizing: border-box;
justify-content: center;
}

.person-name {
  color: #212121;
  text-align: center;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.48px;
  margin-top: 30px;
  margin-bottom: 10px;
}

.person-job {
  color: #757575;
  text-align: center;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.48px;
  margin-bottom: 30px;
}

.ourteam {
  padding-bottom: 94px;
}
.ourteam > div > div {
  margin: 50px 15px 0px 15px;

  width: 270px;
  box-sizing: border-box;
  padding: 0;
}

/* .ourteam>div>div>div { color: #AFB1B8;
  border-radius: 22px;
  width: 44px;
}
.ourteam>div>div>div:hover { background-color: var(--color-blue-);
  color: var(--color-grey-);
}
.ourteam>div>div>div>a>svg:hover {color: var(--color-grey-); } */




/* our clients  */


.clients>div { 
width: 170px;
height: 92px;
flex-shrink: 0;
border-radius: 4px;
border: 1px solid #AFB1B8;
margin-left: 15px;
margin-right: 15px;
margin-top: 50px;
margin-bottom: 94px;
box-sizing: border-box;
padding-top: 15px;

text-align: center;
}
.clients>div:hover { border-color: var(--color-blue-);
cursor: pointer;}




/* footer */

.footer-logo {
  color: var(--color-grey-);
  font-family: "Raleway", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.78px;
  margin-left: 140px;
  margin-bottom: 20px;
  padding-top: 60px;
  display: block;
}

.footer-logo > span {
  color: var(--color-blue-);
}

.address-link {
  color: var(--color-grey-);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.42px;
}
.address-link:hover {
  color: var(--color-blue-);
}
.address-link:focus {
  color: var(--color-blue-);
}
.contacts-link-footer:hover {
  color: var(--color-blue-);
}
.contacts-link-footer:focus {
  color: var(--color-blue-);
}

.contacts-link-footer {
  color: rgba(255, 255, 255, 0.6);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.42px;
  
}

footer {
  background: #2f303a;
  min-height: 252px;
}
.address-link _{padding-left: 140px;}


.footer-block { padding-left: 140px;}
footer>.row { margin: 0;
}
.join { margin-top: 72px;}
.join>h3 { color: #FFF;
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.42px;
text-transform: uppercase;}
.circle { width: 44px;
  display: inline-block;
height: 44px;
flex-shrink: 0;
margin-top: 15px;
line-height: 44px;
text-align: center;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.10);
&:hover { background-color: #2196F3;}}
.circle:nth-child(3) { margin:0 0 0 5px;}
.circle:nth-child(4) { margin:0 0 0 5px;}
.circle:nth-child(5) { margin:0 0 0 5px;}


.footer-form { margin-top: 72px;}
.footer-form >h3 { color: #FFF;
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.42px;
text-transform: uppercase;}



.send-form { margin-top: 20px;}
.send-form>input, button {display: inline-block;
  height: 50px;
margin: 0;}


.send-form>input { border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.30);
background: rgba(33, 150, 243, 0.00);
width: 350px;
padding-left: 16px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);}



.send-form> button { width: 200px;

flex-shrink: 0;
border-radius: 4px;
background: #2196F3;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
color: #FFF;
text-align: center;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 30px; /* 187.5% */
letter-spacing: 0.96px;
text-align: center;}



/* portfolio */

.images-logo {
  color: #212121;
  font-family: Roboto;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 36px; /* 200% */
  letter-spacing: 1.08px;
}

a > p {
  color: #757575;
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 187.5% */
  letter-spacing: 0.48px;
}

.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;
}


.item {box-sizing: border-box;
   margin: 15px;

  
width: 370px;
}
.item>h3 , .item>p { margin-left: 20p;}
.item:hover { border: 1px solid #EEE;
background: #FFF;
box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.16), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);}

.but-nav{ padding: 4px;}








/* Вспливаюче вікнооооооооооооооооооо */

.window-menu { 
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
width: 100%;
height: 100%;
background-color: white;
z-index: 99;}



.window-item {color: #212121;
  display: block;
font-family: Roboto;
font-size: 40px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.8px;
margin-left:40px;
padding: 16px 0;
&:hover {color: #2196F3; }}

.window-contacts { margin-top: 260px;}
.window-number{
  color: #2196F3;
font-family: Roboto;
font-size: 34px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.68px;
 margin-left: 40px;
 }
 .window-mail { color: #757575;
  display: block;
font-family: Roboto;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.48px;
margin-left: 40px;
padding-top: 32px;
}

.window-close {position: absolute; top: 0;
right: 0;
width: 40px;
height: 40px;
border: none;
background-color: transparent;
&:hover { color: #2196f3;}
 }
 .window-close { width: 40px;
height: 40px;}

.window-call-btn { display: none;
  background-color: transparent;
position: absolute;
top: 20px;
border: none;
right: 10px;
width: 70px;}
.window-media>a { color: #2196F3;
font-family: Roboto;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 122.222% */
letter-spacing: 0.36px;}
.window-media { margin-left: 10%;
display: flex;}
.window-media>a { display: block;
padding: 0 10px;}

.window-media>a:nth-child(2) { border-left: 1px solid  rgba(33, 33, 33, 0.20);}
.window-media>a:nth-child(3) { border-left: 1px solid  rgba(33, 33, 33, 0.20);}
.window-media>a:nth-child(4) { border-left: 1px solid  rgba(33, 33, 33, 0.20);}
.window-nav { margin-top: 40px;}




/* favour window www */

.window-favour { 
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
 
}
.favour-content {
  position: relative;
  width: 528px;
height: 581px;
flex-shrink: 0;
border-radius: 4px;
background: #FFF;
top: 12% ;
box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
left: 50%;
transform: translateX(-50%);
}

.favour-content>h2 { color: #212121;
text-align: center;
font-family: Roboto;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.6px;
padding-top: 20px;}
.favour-form>form label, input { 
  margin-left: 6%;
}
.favour-form>form>label {
  color: #757575;
font-family: Roboto;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.12px;}



.form-input { 
  
display: block;
  width: 448px;
height: 40px;
flex-shrink: 0;
border-radius: 4px;
border: 1px solid rgba(33, 33, 33, 0.20);}
.form-input:hover{border-color: #2196F3;}
.form-input:focus{ border-color: #2196F3;}

.favour-form>form>input:nth-child(2){background-image: url(../images/person.svg);
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 40px;}
.favour-form>form>input:nth-child(4){background-image: url(../images/email.svg);
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 40px;}
.favour-form>form>input:nth-child(6){background-image: url(../images/phone.svg);
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 40px;}
  .favour-form>form>input:nth-child(8) { 
    padding-top: 10px;
padding-bottom: 100px;
  
  }





.favour-form>form>button {width: 200px;
height: 50px;
flex-shrink: 0;
border-radius: 4px;
background: #2196F3;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
color: #FFF;
text-align: center;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 700;
margin-left: 6%;
line-height: 30px; /* 187.5% */
letter-spacing: 0.96px;
margin-top: 70px;
border: none;}













@media (max-width:1399px) { 
  .tel { margin-left: 5%;}
.header-links { margin-left: 60px;}

}
.header-link { margin-left: 5px;}
.header-logo { margin-right: 25px;}
.contacts-link { white-space: nowrap; }


@media (max-width:1199px) { 

footer>.row>div { text-align: center;}

.send-form>input, button {display: block;}
.send-form>button { margin-top: 20px;}
.send-form { text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;}
}



@media (max-width:991px)
{

.contacts-links { flex-direction: column;
margin: 0;}
.tel { margin-left: 0px;}
.header-links { margin: 0;}
.header-logo { margin: 0;}

.footer-logo { margin-left: 0;}
.footer-block { padding-left: 0;}
address>div _{margin-left: 0;}
}

@media ( max-width: 767px) {

.header-links { display: none ;}

.contacts-links { display: none;}
.window-call-btn { display: inline-block;}


}

@media (max-width:480px){ 

  .favour-content { width: 90%;
  left: 5%;
transform: translateX(0%);}

.form-input { width: 80%;
height: 40px;
flex-shrink: 0;}
.hero-title { color: #FFF;
text-align: center;
font-family: Roboto;
font-size: 26px;
font-style: normal;
font-weight: 900;
line-height: 42px; /* 161.538% */
letter-spacing: 1.56px;
text-transform: uppercase;}

}


@media ( max-width:430px) { 
  .window-media { margin-left: 0;}
  .send-form>input { width: 90%;}
}

@media (max-height:760px) { 

.window-contacts { margin-top: 30%;}


}