Simple bootstrap hero banner with social media links

<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-dark  py-3 ff">
      <div class="container"> <a class="navbar-brand font-weight-bold text-uppercase" href="#">BRAND NAME</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto font-weight-bold">
        <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Portfolio</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Testimonials</a> </li>
        <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
      </ul>
        </div>
  </div>
</nav>


<div id="carouselExampleCaptions" class="carousel slide carousel-fade gg" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">     
      <img src="https://bootstraplily.com/demo/detto-ui-kit/img/intro-one/slider-one.jpg" class="d-block w-100" alt="...">
     <div class="background-overlay"></div>
      <div class="carousel-caption">
        <h5 class="display-4 h4-md mb-4 font-weight-bold">A modular UI Kit for Bootstrap</h5>
        <p class="h5 col-8 mx-auto mb-5 pb-3 text-white-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc nisi, suscipit id dapibus sit amet, lacinia nec lorem. Aenean eget urna rutrum, suscipit ligula non, eleifend nunc. Quisque non eros quis est pharetra posuere.</p>
        <a href="" class="btn btn-link"><i class="lni lni-facebook-filled"></i></a>
        <a href="" class="btn btn-link"><i class="lni lni-twitter-filled"></i></a>
        <a href="" class="btn btn-link"><i class="lni lni-youtube"></i></a>
        <div class="mouse-wheel">
        <a href="#"><i class="lni lni-mouse"></i></a>
        </div>
      </div>
    </div> 
  </div>
</div>

.carousel-caption {
    top: 33%;
}
.mouse-wheel{
 position:absolute;
 bottom:20px;
 text-align:center;
 width:100%;    
}
.gg{
margin-top:-72px;    
}
.ff{
z-index:9;    
}
.mouse-wheel a i{
    color:#e34c43;
}
.carousel-caption i{
font-size:21px;    
}
.carousel-caption a{
color:#fff;    
transition:all 0.3s ease;
}
.carousel-caption a:hover{
opacity:0.5;
color:#fff;
}
.carousel-item {
    position: relative;
}
.carousel-item img {
    z-index: 2;
}
.background-overlay {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}
.carousel-control-next, .carousel-control-prev{
z-index: 4;    
}
@media(max-width:1180px) {
  .carousel-caption h5 {
    font-size: 2.5rem !important;
    margin-bottom:15px !important;
  }
  .carousel-caption p {
    font-size: 1rem !important;
    margin-bottom:20px !important;
  }
  .carousel-caption {
    top:23%;
    }
}
@media(max-width:980px) {
    .carousel-caption {
    top: 20%;
    }
  .carousel-caption h5 {
    font-size: 1.5rem !important;
  }
   .carousel-caption p {
    font-size:0.75rem !important;
  }
  .carousel-caption .btn {
    display:none;
  }
}
@media(max-width:680px) {
    .carousel-caption {
    top:30%;
    }
 .carousel-caption p {
   display:none;
  }    
}