/* Blog single bundle: blog + like-heart */ 
/* ==============================================
   Blogs / Blog Single — Page-specific styles
   Load order: after common_style.css, all_style.css, components.min.css
   ============================================== */
/* Blogs page */
.blog_hero_p {
    font-size: 16px;
    font-weight: 400;
    color: #1F1F1F;
    margin: 0 0 28px;
}
.blog_hero_sec .subscribe_div .blog_sd_input input{
    margin: 0 0 4px;
}
.blog_hero_sm_p {
    font-size: 12px;
    color: #737373;
    margin: 0;
}
.blog_hero_sec .subscribe_div{
    align-items: flex-start;
}
.blog_hero_sec .subscribe_div .blog_sd_input input.subscribe_input{
    width: 100%;
}
.blog_hero_sec .blog_sd_input {
    max-width: 354px;
    flex: 0 0 354px;
}
.blog_hero_sec {
    padding: 104px 0 108px;
}
.blog_hero_sec .chs_h1 {
    margin: 0 0 24px;
}
.featured_blogs_li_inner {
    display: flex;
    gap: 32px;
    text-decoration: none;
}
.featured_blogs_li_inner:hover .fbl_text h2{
    color: #0049FF;
}
.featured_blogs_ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.featured_blogs_li {
    padding: 24px 0;
    border-bottom: 1px solid #E5E5E5;
}
.featured_blogs_li:first-child{
    padding-top: 0;
}
.featured_blogs_li:last-child{
    border-bottom: 0;
    padding-bottom: 0;
}
.fbl_img {
    max-width: 176px;
    flex: 0 0 176px;
}
.fbl_img img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
}
.fbl_text h2 {
    color: #171717;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
    transition: .4s;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    font-family: 'Inter' , sans-serif;
}
.fbl_text p {
    font-size: 16px;
    color: #737373;
    margin: 0;
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
.fbl_text_part {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 52px;
}
/* -----------------------------------------------
   Filter Bar component (shared with portfolio)
   Moved to: components.min.css
   .blog_hd_outer, .blogs_tabs, .blogs_left_hd,
   .blogs_right_tabing, .bFilter_scroll_control,
   .bsc_left, .bsc_right
   ----------------------------------------------- */

/* .blog_pic base structure moved to components.min.css */
.blog_details_bottom {
    display: flex;
    gap: 12px;
}
img.bdb_img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
/* .blog_card base structure moved to components.min.css */
/* Page-scoped override — .blog_card margin reset handled by .projHub_slider .item .blog_card in all_style.css */
.blog_details h3.bd_h3 {
    font-size: 24px;
    color: #171717;
    font-weight: 600;
    margin: 0 0 8px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    transition: .4s;
    min-height: 57px;
}
.blog_details p {
    color: #9296A0;
    font-size: 16px;
    margin: 0;
}
.bd_description_boxx{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    margin: 0 0 24px;
    min-height: 73px;
}
.bdb_right h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 2px;
    color: #171717;
}
.bdb_right p {
    font-size: 14px;
    color: #737373;
    margin: 0;
}
.bloglist_sec {
    padding-bottom: 128px;
}


