section.how#how
    .container.how__container
        .row.how__row
            .how__left
                h3.how__title Как это работает
                p.how__text В основе эфира Office Price TV лежат данные из Личного Кабинета Getrealprice. Для клиентов Getrealprice эти данные уже подготовлены и визуализированны, или можно пользоваться. Office Price TV - это набор алгоритмов и показателей, по которым будет транслироваться сигнал. Такая конфигурация позволяет сделать выгодные предложения по ценам на эту услугу для наших клиентов.
            .how__right
                img(src="img/how__right-bg.png" alt="Bg")
                .how__video-wrapper
                    a.how__video-link.mfp-video(href="https://www.youtube.com/watch?v=qWSV6hXuvWw")

html, body {
  overflow-x: hidden;
}

html {
  font-size: 10px;
}
body {
  font-family: "Montserrat", sans-serif;


  &::-webkit-scrollbar{
    width:10px;
    background-color:#ffffff;
  }
  &::-webkit-scrollbar:horizontal{
    height:10px;
  }
  &::-webkit-scrollbar-track{
    border:1px #ffffff solid;
    border-radius:0;
    -webkit-box-shadow:0 0 6px #ffffff inset;
  }
  &::-webkit-scrollbar-thumb{
    background-color:#35255a;
    border-radius:0;
  }
  &::-webkit-scrollbar-thumb:hover{
    background-color:#35255a;
    border:1px solid #333333;
  }
  &::-webkit-scrollbar-thumb:active{
    background-color:#4d397a;
    border:1px solid #333333;
  }

}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-tap-highlight-color: transparent;

}

* {

  &::selection {
    background: #f7775d;
  }

}


.container {
  max-width: 1180px;
  padding-left: 30px;
  padding-right: 30px;
  margin-left: auto;
  margin-right: auto;
  
}

.orange-btn {
  height: 60px;
  line-height: 60px;
  background-color: #f54028;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
  padding-left: 30px;
  padding-right: 30px;
  min-width: 300px;
  text-align: center;
  transition: background 0.3s;
  border: none;
  cursor: pointer;
  $c: #f54028;
  &:hover {
    background: lighten($c, 5%);
  }
  &:focus {
    background: darken($c, 5%);
  }
}

.how {

  background: url("https://i.imgur.com/9a3Z8ku.png") no-repeat 100% 50% / 60%;
  padding-bottom: 75px;

  &__row {
    display: flex;
    align-items: flex-end;
    margin-left: -80px;
    margin-right: -80px;
  }

  &__left {
    width: calc(55% - 80px);
    margin-left: 80px;
    margin-right: 80px;
    padding-bottom: 60px;
  }

  &__right {
    width: calc(45% - 80px);
    margin-left: 80px;
    margin-right: 80px;
    position: relative;
  }

  &__title {
    color: #35255a;
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: -4px;
    line-height: 6.5rem;
    margin: 0 0 30px 0;
    position: relative;
    padding-right: 110px;
    &::before {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: url("../img/how-title-decor.svg") no-repeat center / contain;
      width: 117px;
      height: 13px;
    }
  }

  &__text {
    color: #35255a;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.8rem;
    margin: 0;
  }
  &__video {

    &-wrapper {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    &-link {
      width: 86px;
      height: 86px;
      background-color: #f54028;
      border-radius: 50%;
      display: inline-block;
      margin-right: 15px;
      position: relative;
      transition: background 0.3s;
      &:hover {
        background: #f65640;
      }
      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 55%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 25px;
        height: 28px;
        background: url("../img/triangle-left.svg") no-repeat center / contain;
      }
    }

    &-text {
      color: #ffffff;
      font-size: 1.8rem;
      font-weight: 600;
      letter-spacing: -0.72px;
      line-height: 4.1rem;
    }

  }

}