/* ===================================================
    Table of Contents
=====================================================
    1.0 Grid Post
    2.0 Classic Post
    3.0 Post Category
    4.0 Post Details
        4.1 Post Navigation
        4.2 Auhtor Box
        4.3 Comments
        4.3 Comment Form
    5.0 Sidebar
        5.1 Search
        5.2 Widget Title
        5.3 Category List
        5.4 Thumb Posts
        5.5 Tags
        5.6 Banner
    6.0 Pagination
=====================================================
    Blog CSS
==================================================== */
/*=== 1.0 Grid Post ===*/
.grid-post {
    margin: -15px;
}

.post-card {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.post-card .post-thumb {
    position: relative;
    height: 320px !important;
    overflow: hidden;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.post-card .post-thumb img {
    width: 100%;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    transition: transform 0.4s ease;
}

.post-card:hover .post-thumb img {
    transform: scale(1.06);
}

.post-content-wrap {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-content p {
    flex-grow: 1;
    margin-bottom: 20px;
}

.post-meta {
    margin-bottom: 10px;
}

.post-meta li {
    font-family: "Plus Jakarta Sans", "Space Grotesk", sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    text-transform: capitalize;
    color: #64748b;
    display: inline-flex;
    align-items: center;
}

.post-meta li:not(:last-of-type) {
    margin-right: 14px;
}

.post-meta li i {
    color: #2563eb;
    font-size: 15px;
    margin-right: 6px;
}

.post-card .post-content h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 22px;
    line-height: 30px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.4px;
    transition: all 0.3s ease;
    text-transform: capitalize;
}

.post-card .post-content h3 a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-card .post-content h3 a:hover {
    color: #2563eb;
}

.post-card .post-content .read-more {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    text-transform: capitalize;
    color: #2563eb;
    position: relative;
    padding-left: 32px;
    text-decoration: none;
}

.post-card .post-content .read-more:before {
    background-color: #2563eb;
    position: absolute;
    content: "";
    width: 24px;
    height: 3px;
    left: 0;
    top: calc(50% - 1px);
    border-radius: 2px;
}

.post-card .post-content .read-more:hover {
    color: #1d4ed8;
}

/*=== 2.0 Classic Post ===*/
.classic-post .post-card .post-thumb {
    min-height: 380px;
}

.classic-post .post-card .post-thumb img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center;
}

.classic-post .post-card:not(:last-of-type) {
    margin-bottom: 30px;
}

/*=== 3.0 Post Category ===*/
.post-category {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    clip-path: polygon(85% 0%, 100% 30%, 100% 100%, 0 100%, 0 0);
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    height: 35px;
    line-height: 37px;
    padding: 0 28px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.post-category:hover {
    color: #fff;
}

/*=== 4.0 Post Details ===*/
.post-details .post-thumb {
    min-height: 480px !important;
    height: 480px !important;
    position: relative;
    margin-bottom: 40px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.post-details .post-thumb img {
    width: 100%;
    height: 100% !important;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover !important;
    object-position: center;
}

.post-details p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 30px;
}

blockquote {
    background-color: #f8fafc;
    padding: 30px 40px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2563eb;
    border-radius: 12px;
    font-size: 1.15rem;
    line-height: 1.7;
    font-weight: 600;
    color: #0f172a;
    display: block;
    margin: 0 0 30px 0;
}

blockquote i.fas {
    color: #2563eb;
    display: block;
    margin-bottom: 16px;
}

blockquote span {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #64748b;
    display: block;
    margin-top: 10px;
}

.post-details-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 10px;
    margin: 40px 0;
}

.post-details .tags li a {
    background-color: #fff;
    border: 1px solid #eee;
    margin: 0;
}

/*=== 4.1 Post Navigation ===*/
.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 50px;
    align-items: center;
    margin: 40px 0;
}

.post-navigation li:last-child {
    text-align: right;
}

.post-navigation li a {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.5px;
}

.post-navigation li a:hover {
    text-decoration: underline;
}

.post-navigation li a:hover>span {
    text-decoration: none;
}

.post-navigation li a span {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #a5a6aa;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
}

.post-navigation li a span i {
    color: #a5a6aa;
    margin-right: 5px;
}

.post-navigation li:last-child a span i {
    margin-left: 5px;
    margin-right: auto;
}

