.blog-custom-page .hero-section{
    min-height: unset;
}

.blog-main-sec .bim-services-grid{
        grid-template-columns: repeat(3, 1fr);
        display: grid;
    }
    .blog-main-sec .bim-service-card:hover h3{
color: #0D99FF;
    }

/*======================================
  BLOG CARD DATE
======================================*/

.blog-main-sec .bim-card-image{
    position:relative;
}

.blog-main-sec .bim-blog-date{
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #0D99FF;
    color: #fff;
    padding: 8px 12px;
    border-radius: 60px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 2;
    font-style: italic;
}


/*======================================
  767px
======================================*/

@media(max-width:767px){

    .blog-main-sec .bim-blog-date{
        top:7px;
        right:7px;
        padding:6px 10px;
        font-size:10px;
        line-height:14px;
        border-radius:4px;
    }

}









/*================================================
  BLOG MAIN SECTION
================================================*/

.blog-main-sec{
    width:100%;
    background:#F8FAFC;
}
.blog-grid-wraper{
     width:100%;

    display:flex;
    flex-direction:column;
}

/*================================================
  BLOG HEADING
================================================*/

.blog-heading{
    width:100%;

    text-align:center;

    margin-bottom:50px;
}


.blog-section-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 16px;

    background: linear-gradient(270deg, #0D99FF 0%, #004273 100%);


    color:#fff;

    border-radius:60px;

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

    font-size:14px;
    line-height:1;
    font-weight:500;

    margin-bottom:14px;
}


.blog-heading h1{
    margin:0 0 15px;

    color:#0F172A;

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

    font-size:28px;
    line-height:100%;

    font-weight:600;
}


.blog-heading h1 span{
    color:#0D99FF;
}


.blog-heading p{
    margin:0 auto;

    max-width:830px;

    color:#6B7C93;

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

    font-size:20px;
    line-height:28px;

    font-weight:400;
}


/*================================================
  FILTER + GRID WRAPPER
================================================*/

.blog-content-wrap{
    width:100%;

    display:flex;
    align-items:flex-start;
    flex-direction: column;

    gap:30px;
}


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

.blog-filter-sidebar{
    width:100%;

    background:#F8F8F8;

    border:1px solid #E2E8F0;

    border-radius:30px;

    padding:27px 15px 17px;

    box-sizing:border-box;
}


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

.blog-filter-search{
    width:100%;
    

    display:flex;
    align-items:center;

    background:#fff;

    border-radius:60px;

    overflow:hidden;
}


.blog-filter-search input{
    width:100%;
    height:100%;

    border:0;
    outline:none;

    background:transparent;

    padding: 13px 0px 13px 28px;

    color:#64748B;

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

    font-size:14px;
}


.blog-filter-search input::placeholder{
    color:#64748B;
}


.blog-filter-search button{
    width:37px;
    height:35px;

    margin-right:6px;

    padding:0;

    border:0;

    border-radius:100%;

    background:#0D99FF;

    color:#fff;

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

    cursor:pointer;
}


.blog-filter-search button img{
width: 13px;
}


/*================================================
  FILTER GROUP
================================================*/

.blog-filter-group{
    margin-top:25px;

    padding-bottom:15px;

    border-bottom:1px solid #E2E8F0 ;
}


.blog-filter-title{
    margin:0 0 10px;

    padding-left:9px;

    color:#000000;

    font-size:14px;
    line-height:20px;

    font-weight:500;
}


/*================================================
  FILTER OPTION
================================================*/

.blog-filter-option{
    position:relative;
margin-bottom: 12px;
    display:flex;
    align-items:center;

    min-height:23px;

    padding-left:9px;

    cursor:pointer;
}


.blog-filter-option input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;
}
.blog-filter-option input:focus, input[type="text"]:focus{
    border: none;
}


.custom-checkbox{
    width:20px;
    height:20px;
    min-width: 20px;

    margin-right:10px;

    background:#fff;

    border:1px solid #D2D2D2;

    border-radius:4px;

    position:relative;

    box-sizing:border-box;
}


.blog-filter-option input:checked
+ .custom-checkbox{
    background:#0D99FF;

    border-color:#0D99FF;
}


.blog-filter-option input:checked
+ .custom-checkbox::after{
    content:url("/wp-content/uploads/2026/08/Vector-1.svg");

    position:absolute;

    left:4px;
    top:-2px;
}


.option-text{
    color:#64748B;

    font-size:15px;
    line-height:20px;

    font-weight:500;
}


.blog-filter-option input:checked
+ .custom-checkbox
+ .option-text{
    color:#0F172A;
}


/*================================================
  SERVICES FILTER
================================================*/

.services-filter{
    margin-top:20px;

    padding-bottom:0;

    border-bottom:0;
}


/*================================================
  CLEAR BUTTON
================================================*/

