/* =========================
BLOG HERO
========================= */

.blog-hero{
    padding:120px 0 60px;
    background:linear-gradient(135deg,#0f172a,#111827);
    color:#fff;
    position:relative;
    overflow:hidden;
}

.blog-hero::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(255,255,255,.04);
    border-radius:50%;
    top:-200px;
    right:-200px;
}

.blog-breadcrumb{
    margin-bottom:20px;
    font-size:14px;
    opacity:.8;
}

.blog-breadcrumb a{
    color:#fff;
    text-decoration:none;
}

.blog-breadcrumb span{
    margin:0 8px;
}

.blog-category{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.12);
    padding:8px 16px;
    border-radius:50px;
    font-size:14px;
    margin-bottom:20px;
}

.blog-hero h1{
    font-size:3rem;
    line-height:1.2;
    margin-bottom:20px;
    font-weight:800;
    font-family:'Poppins',sans-serif;
}

.blog-excerpt{
    font-size:1.1rem;
    line-height:1.8;
    max-width:800px;
    opacity:.9;
}

.blog-meta{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:30px;
}

.meta-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}

/* =========================
BLOG LAYOUT
========================= */

.blog-layout{
     padding:120px 0 60px;
    background:#f8fafc;
}

.blog-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
}

.blog-content{
    background:#fff;
    border-radius:20px;
    padding:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.featured-image{
    width:100%;
    border-radius:20px;
    margin-bottom:30px;
}

.blog-content h2{
    font-size:2rem;
    margin-top:40px;
    margin-bottom:20px;
    color:#111827;
    font-family:'Poppins',sans-serif;
}

.blog-content p{
    font-size:1.05rem;
    line-height:1.9;
    color:#374151;
    margin-bottom:20px;
}

.blog-content ul,
.blog-content ol{
    padding-left:20px;
    margin-bottom:25px;
}

.blog-content li{
    margin-bottom:12px;
    line-height:1.8;
}

/* =========================
HIGHLIGHT BOX
========================= */

.highlight-box{
    background:#eff6ff;
    border-left:5px solid #2563eb;
    padding:25px;
    border-radius:15px;
    margin:30px 0;
    line-height:1.8;
}

/* =========================
FORMULA
========================= */

.formula-box{
    background:#111827;
    color:#fff;
    padding:25px;
    border-radius:15px;
    text-align:center;
    font-size:1.3rem;
    margin:30px 0;
    font-weight:700;
}

/* =========================
AUTHOR BOX
========================= */

.author-box{
    display:flex;
    align-items:center;
    gap:20px;
    background:#f8fafc;
    padding:25px;
    border-radius:20px;
    margin-top:50px;
}

.author-box img{
    width:90px;
    height:90px;
    border-radius:50%;
}

.author-box h4{
    margin-bottom:10px;
}

/* =========================
RELATED POSTS
========================= */

.related-posts{
    margin-top:60px;
}

.related-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:25px;
}

.related-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    color:#111827;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition:.3s;
}

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

.related-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.related-card h4{
    padding:20px;
    line-height:1.5;
}

/* =========================
SIDEBAR
========================= */

