@import url(binotel.css);


.main-frame {
  background-image: linear-gradient(
    to bottom,
    rgba(30, 144, 255, 0.4) 0%,
    rgba(196, 196, 196, 0) 100%
  ), url(../image/back_design.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.ready-solutions {
  max-width: 533px;
}
.design-content__idea {
  max-width: 750px;
  margin: 0 auto;
  margin-top: 46px;
}
.design-content__idea p {
  font-weight: bold;
  text-align: center;
  font-size: 24px;
  line-height: 32px;
}
.design-content__pattern {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 86px;
}
.pattern-left__column {
  margin-right: 139px;
}
.pattern-left__column img {
  width: 474px;
  height: auto;
}
.pattern-ight__column img {
  width: 335px;
  height: auto;
}
.pattern-text__field {
  max-width: 637px;
  margin: 77px auto 100px;
}
.pattern-text__field p {
  font-size: 18px;
  line-height: 32px;
  text-align: center;
}
.design-content__video {
  width: 100%;
  height: auto;
}
.design-content__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 48px;
}
.design-content__links > a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b5944f;
  box-sizing: border-box;
  border-radius: 25px;
  width: 247px;
  height: 45px;
  font-size: 14px;
  line-height: 15px;
  color: #b5944f;
  transition: all 0.3s;
}
.design-content__promotion {
  margin-bottom: 31px;
}
.design-content__links .design-content__phonecall {
  background: #b5944f;
  color: #ffffff;
  display: flex;
  align-items: center;
}
.design-content__phonecall img {
  margin-right: 13px;
}
.design-content__promotion:hover {
  background: #b5944f;
  color: #ffffff;
}

footer {
  margin-top: 242px;
}
@media screen and (max-width: 650px) {
  .main-frame {
    background-image: linear-gradient(
      to bottom,
      rgba(30, 144, 255, 0.4) 0%,
      rgba(196, 196, 196, 0) 100%
    ), url(../image/mobile_back_design.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
  .ready-solutions {
    width: 262px;
  }
  .design-content__idea {
    width: 290px;
    margin-top: 37px;
  }
  .design-content__idea p {
    font-size: 18px;
  }
  .design-content__pattern {
    flex-direction: column;
    margin-top: 76px;
  }
  .pattern-left__column {
    margin: 0px;
    margin-bottom: 10px;
  }
  .pattern-left__column img {
    width: 100%;
    height: auto;
  }
  .pattern-ight__column img {
    width: 100%;
    height: auto;
    padding: 0 70px;
  }
  .pattern-text__field {
    width: 100%;
    margin-top: 63px;
    padding: 0 15px;
  }
  .pattern-text__field_mar {
    margin-top: 38px;
  }
  .pattern-text__field p {
    font-size: 12px;
    line-height: 32px;
    text-align: left;
  }
  .design-content__links {
    margin-top: 63px;
  }
  .media-ad {
    position: absolute;
  }
  footer {
    margin-top: 161px;
  }
}