/* //Blogs page */
/* Blog Single page */
.bhs_title {
    position: relative;
}
.bhs_back_div {
    position: absolute;
    top: 0;
    font-size: 14px;
    color: #474A52;
    line-height: normal;
}
.bhs_back_div a{
    text-decoration: none;
    color: #474A52;
}
.bhs_back_div a:hover{
    color: #0049FF;
}
.blog_head_sec {
    border-bottom: 1px solid #E4E5E7;
    padding: 102px 0 36px;
}
.bl_single_width {
    width: 80%;
    margin: 0 auto;
}
.blogCat_hd h3 {
    font-size: 14px;
    margin: 0;
    color: #5F636D;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}
.blogCat_hd {
    margin: 0 0 22px;
}
.blogCat_hd h3 span {
    display: inline-flex;
}
.blogCat_hd h3 span.blg_cat {
    color: #712BE3;
}
.blogCat_hd h3 span i {
    font-size: 6px;
}
.bhs_mainTitle_div h1 {
    color: #1C1D20;
    font-size: 52px;
    font-weight: 800;
    margin: 0 0 16px;
    font-family: 'Outfit' , sans-serif;
}
.bhs_sm_details {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 12px;
    align-items: center;
    color: #5F636D;
    font-size: 16px;
}
.bhs_sm_details li.bhs_circleIcon i {
    font-size: 6px;
}
.bhs_sm_details .bhs_circleIcon {
    display: inline-flex;
}
.blogContent_sec {
    padding: 36px 0 0;
}
.bcs_outerBox {
    position: relative;
}
.p_social_links_ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.p_social_links_ul li img {
    width: 45px;
}
.progress_social_div {
    position: sticky;
    top: 80px;    
}
.progress_social_inner {
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: center;
    position: absolute;
}
.bcs_textDiv p {
    font-size: 18px;
    color: #303136;
}
.bls_textDiv h3{
    font-size: 22px;
    font-weight: 700;
}
.bls_textDiv h4 {
    font-size: 22px;
    color: #303136;
    font-family: 'Outfit' , sans-serif;
    line-height: normal;
}
.bls_textDiv h2{
    font-size: 32px;
    color: #18191B;
    font-weight: 900;
    margin: 0 0 20px;
    text-decoration: none;
    line-height: normal;
}
.bls_textDiv P a{
    color: #0049FF;
}
.bcs_textDiv .bls_top_p{
    margin: 0 0 48px;
}
.bls_bimg, .bcs_textDiv p img {
    width: 100%;
    border-radius: 6px;
    margin: 48px 0;
}
.bcs_textDiv p img {
    width: 100% !important;
    object-fit: contain;
}
.bls_hr {
    border-color: #E5E5E5;
    margin: 0 0 48px;
}
.bls_textDiv {
    margin: 0 0 48px;
}

.bls_textDiv p {
    margin: 0 0 20px;
}
.bls_textDiv ul {
    margin: 0;
}
.bls_textDiv ul li, .bls_textDiv ol li {
    margin: 0 0 10px;
    font-size: 18px;
    color: #303136;
}
.bls_textDiv ul li strong, .bls_textDiv ol li strong {
    color: #18191B;
}
.bls_textDiv ul li::marker, .bls_textDiv ol li::marker {
    font-weight: 600;
}
.bls_textDiv .callout-info {
    border-left: 4px solid #C7D2FE;
    padding: 3px 0 3px 16px;
}
.bls_textDiv .callout-info p {
    font-family: "PolySans Median";
    font-style: italic;
    margin: 0 0 16px;
}
.bls_textDiv .callout-info .blockquote-footer {
    margin: 0;
    font-size: 18px;
}
.bls_td_bgText {
    background-color: #FAFAFA;
    padding: 16px;
    margin: 0 0 20px;
    border-radius: 6px;
}
.bls_td_bgText p{
    margin: 0;
}
.bls_footer {
    margin: 64px 0 0;
    border-top: 1px solid #E4E5E7;
    padding: 36px 0 40px;
}
.blsf_img img {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
}
.bls_f_perInfo {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid #E4E5E7;
}
.bls_f_text {
    max-width: 70%;
    flex: 0 0 70%;
}
.bls_f_text h3 {
    font-size: 16px;
    font-weight: 600;
    color: #171717;
    margin: 0 0 4px;
}
.bls_f_text h4, .bls_f_text p {
    color: #737373;
}
.bls_f_text h4 {
    font-size: 14px;
    margin: 0 0 8px;
}
.bls_f_text p {
    font-size: 12px;
    margin: 0;
}
.bls_f_subs_div {
    padding: 36px 0;
    display: flex;
    gap: 32px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E4E5E7;
    margin: 0 0 24px;
}
.bls_f_subs_text h3 {
    font-size: 14px;
    color: #6366F1;
    margin: 0 0 4px;
}
.bls_f_subs_text p {
    font-size: 12px;
    color: #404040;
    margin: 0;
}
.bls_f_subs_form .subscribe_div input.subscribe_input {
    width: 268px;
}
.bls_f_subs_form {
    width: 100%;
    display: flex;
    justify-content: right;
}
.bls_f_subs_div .bls_f_subs_text {
    width: 100%;
}

/* //Blog Single page */
@media screen and (max-width: 576px){
    /* Blog page responsive overrides */
    .blog_hero_sec .chs_leftBox {
        text-align: left;
        margin: 0 0 48px;
    }
    .blog_hero_p {
        font-size: 14px;
    }
    .blog_hero_sec .blog_sd_input {
        max-width: 62%;
        flex: 0 0 62%;
    }
    .blog_hero_sec .subscribe_div .subscribe_btn {
        max-width: calc(38% - 8px);
        flex: 0 0 calc(38% - 8px);
        padding: 10px 7px;
    }
    /* Blog-specific .blogs_tabs bottom margin (overrides shared 49px) */
    .blogs_tabs {
        margin: 0 0 36px;
    }
    .blog_details h3.bd_h3 {
        font-size: 20px;
        min-height: auto;
    }
    .bd_description_boxx {
        min-height: auto;
    }
    .bloglist_sec {
        padding-bottom: 76px;
    }

}

@media screen and (min-width: 768px) and (max-width: 1200px){
    /*  Blog section  */
    .blog_hero_sec{
        padding: 104px 0 108px !important;
    }
    .blog_hero_sec .chs_leftBox {
        text-align: center;
        margin: 0;
    }
    .blog_hero_sec .subscribe_div{
        justify-content: center;
    }
    .blog_hero_sm_p{
        text-align: left;
    }
    .blog_pic img{
        width: 100%;
    }
    .blog_details h3.bd_h3 {
        font-size: 20px;
        min-height: 48px;
    }
    .bloglist_sec {
        padding-bottom: 96px;
    }
    /*  //Blog section  */

}

@media screen and (min-width: 768px) and (max-width: 1200px){
    /*  Single Blog section  */
    .blog_head_sec{
        padding-bottom: 48px;
    }
    .blogContent_sec {
        padding: 48px 0 0;
    }
    .bcs_textDiv .bls_top_p, .bls_bimg, .bls_hr, .bls_textDiv {
        margin: 0 0 32px;
    }
    .bls_textDiv h2{
        margin: 0 0 16px;
    }
    .bls_textDiv .bls_td_h3s2 {
        font-size: 20px;
        margin: 0 0 12px;
    }
    .bls_f_subs_form .subscribe_div input.subscribe_input {
        width: 384px;
    }
    .bls_f_subs_form .subscribe_div .subscribe_btn{
        width: 24%;
        padding: 10px 7px;
    }
    .bls_f_subs_form .subscribe_div {
        margin: 0;
    }
    .bls_blg_sec2 {
        padding-bottom: 48px;
    }
    /*  //Single Blog section  */

}

@media screen and (max-width: 768px){
    /*  Single Blog page  */
    .bhs_mainTitle_div h1{
        font-size: 28px;
    }
    .bhs_sm_details{
        gap: 14px;
        font-size: 14px;
    }
    .blog_head_sec{
        padding-bottom: 32px;
    }
    .blogContent_sec{
        padding-top: 32px;
    }
    .bcs_textDiv .bls_top_p, .bls_bimg, .bls_hr {
        margin: 0 0 24px;
    }
    .bls_textDiv h2 {
        font-size: 28px;
    }
    .bls_textDiv ul{
        margin: 0 0 20px;
    }
    .bls_textDiv {
        margin: 0 0 24px;
    }
    .bls_textDiv  .bls_td_h3s {
        font-size: 20px;
    }
    .bls_textDiv .bls_td_h3s2 {
        font-size: 18px;
        margin: 0 0 12px;
    }
    .bls_footer {
        padding-top: 32px;
        padding-bottom: 8px;
    }
    .bls_f_text h3 {
        font-size: 14px;
    }
    .bls_f_text h4 {
        font-size: 12px;
    }
    .bls_f_perInfo{
        padding-bottom: 36px;
    }
    .bls_f_subs_div {
        padding: 32px 0;
    }
    .bls_f_subs_form .subscribe_div input.subscribe_input{
        width: 100%;
    }
    .bls_f_subs_div .subscribe_div {
        margin: 0;
    }
    .bls_blg_sec2{
        padding-bottom: 28px;
    }
    /*  //Single Blog page  */

}

@media screen and (min-width: 992px) and (max-width: 992px){
    /*  Blog page  */
    .blog_rightBox{
        display: block !important;
    }

    /*  //Blog page  */

}

@media screen and (max-width: 992px){
    /* Blog page responsive overrides */
    .blog_hero_sec {
        padding-top: 74px;
        padding-bottom: 0;
    }
    .blog_hero_sec .blog_sd_input input {
        max-width: 100%;
    }
    .blog_rightBox {
        display: none;
    }

}

@media screen and (max-width: 992px){
    /*  Single Blog page  */
    .progress_social_inner, .bhs_back_div{
        display: none;
    }
    .bl_single_width{
        width: 100%;
    }
    /*  //Single Blog page  */

}

@media screen and (min-width: 992px) and (max-width: 1200px){
    /*  Blog page  */
    .blog_hero_sec .chs_leftBox{
        text-align: left;
    }
    .blog_hero_sec .subscribe_div{
        justify-content: left;
    }
    .blog_hero_sec .blog_sd_input {
        max-width: 275px;
        flex: 0 0 275px;
    }

    /*  //Blog page  */

}

@media screen and (max-width: 991px){
    /*  Blog page  */
    .blog_hero_sec .chs_h1 {
        font-size: 50px;
    }
    /*  //Blog page  */

}

@media screen and (max-width: 1200px){
    /*  blog single page  */
    .bls_f_subs_div{
        flex-wrap: wrap;
    }
    .bls_f_subs_form{
        display: block;
    }
    /*  //blog single page  */

} 
/* like heart */

.like_heart_li svg {
    cursor: pointer;
    overflow: visible;
    width: 28px;
    margin: 0;
    display: inline-block;
    margin-right: -5px;
    margin-top: -2px;
}
.like_heart_li svg #heart {
     transform-origin: center;
     animation: animateHeartOut .3s linear forwards
}
.like_heart_li svg #main-circ {
     transform-origin: 29.5px 29.5px
}

