/* Blog Page */
 .blog-section{
    position: relative;
    padding-top: 100px;
}

.blog-bg{
    background: url('../images/Blog-bg.png') 50% 50% no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.blog-inner {
   position: relative;
    text-align: left;
    padding: 50px 200px;
}

.blog-full-inner {
    position: relative;
}

.blog-full {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.blog-col {
    position: relative;
    overflow: hidden;
    /* margin: 10px; */
    border: 1px solid #aaa;
}

.blog-col-img {
    width: 100%;
    background: url() 50% 50% no-repeat;
    background-size: cover;
    background-clip: content-box;
    position: relative;
    height: 250px;
}

.blog-info {
   position: relative;
    z-index: 99;
    background: #fff;
    border-radius: 0;
}

.blog-title {
   color: #32373c;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    display: grid;
    padding: 20px;
}

.button-blog {
   position: relative;
    width: 100%;
    text-align: right;
}

.blog-btn {
   width: 60%;
}

.button-blog a {
    text-decoration: none;
}


@media (max-width: 1600px) {
  
.blog-inner {
    padding: 50px 100px;
}
}

@media (max-width: 1200px) {
  
.blog-inner {
    padding: 50px;
}
}

@media (max-width: 1050px) {
 .blog-title {
    font-size: 18px;
}

.blog-full {
    margin-top: 30px;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
}

@media (max-width: 767px) {
.blog-inner {
        padding: 30px;
        text-align: center;
    }

    .blog-bg {
        background: linear-gradient(to bottom, #dcd7ca, #ffefcede, #ffefce);
   }

   .blog-full {
        grid-template-columns: 1fr;
        gap: 30px;
    }

     .blog-col-img {
        height: 150px;
    }

.blog-col {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    gap: 0px;
    align-items: center;
}

.blog-info {
    background: #fff;
    height: 100%;
}

.button-blog {
   position: absolute;
    width: 100%;
    text-align: right;
    bottom: 0;
}
   
}

@media (max-width: 450px) {
 .blog-col-img {
        height: 120px;
    }

    .blog-title {
        font-size: 16px;
        padding: 10px;
    }
  
  .blog-btn {
    width: fit-content;
}
}