.blog-header {
  padding-bottom: 30px;
  position: relative;
  text-align: center; }
   .blog-header .blog-header-img {
    width: 100%; }
   .blog-header .blog-title {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; }
     .blog-header .blog-title h1 {
      margin: 0 !important;
      color: #fff;
      font-weight: 700;
      text-transform: uppercase; }
     .blog-header .blog-title .blog-header-function {
      display: none;
      visibility: hidden; }
   .blog-header .overlay {
    background-color: rgba(33, 130, 44, 0.5);
    padding: 15px 20px; }

@media only screen and (max-width: 767px) {
   .blog-header .blog-title {
    top: 45%;
    /* width: 90%; */
    width: 100%;
    padding: 0 40px; }

   .blog-header-img {
    width: 100%; }

  .single-post .site-content {
    padding: 0; } }
@media only screen and (max-width: 540px) {
   .blog-header .blog-title {
    padding: 0 20px; }
     .blog-header .blog-title h1 {
      font-size: 2rem !important; } }
@media only screen and (max-width: 400px) {
  .blog-header .blog-header-img {
    max-height: 250px;
    object-fit: cover;
    height: 250px; } }
/* End Blog Header Styling */