.hero-banner {
  width: 100%;
  height: 400px;
  position: relative;
  background-size: cover;
  background-color: $theme-primary;
  // background-attachment: scroll;
  background-position: center;

  &.inside-banner {
      height: 50vh;
      max-height: 650px;
      @media (max-width: 767px){
      height: 200px;
      }      
  }

  &.main-slider{
    max-height: 700px;
    height: 80vh;
     // max-height: 600px;

    @media (max-width: 767px){
      max-height: 30vh;
    }
    &:before{
      // display: none;
      background: rgba(0, 0, 0, 0.3);
    }
  }

  &:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
  }

  .banner-content {
    position: relative;
    z-index: 11;
    @media (max-width: 767px){
      .title{
        font-size: 30px;
      }
    }
  }
}