.like_heart_li .lv_checkbox {
     display: none
}

.like_heart_li .lv_checkbox:checked+label svg #heart {
     transform: scale(0.2);
     fill: url(#like-gradient) #0049FF;
     animation: animateHeart .3s linear forwards .25s;
     stroke-width: 0;
}
.like_heart_li .lv_checkbox:checked+label svg #main-circ {
     transition: all 2s;
     animation: animateCircle .3s linear forwards;
     opacity: 1
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup1 {
     opacity: 1;
     transition: .1s all .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup1 #heart1 {
     transform: scale(0) translate(0, -30px);
     transform-origin: 0 0 0;
     transition: .5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup1 #heart2 {
     transform: scale(0) translate(10px, -50px);
     transform-origin: 0 0 0;
     transition: 1.5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup2 {
     opacity: 1;
     transition: .1s all .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup2 #heart1 {
     transform: scale(0) translate(30px, -15px);
     transform-origin: 0 0 0;
     transition: .5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup2 #heart2 {
     transform: scale(0) translate(60px, -15px);
     transform-origin: 0 0 0;
     transition: 1.5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup3 {
     opacity: 1;
     transition: .1s all .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup3 #heart1 {
     transform: scale(0) translate(30px, 0px);
     transform-origin: 0 0 0;
     transition: .5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup3 #heart2 {
     transform: scale(0) translate(60px, 10px);
     transform-origin: 0 0 0;
     transition: 1.5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup4 {
     opacity: 1;
     transition: .1s all .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup4 #heart1 {
     transform: scale(0) translate(30px, 15px);
     transform-origin: 0 0 0;
     transition: .5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup4 #heart2 {
     transform: scale(0) translate(40px, 50px);
     transform-origin: 0 0 0;
     transition: 1.5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup5 {
     opacity: 1;
     transition: .1s all .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup5 #heart1 {
     transform: scale(0) translate(-10px, 20px);
     transform-origin: 0 0 0;
     transition: .5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup5 #heart2 {
     transform: scale(0) translate(-60px, 30px);
     transform-origin: 0 0 0;
     transition: 1.5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup6 {
     opacity: 1;
     transition: .1s all .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup6 #heart1 {
     transform: scale(0) translate(-30px, 0px);
     transform-origin: 0 0 0;
     transition: .5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup6 #heart2 {
     transform: scale(0) translate(-60px, -5px);
     transform-origin: 0 0 0;
     transition: 1.5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup7 {
     opacity: 1;
     transition: .1s all .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup7 #heart1 {
     transform: scale(0) translate(-30px, -15px);
     transform-origin: 0 0 0;
     transition: .5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup7 #heart2 {
     transform: scale(0) translate(-55px, -30px);
     transform-origin: 0 0 0;
     transition: 1.5s transform .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup2 {
     opacity: 1;
     transition: .1s opacity .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup3 {
     opacity: 1;
     transition: .1s opacity .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup4 {
     opacity: 1;
     transition: .1s opacity .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup5 {
     opacity: 1;
     transition: .1s opacity .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup6 {
     opacity: 1;
     transition: .1s opacity .3s
}
.like_heart_li .lv_checkbox:checked+label svg #heartgroup7 {
     opacity: 1;
     transition: .1s opacity .3s
}


@keyframes animateCircle {
     40% {
          transform: scale(10);
          opacity: 1;
          fill: #DD4688
     }

     55% {
          transform: scale(11);
          opacity: 1;
          fill: #D46ABF
     }

     65% {
          transform: scale(12);
          opacity: 1;
          fill: #CC8EF5
     }

     75% {
          transform: scale(13);
          opacity: 1;
          fill: transparent;
          stroke: #CC8EF5;
          stroke-width: .5
     }

     85% {
          transform: scale(17);
          opacity: 1;
          fill: transparent;
          stroke: #CC8EF5;
          stroke-width: .2
     }

     95% {
          transform: scale(18);
          opacity: 1;
          fill: transparent;
          stroke: #CC8EF5;
          stroke-width: .1
     }

     100% {
          transform: scale(19);
          opacity: 1;
          fill: transparent;
          stroke: #CC8EF5;
          stroke-width: 0
     }
}

@keyframes animateHeart {
     0% {
          transform: scale(0.2)
     }

     40% {
          transform: scale(1.2)
     }

     100% {
          transform: scale(1)
     }
}

@keyframes animateHeartOut {
     0% {
          transform: scale(1.4)
     }

     100% {
          transform: scale(1)
     }
}


/* //like heart */