/* ====================================
   BLOG DETAIL PAGE
==================================== */

.blog-detail-section{
    background:#f8fbfc;
    padding:100px 0;
    margin-top:80px;
}

/* Banner */

.blog-detail-banner{
    margin-bottom:45px;
}

.blog-detail-banner img{
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:20px;
    display:block;
}
/* Blog headings */
.blog-detail-content h2,
.blog-detail-content h3,
.blog-detail-content h4 {
    scroll-margin-top: 120px;   /* Adjust based on your navbar height */
}
/* Header */

.blog-detail-header{
    margin-bottom:45px;
}

.blog-detail-category{

    display:inline-block;
    background:#eefbfc;
    color:#10b8c5;
    font-size:14px;
    font-weight:600;
    padding:8px 18px;
    border-radius:50px;
    margin-bottom:20px;

}

.blog-detail-header h1{

    font-size:42px;
    font-weight:700;
    line-height:1.3;
    color:#183847;
    margin-bottom:20px;

}

.blog-detail-meta{

    display:flex;
    align-items:center;
    gap:25px;
    color:#777;
    font-size:15px;
    margin-bottom:30px;
}
.blog-detail-meta i{

    color:#10b8c5;
    margin-right:6px;
}
/* Introduction */

.blog-detail-introduction{

    background:#fff;
    border-left:5px solid #10b8c5;
    padding:25px;
    border-radius:14px;
    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.blog-detail-introduction p{

    margin:0;
    color:#555;
    font-size:18px;
    line-height:1.8;

}

/* ===================================
   TABLE OF CONTENTS
=================================== */

.blog-detail-toc {
    position: sticky;
    top: 110px;          /* Height of your fixed navbar */
    align-self: flex-start;

    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);

    max-height: calc(100vh - 130px);
    overflow-y: auto;
}

/* Header */

.blog-detail-toc h4 {

    margin: 0;
    padding: 22px 28px;

    background: linear-gradient(135deg,#16b6c8,#0d95a8);

    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;

}

/* List */

#toc-list {

    list-style: none;
    margin: 0;
    padding: 18px;

}

#toc-list li {

    margin-bottom: 2px;

}

#toc-list li:last-child {

    margin-bottom: 0;

}

/* Links */

#toc-list a {

    display: block;

    color: #4d5b68;
    text-decoration: none;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;

    padding: 12px 14px;

    border-radius: 10px;

    transition: .3s ease;

}

/* Hover */

#toc-list a:hover {

    background: #eefafb;
    color: #10b8c5;

    padding-left: 22px;

}

/* Active Link */

#toc-list a.active {

    background: #10b8c5;
    color: #fff;

    font-weight: 600;

}

/* H3 */

#toc-list li.sub-item a {

    padding-left: 30px;

    font-size: 15px;

    color: #6b7280;

}

#toc-list li.sub-item a:hover {

    padding-left: 38px;

}

/* Left Indicator */

#toc-list a::before {

    content: "";

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #10b8c5;

    display: inline-block;

    margin-right: 12px;

    transform: translateY(-2px);

}

#toc-list a.active::before {

    background: #fff;

}

/* Scrollbar */

.blog-detail-toc::-webkit-scrollbar {

    width: 6px;

}

.blog-detail-toc::-webkit-scrollbar-thumb {

    background: #d5dfe5;
    border-radius: 10px;

}
/* Table */
.blog-detail-content table{

    width:100%;
    margin:35px 0;
    border-collapse:collapse;

}

/* Table Heading */
.blog-detail-content table th{

    background:#14b8a6;
    color:#fff;
    padding:14px;
    text-align:left;

}

/* Table Data */
.blog-detail-content table td{

    padding:14px;
    border:1px solid #ddd;

}

/* Zebra Rows */
.blog-detail-content table tr:nth-child(even){

    background:#f8fbfc;

}

/* Hover */
.blog-detail-content table tr:hover{

    background:#eefafb;

}
.blog-back-btn button{

    display:inline-flex;
    align-items:center;
    gap:10px; 
    padding:12px 24px;

    background:#fff;

    color:#193847;

    border:2px solid #14b8a6;

    border-radius:12px;

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

    cursor:pointer;

    transition:.3s;

}

.blog-back-btn button:hover{

    background:#14b8a6;
    color:#fff;

    transform:translateX(-4px);

}