/*=========================================================
            BLOG SECTION
            PREMIUM CSS - PART 2
=========================================================*/


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

.blog-section-mg{

    position:relative;

    width:100%;

    padding:80px 0;

    background:#ffffff;

    overflow:hidden;

}



/*=========================================
            CONTAINER
=========================================*/

.blog-section-mg .container-mg{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:0 15px;

}



/*=========================================
            HEADING
=========================================*/

.blog-heading-mg{

    max-width:720px;

    margin:0 auto 55px;

    text-align:center;

}

.blog-heading-mg span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:42px;

    padding:0 20px;

    background:#fcf3f2;

    color:#b83330;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.blog-heading-mg h2{

    font-size:42px;

    font-weight:800;

    color:#111111;

    line-height:1.2;

    margin-bottom:18px;

}

.blog-heading-mg p{

    font-size:16px;

    color:#666666;

    line-height:1.9;

}



/*=========================================
            GRID
=========================================*/

.blog-grid-mg{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}



/*=========================================
            CARD
=========================================*/

.blog-card-mg{

    position:relative;

    background:#ffffff;

    border-radius:14px;

    overflow:hidden;

    border:1px solid #ededed;

    transition:.40s;

    box-shadow:

    0 10px 30px rgba(0,0,0,.05);

}



/*=========================================
            HOVER
=========================================*/

.blog-card-mg:hover{

    transform:translateY(-8px);

    border-color:#b83330;

    box-shadow:

    0 20px 55px rgba(184,51,48,.14);

}



/*=========================================
            IMAGE
=========================================*/

.blog-image-mg{

    position:relative;

    overflow:hidden;

    height:255px;

}

.blog-image-mg img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:1s;

}

.blog-card-mg:hover .blog-image-mg img{

    transform:scale(1.08);

}



/*=========================================
            IMAGE OVERLAY
=========================================*/

.blog-image-mg::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.02),

        rgba(0,0,0,.25)

    );

    opacity:0;

    transition:.35s;

    z-index:1;

}

.blog-card-mg:hover .blog-image-mg::before{

    opacity:1;

}



/*=========================================
            CATEGORY
=========================================*/

.blog-category-mg{

    position:absolute;

    left:22px;

    top:22px;

    z-index:2;

    height:36px;

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#b83330;

    color:#ffffff;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}



/*=========================================
            CONTENT
=========================================*/

.blog-content-mg{

    padding:28px;

}

.blog-content-mg h3{

    font-size:25px;

    font-weight:700;

    color:#111111;

    line-height:1.4;

    margin-bottom:16px;

    transition:.35s;

}

.blog-card-mg:hover .blog-content-mg h3{

    color:#b83330;

}

.blog-content-mg p{

    font-size:15px;

    color:#666666;

    line-height:1.9;

}

/*=========================================================
            BLOG SECTION
            PREMIUM RESPONSIVE CSS
=========================================================*/


/*=========================================
        LARGE DESKTOP
=========================================*/

@media(max-width:1200px){

    .blog-heading-mg{

        margin-bottom:45px;

    }

    .blog-heading-mg h2{

        font-size:38px;

    }

    .blog-grid-mg{

        gap:22px;

    }

    .blog-image-mg{

        height:230px;

    }

    .blog-content-mg{

        padding:24px;

    }

    .blog-content-mg h3{

        font-size:22px;

    }

}



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

@media(max-width:992px){

    .blog-section-mg{

        padding:70px 0;

    }

    .blog-heading-mg{

        margin-bottom:40px;

    }

    .blog-heading-mg h2{

        font-size:34px;

    }

    .blog-grid-mg{

        grid-template-columns:1fr;

        gap:22px;

    }

    .blog-image-mg{

        height:260px;

    }

}



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

@media(max-width:768px){

    .blog-section-mg{

        padding:60px 0;

    }

    .blog-heading-mg{

        margin-bottom:35px;

    }

    .blog-heading-mg span{

        height:36px;

        padding:0 16px;

        font-size:11px;

    }

    .blog-heading-mg h2{

        font-size:28px;

    }

    .blog-heading-mg p{

        font-size:14px;

        line-height:1.8;

    }

    .blog-image-mg{

        height:220px;

    }

    .blog-content-mg{

        padding:20px;

    }

    .blog-content-mg h3{

        font-size:20px;

        margin-bottom:12px;

    }

    .blog-content-mg p{

        font-size:14px;

    }

}



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

@media(max-width:576px){

    .blog-section-mg{

        padding:50px 0;

    }

    .blog-section-mg .container-mg{

        padding:0 12px;

    }

    .blog-heading-mg{

        margin-bottom:30px;

    }

    .blog-heading-mg h2{

        font-size:24px;

    }

    .blog-image-mg{

        height:190px;

    }

    .blog-category-mg{

        left:15px;

        top:15px;

        height:32px;

        padding:0 14px;

        font-size:11px;

    }

    .blog-content-mg{

        padding:18px;

    }

    .blog-content-mg h3{

        font-size:18px;

        line-height:1.45;

    }

    .blog-content-mg p{

        font-size:13px;

        line-height:1.8;

    }

}



/*=========================================
        EXTRA SMALL MOBILE
=========================================*/

@media(max-width:420px){

    .blog-section-mg{

        padding:45px 0;

    }

    .blog-heading-mg span{

        font-size:10px;

    }

    .blog-heading-mg h2{

        font-size:21px;

    }

    .blog-heading-mg p{

        font-size:13px;

    }

    .blog-image-mg{

        height:170px;

    }

    .blog-content-mg{

        padding:16px;

    }

    .blog-content-mg h3{

        font-size:17px;

    }

    .blog-content-mg p{

        font-size:12.5px;

    }

}