.blog-sidebar{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.sidebar-widget{
    background:#fff;
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.sidebar-widget h3{
    margin-bottom:20px;
}

.sidebar-search{
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    border:1px solid #ddd;
    outline:none;
    font-family:'Inter',sans-serif;
}

.popular-post{
    display:flex;
    gap:15px;
    margin-bottom:20px;
}

.popular-post img{
    width:90px;
    height:70px;
    border-radius:12px;
    object-fit:cover;
}

.popular-post a{
    text-decoration:none;
    color:#111827;
    line-height:1.5;
    font-weight:500;
}

.category-list{
    list-style:none;
    padding:0;
}

.category-list li{
    margin-bottom:12px;
}

.category-list a{
    text-decoration:none;
    color:#2563eb;
}

/* =========================
READING PROGRESS
========================= */

.reading-progress-bar{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:4px;
    background:linear-gradient(90deg,#2563eb,#06b6d4);
    z-index:99999;
}

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

@media(max-width:991px){

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

    .blog-sidebar{
        order:2;
    }

    .blog-content{
        order:1;
    }

    .blog-hero h1{
        font-size:2.2rem;
    }

}

@media(max-width:768px){

    .blog-content{
        padding:25px;
    }

    .blog-hero{
        padding:100px 0 50px;
    }

    .blog-hero h1{
        font-size:1.8rem;
    }

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

    .author-box{
        flex-direction:column;
        text-align:center;
    }

    .blog-content h2{
        font-size:1.5rem;
    }

}
/* =========================================
FIX STICKY NAVBAR
========================================= */

body{
    overflow-x:hidden;
}

.navbar{
    position:fixed !important;
    top:0;
    left:0;
    width:100%;
    z-index:999999;
    
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:all .3s ease;
}

/* Prevent content hidden behind navbar */

.blog-hero{
    padding-top:140px !important;
}

/* =========================================
READING PROGRESS WRAPPER
========================================= */

.progress-container{
    position:fixed;
    top:71px;
    left:0;
    width:100%;
    height:6px;
    background:rgba(255,255,255,.08);
    z-index:999998;
    overflow:hidden;
    backdrop-filter:blur(10px);
}

/* Actual Progress */

.reading-progress-bar{
    width:0%;
    height:100%;
    background:linear-gradient(
        90deg,
        #3b82f6,
        #06b6d4,
        #8b5cf6
    );
    transition:width .08s linear;
    border-radius:0 20px 20px 0;
    box-shadow:
        0 0 10px rgba(59,130,246,.5),
        0 0 20px rgba(6,182,212,.4);
}

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

@media(max-width:768px){

    .navbar{
        position:fixed !important;
        top:0;
        left:0;
        width:100%;
        z-index:999999;
    }

    .progress-container{
        top:60px;
        height:5px;
    }

    .blog-hero{
        padding-top:130px !important;
    }

}

/* =========================================
SEARCH PAGE
========================================= */

.search-page-header{
    margin-bottom:40px;
}

.search-page-header h1{
    font-size:2.5rem;
    margin-bottom:10px;
}

.search-page-header p{
    color:#6b7280;
}

.search-results-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.search-result-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    color:#111827;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition:.3s;
}

.search-result-card:hover{
    transform:translateY(-5px);
}

.search-result-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.search-result-content{
    padding:25px;
}

.search-result-content h2{
    font-size:1.5rem;
    margin:15px 0;
    line-height:1.5;
}

.search-result-content p{
    color:#4b5563;
    line-height:1.8;
}

.search-date{
    color:#6b7280;
    font-size:14px;
}

.no-results{
    text-align:center;
    padding:100px 20px;
}

.no-results i{
    font-size:60px;
    margin-bottom:20px;
    color:#9ca3af;
}

@media(max-width:768px){

    .search-results-grid{
        grid-template-columns:1fr;
    }

    .search-page-header h1{
        font-size:2rem;
    }

}

/* =========================================
BLOG HOMEPAGE
========================================= */

.blog-homepage{
    padding:140px 0 80px;
    background:#f8fafc;
}

.blog-home-hero{
    text-align:center;
    max-width:900px;
    margin:auto auto 70px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#dbeafe;
    color:#2563eb;
    padding:10px 20px;
    border-radius:50px;
    font-weight:600;
    margin-bottom:25px;
}

.blog-home-hero h1{
    font-size:3.4rem;
    line-height:1.2;
    margin-bottom:25px;
    font-family:'Poppins',sans-serif;
}

.blog-home-hero p{
    font-size:1.15rem;
    line-height:1.9;
    color:#4b5563;
}

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

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

.blog-post-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
    transition:.35s ease;
}

.blog-post-card:hover{
    transform:translateY(-8px);
}

.blog-post-image{
    display:block;
    overflow:hidden;
}

.blog-post-image img{
    width:100%;
    height:240px;
    object-fit:fill;
    transition:.4s;
}

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

.blog-post-content{
    padding:28px;
}

.blog-post-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
    font-size:13px;
    color:#6b7280;
}