/*=== 4.2 Auhtor Box ===*/
.author-box {
    background-color: #fff;
    padding: 40px;
    border: 1px solid #eee;
    display: grid;
    align-items: center;
    grid-template-columns: 80px 1fr;
    grid-column-gap: 20px;
    line-height: 1;
    margin-bottom: 40px;
}

.social-icon li {
    display: inline-block;
}

.social-icon li a:hover {
    color: #2563eb;
}

.social-icon li:not(:last-of-type) {
    margin-right: 10px;
}

/*=== 4.3 Comments ===*/
.comments-box {
    margin-bottom: 40px;
}

.comment-title {
    font-weight: 600;
    color: #222;
    display: inline-block;
    padding-bottom: 10px;
    position: relative;
    margin-bottom: 30px;
    line-height: 1;
}

.comment-title:before {
    background-color: #2563eb;
    width: 50%;
    height: 4px;
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
}

.comments-box .comment-inner {
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-column-gap: 20px;
}

.comments-box .comment {
    margin-bottom: 40px;
}

.comments-box .children {
    margin-left: 50px;
    margin-top: 40px;
}

.comments-box .comment-thumb img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-top: 5px;
}

.comments-meta h4 {
    font-size: 20px;
    font-weight: 500;
    display: block;
}

.comments-meta h4 span {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    display: block;
}

.comment-area p {
    font-size: 17px;
    line-height: 27px;
    margin-bottom: 10px;
}

.comment-area .reply {
    font-family: "Space Grotesk", sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
}

/*=== 4.4 Comment Form ===*/
.comment-form {
    margin-top: -15px;
}

.comment-form .form-control {
    background-color: #fff;
    height: 50px;
    border-radius: 0;
    border: 1px solid #eee;
    box-shadow: none;
    outline: none;
}

.comment-form .form-control.comment {
    height: 150px;
}

#form-messages {
    display: none;
    margin-top: 15px;
    margin-bottom: 0;
}

#form-messages.alert-danger,
#form-messages.alert-success {
    display: block;
}

/*=== 5.0 Sidebar ===*/
.sidebar-widget {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.sidebar-widget:not(:last-of-type) {
    margin-bottom: 30px;
}

/*=== 5.1 Search ===*/
.sidebar-widget .search-form {
    position: relative;
}

.sidebar-widget .search-form .form-control {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: none;
    outline: none;
    height: 48px;
    border: 1px solid #cbd5e1;
    padding-right: 40px;
}

.sidebar-widget .search-form .search-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    font-size: 15px;
    color: #666;
}

