.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 h2 {
   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: 900px) {
   .blog-header .blog-title h2 {
     font-size: 2.5rem !important;
   }
 }

 @media only screen and (max-width: 540px) {
   .blog-header .blog-title {
     padding: 0 20px;
   }
   .blog-header .blog-title h2 {
     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 */