.blog-filter-clear{
    display:block;
padding: 12px 33px;

    margin:15px auto 0;

    background:#FFE7E7;

    border:1px solid #FF0000;

    border-radius: 48px;

    color:#FF0000;

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

    font-size:15px;

    cursor:pointer;

    transition:.25s ease;
}


.blog-filter-clear:hover{
    background:#FF3B30;
    color:#fff;
}


.blog-content-wrap .bim-services-grid{
    flex:1;
    min-width:0;

    margin:0;

}
.blog-custom-page .blog-content-wrap .bim-services-grid .bim-card-image{
    border-radius: 10px;
}
.blog-custom-page .blog-content-wrap .bim-services-grid .bim-card-image img{
    border-radius: 10px;
}


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

.blog-pagination{
    width:100%;

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

    gap:10px;

    margin-top:40px;
}


/*================================================
  PREV / NEXT BUTTONS
================================================*/

.pagination-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:12px 24px;

    background:#0D99FF;
    border: 1px solid transparent;
    border-radius:60px;

    color:#fff;

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

    font-size:15px;
    font-weight:500;

    cursor:pointer;

    transition:.25s ease;
}


.pagination-btn:hover{
    background:transparent;
    border: 1px solid #0D99FF;
    color: #000000;
}


.pagination-btn .arrow-icon{
    font-size:18px;
    line-height:1;
}


/*================================================
  PAGE NUMBERS
================================================*/

.pagination-numbers{
    display:flex;
    align-items:center;
    justify-content:center;
    border: 1px solid #D2D2D2;
    border-radius: 100px;
    padding: 5px 10px;

    gap:5px;

    margin:0;

    list-style:none;
}


.page-num{
    display:flex;
    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border-radius:100%;

    color:#000000;

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

    font-size:15px;
    font-weight:500;

    text-decoration:none;

    transition:.25s ease;
}


.page-num:hover{
    background:#CBE9FF;
}


.page-num.active{
    background:#CBE9FF;

    color:#000000;
}


.page-dots{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    color:#64748B;

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

    font-size:15px;
    font-weight:500;
}













/*================================================
  RESPONSIVE - TABLET (768px)
================================================*/
@media (max-width: 768px){
    .blog-grid-wraper{
        width: 100%;
    }

    .blog-content-wrap{
        flex-direction:column;
        gap:20px;
    }

    .blog-filter-sidebar{
        width:100%;
        height:auto;
        max-height:449px;

        position:static;
        top:auto;

        display:block;
        overflow:auto;
          scrollbar-width: thin;
    scrollbar-color:#0D99FF;
    }
    .blog-filter-sidebar::-webkit-scrollbar-thumb {
    background: #0D99FF;
    border-radius: 10px;
}


    .blog-filter-search{
        width:100%;
        height:auto;
    }

    .blog-filter-group{
        width:100%;
        height:auto;
        min-height:unset;

        display:block;
        overflow:visible;
    }

    .blog-filter-option{
        width:100%;
        height:auto;
        min-height:unset;

        display:flex;
        flex-wrap:nowrap;
    }

    .services-filter{
        width:100%;
        height:auto;
    }

    .blog-filter-clear{
        display:block;
        width:auto;
        height:auto;
    }

}


/*================================================
  RESPONSIVE - MOBILE (767px)
================================================*/
@media (max-width: 767px){
    .blog-grid-wraper{
        width: 100%;
    }

    .blog-content-wrap{
        flex-direction:column;
        gap:15px;
    }

    .blog-filter-sidebar{
        width:100%;
        height:auto;
        max-height:440px;

        position:static;
        top:auto;

        display:block;
        overflow:auto;

        padding:20px 15px 15px;
    }

    .blog-filter-search{
        width:100%;
        height:auto;
    }

    .blog-filter-group{
        width:100%;
        height:auto;
        min-height:unset;

        display:block;
        overflow:visible;
    }

    .blog-filter-option{
        width:100%;
        height:auto;
        min-height:unset;

        display:flex;
        flex-wrap:nowrap;
    }

    .services-filter{
        width:100%;
        height:auto;
    }

    .blog-filter-clear{
        display:block;
        width:100%;
        height:auto;
        padding: 10px 27px;
        font-size: 14px;
        margin:15px 0 0;
        text-align:center;
    }
    .blog-main-sec .bim-services-grid{
        grid-template-columns: 1fr;
    }

    .blog-pagination{
        width:100%;

        flex-wrap:nowrap;

        gap:8px;

        padding:0 5px;

        box-sizing:border-box;
    }


    .pagination-btn{
        flex-shrink:0;

        padding:10px 16px;

        font-size:14px;
    }


    .prev-btn{
        display:none;
    }


    .pagination-numbers{
        flex:1;

        overflow-x:auto;

        gap:4px;

        justify-content:flex-start;

        -ms-overflow-style:none;
        scrollbar-width:none;
    }


    .pagination-numbers::-webkit-scrollbar{
        display:none;
    }


    .page-num,
    .page-dots{
        flex-shrink:0;

        width:34px;
        height:34px;

        font-size:14px;
    }

}
















