/* =====================================================
   WEBLINKUS
   ENGLISH BLOG
   PREMIUM ENGLISH BLOG DESIGN
===================================================== */


/* =====================================================
   GOOGLE FONT
   Poppins - English Blog
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');


/* =====================================================
   MAIN
===================================================== */

.enblog-page {
    padding: 60px 0;
    background: #fff;

    direction: ltr !important;
    text-align: left !important;

    font-family: 'Poppins', sans-serif !important;
    color: #222;
}


/* =====================================================
   FORCE LTR + FONT
===================================================== */

.enblog-page *,
.enblog-page h1,
.enblog-page h2,
.enblog-page h3,
.enblog-page h4,
.enblog-page h5,
.enblog-page h6,
.enblog-page p,
.enblog-page a,
.enblog-page span,
.enblog-page div {
    direction: ltr !important;

    font-family: 'Poppins', sans-serif !important;
}


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

.enblog-page .container {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}


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

.enblog-header {
    width: 100%;
    margin-bottom: 45px;

    text-align: center !important;
}

.enblog-header h1 {
    margin: 0 0 12px;
    padding: 0;

    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;

    color: #222;

    text-align: center !important;
}

.enblog-header p {
    max-width: 700px;

    margin: 0 auto;
    padding: 0;

    color: #777;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;

    text-align: center !important;
}


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

.enblog-grid {
    display: grid !important;

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

    gap: 30px;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    direction: ltr !important;
}


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

.enblog-grid > div {
    width: auto !important;
    max-width: none !important;

    min-width: 0;

    flex: none !important;

    margin: 0 !important;
    padding: 0 !important;

    direction: ltr !important;
}


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

.enblog-card {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #fff;

    border: 1px solid #e8e8e8;
    border-radius: 10px;

    overflow: hidden;

    direction: ltr !important;
    text-align: left !important;

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

.enblog-card:hover {
    transform: translateY(-5px);

    border-color: #ddd;

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


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

.enblog-image {
    position: relative;

    width: 100%;
    height: 210px;

    overflow: hidden;

    background: #f5f5f5;
}

.enblog-image a {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    direction: ltr !important;
}

.enblog-image img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;

    transition: transform .4s ease;
}

.enblog-card:hover .enblog-image img {
    transform: scale(1.05);
}


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

.enblog-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 20px;

    direction: ltr !important;
    text-align: left !important;
}


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

.enblog-title {
    margin: 0 0 12px;
    padding: 0;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.45;

    color: #222;

    text-align: left !important;
}

.enblog-title a {
    display: block;

    margin: 0;
    padding: 0;

    color: #222;

    font-size: inherit;
    font-weight: inherit;

    line-height: inherit;

    text-decoration: none !important;

    direction: ltr !important;
    text-align: left !important;

    transition: color .3s ease;
}

.enblog-title a:hover {
    color: #e31e24;
}


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

.enblog-excerpt {
    min-height: 52px;

    margin: 0 0 20px;
    padding: 0;

    color: #777;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.75;

    direction: ltr !important;
    text-align: left !important;
}


/* =====================================================
   BUTTON
===================================================== */

.enblog-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    align-self: flex-start;

    margin-top: auto;

    padding: 10px 20px;

    background: #e31e24;

    color: #fff !important;

    border: 1px solid #e31e24;
    border-radius: 5px;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.5;

    text-decoration: none !important;

    direction: ltr !important;
    text-align: center !important;

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

.enblog-button:hover {
    background: #111;

    border-color: #111;

    color: #fff !important;

    transform: translateY(-1px);
}


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

.enblog-pagination {
    width: 100%;

    margin-top: 45px;

    text-align: center !important;

    direction: ltr !important;
}

.enblog-pagination ul {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 7px;

    margin: 0;
    padding: 0;

    list-style: none;

    direction: ltr !important;
}

.enblog-pagination li {
    display: block;

    margin: 0;
    padding: 0;

    list-style: none;
}

.enblog-pagination a,
.enblog-pagination span {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 40px;
    height: 40px;

    padding: 0 12px;

    background: #fff;

    border: 1px solid #ddd;
    border-radius: 5px;

    color: #333;

    font-size: 14px;
    font-weight: 500;

    line-height: 1;

    text-decoration: none;

    direction: ltr !important;
    text-align: center !important;

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

.enblog-pagination .current {
    background: #e31e24;

    border-color: #e31e24;

    color: #fff;
}

.enblog-pagination a:hover {
    background: #e31e24;

    border-color: #e31e24;

    color: #fff;
}


/* =====================================================
   EMPTY BLOG
===================================================== */

.enblog-empty {
    width: 100%;

    padding: 70px 20px;

    text-align: center !important;

    direction: ltr !important;
}

.enblog-empty h2 {
    margin: 0 0 10px;

    font-size: 28px;
    font-weight: 700;

    color: #222;

    text-align: center !important;
}

.enblog-empty p {
    margin: 0;

    color: #777;

    font-size: 15px;
    line-height: 1.7;

    text-align: center !important;
}


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

@media (max-width: 1199px) {

    .enblog-page .container {
        max-width: 1140px;
    }

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

        gap: 25px;
    }

}


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

@media (max-width: 991px) {

    .enblog-page {
        padding: 50px 0;
    }

    .enblog-page .container {
        max-width: 960px;
    }

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

        gap: 25px;
    }

    .enblog-header {
        margin-bottom: 35px;
    }

    .enblog-header h1 {
        font-size: 32px;
    }

    .enblog-header p {
        font-size: 15px;
    }

    .enblog-image {
        height: 220px;
    }

}


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

@media (max-width: 575px) {

    .enblog-page {
        padding: 40px 15px;
    }

    .enblog-page .container {
        width: 100%;
        max-width: 100%;

        padding-left: 0;
        padding-right: 0;
    }

    .enblog-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .enblog-header {
        margin-bottom: 30px;
    }

    .enblog-header h1 {
        font-size: 28px;
        line-height: 1.35;
    }

    .enblog-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .enblog-image {
        height: 220px;
    }

    .enblog-content {
        padding: 18px;
    }

    .enblog-title {
        font-size: 19px;
    }

    .enblog-excerpt {
        font-size: 14px;
    }

    .enblog-button {
        font-size: 13px;
        padding: 9px 18px;
    }

}


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

@media (max-width: 375px) {

    .enblog-page {
        padding: 35px 12px;
    }

    .enblog-header h1 {
        font-size: 25px;
    }

    .enblog-image {
        height: 200px;
    }

    .enblog-content {
        padding: 16px;
    }

    .enblog-title {
        font-size: 18px;
    }

    .enblog-pagination ul {
        gap: 5px;
    }

    .enblog-pagination a,
    .enblog-pagination span {
        min-width: 36px;
        height: 36px;

        padding: 0 9px;

        font-size: 13px;
    }

}


/* =====================================================
   END ENGLISH BLOG CSS
===================================================== */