:root {
  --accent-color-hover: #188CE8;
  --accent-color: #2196F3;
  --grey-text-color: #757575;
  
  --footer-efectivity-substrate-color: #2F303A;
  --footer-so-net-color: rgba(255, 255, 255, 0.1);
  --our-command-substrate: #F5F4FA;
  --white: #ffff;
  --our-command-substrate-hover: #e9e6e6;
  --efectivity-trans-color: #2e2f3b3f;
}

* {
  box-sizing: border-box;
}

.active:hover {
  color: var(--accent-color);
}

/* .active{
  display: flex;
} */

.active-r-now{
  color: rgb(33, 33, 33);
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 2%;
  text-decoration: none;
  color: var(--accent-color);
  text-decoration: none;
  animation: jello-horizontal 0.9s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-8-18 18:47:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
 @keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}


.active-now {
  font-family: "Roboto";
  background-color: var(--accent-color);
  color: white;
  border: none;
  width: 73px;
  height: 38px;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  /* margin-bottom: 30px; */
  letter-spacing: 6%;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.active-ground1{
  font-family: "Roboto";
  background-color: var(--our-command-substrate);
  color: black;
  border: none;
  width: 73px;
  height: 38px;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  /* margin-bottom: 30px; */
  letter-spacing: 6%;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.active-ground1:hover{
  background-color: var(--accent-color);
  color: var(--white);
}

.active-now:hover {
  background-color: var(--accent-color-hover);
}


.efectivity {
  width: 1600;
  height: 600px;
  color: rgb(255, 255, 255);
  /* padding-top: 200px;
  padding-bottom: 280px; */
  background-image: linear-gradient(to right,
      rgba(46, 47, 59, 0.247),
      rgba(46, 47, 59, 0.247)),
    url("images/efimg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* background-color: var(--footer-efectivity-substrate-color); */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


.Web {
  color: blue;
}

/* #up{
    max-width: 600px;
    text-align:10;
    color: rgb(30, 255, 0);
} */
/* Це початок header */
header>ul {
  color: rgb(20, 255, 235);
  font-family: 'Courier New', Courier, monospace;
}


.status {
  font-size: 30px;
}

.green {
  color: green;
}

.orange {
  color: orange;
}

.red {
  color: red;
}

.test {
  background-color: rgba(255, 145, 0, 0.692);
}

.back {
  background-color: var(--footer-efectivity-substrate-color);
}

footer {
  background-color: var(--footer-efectivity-substrate-color);
  /* height: 252px; */
  padding-top: 60px;
}

footer{
  display: flex;
}

.section {
  background-color: var(--our-command-substrate);
}

/* .efectivity {
   background-color: var(--footer-efectivity-substrate-color); 
  text-align: center;
  display: flex;
  align-content: center;
  
} */

.button-order {
  font-family: "Roboto";
  background-color: var(--accent-color);
  color: white;
  border: none;
  width: 216px;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  transition-property: background-color, transform;
  transition-duration: 250ms;
  /* line-height: 30px; */
  /* margin-bottom: 30px; */
  /* letter-spacing: 6%; */
  border-radius: 4px;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}

.button-order:hover {
  background-color: var(--accent-color-hover);
 
}

.webstudio {
  color: var(--accent-color);
  font-family: "Raleway";
  font-size: 26px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: 3%;
  text-decoration: none;
  width: 145px;
  font-weight: 31px;
  margin-top: 7px;
  padding-left: 35px;
  margin-top: 22px;
  margin-right: 93px;
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  
}


 @-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


.studio {
  color: black;
  font-family: "Raleway";
  font-size: 26px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: 3%;
  width: 145px;
  height: 31px;
}

.studio2 {
  color: rgb(255, 255, 255);
  font-family: "Raleway";
  font-size: 26px;
  font-weight: 700;
  line-height: 31px;
  letter-spacing: 3%;
  width: 145px;
  height: 31px;
}

.active-ground {
  font-family: "Roboto";
  background-color: var(--our-command-substrate);
  color: black;
  border: none;
  width: 125px;
  height: 38px;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  /* margin-bottom: 30px; */
  letter-spacing: 6%;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.active-ground:hover {
  background-color: var(--accent-color);
  color: var(--white);
}

.active {
  color: rgb(33, 33, 33);
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 2%;
  text-decoration: none;
  transition-property: color;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

.client-title{
  color: rgb(33, 33, 33);
font-family: "Roboto";
font-size: 36px;
font-weight: 700;
line-height: 42px;
letter-spacing: 3%;
text-align: center;
}

.client-list{
list-style: none;
gap: 30px;
display: flex;
justify-content: center;
}

.client-ico{
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(175, 177, 184);
  transition-property: color;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.client-ico:hover{
 color: #188CE8;
}

.client-item{
border: 1px solid rgb(175, 177, 184);
border-radius: 4px;
display: flex;
width: 170px;
justify-content: center;
  align-items: center;
height: 92px;
fill:  rgb(175, 177, 184);
}

.client-item:hover{
color: var(--accent-color);
}

.what-we-do-img {
  display: block;
  height: 100%;
}

.what-we-do-item {
  
  margin: 0px 0px 0px 0px;
  padding: -2px -2px -2px -2px;
}

.footer-form{
margin-left: 95px;
}


.p-description {
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 3%;
  color: var(--grey-text-color);
}

 @keyframes slide-in-blurred-top {
  0% {
    transform: translateY(-1000px) scaleY(2.5) scaleX(0.2);
    transform-origin: 50% 0%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}


.our-team-lisst {
  list-style: none;
  margin-bottom: 94px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
}

.our-team {
  color: var(--footer-efectivity-substrate-color);
  font-family: "Roboto";
  font-size: 36px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 3%;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;

}

.section-our-team {

  background-color: var(--our-command-substrate);
  margin-top: 188px;
  margin-bottom: 50px;

}

.what-we-do {
    color: var(--footer-efectivity-substrate-color);
    font-family: "Roboto";
    font-size: 36px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 3%;
    display: flex;
    justify-content: center;
      animation: slide-in-blurred-top 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    
  
  }

.what-we-do-list {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
  padding-left: 0px;
}

.main-item-2 {
  flex-basis: calc((100% - 20px*370) / 9);
  border: 1px solid rgb(238, 238, 238);
}

.so-net-ico{
  transition-property: color;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 20px;
height: 20px;
display: block;
fill: rgb(175, 177, 184);
color: rgb(175, 177, 184);
}


.so-net-ico:hover{
   color: #ffffff;
   
}

.svg-ico-item:hover{
background-color: var(--accent-color);
border-radius: 50%;

}

.footer-title{
  color:white;
  display: flex;
  margin-top: 0px;
}


.main-item-2:hover {
  
  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);
}

.main-buttons-list {
  list-style: none;
  display: flex;
  margin-top: 94px;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
}

/* .main-buttons-item {
  margin-right: 8px;
} */

.our-team-picture-list {
  list-style: none;
  display: block;
}

.card-img::before,
.card-img::after {
  content: "";
  width: 270px;
  height: 120px;
  background-size: contain;
  border-radius: 4px;
}

.card-img::after {
  background-image: url(images/antenna.png);
  background-size: 100px;
  background-repeat: no-repeat;
}

.card-img::after {
  display: flex;
  background-position: center;
  background-color: var(--our-command-substrate);
  background-size: 70px;
}

.card-img-clock::before,
.card-img-clock::after {
  content: "";
  width: 270px;
  height: 120px;
  background-size: contain;
  border-radius: 4px;
}

.card-img-clock::after {
  background-image: url(images/clock.png);
  background-size: 100px;
  background-repeat: no-repeat;
}

.card-img-clock::after {
  display: flex;
  background-position: center;
  background-color: var(--our-command-substrate);
  background-size: 70px;
}

.card-img-gra::before,
.card-img-gra::after {
  content: "";
  width: 270px;
  height: 120px;
  background-size: contain;
  border-radius: 4px;
}

.card-img-gra::after {
  background-image: url(images/diagram.png);
  background-size: 100px;
  background-repeat: no-repeat;
}

.card-img-gra::after {
  display: flex;
  background-position: center;
  background-color: var(--our-command-substrate);
  background-size: 70px;
}

.card-img-astro::before,
.card-img-astro::after {
  content: "";
  width: 270px;
  height: 120px;
  background-size: contain;
  border-radius: 4px;
}

.card-img-astro::after {
  background-image: url(images/astronaut.png);
  background-size: 100px;
  background-repeat: no-repeat;
}

.card-img-astro::after {
  display: flex;
  background-position: center;
  background-color: var(--our-command-substrate);
  background-size: 70px;
}


.list-title {
  color: rgb(33, 33, 33);
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 3%;
  margin-bottom: 10px;
  text-transform: uppercase;

}

.svg-ico-item{
  background-position: center;
  border-radius: 50%;
  transition-property: background-color;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
} 

.svg-ico-list{
  display: flex;
  list-style: none;
  gap: 20px;
  padding-left:0px ;
  justify-content: center;
  margin-bottom: 42px;
  align-items: center;
}
.our-team-item {
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}


.name {
  color: rgb(33, 33, 33);
  font-family: "Roboto";
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 3%;
  display: flex;
  justify-content: center;
}

.decrip {
  font-family: "Roboto";
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 3%;
  color: var(--grey-text-color);
  display: flex;
  justify-content: center;
}

.hidden-text{
  position: absolute;
  margin-top: 0;
  margin-bottom: 0;
  padding: 63px 24px;
  font-size: 18px;
  line-height: 1.56;
  letter-spacing: 0.03em;
  color: #ffffff;
  background-color: rgba(33, 150, 243, 0.9);
  transform: translatey(100%);
  transition: transform 250ms ease-in-out;
}

.hidden-text:hover{

}

.box{
  position: relative;
  overflow: hidden;
}

.box:hover .hidden-text {
  transform: translatey(-100%);
}


.img-text{

}

.fo-font {
  font-family: "Roboto", regular;
  font-weight: 14;
  font-style: normal;
  list-style: none;
  width: 241px;
}

.so-net-ico-link{
  display: block;
  padding: 8px 8px;
}

.so-net-link{
  color: white;
fill: currentColor;
  display: block;
  padding: 12px 12px;
  transition-property: background-color, transform;
  transition-duration: 250ms;
}

.so-net-link .so-net-ico:hover{
  background-color: var(--accent-color);
}

.so-net-link:hover{
color: white;
fill: white;
}

.fo-so-net-item{
  /* margin-left: 0px;
  padding-left: 0px; */
  background-color: rgba(255, 255, 255, 0.1);
  background-position: center;
  border-radius: 50%;
  display: flex; 
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition-property: background-color, transform;
  transition-duration: 250ms;
}


.so-net-ico-item-item{
  transform: cubic-bezier(0.4, 0, 0.2, 1); 
}

.fo-so-net-item:hover{
  background-color: var(--accent-color);
}

.fo-so-net-ico{
width: 24px;
height: 24px;
display: block;
position: relative;
fill: white;
color: #ffffff;
  top: 2px;
}

.footer-button{
  margin-left: 12px;
  font-family: "Roboto";
  background-color: var(--accent-color);
  color: white;
  border: none;
  width: 216px;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  transition-property: background-color, transform;
  transition-duration: 250ms;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-button:hover{
  background-color: var(--accent-color-hover);
  transform: cubic-bezier(0.4, 0, 0.2, 1); 
  
}

.footer-img{
  margin-left: 10px;
}

.footer-input{
  box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
background: rgba(33, 150, 243, 0);
width: 358px;
height: 50px;
padding-left: 15px;
color: white;
}

.modal-title{
  color: rgb(33, 33, 33);
font-family: "Roboto";
font-size: 20px;
font-weight: 700;
line-height: 23px;
letter-spacing: 3%;
text-align: center;
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
 width: 100%;
 height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition:
    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 250ms,
    visibility 250ms cubic-bezier(0.4, 0, 0.2, 1) 250ms;
 }
 
 
 .backdrop.is-hidden {
  opacity: 0;
  pointer-events: none;
 }
 
 .no-scroll {
  overflow: hidden;
 }
 
.modal-img{
  position: absolute;
    padding: 10px;
    padding-top: 14px;
}

.modal-link{
  color: var(--accent-color);
}

.terms{
  color: var(--grey-text-color);
  text-decoration: none;
}

.btn-send{
  color: rgb(255, 255, 255);
font-family: Roboto;
font-size: 16px;
font-weight: 700;
line-height: 30px;
letter-spacing: 6%;
text-align: center;
border-radius: 4px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
background: rgb(33, 150, 243);
width: 200px;
height: 50px;
border-style: none;
transition-property: background-color, transform;
  transition-duration: 250ms;
}

.btn-send:hover{
  background-color: var(--accent-color-hover);
  transform: cubic-bezier(0.4, 0, 0.2, 1); 
}

.checkbox{
  display: block;
    width: 16px;
    height: 15px;
    position: relative;
    top: 33px;
    margin-right: 7px;
    border: 1.5px solid #212121;
    border-radius: 4px;
}

.modal-input{
  width: 448px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(33, 33, 33, 0.2);
border-radius: 4px;
margin-bottom: 18px;
padding-left: 30px;
}

.modal-area{
  width: 448px;
height: 120px;
  margin-top: 18px;
  box-sizing: border-box;
border: 1px solid rgba(33, 33, 33, 0.2);
border-radius: 4px;
}

.btn-close{
  /* box-sizing: border-box; */
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    transition-property: fill;
    transition-duration:250ms ;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    padding: 6px;
    box-sizing: border-box;
    border-radius: 100%;
    background-color: var(--white);
/* display: flex;
justify-content: space-between */
}



 .close-img{
  width: 11px;
  height: 11px;
  
  
}

.close-img:hover{
  fill: #188CE8;
}

.modal-par{
  color: rgb(117, 117, 117);
font-family: "Roboto";
font-size: 12px;
font-weight: 400;
line-height: 14px;
letter-spacing: 1%;
margin-left:10px ;
text-align: left;
}

 .modal {
  position: absolute;
  top: 50%;
  left: 50%;
 min-width: 500px;
 min-height: 500px;
  padding: 15px;
  border-radius: 4px;
box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
background: rgb(255, 255, 255);
  transform: translate(-50%, -50%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  /* transition-property: transform;
  transition-duration: 250ms;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1); */
  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 250ms;
    
 }


 
.decor{
  position: relative;
  top: 30px;
  right: 2px;
  width: 48px;
height: 4px;
  border-radius: 2px;
background: rgb(33, 150, 243);
transition-property: transform;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.active:hover .decor{
 transform:translateY(-20px) ; 
}

.active:hover .decor-2{
  transform: translateY(-20px);
}


.decor-2{
  position: relative;
  top: 30px;
  right: 2px;
  width: 78px;
height: 4px;
  border-radius: 2px;
background: rgb(33, 150, 243);
transition-property: transform;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fo-so-net-list{
  list-style: none;
  display: flex;
  margin-top: 0px;
  margin-left: 0px;
padding-top: 0px;
  padding-left: 0px;
  gap: 10px;
justify-content: center;
}

.thumb{
  position: relative;
  background-color: rgba(47, 48, 58, 0.8);
  
}

.thumb > .label{
  position: absolute;
  bottom: 0;
  background-color: rgba(47, 48, 58, 0.8);
  width: 370px;
height: 70px;
  color: var(--our-command-substrate);
  font-size: 14px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
margin: 0px;
display: flex;
justify-content: center;
align-items: center;
}

/* .footer-wrapper-contacts{
  
  
}

.footer-social-networking-wrapper{
  
} */

.fo-footer {
  color: rgb(255, 255, 255);
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 3%;
  width: 350px;
}

.main-title {
  color: rgb(255, 255, 255);
  font-family: "Roboto";
  font-size: 44px;
  font-weight: 900;
  line-height: 60px;
  letter-spacing: 6%;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.name-2 {
  font-family: "Roboto", bold;
  font-style: normal;
  color: rgb(33, 33, 33);
  font-family: Roboto;
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 6%;
  padding-left: 24px;

}



.decrip-2 {
  color: rgb(117, 117, 117);
  font-family: "Roboto";
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 3%;
  text-align: left;
  color: var(--grey-text-color);
  padding-left: 24px;
}

.mailto {
  text-decoration: none;
  color: var(--grey-text-color);
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;

}

.mailto-2 {
  text-decoration: none;
  color: var(--grey-text-color);
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 2%;
}

.tel {
  text-decoration: var(--grey-text-color);
  color: var(--grey-text-color);
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 3%;
  list-style: none;
}

.header-tell {
  color: var(--footer-efectivity-substrate-color);
  text-decoration: none;
  font-size: 14px;
  color: #757575;
font-weight: 500;
}

.hr {
  width: 99.9%;
  display: flex;
  margin: 0px 0px;
  justify-content: center;
  border: 1px solid rgb(236, 236, 236);
}

.header-list {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  gap: 50px;
  margin-right: auto;
  width: 500px;
  align-items: center;
}

.con-wrap {
  display: flex;
  justify-content: flex-end;

}

/* .header-wraper{
display: flex;
} */

.main-list {
  display: flex;
  list-style: none;
  margin-top: 94px;
  margin-bottom: 50px;
  padding: 0px;
  gap: 30px;
}


header {
  display: flex;
  height: 80px;
}

.main-list-2 {
  list-style: none;
  margin-top: 34px;
  margin-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
  gap: 27px;
}

.what-w-d {
  margin-top: 94px;
  margin-bottom: 50px;
}


body {
  font-family: "Roboto";
}

.header-list-contacts {
  list-style: none;
  display: flex;
  gap: 50px;
  margin-left: auto;
  justify-content: space-between;
  align-items: center;
}

.header-nav {
  display: flex;
  justify-content: space-between;
}

.footer-wrapper{
  display: flex;
}

.header-mail{
  margin-right: 10px;
width: 16px;
height: 16px;
}

.header-mail:hover{
  color: #188CE8;
}

.header-phone{
  margin-right: 10px;
  
}

.header-phone:hover{
  color:#188CE8;
}

.container {
  width: 1170px;
  margin: 0 auto;
  /* outline: rgb(110, 173, 209) 1px solid; */
}