/* ---------------------------- Blog Detail Page CSS ----------------------------------*/
.single-blog-detail{
    padding: 100px 60px;
}
.single-blog-detail .container{
    justify-content: center;
}
.single-blog-detail .bim-bubble-small{
    top: 25%;
}
.single-blog-detail .bim-bubble-big{
    top: -15%;
}
.single-blog-detail .hero-content{
    text-align: center;
    max-width: unset;
}
.single-blog-detail h1{
    max-width: 770px;
}

.single-blog-page-grid{
    padding: 50px 60px 80px 60px;
}
.single-blog-page-grid .bim-service-card .bim-card-image{
    border-radius: 10px;
}
.single-blog-page-grid .bim-service-card .bim-card-image img{
    border-radius: 10px;
}







@media (max-width: 1024px){
    .single-blog-detail{
    padding: 40px 30px;
}

.single-blog-page-grid{
    padding: 50px 30px 50px 30px;
}
}





@media (max-width: 767px){
    .single-blog-detail{
    padding: 30px 20px;
}
.single-blog-page-grid{
    padding: 30px 20px 30px 20px;
}
}















.blog-single-page .blog-detail {
    width: 100%;
    background-color: #ffffff;
}

.blog-single-page .blog-container {
    width: 100%;
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}


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

.blog-single-page .blog-sidebar {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.blog-single-page .toc-card,
.blog-single-page .social-card {
    border: 1px solid #E2E8F0;
    border-radius: 30px;
    background: #fff;
    overflow: hidden;
}

.blog-single-page .toc-title {
    height: 57px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    background: #0D99FF;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

.blog-single-page .toc-title .menu-icon {
    font-size: 20px;
}

.blog-single-page .toc-list {
    list-style: none;
    margin: 0;
    padding: 10px 18px 25px;
}

.blog-single-page .toc-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 10px 0;
}

.blog-single-page .toc-list li > span {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    margin-top: 4px;
    border-radius: 50%;
    background: #e1e1e1;
    transition: all 0.6s;
}

.blog-single-page .toc-list li.active > span {
    background: #0D99FF;
}

.blog-single-page .toc-list a {
    color: #64748B;
    text-decoration: none;
    font-size: 18px;
    line-height:26px;
}
.blog-single-page .toc-list li a:hover{
    color: #0D99FF;
}
.blog-single-page .toc-list li:hover > span{
    background: #0D99FF;
}

.blog-single-page .toc-list li.active a {
    color: #0D99FF;
}

.blog-single-page .social-card {
    padding: 28px 25px;
    border: 1px solid #E2E8F0;
    border-radius: 30px;
}

.blog-single-page .social-card h4 {
    margin: 0 0 0px;
    font-size: 19px;
    font-weight: 600;
}

.blog-single-page .social-icons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.blog-single-page .social-icons a {
    color: #1599ed;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
}


.blog-detail .social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #0D99FF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: transform 0.2s ease;
}

.blog-detail .social-icons svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}


/* =========================
   RIGHT BLOG CONTENT
========================= */

.blog-single-page .blog-content {
    min-width: 0;
}


/* Author card */

.blog-single-page .blog-author-card {
    width: 100%;
    min-height: 95px;
    padding: 18px 20px;
    border: 1px solid #D4D4D4;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8F8F8;
}

.blog-single-page .author-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.blog-single-page .author-info img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 10px;
}

.blog-single-page .author-info h4 {
    margin: 0 0 0px;
    font-size: 24px;
    font-weight: 500;
    color: #000000;
}

.blog-single-page .author-info p {
    margin: 0;
    color: #0F172A;
    font-size: 18px;
}

.blog-single-page .author-info p span {
    margin: 0 6px;
}

.blog-single-page .author-info em {
    color: #64748B;
}

.blog-single-page .updated-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog-single-page .clock-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #0D99FF;
    color: #fff;
}
.blog-single-page .clock-icon img{
    width: 32px;
    height: 32px;
}
.blog-single-page .updated-info span {
    display: block;
    margin-bottom: 4px;
    color: #64748B;
    font-size: 18px;
}

.blog-single-page .updated-info strong {
    display: block;
    font-size: 18px;
    color: #0F172A;
}

