i {
    padding: 0;
    margin: 0;
    margin-right: -10px;
  }
  
  /* The hero image */
  .hero-image {
      /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/website-domains.jpeg");
  
      /* Set a specific height */
    
    height: 300px;
      /* Position and center the image to scale nicely on all screens */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
  }
  
  /* Place text in the middle of the image */
  .hero-text {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
  }
  
  .hero-text h1 {
      font-size: 2.0rem;
  }
  
  .d-flex {
      background: #3B5998;
      color: #fff;
  }
  
  .d-flex ul {
      padding: 0;       
      margin: 0;
      color: #fff;
      list-style-type: disc !important;
      padding-left:1em !important;
      margin-left:1em;
      text-align: center;
      
  }
  
  
  
  
  
  @media only screen and (min-width:768px) {
   .botpadding {
     padding-bottom: 60px;
   }
  }
  @media only screen and (max-width: 420px) {
    .d-flex li {
      margin-left: -30px;
      margin-right: 10px;
    }
  }