.blog-category-chip{
    background:#eff6ff;
    color:#2563eb;
    padding:8px 14px;
    border-radius:50px;
    font-weight:600;
}

.blog-post-content h2{
    font-size:1.45rem;
    line-height:1.5;
    margin-bottom:18px;
}

.blog-post-content h2 a{
    color:#111827;
    text-decoration:none;
}

.blog-post-content p{
    color:#4b5563;
    line-height:1.9;
    margin-bottom:25px;
}

.blog-read-more{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#2563eb;
    text-decoration:none;
    font-weight:700;
}

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

.custom-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:70px;
    flex-wrap:wrap;
}

.custom-pagination a,
.custom-pagination span{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#fff;
    text-decoration:none;
    color:#111827;
    font-weight:600;
    box-shadow:
        0 5px 20px rgba(0,0,0,.05);
}

.custom-pagination .active{
    background:#2563eb;
    color:#fff;
}

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

@media(max-width:1100px){

    .blog-post-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .blog-homepage{
        padding:120px 0 60px;
    }

    .blog-home-hero h1{
        font-size:2.2rem;
    }

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

}

/* =========================================
BLOG LINKS
========================================= */

.blog-layout a,
.blog-homepage a,
.wp-blog-content a{

    color:#2563eb;
    text-decoration:none;
    transition:.3s ease;

}

.blog-layout a:hover,
.blog-homepage a:hover,
.wp-blog-content a:hover{

    color:#1d4ed8;
    text-decoration:underline;

}

/* Article Content Links */

.wp-blog-content a{

    font-weight:600;
    word-break:break-word;

}

/* Sidebar Links */

.blog-sidebar a{

    color:#111827;

}

.blog-sidebar a:hover{

    color:#2563eb;

}

/* Category Chips */

.blog-category-chip{

    color:#2563eb !important;

}

/* Read More Button */

.blog-read-more{

    color:#2563eb !important;

}

/*wp-block table css*/

/* =========================================
WORDPRESS TABLE STYLING
========================================= */

.wp-blog-content .wp-block-table{
    width:100%;
    overflow-x:auto;
    margin:35px 0;
}

.wp-blog-content table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
}

.wp-blog-content table th{
    background:#2563eb;
    color:#fff;
    font-weight:700;
    padding:16px;
    border:1px solid #dbeafe;
    text-align:left;
}

.wp-blog-content table td{
    padding:16px;
    border:1px solid #e5e7eb;
    line-height:1.7;
    color:#374151;
}

.wp-blog-content table tr:nth-child(even){
    background:#f8fafc;
}

.wp-blog-content table tr:hover{
    background:#eff6ff;
    transition:.2s ease;
}

/* Mobile Responsive */

@media(max-width:768px){

    .wp-blog-content table{
        min-width:700px;
    }

}


/* =========================================
WORDPRESS LIST STYLING
========================================= */

.wp-blog-content ul,
.wp-blog-content ol{

    margin:25px 0;
    padding-left:30px !important;

}

.wp-blog-content ul{

    list-style:disc !important;

}

.wp-blog-content ol{

    list-style:decimal !important;

}

.wp-blog-content li{

    display:list-item !important;
    margin-bottom:14px;
    line-height:1.9;
    color:#374151;

}

.wp-blog-content li::marker{

    color:#000000;
    font-weight:700;

}

/* Nested Lists */

