.placeholder::-webkit-input-placeholder {
  color: #9b9b9b;
}

.placeholder::-moz-placeholder {
  color: #9b9b9b;
}

.placeholder:-moz-placeholder {
  color: #9b9b9b;
}

.placeholder:-ms-input-placeholder {
  color: #9b9b9b;
}

.placeholder:focus::-webkit-input-placeholder {
  color: transparent;
}

.placeholder:focus::-moz-placeholder {
  color: transparent;
}

.placeholder:focus:-moz-placeholder {
  color: transparent;
}

.placeholder:focus:-ms-input-placeholder {
  color: transparent;
}

.placeholder:focus {
  outline: none;
}

:focus {
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

b, strong {
  font-weight: 700;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 150%;
  color: #333;
  background: url("../img/DC_fb.webp") 50% 50% no-repeat #100e99;*/
  /*background: 0 0 / contain no-repeat url("../img/bg-left.jpg") fixed, 100% 0 / contain no-repeat url("../img/bg-right.jpg") #000 fixed;*/
}

.wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 1920px;
  padding: 50px 20px;
  min-height: 100vh;
  margin: 0 auto;
}

.container{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
    
section {
  margin: 50px 0;
}

button,
textarea,
input {
  font-family: 'Inter', sans-serif;
}

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

.logo__image {
  display: block;
}

.phone {
  display: flex;
  align-items: center;
}

.phone__icon {
  display: block;
  flex-shrink: 0;
  width: 30px;
  margin-right: 10px;
}

.phone__link {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
}

.main__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 130%;
  color: #fff;
  text-align: center;
  margin-bottom: 30px;
}

.main__title--tariff {
  margin-bottom: 50px;
}

.box {
  padding: 12rem 0;
  width: 100%;
}

.mail-list {
  display: flex;
  justify-content: space-between;
}

  .mail__head {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #ffff;
      font-weight: 600;
  }

.mail__link {
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: color .3s ease;
}

.mail__link:hover {
  color: #ff0000;
}

.mail__link:before {
  display: block;
  background: url("../img/mail.svg") 0 0 no-repeat;
  width: 30px;
  height: 21px;
  background-size: cover;
  margin-right: 10px;
  content: '';
}

.description {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #ffffff;
  font-weight: 500;
  text-align: center;
  margin-bottom: 30px;
}

.location {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  color: rgba(255, 255, 255, .7);
  font-weight: 500;
  margin-top: 30px;
}

.location__icon {
  display: block;
  flex-shrink: 0;
  width: 30px;
  margin-right: 10px;
}

.copyright {
  text-align: center;
  color: rgba(255, 255, 255, .4);
  width: 100%;
  padding-top: 80px;
}

.static {
  color: #fff;
}

.static h3 {
  font-size: 24px;
}

.static h2,
.static h3,
.static h4,
.static h5 {
  font-weight: 700;
  line-height: 130%;
  color: #fa5021;
  margin-bottom: 10px;
}

.static p {
  margin-bottom: 15px;
}

.static a {
  color: #B397F9;
}

.static ul {
  list-style-type: disc;
  margin-left: 40px;
  margin-bottom: 20px;
}

.static ul li {
  margin-bottom: 10px;
}

.static ul li::marker {
  color: red;
}

.copyright__links {
  margin-bottom: 20px;
}

.copyright__links ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.copyright__links li {
  margin: 0 10px;
}

.copyright__links a {
  color: #fa5021;
}

.tariff {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -30px -30px;
}


.tariff__item {
  width: calc(33.33% - 30px);
  padding: 30px;
  margin: 0 15px 30px;
  background: #000;
  border: 2px solid #FABD21;
  border-radius: 30px;
  transition: box-shadow .2s;
}

.tariff__item:hover {
  box-shadow: 0 0 30px rgba(250, 189, 33, .5)
}

.tariff__name {
  font-size: 24px;
  font-weight: 700;
  color: #fa5021;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.tariff__list li {
  color: #fff;
  border-bottom: 1px dashed rgba(255, 255, 255, .1);
  padding: 5px 0;
}

.tariff__list li b {
  color: #FC9274;
}

.tariff__price {
  margin: 30px 0;
  text-align: center;
  color: #9B8680;
}

.tariff__price b {
  color: #B397F9;
  font-size: 30px;
}

.tariff__btn {
  display: block;
  height: 60px;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  color: #fff;
  background: #2195FA;
}

@media screen and (max-width: 960px) {

  .mail-list {
    flex-wrap: wrap;
    justify-content: center;
  }
    

  .mail__item {
    margin: 10px;
  }

}

@media screen and (max-width: 600px) {

  .header {
    flex-direction: column;
    height: auto;
  }

  .phone {
    margin-top: 30px;
  }

  .location {
    align-items: flex-start;
  }

  .box {
    padding: 50px 0;
  }

}

@media screen and (max-width: 480px) {

  .main__title {
    font-size: 28px;
  }

  .mail-list {
    flex-direction: column;
  }

  .mail__item {
    margin: 10px 0;
  }

}

@media screen and (max-width: 340px) {


  .mail__link {
    font-size: 15px;
  }

  .mail__link:before {
    width: 24px;
    height: 17px;
  }

}