* {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}



article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

  display: block;

}



html {

  height: 100%;

}



body {

  line-height: 1;

}



ol,

ul {

  list-style: none;

}



blockquote,

q {

  quotes: none;

}



blockquote:before,

blockquote:after,

q:before,

q:after {

  content: '';

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



@font-face {

  font-family: 'Noto Sans';

  font-style: normal;

  font-weight: 400;

  src: local(''),

    url('../fonts/noto-sans-v27-latin_cyrillic-regular.woff2') format('woff2'),

    /* Chrome 26+, Opera 23+, Firefox 39+ */

      url('../fonts/noto-sans-v27-latin_cyrillic-regular.woff') format('woff');

  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

}



body {

  font-family: 'Noto Sans';

  font-style: normal;

  font-size: 15px;

  line-height: 1.2;

  font-weight: normal;

  color: #403e3b;

  user-select: none;

}



.wrapper {

  max-width: 1168px;

  margin: 0 auto;

}



header {

  background: #ffffff;

  top: 0;

  left: 0;

  width: 100%;

  position: fixed;

  opacity: 95%;

  z-index: 100;

}



h2 {

  font-family: 'Noto Sans';

  font-style: normal;

  font-size: 55px;

  line-height: 1.2;

  font-weight: 500;

  color: #403e3b;

  text-align: center;

  margin-right: 10px;

}



.header__logo__pic {

  max-height: 55px;

  /* transition: 0.2s ease; */

}



/* .header__logo__pic:hover {

  transform: scale(1.2);

  transition: 1s ease;

} */



.header__wrapper {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  padding-top: 10px;

  padding-bottom: 10px;

}



.header__list {

  display: flex;

  flex-wrap: wrap;

}



.header__item {

  margin-right: 32px;

}



.header__item:last-child {

  margin-right: 0;

}



.header__link {

  font-weight: 500;

  font-size: 24px;

  color: #1b1a1a;

  text-decoration: none;

  padding: 5px;

  transition: 0.4s ease;

}



.header__nav {

  padding-right: 10px;

}

.header__link:hover,

.header__link:focus,

.header__link:active {

  opacity: 0.5;

}



.main {

  margin-top: 78px;

}

.main__section {

  height: 100vh;

}



.main__pic {

  min-width: 50%;

  min-height: 100px;

  background: url('../img/1img.jpg');

  background-size: cover;

}



.wrapper__main {

  display: flex;

  justify-content: space-between;

  margin: 0 auto;

  width: 100%;

}



.main__text {

  background-color: #ece7e4;

  padding-left: 60px;

  padding-right: 30px;

  padding-top: 60px;

  padding-bottom: 60px;

}



.main__text h1 {

  font-size: 64px;

  user-select: none;

  padding-bottom: 18px;

}



.main__text p {

  width: fit-content;  

  font-size: 20px;

  line-height: 1.5;

}



.work__list{

  font-size: 20px;

  line-height: 1.5;

  margin-left: 35px;

  padding-top: 10px;

  padding-bottom: 10px;

}

.need {

  padding-top: 120px;

  padding-bottom: 120px;

}



.need h2 {

  max-width: 1000px;

  margin: 0 auto;

  text-align: center;

  line-height: 1.4;

}



.need__count {

  display: flex;

  align-items: center;

  justify-content: space-around;

  margin-top: 80px;

  padding-left: 20px;

}



.needs {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  margin-right: 40px;

  max-width: 350px;

  width: 33%;

}



.needs h2 {

  font-size: 77px;

  line-height: 0.9;

}



.needs p {

  padding-left: 10px;

  font-size: 20px;

}



.contractor {

  width: 100%;

  height: 600px;

  background: url('../img/2img.png');

  background-size: 100% 100%;

  display: flex;

  justify-content: right;

}



.contractor div {

  height: 60%;

  width: 40%;

  margin-top: 50px;

}



.contractor p {

  margin-right: 20px;

  margin-top: 50px;

  font-size: 20px;

  line-height: 1.5;

  padding-bottom: 20px;

}



.portfolio {

  padding-top: 120px;

  padding-bottom: 120px;

  

}



.portfolio__wrapper {

  margin-top: 90px;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

}





.example {

  min-width: 240px;

  height: 300px;

  border-radius: 5px;

  overflow: hidden;

  transition: all 800ms;

  position: relative;

  margin: 15px;

}



.example :hover {

  transform: scale(1.1);

}





.example__wrapper p {

  font-size: 20px;

  user-select: none;

  text-align: center;

}

.example__wrapper{

width:300px}



.ex1 {

  transition: all 800ms;

  width: 100%;

  height: 100%;

  background:

    url('../img/examples/1/1.jpg') round;

}

.ex2 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/2/1.jpg')round;

}

