/* banner section start
	============================================================================================ */
.hero-banner{
  position: relative;
  padding: 70px 0;
  // height: 400px;
  background: url("../img/banner/hero-banner.png") left center no-repeat;
  background-size: cover;
  // z-index: 2;

  @media(min-width: 768px){
    padding: 150px 0;
  }

  @media(min-width: 1200px){
    padding: 240px 0;
  }

  &-sm{
    padding-top: 80px;
    padding-bottom: 80px;

    @media(min-width: 992px){
      padding-top: 170px;
      padding-bottom: 170px;
    }
  }

  h1{
    color: $white;
    margin-bottom: 25px;
    font-size: 28px;

    @media(min-width: 768px){
      font-size: 60px;
      margin-bottom: 45px;
    }
  }

  h2{
    font-size: 22px;
    color: $white;
    text-transform: uppercase;
    margin-bottom: 0;

    @media(min-width: 768px){
      font-size: 42px;
    }
  }

  p{
    font-size: 22px;
    color: $white;
    margin-bottom: 0;
  }

  // &::after{
  //   content: "";
  //   display: block;
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background: url(../../img/banner/hero-vector-overlay.png) left center no-repeat;
  //   z-index: -1;
  // }

  // &::after{
  //   content: "";
  //   display: block;
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background: rgba(23, 3, 73, .8);
  //   z-index: -2;
  // }
}

.hero-banner-icon{
  color: $white;
  display: inline-block;
  // margin-bottom: 10px;

  @media(min-width: 768px){
    margin-bottom: 10px;
  }

  i,span{
    font-size: 35px;

    @media(min-width: 768px){
      font-size: 60px;
    }
  }

  [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after{
    font-size: 35px;

    @media(min-width: 768px){
      font-size: 60px;
    }
  }
}
/* banner section end
  ============================================================================================ */



/* breadcrumb section start
  ============================================================================================ */
  .banner-breadcrumb{
    display: inline-block;
    
    .breadcrumb{
      background: transparent;
      padding: 0;
  
      &-item{
        padding: .1rem;
  
        a{
          text-transform: capitalize;
          color: #fff;
        }
  
        &+.breadcrumb-item::before{
          color: #fff;
          padding-left: .2rem;
          padding-right: .4rem;
          // content: "-";
        }
  
        &.active{
          color: #fff;
        }
      }
    }
  }
/* breadcrumb section end
  ============================================================================================ */