Sale Banner

<!--== Start Christmas Sale Banner Area ==-->
<section class="christmas-banner-area mt-120 mt-md-80 mt-sm-60 bg-img" data-bg="assets/img/christmas/sale-bg.jpg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="christmas-banner-content">
                    <h4>Christmas Offer </h4>
                    <h2>Off 40%</h2>
                    <a href="shop.html" class="btn btn-brand">Shop Now</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--== End Christmas Sale Banner Area ==-->


.christmas-banner-area {
  padding: 112px 0 120px;
  position: relative;

  @media #{$md-device} {
    padding: 60px 0;
  }

  @media #{$sm-device} {
    padding: 50px 0;
  }

  &:before {
    background-color: rgba($black, 0.3);
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }

  .christmas-banner-content {
    h4 {
      color: $white;
      font-size: 60px;
      font-family: 'Dancing Script', cursive;
      line-height: 1;
      font-weight: 700;
      margin-bottom: 45px;

      @media #{$xs-device} {
        font-size: 35px;
      }
    }

    h2{
      color: $white;
      font-size: 115px;
      font-weight: 400;
      line-height: 1;
    }

    img {
      display: block;
      margin: auto;
      max-width: 320px;
    }

    .btn-brand {
      background-color: $white;
      color: $black-soft;
      padding: 20px 60px;
      margin-top: 45px;

      @media #{$md-device} {
        margin-top: 38px;
      }

      @media #{$sm-device} {
        margin-top: 18px;
        padding: 10px 25px;
      }

      &:hover {
        background-color: $brand-color;
        color: $white;
      }
    }
  }
}