.blog-main h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    
  }
  
  .display-4 {
    font-size: 2.5rem;
  }
  @media (min-width: 768px) {
    .display-4 {
      font-size: 3rem;
    }
  }


  .top-img .jumbotron{
    background: linear-gradient(90deg,rgb(53, 2, 94), #770c92);

    /* margin-top: 3.5rem; */
    padding-top:5.5rem !important;
  }

  /* ----------------------------------- GMB Topic --------------------------------------------------- */
  .top-img-gmb-topic .jumbotron{
    background: linear-gradient(0deg,rgb(255, 255, 255), #79a7e2);
    padding-top:5.5rem !important;
  }

  .top-img-gmb-topic{
    width: 100%;
  }


   /* ----------------------------------- GMB Topic --------------------------------------------------- */
   .top-img-social-topic .jumbotron{
    background: linear-gradient(0deg,rgb(255, 255, 255), #ee91ee);
    padding-top:5.5rem !important;
  }

  .top-img-social-topic{
    width: 100%;
  }

  /* ----------------------------------- Web Design Topic ----------------------------------------------- */
  .top-img-web-topic .jumbotron{
    background: linear-gradient(0deg,rgb(255, 255, 255), #73f779);
    padding-top:5.5rem !important;
  }

  .top-img-web-topic{
    width: 100%;
  }



  .background-box{
    background-color: rgba(0, 0, 0, 0.80);
    padding: 1.0rem;
  }
  
  
  /* Pagination */
  .blog-pagination {
    margin-bottom: 4rem;
  }

  .blog-pagination > .btn{
    background:#F7F2FB;
    border-color: #c2c2c2;
    font-size: 1.3rem;
    padding: .3rem 1rem;
    margin-right: 1rem;
    text-decoration: none;
    color: #000000;
    font-weight: 400;
  }

  .blog-pagination > .btn:hover{
    background:#6C34AC;
    border-color: #8f8f8f;
    text-decoration: none;
    color: #ffffff;
  }

  
  /*
   * Blog posts
   */
  .top-img-blog-post img{
   margin: 6rem 0rem;
  }

  @media only screen and (max-width: 600px) {
    .top-img-blog-post img{
      width: 100%;
      margin: 4rem 0rem;
    }

  }

  .blog-post {
    margin-bottom: 4rem;
  }
  .blog-post-title {
    margin-bottom: .25rem;
    font-size: 2.5rem;
  }
  .blog-post-meta {
    margin-bottom: 1.25rem;
    color: #999;
  }

  /*
   * Topic
   */
  .blog-topic{
    text-align: right;
  }

  /*
   * Keep reading
   */
  .blog-read-link{
    background:#6C34AC;
    border-radius: 3px;
    font-size: 1.3rem;
    padding: .3rem 1rem;
    text-decoration: none;
    color: #ffffff;
    font-weight: 400;
  }

  .blog-read-link:hover{
    background:#6C34AC;
    text-decoration: none;
    color: #ffffff;
    box-shadow:-.3rem -.3rem #000000;
   }


  
  /*
   * Footer
   */
  .blog-footer {
    padding: 2.5rem 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
  }
  .blog-footer p:last-child {
    margin-bottom: 0;
  }