@media (max-width: 1024px) {
  
    .hero {
  min-height: 120vh;
  background: url() center center no-repeat;  
  background-size: cover;
  position: relative; 
  margin-bottom: 50px;
}
  
}

@media (min-width: 600px) {
  
    .hero {
  min-height: 60vh;
  background: url() center center no-repeat;  
  background-size: cover;
  position: relative; 
  margin-bottom: 50px;
}
  
}

.hero:before {
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}
.hero-content {
  margin: auto;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  
  .p {
    display: block;
    margin: 10px 0 0;
    font-family: "Roboto Slab","Times New Roman",serif;
    font-size: 20px;
    text-align: initial;
    font-weight: bold;
  }
  .btn-danger  {
    margin-top: 10px;
    font-weight: bold;
    border-radius: 43px !important;
    background-color: #e91e63;
  }