.wp-blog-content ul ul,
.wp-blog-content ol ol{

    margin-top:12px;

}
/* TOC NEW Starts*/
          /* =========================================
    MODERN TABLE OF CONTENTS
    ========================================= */
    
    .toc-box{
    
        position:relative;
    
        background:#ffffff !important;
    
        border:1px solid #e5e7eb !important;
    
        border-radius:24px !important;
    
        padding:30px !important;
    
        margin:40px 0 !important;
    
        overflow:hidden;
    
        box-shadow:
            0 10px 35px rgba(0,0,0,.06) !important;
    
    }
    
    /* Decorative Glow */
    
    .toc-box::before{
    
        content:'';
    
        position:absolute;
    
        top:-120px;
        right:-120px;
    
        width:220px;
        height:220px;
    
        background:
        radial-gradient(
            rgba(37,99,235,.08),
            transparent 70%
        );
    
        pointer-events:none;
    
    }
    
    /* =========================================
    TOC HEADING
    ========================================= */
    
    .toc-box h2{
    
        display:flex !important;
    
        align-items:center !important;
    
        gap:12px !important;
    
        font-size:1.35rem !important;
    
        font-weight:700 !important;
    
        margin-bottom:26px !important;
    
        color:#111827 !important;
    
        line-height:1.4;
    
    }
    
    .toc-box h2 i{
    
        color:#2563eb !important;
    
        font-size:1.1rem !important;
    
    }
    
    /* =========================================
    TOC CONTAINER
    ========================================= */
    
    #toc-container{
    
        width:100%;
    
    }
    
    #toc-container ul{
    
        list-style:none !important;
    
        padding:0 !important;
    
        margin:0 !important;
    
    }
    
    /* =========================================
    LIST ITEMS
    ========================================= */
    
    #toc-container li{
    
        margin-bottom:10px !important;
    
        list-style:none !important;
    
    }
    
    /* =========================================
    LINK STYLE
    ========================================= */
    
    #toc-container li a{
    
        position:relative;
    
        display:flex !important;
    
        align-items:flex-start !important;
    
        gap:12px !important;
    
        width:100%;
    
        padding:12px 16px !important;
    
        border-radius:14px !important;
    
        text-decoration:none !important;
    
        color:#374151 !important;
    
        background:transparent !important;
    
        line-height:1.7 !important;
    
        font-size:15px !important;
    
        font-weight:500 !important;
    
        transition:all .25s ease !important;
    
    }
    
    /* =========================================
    MODERN BULLET
    ========================================= */
    
    #toc-container li a::before{
    
        content:'' !important;
    
        width:8px !important;
        height:8px !important;
    
        min-width:8px !important;
    
        border-radius:50% !important;
    
        background:#2563eb !important;
    
        margin-top:9px !important;
    
        transition:.25s ease !important;
    
    }
    
    /* =========================================
    HOVER
    ========================================= */
    
    #toc-container li:hover a{
    
        background:#eff6ff !important;
    
        color:#2563eb !important;
    
        transform:translateX(4px);
    
    }
    
    /* Hover Bullet */
    
    #toc-container li:hover a::before{
    
        background:#7c3aed !important;
    
        transform:scale(1.3);
    
    }
    
    /* =========================================
    H2 MAIN HEADING
    ========================================= */
    
    #toc-container li.h2 a{
    
        font-weight:600 !important;
    
        font-size:15px !important;
    
    }
    
    /* =========================================
    H3 SUBHEADING
    ========================================= */
    
    #toc-container li.h3 a{
    
        padding-left:34px !important;
    
        font-size:14px !important;
    
        color:#4b5563 !important;
    
    }
    
    /* Smaller Bullet */
    
    #toc-container li.h3 a::before{
    
        width:6px !important;
        height:6px !important;
    
        min-width:6px !important;
    
        margin-top:10px !important;
    
        background:#7c3aed !important;
    
    }
    
    /* =========================================
    H4 SUB-SUBHEADING
    ========================================= */
    
    #toc-container li.h4 a{
    
        padding-left:52px !important;
    
        font-size:13px !important;
    
        color:#6b7280 !important;
    
    }
    
    /* H4 Bullet */
    
    #toc-container li.h4 a::before{
    
        width:5px !important;
        height:5px !important;
    
        min-width:5px !important;
    
        margin-top:10px !important;
    
        background:#9ca3af !important;
    
    }
    
    /* =========================================
    ACTIVE STATE
    ========================================= */
    
    #toc-container li.active a{
    
        background:#2563eb !important;
    
        color:#ffffff !important;
    
        box-shadow:
            0 8px 20px rgba(37,99,235,.25) !important;
    
    }
    
    #toc-container li.active a::before{
    
        background:#ffffff !important;
    
    }
    
    /* =========================================
    SCROLLBAR
    ========================================= */
    
    #toc-container::-webkit-scrollbar{
    
        width:6px;
    
    }
    
    #toc-container::-webkit-scrollbar-thumb{
    
        background:#d1d5db;
    
        border-radius:20px;
    
    }
    
    /* =========================================
    MOBILE
    ========================================= */
    
    @media(max-width:768px){
    
        .toc-box{
    
            padding:22px !important;
    
            border-radius:20px !important;
    
        }
    
        .toc-box h2{
    
            font-size:1.15rem !important;
    
        }
    
        #toc-container li a{
    
            padding:10px 12px !important;
    
            font-size:14px !important;
    
        }
    
        #toc-container li.h3 a{
    
            padding-left:24px !important;
    
        }
    
        #toc-container li.h4 a{
    
            padding-left:38px !important;
    
        }
    
    }
     /*TOC NEW ENDS*/

