/* =========================
   BLOG SECTION
========================= */

.blog-section{
    padding:80px 0;
    background:#f8f8f8;
}

/* TITLE */

.blog-title{
    margin-bottom:40px;
}

.blog-title h2{
    font-size:40px;
    font-weight:600;

    color:#111;

    margin:0;
}

/* CARD */

.blog-card{
    transition:0.35s ease;
}

.blog-card:hover{
    transform:translateY(-4px);
}

/* IMAGE */

.blog-image{
    overflow:hidden;

    border-radius:14px;

    margin-bottom:18px;
}

.blog-image img{
    width:100%;
    height:220px;

    object-fit:cover;

    transition:0.45s;
}

.blog-card:hover .blog-image img{
    transform:scale(1.04);
}

/* CONTENT */

.blog-content{
    padding:0 4px;
}

/* META */

.blog-meta{
    display:flex;
    align-items:center;

    gap:8px;

    margin-bottom:12px;

    flex-wrap:wrap;
}

.blog-meta span{
    font-size:12px;
    color:#777;
}

/* TITLE */

.blog-content h3{
    font-size:18px;
    font-weight:600;

    line-height:1.5;

    margin-bottom:14px;

    color:#111;

    display:-webkit-box;

    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

/* DESC */

.blog-content p{
    font-size:14px;

    line-height:1.8;

    color:#666;

    margin-bottom:20px;

    display:-webkit-box;

    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

/* AUTHOR */

.blog-author{
    display:flex;
    align-items:center;

    gap:10px;
}

.blog-author img{
    width:42px;
    height:42px;

    border-radius:50%;

    object-fit:cover;
}

.blog-author h5{
    font-size:14px;
    font-weight:600;

    margin-bottom:2px;
}

.blog-author span{
    font-size:12px;
    color:#777;
}

/* =========================
   LAPTOP
========================= */

@media(max-width:1199px){

    .blog-title h2{
        font-size:36px;
    }

    .blog-image img{
        height:210px;
    }

}

/* =========================
   TABLET
========================= */

@media(max-width:991px){

    .blog-section{
        padding:70px 0;
    }

    .blog-title h2{
        font-size:32px;
    }

    .blog-image img{
        height:220px;
    }

}

/* =========================
   MOBILE
========================= */

@media(max-width:576px){

    .blog-section{
        padding:60px 0;
    }

    .blog-title{
        margin-bottom:30px;

        text-align:center;
    }

    .blog-title h2{
        font-size:28px;
    }

    .blog-image{
        margin-bottom:15px;
    }

    .blog-image img{
        height:200px;
    }

    .blog-content h3{
        font-size:17px;
    }

    .blog-content p{
        font-size:13px;
    }

}