@import url(./fonts.css);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  text-decoration: none;
}


.callback__icon {
  width: 60px;
  height: 60px;
  position: fixed;
  right: 70px;
  bottom: 100px;
  cursor: pointer;
}

.title {
  background: linear-gradient(90deg, #222222 50%, #3f3f3f 100%);
}

.section__container {
  width: 1200px;
  position: relative;
}

.header__background {
  width: 100%;
  height: 89px;
  display: flex;
  justify-content: center;
}

.header__container {
  width: 1140px;
  display: flex;
  align-items: center;
}
.logo {
  width: 194px;
  height: 33px;
  margin-right: 107px;
  cursor: pointer;
}
.header__nav {
  display: flex;
  list-style-type: none;
  align-items: center;
  font-family: Inter-R;
  font-size: 16px;
  color: white;
}

.header__link{
  color: white;
}

.header__link:hover {
  cursor: pointer;
}
.header__link:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 26px 16px 0;
}
.header__link:nth-child(2) {
  padding-left: 25px;
}
.header__link:nth-child(3) {
  margin-left: 107px;
}
.header__link:nth-child(4) {
  margin-left: 50px;
}
.header__link:nth-child(5) {
  margin-left: 50px;
}

.section__title {
  margin-left: 50px;
  margin-top: 110px;
  width: 393px;
  font-family: Inter-M;
  font-size: 48px;
  font-weight: 500;
  line-height: 58px;
  letter-spacing: 0em;
  text-align: left;
  color: white;
}

.section__description {
  margin-left: 50px;
  margin-top: 32px;
  width: 486px;
  color: white;
  font-family: Inter-M;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
}

