.blog-left-section .large-post, .sidebar-section .small-post { background-color: transparent !important; }
.blog_banner_row{ background-color: black;}
.blog_banner.mobile{ display: none;}
.blog_banner.desktop { color: white;text-align: center;width: 1072px;height: 250px;flex-shrink: 0;width: 100%;}
.blog_banner.desktop .jibble { color: #FF6603; }
.blog_banner.desktop .blog { color: #fff; }
.blog_banner.desktop span { color: #FFF; font-size: 150px; font-style: normal; font-weight: 700; line-height: normal; }
.blog-left-section { width: 50%;padding-right: 50px;}
.sidebar-section { width: 50%;}
.blog-left-section .post-image img { width: 100%; height: auto; }
.sidebar-section .post-image img {width: 100%;max-width: 100%; height: 120px;object-fit: cover;}
.sidebar-section .post-link .small-post{ display: flex; flex-wrap: wrap; }  
.sidebar-section .left{ width: 30%; }
.sidebar-section .right { width: 70%; padding-left: 30px;}
.blog-left-section .large-post,.sidebar-section .small-post {transition: transform 0.2s;background-color: black;}
.bottom-section .bottom-post {margin-bottom: 20px;border: 1px solid #ddd;padding: 15px;background: #fff;border-radius: 5px;transition: transform 0.2s;display: flex;flex-direction: column;}
.bottom-section .post-image img { width: 100%; height: auto; border-radius: 5px; }
.post-info { font-size: 0.9em; color: #555; margin: 10px 0 0; }
.blog-left-section .large-post .post-title, .sidebar-section .small-post .post-title {font-size: 1.2em;font-weight: 800;padding: 10px 0;color: rgb(255 255 255 / 80%);margin: 0 ; transition: all 400ms ease;}
.bottom-section .bottom-post .post-title {font-size: 1.2em;font-weight: bold; margin: 10px 0 10px;}
.read-time { font-size: 0.8em; color: #999; }
.post-link {color: inherit;text-decoration: none;}
.bottom-section .bottom-post {height: 100%;}
.row.bottom-section { background-color: #fff; margin-top: 60px; }
.bottom-section .col-md-3 { margin-bottom: 10px; }
.blog_banner.desktop { height: auto; }
.blog-main .bg-gray {padding-top: 50px;background-color: #121212; padding-bottom: 50px;}
.blog-left-section .post-description { color: rgb(255 255 255 / 50%); padding-bottom: 10px;}
.sidebar-section a.post-link { padding-bottom: 25px; margin-bottom: 25px; display: inline-block; border-bottom: 1px solid rgb(255 255 255 / 15%); }
.sidebar-section a.post-link:last-child { border-bottom: 0px; }
.blog-left-section .large-post .post-image { height: 320px; }
.blog-left-section .large-post .post-image img { height: 100%; object-fit: cover; }
.blog-left-section .large-post:hover  .post-title, .sidebar-section .small-post:hover  .post-title{ 
    color: #fff;
 }

.jibblesingle-blog .article--title-cat  .title a { font-size: 16px; font-weight: 600; }
 
 
.blog-post-section .bottom-section { display: flex; flex-wrap: wrap; margin: 0 -25px; padding-top: 100px; padding-bottom: 100px; }
.blog-post-section .bottom-section .blog-post-wrap { width: 25%; border-right: 1px solid #ddd; padding-left: 25px; padding-right: 25px; margin-bottom: 30px; }
.blog-post-section .bottom-section .blog-post-wrap article.bottom-post { border: 0px; padding: 0; }
.blog-post-section .bottom-section .blog-post-wrap .post-image { height: 150px; }
.blog-post-section .bottom-section .blog-post-wrap .post-image img { height: 100%; object-fit: cover; border-radius: 0; }
ul#jibble-toc { position: relative; }
ul#jibble-toc:before { content: ''; height: 100%; width: 2px; background-color: #c1c1c1; position: absolute; }
ul#jibble-toc li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 17px;
}

.jibblesingle-blog .header.article--header {
    padding-top: 0;
}
.jibblesingle-blog span.article--author {
    margin-bottom: 0;
    font-size: 14px !important;
}

.jibblesingle-blog p {
    font-size: 18px;
    color: #000;
    margin-top: 3px;
}
ul#jibble-toc li.active a {
    font-weight: 600;
    color: #000;
}
ul#jibble-toc li:before { content: ''; height: 100%; position: absolute; width: 2px; background-color: #ff6603; opacity: 0; visibility: hidden; transition: all 400ms ease; }
ul#jibble-toc li.active:before { opacity: 1; visibility: visible; }
.sidebar-tab {
    position: sticky;
    top: 100px;
}
.social-media-icon {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.blog-cat-wrap .bottom-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.date-time span {
    height: 5px;
    width: 5px;
    display: inline-block;
    background-color: #000;
    position: relative;
    font-size: 0;
    border-radius: 100%;
    margin: 0 6px;
}
.post-info ,.read-time {
    color: #ff6603;
}

p.date-time {
    display: flex;
        color: #000;
    align-items: center;
    justify-content: center;
}

.date-time {
    color: #8d8d8d;
}


#blog-content-wrapper ul {
    margin-left: 12px;
}

.blog_banner_row .post-info ,.blog_banner_row .read-time {
    color: #ff6603;
}

@media screen and (min-device-width: 992px) { 
    .blog-post-section .bottom-section .blog-post-wrap:nth-child(4n+0) {
        border-right: 0px;
    }
}



@media (max-width:1199px) {
    .blog_banner.desktop span {
        font-size: 98px;
    }
    .blog-post-section .bottom-section .blog-post-wrap { width: 33.33%; padding-left: 15px;  padding-right: 15px;}

}

@media screen and (min-device-width: 768px) and (max-device-width: 1199px) { 
    .blog_banner.desktop { height: auto; }
    .blog-left-section .large-post .post-description { color: #fff; }
    .sidebar-section .post-link .small-post .right { padding-left: 10px; }
    .bottom-section .col-md-3 { flex: 0 0 33.33%; max-width: 33.33%; }
    .sidebar-section .post-image img { object-fit: cover; }
    .blog-post-section .bottom-section {
            padding-top: 50px;
            padding-bottom: 50px;
    }
}

@media (max-width: 767px){
    .sidebar-section { width: 100%; }
    .blog_banner.mobile { display: block; width: 100%; padding-top: 10px;display: none; }
    .blog-left-section { width: 100%;  padding: 0;}
    .large-post:hover, .small-post:hover, .bottom-post:hover { transform: none; }
    .blog-left-section .post-description { color: rgb(255 255 255 / 50%); }
    .sidebar-section .post-link .small-post { flex-direction: row-reverse; }
    .blog_banner.desktop .blog { font-size: 2.5rem; }
    .blog_banner.desktop span {font-size: 2.5rem;}
    .blog_banner.desktop .article--title { font-size: 55px; font-weight: 800; text-transform: uppercase; line-height: normal; margin-bottom: 20px !important; border-bottom: 1px solid rgb(255 255 255 / 23%); margin-top: 0; padding-bottom: 10px; }
    .sidebar-section .post-image img { object-fit: cover; }
    .blog-left-section .large-post .post-title, .sidebar-section .small-post .post-title { font-size: 16px; font-weight: 500; }
    .sidebar-section .left .post-image img { height: 100px; }
    .blog-post-section .bottom-section .blog-post-wrap { width: 50%; padding-left: 10px; padding-right: 10px; border: 0px; }
    .sidebar-section .right { padding-left: 0; padding-right: 25px; }
    .sidebar-section a.post-link { width: 100%; }
    .blog-post-section .bottom-section { margin: 0 -10px; padding-bottom: 45px; padding-top: 65px; }
    .bottom-section .bottom-post .post-title { font-size: 13px; }
    .post-info { font-size: 11px; }
    .blog-post-section .bottom-section .blog-post-wrap .post-image { height: 90px; }
    .blog-main .bg-gray .row { margin: 0; }
    .blog-main .bg-gray { padding: 0; background-color: transparent; }
    .blog-left-section { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid rgb(255 255 255 / 15%); }
    
}