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

.modern-blog-section{

    padding:120px 0;

    background:
    linear-gradient(
        180deg,
        #f8fbff 0%,
        #eef4ff 100%
    );

    position:relative;

    overflow:hidden;
}

/* =========================================================
SECTION HEADER
========================================================= */

.modern-blog-header{

    text-align:center;

    margin-bottom:70px;
}

/* label */

.blog-label{

    display:inline-block;

    padding:12px 24px;

    border-radius:100px;

    background:#ede9fe;

    color:#6d28d9;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:24px;
}

/* title */

.modern-blog-header h2{

    font-size:54px;

    line-height:1.1;

    font-weight:700;

    color:#0a2540;

    margin-bottom:22px;

    letter-spacing:-2px;
}

/* paragraph */

.modern-blog-header p{

    max-width:850px;

    margin:auto;

    font-size:20px;

    line-height:1.9;

    color:#64748b;
}

/* =========================================================
FEATURED BLOG
========================================================= */

.featured-blog{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    align-items:center;

    gap:50px;

    background:rgba(255,255,255,.8);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.6);

    border-radius:40px;

    overflow:hidden;

    padding:30px;

    box-shadow:
    0 30px 80px rgba(15,23,42,.08);

    margin-bottom:70px;
}

/* image */

.featured-blog-image{

    position:relative;

    overflow:hidden;

    border-radius:24px;
}

.featured-blog-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;
}

.featured-blog:hover img{

    transform:scale(1.06);
}

/* badge */

.featured-badge{

    position:absolute;

    top:22px;
    left:22px;

    padding:12px 18px;

    border-radius:100px;

    background:#fff;

    color:#6d28d9;

    font-size:13px;

    font-weight:700;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}

/* category */



/* title */

.featured-blog-content h3{

    font-size:34px;

    line-height:1.2;

    font-weight:700;

    color:#0a2540;

    margin-bottom:24px;

    letter-spacing:-1.2px;
}

/* paragraph */

.featured-blog-content p{

    font-size:18px;

    line-height:1.9;

    color:#64748b;

    margin-bottom:30px;
}

/* meta */

.featured-meta{

    display:flex;

    gap:24px;

    margin-bottom:30px;
}

.featured-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#64748b;

    font-size:15px;
}

/* button */

.featured-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:58px;

    padding:0 34px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #6d28d9,
        #7c3aed
    );

    color:#fff;

    font-size:15px;

    font-weight:700;

    transition:.35s ease;
}

.featured-btn:hover{

    transform:translateY(-5px);

    color:#fff;

    box-shadow:
    0 18px 40px rgba(109,40,217,.25);
}

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

.modern-blog-grid{

    display:grid;

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

    gap:32px;
}

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

.modern-blog-card{

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.7);

    border-radius:32px;

    overflow:hidden;

    transition:.4s ease;

    box-shadow:
    0 20px 50px rgba(15,23,42,.05);
}

/* hover */

.modern-blog-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 30px 70px rgba(15,23,42,.12);
}

/* image */

.modern-blog-image{

    position:relative;

    overflow:hidden;
}

.modern-blog-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.6s ease;
}

.modern-blog-card:hover img{

    transform:scale(1.08);
}

/* category */

.modern-blog-image span{

    position:absolute;

    top:18px;
    left:18px;

    padding:10px 18px;

    border-radius:100px;

    background:#fff;

    color:#6d28d9;

    font-size:12px;

    font-weight:700;
}

/* content */

.modern-blog-content{

    padding:32px;
}

/* title */

.modern-blog-content h4{

    font-size:22px;

    line-height:1.3;

    font-weight:600;

    color:#0a2540;

    margin-bottom:16px;
}

/* text */

.modern-blog-content p{

    font-size:16px;

    line-height:1.7;

    color:#64748b;

    margin-bottom:24px;
}

/* link */

.modern-blog-content a{

    color:#6d28d9;

    font-size:15px;

    font-weight:700;

    transition:.3s ease;
}

.modern-blog-content a:hover{

    padding-left:6px;
}

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

@media(max-width:991px){

    .modern-blog-header h2{

        font-size:48px;
    }

    .featured-blog{

        grid-template-columns:1fr;

        padding:24px;
    }

    .featured-blog-content h3{

        font-size:38px;
    }

    .modern-blog-grid{

        grid-template-columns:1fr 1fr;
    }

}

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

@media(max-width:767px){

    .modern-blog-section{

        padding:80px 0;
    }

    .modern-blog-header{

        margin-bottom:50px;
    }

    .modern-blog-header h2{

        font-size:34px;

        line-height:1.2;
    }

    .modern-blog-header p{

        font-size:16px;
    }

    .featured-blog{

        gap:28px;

        border-radius:28px;
    }

    .featured-blog-content h3{

        font-size:30px;
    }

    .featured-blog-content p{

        font-size:16px;
    }

    .featured-meta{

        flex-wrap:wrap;

        gap:14px;
    }

    .featured-btn{

        width:100%;
    }

    .modern-blog-grid{

        grid-template-columns:1fr;

        gap:24px;
    }

    .modern-blog-image img{

        height:220px;
    }

    .modern-blog-content{

        padding:24px;
    }

    .modern-blog-content h4{

        font-size:24px;
    }

}


/* =========================================================
MOBILE BLOG FIXES
========================================================= */

@media(max-width:767px){

    /* top spacing */

    .modern-blog-section{

        padding-top:130px !important;
    }

    /* featured blog */

    .featured-blog{

        padding:18px !important;

        gap:24px !important;

        border-radius:26px !important;
    }

    /* image container */

    .featured-blog-image{

        border-radius:22px;

        overflow:hidden;
    }

    .featured-blog-image img{

        height:260px;

        object-fit:cover;
    }

    

    /* featured badge */

    .featured-badge{

        top:14px !important;
        left:14px !important;

        padding:9px 14px !important;

        font-size:11px !important;

        background:#ffffff;

        color:#6d28d9;

        z-index:3;

        box-shadow:
        0 10px 30px rgba(0,0,0,.08);
    }

    /* content area */

    .featured-blog-content{

        padding:4px 6px 10px;
    }

    /* heading */

    .featured-blog-content h3{

        font-size:28px !important;

        line-height:1.25;

        margin-bottom:18px;
    }

    /* paragraph */

    .featured-blog-content p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:22px;
    }

    /* meta */

    .featured-meta{

        gap:12px;

        margin-bottom:22px;
    }

    .featured-meta span{

        font-size:13px;
    }

    /* button */

    .featured-btn{

        width:100%;

        height:52px;

        border-radius:14px;
    }

}


/* =========================================================
DESKTOP FEATURED BLOG ALIGNMENT
========================================================= */

@media(min-width:992px){

    .featured-blog{

        align-items:flex-start !important;
    }

    .featured-blog-image{

        margin-top:35px !important;
    }

    .featured-blog-content{

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        padding-top:0 !important;
    }

    .featured-blog-content h3{

        margin-top:35px !important;
    }

}