/*=== 5.2 Widget Title ===*/
.widget-title {
    display: block;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.widget-title h3 {
    font-weight: 800;
    font-size: 1.15rem;
    color: #0f172a;
    display: inline-block;
    padding-bottom: 10px;
    position: relative;
    margin: 0;
    line-height: 1;
}

.widget-title h3:before {
    background-color: #2563eb;
    width: 50%;
    height: 3px;
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    border-radius: 2px;
}

/*=== 5.3 Category List ===*/
.category-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.category-list li:not(:last-of-type) {
    margin-bottom: 10px;
}

.category-list li a {
    color: #666;
}

.category-list li a:hover {
    color: #222;
    text-decoration: underline;
}

.category-list li span {
    border: 1px solid #eee;
    font-size: 14px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.category-list li:hover span {
    background-color: #2563eb;
    color: #fff;
    transition: all 0.3s ease;
}

/*=== 5.4 Thumb Posts ===*/
.thumb-post li {
    display: inline-flex;
    align-items: flex-start;
    justify-content: space-between;
}

.thumb-post li:not(:last-of-type) {
    margin-bottom: 20px;
}

.thumb-post li .thumb {
    flex-shrink: 0;
    width: 90px;
    height: 75px;
    margin: 0 15px 0 0;
    position: relative;
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.thumb-post li .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.thumb-post .thumb-post-info {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.thumb-post .thumb-post-info h3 {
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
}

.thumb-post .thumb-post-info h3 a {
    color: #0f172a;
    text-decoration: none;
}

.thumb-post .thumb-post-info h3 a:hover {
    color: #2563eb;
}

.thumb-post .thumb-post-info .date {
    font-weight: 600;
    font-size: 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    text-transform: uppercase;
    color: #64748b;
    display: flex;
    align-items: center;
    line-height: 1;
    margin-top: 4px;
}

.thumb-post .thumb-post-info .date i {
    color: #2563eb;
    margin-right: 5px;
}

/*=== 5.5 Tags ===*/
.tags li {
    display: inline-block;
}

.tags li a {
    background-color: #eee;
    display: inline-block;
    font-family: "Space Grotesk", sans-serif;
    text-transform: capitalize;
    font-size: 14px;
    color: #666;
    padding: 3px 15px;
    margin: 0 3px 10px 0;
}

.tags li a:hover {
    background-color: #2563eb;
    color: #fff;
}

/*=== 5.6 Banner ===*/
.sidebar-widget.banner {
    background-color: #222;
    background-image: url(../img/texture.png);
    background-repeat: repeat;
    background-size: cover;
    border-radius: 3px;
    padding: 60px 30px;
}

.banner-info .logo {
    width: 70%;
    margin-bottom: 20px;
}

.banner-info h3 {
    color: #fff;
}

.banner-info h3 span {
    color: #2563eb;
}

.banner-info p {
    color: #ddd;
}

.banner-info .discount {
    color: #fff;
    margin-bottom: 20px;
}

.banner-info .discount span {
    color: #2563eb;
    font-size: 50px;
}

.banner-info .default-btn:hover {
    color: #222;
}

.banner-info .default-btn:after,
.banner-info .default-btn:before {
    background-color: #fff;
}

/*=== 6.0 Pagination ===*/
.pagination-wrap li {
    display: inline-block;
    margin: 0 10px 0 0;
}

.pagination-wrap li a {
    background-color: #fff;
    border: 1px solid #eee;
    color: #666;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.pagination-wrap li a:hover,
.pagination-wrap li a.active {
    background-color: #2563eb;
    border: 1px solid #2563eb;
    color: #fff;
}

/* Tablet Devices */
@media (max-width: 992px) {
    .padding {
        padding: 50px 0;
    }

    .sm-padding {
        padding: 15px;
    }

    p br {
        display: none;
    }

    span br {
        display: none;
    }

    .default-btn {
        padding: 0 30px;
    }

    .post-card .post-content h3 {
        font-size: 20px;
        line-height: 26px;
    }
}

/*=== Mobile Devices ===*/
@media all and (max-width: 768px) {
    .padding {
        padding: 50px 0;
    }

    .xs-padding {
        padding: 15px;
    }

    p br {
        display: none;
    }
}

@media all and (max-width: 580px) {
    #scrollup {
        bottom: 20px;
        right: 20px;
    }
}

/* ============================================================
   ARTICLE RICH TEXT RENDERING FORMATS
   ============================================================ */
.article-body-content {
    font-size: 1.12rem;
    line-height: 1.85;
    color: #334155;
}

.article-body-content p {
    margin-bottom: 1.5rem;
}

.article-body-content h1, 
.article-body-content h2, 
.article-body-content h3, 
.article-body-content h4, 
.article-body-content h5, 
.article-body-content h6 {
    color: #0f172a;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.article-body-content h1 { font-size: 2.2rem; }
.article-body-content h2 { font-size: 1.8rem; }
.article-body-content h3 { font-size: 1.5rem; }
.article-body-content h4 { font-size: 1.25rem; }

.article-body-content ul {
    list-style-type: disc !important;
    margin-left: 24px !important;
    margin-bottom: 1.5rem !important;
    padding-left: 10px !important;
}

.article-body-content ul li {
    list-style-type: disc !important;
    margin-bottom: 0.5rem;
    display: list-item !important;
}

.article-body-content ol {
    list-style-type: decimal !important;
    margin-left: 24px !important;
    margin-bottom: 1.5rem !important;
    padding-left: 10px !important;
}

.article-body-content ol li {
    list-style-type: decimal !important;
    margin-bottom: 0.5rem;
    display: list-item !important;
}

.article-body-content blockquote {
    background-color: #f8fafc;
    padding: 24px 30px;
    border-left: 4px solid #2563eb;
    border-radius: 8px;
    font-size: 1.2rem;
    line-height: 1.7;
    font-weight: 600;
    color: #0f172a;
    margin: 1.75rem 0;
    font-style: italic;
}

.article-body-content blockquote p {
    margin-bottom: 0;
}

.article-body-content strong, 
.article-body-content b {
    font-weight: 700;
    color: #0f172a;
}

.article-body-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.95rem;
}

.article-body-content table th,
.article-body-content table td {
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    text-align: left;
}

.article-body-content table th {
    background-color: #f1f5f9;
    font-weight: 700;
    color: #0f172a;
}

.article-body-content table tr:nth-child(even) {
    background-color: #f8fafc;
}

.article-body-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}