@media (max-width: 1024px) and (min-width: 981px){
    section.blog-section .blog-page .bottom-sec h3{
    font-size: var(--f20);
    height: 26px;
}
section.blog-section .blog-page .admin-area{
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
}
@media (max-width: 980px){
    section.blog-section .col-4{
    width:50%;
}
h2.widget-title, h2.widgettitle {
    /* font-size: 28px; */
}
.blog-detail-title h3{
    font-size: 28px;
}
    h2.widget-title, h2.widgettitle {
        /* font-size: 27px; */
    }
}
@media (max-width: 540px){
    section.blog-section .head-sec {
    margin-bottom: 30px;
}
section.blog-section .col-4{
    width:100%;
    padding:0px;
}
section.blog-section .blog-page .upper-sec img, section.blog-section .blog-page .upper-sec{
    height: 220px;
    object-fit: cover;
}
section.blog-section .blog-page .bottom-sec{
    /* padding: 20px; */
}
section.blog-section .blog-page .bottom-sec h3{
    font-size: var(--f19);
    height: auto;
}
section.blog-section .blog-page .main-btn{
    font-size: 17px;
}
section.blog-section .row{
    gap:30px;
}
section.blog-detail-wrapper.mt-5 {
    margin-top: 0px !important;
    padding-top: 50px;
    padding-bottom: 50px;
}
section.blog-detail-wrapper.mt-5 .col-lg-8.col-xs-12.col-md-12, section.blog-detail-wrapper.mt-5 .col-lg-4.col-xs-12.col-md-12{
    padding-left:0px;
     padding-right:0px;
}
h2.widget-title, h2.widgettitle {
    font-size: 24px;
}
.blog-detail-wrapper .widget_recent_entries li.item-recent-post a{
    font-size: 16px;
}
.blog-detail-image img{
    height: auto;
}
.blog-detail-title h3{
    font-size: 26px;
}

.blog-detail-title h4, .blog-detail-left h4{
    font-size: 24px;
}
}


/* Media Query for Mobile Devices (Smartphones) */
@media (max-width: 767px) {
    
    /* Container & Wrapper Adjustments */
    .blog-detail-wrapper {
        margin-top: 20px !important;
        padding: 0 10px;
    }

    /* Typography Adjustments for Mobile */
    .blog-detail-title h3, 
    .blog-detail-title h1 {
        font-size: 20px !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }

    .widget-title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }

    /* Force All Images inside Content to be Responsive */
    .blog-detail-image img,
    .blod-detail-description img,
    .thumbnail-post img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }

    /* Prevent long URLs or text from stretching the mobile screen */
    .blod-detail-description {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Table of Content (TOC) Mobile Fixes */
    .content-table {
        max-height: 250px;
        overflow-y: auto;
    }

    .content-table ul {
        padding-left: 15px !important;
        margin-bottom: 5px !important;
    }

    /* If the main TOC ul has no class, this safely resets it */
    .content-table > ul {
        padding-left: 0 !important;
        list-style-type: none;
    }

    .content-table li {
        margin-bottom: 8px !important;
        font-size: 14px !important;
    }

    /* Sidebar Widgets Spacing when stacked below content */
    .widget {
        margin-top: 30px !important;
        padding: 15px !important;
        background: #f9f9f9;
        border-radius: 8px;
    }

    /* Recent Posts Mobile Layout Fix */
    .item-recent-post {
        display: flex !important;
        align-items: center;
        margin-bottom: 15px !important;
    }

    .thumbnail-post {
        width: 70px !important;
        height: 50px !important;
        flex-shrink: 0;
        margin-right: 12px !important;
    }

    .title-post {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
}


@media (max-width: 767px) {
    /* 1. Prevent container overflow and remove unwanted horizontal spacing */
    .blog-detail-wrapper, 
    .container, 
    .row, 
    .blog-detail-left {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* 2. Fix massive breaking headers (Targeting the blue text cutting off) */
    .blod-detail-description h1,
    .blod-detail-description h2,
    .blod-detail-description h3,
    .blog-detail-title h3 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        margin-top: 20px !important;
        margin-bottom: 12px !important;
    }

    /* 3. Aggressively restrict all dynamic inline images from stretching out */
    .blod-detail-description img, 
    .blog-detail-image img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        object-fit: contain !important;
    }

    /* 4. Fix p tags or spans containing unformatted long code/links */
    .blod-detail-description p, 
    .blod-detail-description span {
        font-size: 15px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* Fix for inline description images to keep original aspect ratio */
.blod-detail-description img {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px;
    height: auto !important; /* Forces the image to preserve its original aspect ratio */
    min-height: 0 !important;
    object-fit: contain !important; /* Prevents image stretching or distortion */
    display: block;
    margin-left: auto;
    margin-right: auto;
}