[ Avaa Bypassed ]

.helping-text{
   font-family: 'reey';
   font-size: 50px;
   color: $theme-color;
}

.support-box{
   background: $black;
   color: $white;
   padding: 50px 50px 40px;
   @include media-breakpoint-down(lg){
      padding: 30px;
   }
   ul{
      list-style: none;
      padding: 0;
      margin: 0;
   }
   .title{
      font-size: 26px;
      font-weight: 600;
      margin-bottom: 30px;
   }
   .phone{
      font-size: 22px;
      font-weight: 700;
      margin-top: 10px;
      a{
         color: $theme-color;
         i{
            font-size: 30px;
            margin-right: 10px;
         }
      }
   }
}
.download-box{
   background: $black;
   a{
      color: $white;
      font-size: 18px;
      font-weight: 600;
      padding: 30px;
      text-align: center;
      display: block;
      &:hover{
         color: $theme-color;
      }
   }
}

.list-button{
   display: flex;
   align-items: center;
   padding: 0;
   @media(max-width: 360px){
      display: block;
   }
   a{
      font-weight: 500;
      display: inline-block;
      font-size: 16px;
      background: #F7F7F7;
      color: $black;
      padding: 12px 40px;
      margin-right: 20px;
      @media(max-width: 360px){
         display: block;
         width: 100%;
         margin-bottom: 10px;
      }
      &:last-child(){
         margin-right: 0;
      }
      &:hover{
         background: $black;
         color: $white;
      }
   }
}

.text-with-arrow{
   font-size: 30px;
   color: $white;
   text-align: center;
   padding-top: 115px;
   line-height: 40px;
   @include media-breakpoint-down(lg){
      padding-top: 68px;
      font-size: 28px;
   }
   @include media-breakpoint-down(md){
      font-size: 18px;
      line-height: 28px;
      padding-top: 15px;
   }
   span{
      display: inline-block;
      position: relative;
      &:after{
         content: '';
         @include size(64px, 110px);
         position: absolute;
         bottom: 90%;
         left: -85px;
         background: url('#{$image-theme-path-base}line-arrow.png') no-repeat center center transparent;
         background-size: contain;
         @include media-breakpoint-down(lg){
            bottom: calc(100% + 6px);
            height: 68px;
            left: -60px;
         }
         @media(max-width: 650px){
            display: none;
         }
      }
   }
}

.block-banner{
   position: relative;
   border-radius: 10px;
   overflow: hidden;
   margin-bottom: 30px;
   .banner-image{
      position: relative;
      display: inline-block;
      &:after{
         content: '';
         position: absolute;
         background-image: -webkit-linear-gradient(to bottom,transparent 40%, $black 100%);
         background-image: -moz-linear-gradient(to bottom,transparent 40%, $black 100%);
         background-image: -ms-linear-gradient(to bottom,transparent 40%, $black 100%);
         background-image: -o-linear-gradient(to bottom,transparent 40%, $black 100%);
         background-image: linear-gradient(to bottom,transparent 40%, $black 100%);
         @include size(100%, 90%);
         bottom: 0;
         left: 0;
         z-index: 1;
         transition: all 0.35s;
      }
      img{
         transition: all 10s;
      }
   }
   .banner-content{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 11;
      width: 100%;
      padding: 15px 30px 30px;
      @include media-breakpoint-down(lg){ 
         padding: 20px;
      }
      .subtitle{
         font-size: 16px;
         color: $white;
      }
      .title{
         font-size: 20px;
         color: $white;
         margin: 0;
         line-height: 1.2;
         @include media-breakpoint-down(lg){ 
            font-size: 18px;
         }
      }
   }
   .link-term-overlay{
      position: absolute;
      @include size(100%, 100%);
      top: 0;
      left: 0;
      z-index: 15;
   }
   &.text-left{
      .number-listings{
         left: auto;
         right: 60px;
         transform: translateX(0);
      }
   }
   &.text-right{
      .number-listings{
         left: 60px;
         transform: translateX(0);
      }
   }
   &:hover{
      .banner-image{
         img{
            @include scale(1.2);
         }
      }
   }
}