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

.blog-section{
    background:#fff;
    padding:96px 0;
    font-family:Inter,Arial,sans-serif;
}

.blog-section *{
    box-sizing:border-box;
}

.blog-wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 40px;
}

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

.blog-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:42px;
}

.blog-heading{
    max-width:780px;
}

.blog-heading .label{
    margin:0;
    color:#ff8901;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
    font-weight:700;
}

.blog-heading h2{
    margin:12px 0 0;
    font-family:Poppins,Arial,sans-serif;
    font-size:46px;
    line-height:1.15;
    letter-spacing:-0.02em;
    color:#000762;
    font-weight:700;
}

.blog-all{
    display:flex;
    align-items:center;
    gap:8px;
    color:#ff8901;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    transition:.2s;
}

.blog-all:hover{
    gap:12px;
}

.blog-all svg{
    width:18px;
    height:18px;
}

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

.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

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

.blog-card{
    background:#fff;
    border:1px solid #e6e6e0;
    border-radius:24px;
    overflow:hidden;
    box-shadow:
        0 2px 6px rgba(0,0,0,.03),
        0 12px 28px rgba(0,0,0,.05);
    transition:.25s;
}

.blog-card:hover{
    transform:translateY(-4px);
    border-color:#ff8901;
}

.blog-card>a{
    display:block;
    text-decoration:none;
    color:inherit;
}

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

.blog-image{
    overflow:hidden;
}

.blog-image img{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:.35s;
}

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

.blog-placeholder{
    aspect-ratio:16/10;
    background:#ececec;
}

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

.blog-content{
    padding:22px 24px 24px;
}

.blog-meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.blog-category{
    color:#ff8901;
}

.blog-read-time,
.dot{
    color:#777;
}

.blog-content h3{
    margin:18px 0 0;
    font-family:Poppins,Arial,sans-serif;
    font-size:18px;
    line-height:1.35;
    color:#000762;
    font-weight:700;
    min-height:74px;
}

.blog-read-more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:22px;
    color:#ff8901;
    font-size:15px;
    font-weight:700;
}

.blog-read-more svg{
    width:18px;
    height:18px;
    transition:.2s;
}

.blog-card:hover .blog-read-more svg{
    transform:translateX(4px);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1024px){

.blog-header{
    flex-direction:column;
    align-items:flex-start;
}

.blog-grid{
    grid-template-columns:1fr;
}

.blog-heading h2{
    font-size:38px;
}

}

@media (max-width:768px){

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

.blog-wrap{
    padding:0 20px;
}

.blog-heading h2{
    font-size:34px;
}

.blog-content{
    padding:20px;
}

.blog-content h3{
    min-height:auto;
}

}

@media (max-width:480px){

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

.blog-all{
    font-size:14px;
}

}
.blog-section .blog-card a,
.blog-section .blog-card a *,
.blog-section .blog-card a:hover,
.blog-section .blog-card a:hover *{
    text-decoration:none !important;
}