/* =========================================
MOBILE RESPONSIVE ARTICLE
========================================= */

@media(max-width:768px){

    /* Layout */

    .blog-layout{

        padding:110px 0 50px;

    }

    .blog-container{

        display:block;

    }

    .blog-main{

        width:100%;

        max-width:100%;

        overflow:hidden;

    }

    .blog-sidebar{

        width:100%;

        margin-top:40px;

    }

    /* Hero */

    .blog-hero h1{

        font-size:2rem !important;
        line-height:1.4;

    }

    .blog-meta{

        flex-wrap:wrap;
        gap:12px;

    }

    /* Featured Image */

    .blog-featured-image img{

        width:100%;
        height:auto;
        border-radius:20px;

    }

    /* Content */

    .wp-blog-content{

        font-size:16px;
        line-height:1.9;
        overflow:hidden;

    }

    /* Headings */

    .wp-blog-content h2{

        font-size:1.7rem;
        line-height:1.4;
        margin-top:40px;

    }

    .wp-blog-content h3{

        font-size:1.4rem;
        line-height:1.5;

    }

    .wp-blog-content h4{

        font-size:1.2rem;

    }

    /* Images */

    .wp-blog-content img{

        max-width:100%;
        height:auto;
        border-radius:16px;

    }

    /* Tables */

    .wp-blog-content .wp-block-table{

        overflow-x:auto;

    }

    .wp-blog-content table{

        min-width:700px;

    }

    /* Videos */

    .wp-blog-content iframe{

        width:100%;
        height:auto;
        aspect-ratio:16/9;
        border-radius:16px;

    }

    /* Code */

    .wp-blog-content pre{

        overflow-x:auto;
        padding:18px;
        border-radius:16px;

    }

    
    /* Author Box */

    .author-box{

        display:block;
        text-align:center;

    }

    .author-box img{

        margin-bottom:20px;

    }

    /* Related Articles */

    .related-posts-grid{

        grid-template-columns:1fr;

    }

}
/* =========================================
ULTIMATE MOBILE FIX
========================================= */

*{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
    width:100%;
}

/* Main Layout */

.blog-layout{
   /* padding:40px 0 60px;*/
   padding:120px 0 60px;
}

.blog-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:40px;
    align-items:start;
}

.blog-content{
    min-width:0;
    width:100%;
}

.blog-sidebar{
    min-width:0;
    width:100%;
}
/* Prevent Content Overflow ONLY */

.wp-blog-content img,
.wp-blog-content iframe,
.wp-blog-content video,
.wp-blog-content table,
.wp-blog-content figure{

    max-width:100%;
    height:auto;

}
/* Images */

.wp-blog-content img,
.wp-blog-content figure,
.wp-blog-content video,
.wp-blog-content iframe{
    max-width:100%;
    height:auto;
}

/* Gallery */

.wp-block-gallery{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.wp-block-gallery img{
    width:100%;
    border-radius:16px;
}

/* Tables */

.wp-blog-content .wp-block-table{
    overflow-x:auto;
    width:100%;
}

.wp-blog-content table{
    min-width:700px;
}

/* Code Blocks */

.wp-blog-content pre{
    overflow-x:auto;
    white-space:pre-wrap;
    word-wrap:break-word;
}

/* Paragraphs */

.wp-blog-content p,
.wp-blog-content li{
    overflow-wrap:break-word;
    word-break:break-word;
}

/* Headings */

.wp-blog-content h1,
.wp-blog-content h2,
.wp-blog-content h3,
.wp-blog-content h4{
    overflow-wrap:break-word;
}

/* TOC */

.toc-box{
    overflow:visible;
}

#toc-container{
    overflow-x:auto;
}