.blog-single-page .blog-detail .blog-body p{
    font-size: 18px;
    color: #64748B;
    line-height: 30px;
    margin-bottom: 30px;
}
.blog-single-page .blog-detail .blog-heading h2{
     font-size: 36px;
    line-height: 51px;
    color: #000000;
    position: relative;
    padding-left: 20px;
    text-align: left;
    margin-top: 25px;
}
.blog-single-page .blog-detail .blog-content .blog-featured-image{
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 50px;
}
.blog-single-page .blog-detail .blog-content .blog-featured-image img{
    border-radius: 10px;
}
.blog-single-page .blog-detail .blog-body img{
    border-radius: 10px;
    margin-bottom: 50px;
}

.blog-single-page .blog-detail .blog-heading h2::before{
     content: "";
    position: absolute;
    width: 9px;
    left: 0px;
background-color: #0D99FF;
height: 45px;
margin-bottom: 15px;
}
.blog-single-page .blog-detail .blog-body h2{
    font-size: 36px;
    line-height: 51px;
    color: #000000;
    position: relative;
    padding-left: 20px;
    margin-bottom: 25px;
}
.blog-single-page .blog-detail .blog-body h2::before{
    content: "";
    position: absolute;
    width: 9px;
    left: 0px;
background-color: #0D99FF;
height: 45px;
margin-bottom: 15px;

}
.blog-single-page .blog-detail .blog-body h3{
    font-size: 30px;
    line-height: 38px;
    color: #000000;
}
.blog-single-page .blog-detail .blog-body h4{
    font-size: 26px;
    line-height: 36px;
    color: #000000;
}
.blog-single-page .blog-detail .blog-body h5{
    font-size: 26px;
    line-height: 36px;
    color: #000000;
}
.blog-single-page .blog-detail .blog-body h6{
    font-size: 22px;
    line-height: 32px;
    color: #000000;
}

.blog-single-page .blog-detail .blog-body blockquote{
    border-color: #0D99FF;
    background-color:#F8F8F8;
    margin: 0px 0px 25px 30px;
}
.blog-single-page .blog-detail .blog-body ul{
    margin-left: 10px;
}
.blog-single-page .blog-detail .blog-body ul li{
    list-style-type: none;
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}
.blog-single-page .blog-detail .blog-body ul li::before{
      content: "";
    position: absolute;
    left: -15px;
    top: 5px;
    width: 23px;
    height: 23px;
    background-image: url("/wp-content/uploads/2026/08/Group-377.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.blog-single-page  .blog-body .blog-table thead tr{
    background-color: #0D99FF;
    border-top-left-radius: 30px;
    color: #ffffff;
}
.blog-single-page .blog-body .blog-table .table-responsive{
    border-radius: 30px;
    overflow: hidden;
}











@media (max-width: 1024px){
    .blog-single-page .blog-container{
        grid-template-columns: 340px minmax(0, 1fr);
    }
    .blog-single-page .blog-detail .blog-body h2{
        font-size: 32px;
        line-height: 40px;
    }
}













@media (max-width: 991px){
    .blog-single-page .blog-container{
        grid-template-columns:repeat(1, 1fr);
    }
    .blog-single-page .blog-sidebar{
        position: static;
    }
    .blog-single-page .blog-detail .blog-heading h2{
        font-size: 30px;
        line-height: 40px;
    }
    .blog-single-page .blog-detail .blog-body h2{
        font-size: 30px;
        line-height: 40px;
    }
    .blog-single-page .blog-detail .blog-body h4{
        font-size: 22px;
        line-height: 32px;
    }
}








@media (max-width: 767px){
    .blog-single-page .blog-author-card{
        flex-wrap: wrap;
        gap: 20px;
    }
    .blog-single-page .updated-info span{
        margin-bottom: unset;
    }
    .blog-single-page .author-info p{
        font-size: 16px;
    }
    .blog-single-page .clock-icon{
        width: 45px;
        height: 45px;
    }
    .blog-single-page .blog-detail .blog-heading h2 {
            font-size: 24px;
            line-height: 34px;
        }
        .blog-single-page .blog-detail .blog-body h2{
            font-size: 24px;
            line-height: 34px;
        }
    .blog-single-page .blog-detail .blog-body h3 {
            font-size: 22px;
            line-height: 32px;
        }
    .blog-single-page .blog-detail .blog-body h4{
        font-size: 20px;
        line-height: 30px;
    }
    .blog-single-page .blog-detail .blog-body p{
        font-size: 16px;
        line-height: 24px;
        text-align: justify;
    }
    .blog-single-page .blog-detail .blog-body blockquote{
        margin: 0px 0px 20px 15px;
    }
    .blog-single-page .blog-body .blog-table .table-responsive{
        overflow-x: scroll;
    }
    .blog-single-page .table-responsive::-webkit-scrollbar {
    width: 1px;
    height: 6px;
}
 
.blog-single-page .table-responsive::-webkit-scrollbar-track {
    background: #c5c5c5;
    border-radius: 40px;
}
 
.blog-single-page .table-responsive::-webkit-scrollbar-thumb {
    background: #0D99FF;
    border-radius: 40px;
}
 


}