/* =========================================================
   ANWAR & SONS
   BLOG / NEWS PAGE
========================================================= */

.anwar-blog-page,
.anwar-blog-page * {
    box-sizing: border-box;
}

.anwar-blog-page {
    width: 100%;

    padding:
        70px 20px 90px;

    background:
        #ffffff;

    color:
        #111111;
}

.anwar-blog-container {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
}


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

.anwar-blog-header {
    max-width: 780px;

    margin:
        0 auto 55px;

    text-align: center;
}

.anwar-blog-kicker {
    display: inline-block;

    margin-bottom: 12px;

    color:
        #2654b1;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}

.anwar-blog-header h1 {
    margin:
        0 0 16px;

    color:
        #0e1f3d;

    font-size:
        clamp(
            36px,
            4vw,
            56px
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -.03em;
}

.anwar-blog-header p {
    max-width:
        680px;

    margin:
        0 auto;

    color:
        #667085;

    font-size:
        16px;

    line-height:
        1.65;
}


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

.anwar-blog-grid {
    display: grid;

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

    gap:
        34px 26px;
}


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

.anwar-blog-card {
    min-width: 0;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    border:
        1px solid #e3e8f0;

    border-radius:
        10px;

    background:
        #ffffff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


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

.anwar-blog-image {
    width: 100%;
    height: 280px;

    display: block;

    overflow: hidden;

    background:
        #f5f8ff;

    text-decoration:
        none !important;
}

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

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform .35s ease;
}


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

.anwar-blog-content {
    flex: 1;

    padding:
        24px 22px 22px;

    display: flex;

    flex-direction: column;
}


/* =========================================================
   POST TITLE
========================================================= */

.anwar-blog-title {
    margin:
        0 0 12px;

    font-size:
        22px;

    font-weight:
        700;

    line-height:
        1.3;
}

.anwar-blog-title a {
    color:
        #0e1f3d !important;

    text-decoration:
        none !important;

    transition:
        color .25s ease;
}


/* =========================================================
   EXCERPT
========================================================= */

.anwar-blog-excerpt {
    margin-bottom:
        22px;

    color:
        #667085;

    font-size:
        14px;

    line-height:
        1.65;
}


/* =========================================================
   META
========================================================= */

.anwar-blog-meta {
    margin-top:
        auto;

    padding-top:
        16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        15px;

    border-top:
        1px solid #edf0f5;
}

.anwar-blog-read-more {
    display: inline-flex;

    align-items: center;

    gap:
        6px;

    color:
        #2654b1 !important;

    font-size:
        13px;

    font-weight:
        700;

    text-decoration:
        none !important;
}

.anwar-blog-meta time {
    color:
        #8b94a5;

    font-size:
        12px;

    white-space:
        nowrap;
}


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

@media (hover: hover) and (pointer: fine) {

    .anwar-blog-card:hover {
        transform:
            translateY(-3px);

        border-color:
            rgba(
                38,
                84,
                177,
                .28
            );

        box-shadow:
            0 12px 30px
            rgba(
                20,
                48,
                95,
                .08
            );
    }

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

    .anwar-blog-title a:hover {
        color:
            #2654b1 !important;
    }

}


/* =========================================================
   PAGINATION
========================================================= */

.anwar-blog-pagination {
    margin-top:
        55px;

    display: flex;

    justify-content:
        center;
}

.anwar-blog-pagination
.nav-links {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        8px;
}

.anwar-blog-pagination
.page-numbers {
    min-width:
        42px;

    height:
        42px;

    padding:
        0 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #dce4ef;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #2654b1 !important;

    font-size:
        13px;

    font-weight:
        600;

    text-decoration:
        none !important;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.anwar-blog-pagination
.page-numbers.current {
    border-color:
        #2654b1;

    background:
        #2654b1;

    color:
        #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {

    .anwar-blog-pagination
    a.page-numbers:hover {
        border-color:
            #2654b1;

        background:
            #2654b1;

        color:
            #ffffff !important;
    }

}


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

@media (max-width: 1024px) {

    .anwar-blog-page {
        padding:
            60px 18px 80px;
    }

    .anwar-blog-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            26px 20px;
    }

    .anwar-blog-image {
        height:
            250px;
    }

}


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

@media (max-width: 767px) {

    .anwar-blog-page {
        padding:
            48px 12px 65px;
    }

    .anwar-blog-header {
        margin-bottom:
            34px;
    }

    .anwar-blog-header p {
        font-size:
            14px;
    }

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

        gap:
            20px;
    }

    .anwar-blog-image {
        height:
            225px;
    }

    .anwar-blog-content {
        padding:
            20px 18px;
    }

    .anwar-blog-title {
        font-size:
            20px;
    }

    .anwar-blog-meta {
        align-items:
            flex-end;
    }

    .anwar-blog-pagination {
        margin-top:
            38px;
    }

}


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

@media (max-width: 420px) {

    .anwar-blog-image {
        height:
            205px;
    }

    .anwar-blog-meta {
        gap:
            8px;
    }

    .anwar-blog-pagination
    .page-numbers {
        min-width:
            38px;

        height:
            38px;

        padding:
            0 10px;
    }

}