.main__button {
  margin-top: 60px;
  margin-left: 50px;
  margin-bottom: 117px;
  width: 198px;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: Inter-M;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
  border: 1px solid white;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

.main__button:hover {
  background-color: white;
  color: black;
}

.title__image {
  width: 420px;
  height: 539px;
  position: absolute;
  left: 800px;
  top: 147px;
  filter: drop-shadow(5px 10px 20px rgba(0, 0, 0, 0.5));
}

.about__us {
  width: 100%;
}

.about__container {
  width: 1200px;
  display: flex;
}

.about__image {
  margin-top: 90px;
  margin-bottom: 90px;
  width: 600px;
  height: 443px;
  object-fit: cover;
}

.about__texts {
  margin-left: 90px;
}

.about__title {
  margin-top: 135px;
  font-family: Inter-M;
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  letter-spacing: 0em;
  text-align: left;
}

.about__description {
  width: 431px;
  margin-top: 21.6px;
  width: 450px;
  font-family: Inter-R;
  font-size: 18px;
  font-weight: 400;
  line-height: 21.6px;
  letter-spacing: 0em;
  text-align: left;
}

.about__description.first {
  font-family: Inter-M;
  font-weight: 500;
  margin-top: 30px;
  width: 431px;
}

.about__description.last{
  margin-bottom: 90px;
  width: 431px;
}

.lean__more{
  width: 159px;
  margin-left: 272px;
  font-family: Inter-M;
font-size: 16px;
font-weight: 500;
line-height: 19px;
letter-spacing: 0em;
text-align: left;
text-decoration: none;
color: black;

}

.numbers{
  width: 100%;
  background-color: #222222;
}

.numbers__container{
  width: 1200px;
  display: flex;
  justify-content: space-between;
}

.number__card{
  margin-top: 70px;
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}



.number__image{
  width: 120px;
  height: 120px;
}

.number__title{
  margin-top: 30px;
  font-family: Inter-M;
font-size: 24px;
font-weight: 500;
line-height: 29px;
letter-spacing: 0em;
text-align: center;
color: white;
}



.number__description{
  margin-top: 20px;
  margin-bottom: 90px;
  font-family: Inter-R;
font-size: 16px;
font-weight: 400;
line-height: 19px;
letter-spacing: 0em;
text-align: center;
color: white;
}

.number__description:last-child{
  width: 297px;
}

.number__description.first, .number__description.second{
  width: 270px;
}


.services__title{
  margin-top: 90px;
  font-family: Inter-M;
font-size: 30px;
font-weight: 500;
line-height: 36px;
letter-spacing: 0em;
text-align: left;
color: #222222;

}

.services__container{
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.animation__container{
  width: 100%;
  margin-top: 29px;
  margin-bottom: 52px;
  display: flex;
  justify-content: space-between;
}

.washing__machine{
  margin-top: 31px;
  width: 520px;
  height: 520px;
  background: url(../assets/images/washing.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}

.dish__washer{
  margin-top: 31px;
  width: 520px;
  height: 520px;
  background: url(../assets/images/dishwasher.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}

.line{
  width: 1px;
  height: 589px;
  background: rgba(34, 34, 34, 0.3);
border-radius: 2px;
}

.circle{
  position: absolute;
  left: 50%;
  top: 200px;
  transform: translate(-50%, -50%);
  margin-top: 170px;
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 50%;
  background: rgba(34, 34, 34, 0.45);
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
transition: .4s;
cursor: pointer;
}

.circle__description{
  margin-top: 45px;
  width: 310px;
  font-family: Inter-R;
font-size: 16px;
font-weight: 400;
line-height: 19px;
letter-spacing: 0em;
text-align: left;
color: white;
transition: .4s;
overflow: hidden;
opacity: 0;
}


.circle:hover{
  border-radius: 10px;
  background-color: #222222;
}

.circle:hover .circle__description{
  opacity: 1;
  overflow: visible;
}

.circle__title{
  width: 329px;
  margin-top: 90px;
  font-family: Inter-M;
font-size: 28px;
font-weight: 500;
line-height: 34px;
letter-spacing: 0em;
text-align: center;
color: white;
}

.benefits{
  width: 100%;
  background-color: #222222;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benefits__container{
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benefits__title{
  margin-top: 90px;
  font-family: Inter-M;
font-size: 30px;
font-weight: 500;
line-height: 36px;
letter-spacing: 0em;
text-align: left;
color: white;
}

.our__benefits{
  width: 100%;
  margin-top: 50px;
  margin-bottom: 90px;
  display: flex;
  justify-content: space-between;
}

.benefite{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benefite__title{
  color: white;
  font-family: Inter-M;
font-size: 24px;
font-weight: 500;
line-height: 29px;
letter-spacing: 0em;
text-align: left;
}




.benefite__description{
  margin-top: 30px;
  color: white;
  font-family: Inter-R;
font-size: 16px;
font-weight: 400;
line-height: 19px;
letter-spacing: 0em;
text-align: center;
}

.benefite__description.first{
  width: 350px;
}
.benefite__description.second{
  width: 350px;
}
.benefite__description.third{
  width: 350px;
}

.footer{
  width: 100%;
  height: 80px;
  background-color: #0C0C0C;
}

.footer__container{
  width: 100%;
  height: 100%;
  padding: 0px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__logo{
  font-family: Inter-M;
font-size: 24px;
font-weight: 500;
line-height: 29px;
letter-spacing: 0em;
text-align: left;
color: white;
}

.footer__links{
  width: 250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__link{
  width: 40px;
  height: 40px;
}

.footer__image{
  width: 40px;
  height: 40px;
}






/* BURGER */


.burger__main {
  /* display: none; */
  overflow: hidden;
  height: 0px;
  opacity: 0;
}

/* BURGER */

/* POPUP */

.popup {
  visibility: hidden;
  height: 0px;
  opacity: 0;
  /* display: none; */
  overflow: hidden;
}

.popup.active {
  overflow: visible;
  z-index: 15;
  /* display: block; */
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 12, 15, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  top: 0%;
  left: 0%;
  opacity: 1;
  transition: 0.5s opacity, 0.5s visibility;
  visibility: visible;
}

.popup__body {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
}

.popup__content {
  position: relative;
  width: 320px;
  background-color: rgba(11, 12, 15, 1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 38px 40px 38px;
}

.popup__close {
  width: 16px;
  height: 16px;
  font-family: Inter-R;
  font-size: 16px;
  font-weight: 300;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: left;
  color: rgba(217, 217, 217, 1);
  position: absolute;
  top: 3.3%;
  left: 90%;
  cursor: pointer;
}

.tap__on,
.popup__or,
.popup__form {
  font-family: Inter-R;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0em;
  text-align: left;
  color: white;
}

.popup__phone {
  margin-top: 20px;
  font-family: Inter-M;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color: white;
}

.popup__or {
  margin-top: 10px;
}

.popup__form {
  margin-top: 25px;
  text-align: center;
}

.name__input,
.number__input {
  margin-top: 33px;
  width: 244px;
  height: 40px;
  border-radius: 7px;
  border: 1px solid #FFFFFF;
  background-color: rgba(7, 8, 12, 1);
  padding: 0px 15px 0px 15px;
  outline: none;
  color: white;
}

.number__input {
  margin-top: 20px;
}

.callback__button {
  margin-top: 30px;
  width: 244px;
  background-color: #FFFFFF;
  color: black;
  border: none;
  border-radius: 7px;
  height: 50px;
  font-family: Inter-M;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.burger__tap{
  display: none;
}




@media (max-width: 1199px) {


  /* POPUP */
  .popup.active {
    top: 0px;
    display: block;
    visibility: visible;
  }

  .popup__body {
    margin-top: 100px;
    align-items: flex-start;
  }
/* POPUP */


/* BUGRER */
.burger-menu {
  display: block;
}

.burger__tap{
  background-color: #0C0C0C;
  width: 42px;
  height: 42px;
  position: fixed;
  border-radius: 50%;
  z-index: 20;
  transition: .2s;
  left: unset;
  right: 20px;
  display: block;
}

.burger__tap.burger-menu_active{
background-color: white;
}

.burger-menu_button {
  top: 1px;
  /* z-index: 30; */
  width: 30px;
  height: 100%;
  border-radius: 50%;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  
}

.burger-menu_button:hover {
  background-color: inherit;
}

.burger-menu_lines::before,
.burger-menu_lines::after,
.burger-menu_lines {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #ffffff;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.burger-menu_lines {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.burger-menu_lines::before {
  content: "";
  top: -6px;
}
.burger-menu_lines::after {
  content: "";
  top: 6px;
}

.burger-menu_active .burger-menu_lines {
  background-color: transparent;

}
.burger-menu_active .burger-menu_lines::before {
  background-color: #0C0C0C;
  top: 0;
  transform: rotate(45deg);
}
.burger-menu_active .burger-menu_lines::after {
  background-color: #0C0C0C;
  top: 0;
  transform: rotate(-45deg);
}

.burger__main {
  height: 0px;
  opacity: 0;
  visibility: hidden;
}

.burger__main.active {
  z-index: 17;
  visibility: visible;
  display: block;
  overflow: visible;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(11, 12, 15, 1);
  top: 0px;
  left: 0%;
  transition: 0.5s opacity, 0.5s visibility;
  opacity: 1;
  display: block;
}

.burger__body {
  padding: 10px 50px;
  min-height: 100%;
  display: flex;
  justify-content: center;
}

.burger__content {
  margin-top: 100px;
  position: relative;
  width: 260px;
  background-color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.burger__link-item {
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: Inter-R;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: center;
  color: white;
  margin-top: 15px;
}

.burger__link-item:last-child {
  border: none;
}
/* BURGER */

.title{
  background: linear-gradient(90deg, #222222 50%, #3F3F3F 126.67%);
}

.section__container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.logo {
  margin-left: 20px;
}

.service__link {
  display: none;
}

.header__about {
display: none;}

.title__container{
  width: 100%;
  position: relative;
  overflow: hidden;
}


.header__container{
  width: 100%;
}

.header__nav{
  display: none;
}

.section__title {
  margin-left: 20px;
  margin-top: 20px;
  width: 194px;
  font-family: Inter-M;
font-size: 30px;
font-weight: 500;
line-height: 36px;
letter-spacing: 0em;
text-align: left;
}

.section__description {
  margin-left: 20px;
  margin-top: 9px;
  width: 164px;
  color: white;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0em;
  text-align: left;
}

.main__button {
  margin: 0 auto;
  margin-top: 72px;
  margin-bottom: 40px;
  width: 198px;
  height: 54px;
font-size: 16px;
font-weight: 500;
line-height: 19px;
letter-spacing: 0em;
text-align: left;
background-color: #FFFFFF;
color: #0C0C0C;
}

.title__image {
  content: url(../assets/images/title__mobile.png);
  width: 164px;
  height: 298px;
  position: absolute;
  left: unset;
  top: 0px;
  right: -5%;
  filter: drop-shadow(5px 10px 20px rgba(0, 0, 0, 0.5));
}

.about__container {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.about__image {
  content: url(../assets/images/washing__machine-mobile.png);
  margin-top: 40px;
  margin-bottom: 0px;
  width: 100%;
  height: 265px;
}

.about__texts {
  width: 320px;
  margin-left: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about__title {
  margin-top: 50px;
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  letter-spacing: 0em;
  text-align: left;
}


.about__description {
  margin-top: 16.8px;
  width: 320px;
font-size: 14px;
font-weight: 400;
line-height: 17px;
letter-spacing: 0em;
text-align: left;

}

.about__description.first {
  width: 320px;
  margin-top: 20px;
}

.about__description.last{
  width: 320px;
  margin-bottom: 38px;
}

.lean__more{
  margin-left: 161px;
  font-family: Inter-M;
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
}

.numbers__container{
  width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.number__card{
  margin-top: 50px;
  width: 287px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.number__image{
  width: 96px;
  height: 96px;
}

.number__title{
  margin-top: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: center;
}

.number__description{
  margin-top: 15px;
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0em;
  text-align: center;
}

.number__description.third{
  margin-bottom: 40px;
  width: 287px;
  
}

.number__description.first, .number__description.second{
  width: 277px;
}

.services__title{
  margin-top: 50px;
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
  letter-spacing: 0em;
  text-align: left;
}

.services__container{
  width: 100%;
}

.animation__container{
  width: 100%;
  margin-top: 40px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.washing__machine{
  margin-top: 0px;
  width: 100%;
  height: 200px;
  background: url(../assets/images/wash-mobile.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}

.dish__washer{
  margin-top: 30px;
  width: 100%;
  height: 200px;
  background: url(../assets/images/dish-mobile.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}

.line{
  margin-top: 30px;
  width: 100%;
  height: 1px;
  background: rgba(34, 34, 34, 0.3);
border-radius: 2px;
}

.circle{
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translate(-50%, -50%);
  margin-top: 50px;
  width: 260px;
  height: 100px;
  display: flex;
  
  border-radius: 10px;
  background: rgba(34, 34, 34, 0.45);
backdrop-filter: blur(7.5px);
-webkit-backdrop-filter: blur(7.5px);
transition: .4s;
cursor: pointer;
}

.circle__title{
  width: 236px;
  margin-top: 26px;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: center;
  
}

.circle:hover .circle__description{
  opacity: 0;
  overflow: hidden;
}

.benefits__container{
  width: 360px;
}

.benefits__title{
  margin-top: 50px;
font-size: 24px;
font-weight: 500;
line-height: 29px;
letter-spacing: 0em;
text-align: left;
}

.our__benefits{
  width: 320px;
  margin-top: 40px;
  margin-bottom: 85px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.benefite__title{
  color: white;
font-size: 20px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;

}

.benefite__title.first{
  margin-right: 0px;
}
.benefite__title.second{
  margin-right: 0px;
  margin-top: 30px;
}

.benefite{
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.benefite__title.third{
  margin-top: 30px;
  margin-right: 0px;
}

.benefite__description{
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0em;
  text-align: left;
}

.benefite__description.first{
  width: 320px;
}
.benefite__description.second{
  width: 320px;
}
.benefite__description.third{
  width: 320px;
}

.footer{
  height: 60px;
}

.footer__logo{
  width: 100px;
  font-size: 16px;
  line-height: 19.2px;
}

.footer__container{
  padding: 0px 20px;
}



.footer__image, .footer__link{
  width: 30px;
  height: 30px;
}

.footer__links{
  width: 186px;
}

.callback__icon{
  width: 55px;
  height: 55px;
  position: fixed;
  right: unset;
  left: 20px;
  bottom: 80px;
  cursor: pointer;
}



}