.ex3 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background:

    url('../img/examples/3/1.jpg') round;

}



.ex4 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/4/1.jpg') round;

}

.ex5 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/5/1.jpg') round;

}

.ex6 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/6/1.jpg') round;

}

.ex7 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/7/1.jpeg') round;

}

.ex8 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/8/1.jpg') round;

}



.ex9 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/9/1.jpg') round;

}

.ex10 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/10/1.jpg') round;

}

.ex11 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/11/1.jpg') round;

}

.ex12 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/12/1.jpg') round;

}

.ex13 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/13/1.jpg') round;

}

.ex14 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/14/1.jpg') round;

}

.ex15 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/15/1.jpg') round;

}

.ex16 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/16/1.jpg') round;

}

.ex17 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/17/1.jpg') round;

}

.ex18 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/18/1.jpg') round;

}

.ex19 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/19/1.jpg') round;

}

.ex20 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/20/1.jpg') round;

}

.ex21 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/21/1.jpg') round;

}

.ex22 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/22/1.jpg') round;

}

.ex23 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/23/1.jpg') round;

}

.ex24 {

  width: 100%;

  height: 100%;

  transition: all 800ms;

  background: 

    url('../img/examples/24/1.jpg') round;

}

/* .popup {

  position: fixed;

  inset: 0;

  background: linear-gradient(

    0deg,

    rgba(0, 0, 0, 1) 0%,

    rgba(112, 108, 108, 1) 100%

  );

  display: flex;

  opacity: 95%;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

}

.popup:target {

  opacity: 1;

  visibility: visible;

}



.popup__main {

  position: relative;

  display: flex;

  max-width: 600px;

  margin: auto;

  background-color: #ece7e4;

  border-radius: 10px;

  padding: 30px;

  cursor: default;

}



.popup__img {

  width: 300px;

  height: 300px;

}



.popup__close {

  background-color: transparent;

  cursor: pointer;

  line-height: 1;

  font-size: 22px;

  font-weight: 900;

  position: absolute;

  top: 30px;

  right: 10px;

}



.outside__trigger {

  bottom: 0;

  cursor: default;

  left: 0;

  position: fixed;

  right: 0;

  top: 0;

} */



.partners {

  background-color: #ece7e4;

  padding-top: 120px;

}

.partners__wrapper {

  margin-top: 90px;

  padding-left: 30px;

  padding-right: 30px;

  padding-bottom: 90px;

  min-height: 400px;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-around;

  gap: 40px;

}



.partner__logo img {

  height: 60px;

}

.contacts {

  background-color: #cec4bc;

  height: 350px;

  padding-top: 100px;

  padding-left: 200px;

  user-select: text;

}

.contacts h2 {

  text-align: left;

  margin-bottom: 50px;

}



.tel {

  text-decoration: none;

  font-size: 30px;

  font-weight: 900;

  color: #645c55;

  margin-bottom: 100px;

}



.mail {

  text-decoration: none;

  font-size: 25px;

  line-height: 60px;

  font-weight: 400;

  color: #645c55;

}



.contacts p {

  font-size: 20px;

  margin-top: 20px;

}

footer {

  background-color: #ece7e4;

  height: 80px;

  position: relative;

}



footer p {

  position: absolute;

  top: 40px;

  right: 50px;

}



@media (max-width: 1400px) {

  .contractor div {

    width: 70%;

  }

}

@media (max-width: 1060px) {

  .wrapper__main {

    display: block;

  }

  .main__text p {

    min-width: 100%;

  }

  .main__pic {

    height: 600px;

  }

}

@media (max-width: 933px) {

  .header__nav {

    display: none;

  }

  .header__logo {

    margin: 0 auto;

  }

}



@media (max-width: 800px) {

  .need__count {

    flex-direction: column;

  }

  .needs {

    padding-bottom: 20px;

    width: 50%;

  }

 .contractor div {

    width: 100%;

  }

 .contractor p {

    padding-left: 25px;

  }

 

}

@media (max-width: 650px) {

 

 

  .contacts {

    padding-left: 50px;

  }

  .needs {

    width: 80%;

  }

 .contractor {

  height : 700px;

  }

}

@media (max-width: 520px) {

  .main__text {

    padding-top: 30px;

  }

  .main__text h1 {

    font-size: 45px;

  }

  h2 {

    font-size: 45px;

  }

  .contractor {

   height : 750px;

  }

}

@media (max-width: 400px) {

  .contractor div {

    margin-top: 20px;

  }

  .main__text h1 {

    font-size: 25px;

  }

  h2 {

    font-size: 25px;

  }

}