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

  &.inside-banner {
      height: 30vh;
      max-height: 650px;
      @media (max-width: 767px){
      height: 200px;
      }    
      &:before{
        background:$theme-silver;
        position: absolute;
    content: "";
    width: 100%;
    height: 100%;
      }  
  }
  &.car-banner{

    height: 600px;
  background-position: center bottom;

     &:before{
      // display: none;
     }
  }
  &.main-slider{
    max-height: 750px;
    height: 90vh;
     // max-height: 600px;
   
    @media (max-width: 767px){
      max-height: 80vh;
    }
   
  }

  &:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
  }

  .banner-content {
    position: relative;
    z-index: 11;
    @media (max-width: 767px){
      .title{
        font-size: 22px;
      }
      .content{
        font-size: 26px;
      }
    }
  }
}
.hero-slider{
  box-shadow: 0px 2px 14px 0px #252525;
}