/* Featured Image */

.featured-image{
    width:100%;
    border-radius:24px;
    display:block;
}

/* Author Box */

.author-box{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.author-box img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
}

/* Related Grid */

.related-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

/* Sidebar */

.sidebar-widget{
    overflow:hidden;
}

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

@media(max-width:992px){

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

    .blog-sidebar{
        margin-top:40px;
    }

}

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

@media(max-width:768px){

    /* Hero */

    .blog-hero{
        padding:120px 0 50px;
    }

    .blog-hero h1{
        font-size:2rem !important;
        line-height:1.4;
    }

    .blog-meta{
        flex-wrap:wrap;
        gap:12px;
    }

    /* Layout */

    .blog-layout{
        padding:30px 0 50px;
    }

    .container{
        width:100%;
        padding-left:16px;
        padding-right:16px;
    }

    /* Content */

    .wp-blog-content{
        font-size:16px;
        line-height:1.9;
    }

    .wp-blog-content h2{
        font-size:1.7rem;
        line-height:1.4;
    }

    .wp-blog-content h3{
        font-size:1.4rem;
    }

    .wp-blog-content h4{
        font-size:1.2rem;
    }

    /* Gallery */

    .wp-block-gallery{
        grid-template-columns:1fr;
    }

    /* Related */

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

    /* Author */

    .author-box{
        flex-direction:column;
        text-align:center;
    }

    .author-box img{
        margin:auto;
    }

    /* Table */

    .wp-blog-content table{
        min-width:650px;
    }

    /* Buttons */

    .wp-block-button__link,
    .blog-read-more,
    button{
        width:100%;
        justify-content:center;
    }

}
/* =========================================
MOBILE NAVBAR FIX
========================================= */

@media(max-width:768px){

    .nav-container{

        display:flex;
        align-items:center;
        justify-content:space-between;

    }

    .mobile-menu-toggle{

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

        width:44px;
        height:44px;

        flex-shrink:0;

        margin-left:auto;

        position:relative;
        right:0;

    }

    .mobile-menu-toggle span{

        width:24px;

    }

    .logo{

        flex-shrink:0;

    }

}
/* =========================================
READING PROGRESS BAR FIX
========================================= */

.progress-container{

    position:fixed;

    top:70px;

    left:0;

    width:100%;

    height:5px;

    background:#e5e7eb;

    z-index:9998;

    overflow:hidden;

}

/* Progress */

.reading-progress-bar{

    height:100%;

    width:0;

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

    transition:width .15s linear;

}

/* Mobile */

@media(max-width:768px){

    .progress-container{

        top:64px;

        height:15px;

    }

}
/* =========================================
ARTICLE SEARCH BAR
========================================= */

.article-search-box{

    margin:40px 0;

}

.article-search-form{

    position:relative;

    display:flex;

    align-items:center;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    overflow:hidden;

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

}

/* Input */

.article-search-form input{

    width:100%;

    height:64px;

    border:none;

    outline:none;

    padding:0 70px 0 24px;

    font-size:16px;

    font-family:'Inter',sans-serif;

    background:transparent;

    color:#111827;

}

/* Placeholder */

.article-search-form input::placeholder{

    color:#9ca3af;

}

/* Button */

.article-search-form button{

    position:absolute;

    right:8px;

    width:50px;

    height:50px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    cursor:pointer;

    transition:.3s ease;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

/* Hover */

.article-search-form button:hover{

    transform:scale(1.05);

}

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

@media(max-width:768px){

    .article-search-form input{

        height:58px;

        font-size:15px;

        padding-left:18px;

    }

    .article-search-form button{

        width:46px;
        height:46px;

        font-size:16px;

    }

}