/* Hero Section Styles Start */

.blog_hero_jhdev {
    padding: 148px 0 80px 0;
    background-color: #f8fafd;
}

.blog_hero_box_jhdev {
    width: 100%;
}

.blog_hero_title_jhdev {
    font-size: 64px;
    font-weight: 400;
    padding-top: 20px;
}

.blog-left-box-mdjhd {
    width: 50%;
}

.blog-right-box-mdjhd {
    width: 44.5%;
}

.blog_hb_inner_jhdev {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.blog_hero_desc_jhdev {
    font-weight: 500;
}


/* Hero Section Styles End */


/* Blog Posts Section Styles */

.search-icon {
    display: flex;
}

.blog_main_jhdev {
    background-color: #f8fafd;
    padding-bottom: 140px;
}

.blog_filter_jhdev {
    margin-bottom:  24px;
}

.blog_filterbox_jhdev {
    width: 100%;
}

.blog_fbox_inner_jhdev {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
    border-radius: 20px;
    gap: 32px;
    border: 1px solid #dee2ed;
}

.blog_cat_box_jhdev, .blog_search_form_jhdev, .blog_sorting_box_jhdev {
    background-color: unset;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    position: relative;
}


.blog_cat_box_jhdev select, .blog_search_form_jhdev .blog_search_field_jhdev, .blog_sorting_box_jhdev select {
    padding: 12px 16px;
    background-color: unset;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    appearance: none;
    cursor: pointer;
}

.blog_cat_box_jhdev *, .blog_search_form_jhdev *, .blog_sorting_box_jhdev * {
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.56;
    text-transform: capitalize;
    color: #363636;
    border: none!important;
    outline: none!important;
    background-color: unset!important
} 

.search-icon {
    cursor: pointer;
}

.blog_cat_box_jhdev {
    min-width: 180px;
}

.blog_search_form_jhdev {
    min-width: 295px;
}

.blog_sorting_box_jhdev {
    min-width: 124px;
}

.blog_filter_sbox_jhdev {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.blog_cat_dropdown_jhdev, .blog_search_field_jhdev, .blog_sorting_dropdown_jhdev {
    width: 100%;
    display: flex;
    gap: 4px;
}

.blog_search_field_jhdev {
    justify-content: flex-start!important;
}

.blog_search_field_jhdev input {
    width: 100%;
}

.sb_dropdown_icon_jhdev {
     position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    pointer-events: none
}

.blog_cards_jhdev {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 24px;
    row-gap: 40px;
}

.post_card_jhdev {
    width: calc(50% - 12px);
}

.post_card_inner_jhdev {
    background-color: #ffffff;
    border-radius: 20px;
    border: 2px solid #dee2ea66;
    overflow: hidden;
    height: 100%;
    transition: all 0.5s;
}

.post_card_inner_jhdev:hover {
    box-shadow: 
    0px 15px 32px 0px #0C4C680D,
    0px 59px 59px 0px #0C4C680A,
    0px 133px 80px 0px #0C4C6808,
    0px 236px 94px 0px #0C4C6803,
    0px 369px 103px 0px #0C4C6800;
    transition: all 0.5s;
}

.post_card_ibox_jhdev {
    display: flex;
    overflow: hidden;
}

.post_card_ibox_jhdev img {
    width: 100%;
    object-fit: cover;
    height: 407px;
    transition: all 0.5s;
}

.post_card_inner_jhdev:hover .post_card_ibox_jhdev img {
    transform: scale(1.05);
    transition: all 0.5s;
}


.post_card_content_box_jhdev {
    position: relative;
    padding: 36px;
    display: block; /* Changed to block for better layout control */
    background: transparent; /* Default background */
    transition: all 0.5s ease; /* Smooth transition for all animatable properties */
    z-index: 1;
    height: 100%;
}

.post_card_content_box_jhdev::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, #0a4965 65%, #e1ffa1 140%);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease; /* Smooth opacity transition */
    z-index: -1; /* Place behind content */
}

.post_card_inner_jhdev:hover .post_card_content_box_jhdev::before {
    opacity: 1; /* Show gradient on hover */
}


.post_tag_jhdev * {
    font-family: 'Urbanist', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: #0b5170;
    text-transform: uppercase;
}

.post_card_inner_jhdev:hover .post_tag_jhdev * {
    color: #E1FFA1;
    transition: all 0.5s;
}

.post_card_title_jhdev {
    color: #0c0c0c;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    /*text-transform: capitalize;*/
    font-family: 'Urbanist', sans-serif;
    padding-bottom: 13px;
    transition: all 0.5s;
}

.post_card_inner_jhdev:hover .post_card_title_jhdev {
    color: #ffffff;
    transition: all 0.5s;
}

.post_card_excerpt_jhdev {
    font-family: "urbanist", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.56;
    /*text-transform: capitalize;*/
    color: #0c0c0cb3;
    transition: all 0.5s;
}

.post_card_inner_jhdev:hover .post_card_excerpt_jhdev {
    color: #ffffffb3;
    transition: all 0.5s;
}


.post_card_cont_box_dev {
    padding-bottom: 32px;
    transition: all 0.5s;
}

.post_card_read_time_jhdev , .post_card_publish_date_jhdev {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
    text-transform: capitalize;
    color: #0c0c0c;
    transition: all 0.5s;
}

.post_card_inner_jhdev:hover .post_mete_box_jhdev * {
    color: #ffffff;
    transition: all 0.5s;
}

.post_card_inner_jhdev:hover .post_card_excerpt_jhdev {
    color: #ffffffb3;
    transition: all 0.5s;
}

.post_card_top_box_jhdev {
    padding-top: 32px;
    min-height: 186px;
}

.post_mete_box_jhdev {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 32px;
    border-top: 1px solid #00000033;
}

.post_card_inner_jhdev:hover .post_mete_box_jhdev{
    border-top: 1px solid #ffffff33;
    transition: all 0.5s;
}


.post_card_inner_jhdev a {
    display: flex;
    flex-direction: column;
}


.post_card_read_text_jhdev{
    font-weight: 500;
    text-transform: lowercase;
}


.blog_pagination_jhdev {
    padding-top: 60px;
}

.blog_pagination_box_jhdv{
    width: 100%;
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
}

.prev, .next {
    background-color: #ffffff;
    color: #71757a;
    border: none;
    border-radius: 31px;
    padding: 5px 15px;
    cursor: pointer;
    font-family: "Urbanist", Sans-Serif;
    font-weight: 600;
    font-size: 18px; 
    line-height: 1;
    transition: all 0.5s;
    padding: 10px 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.prev {
    margin-right: 20px;
}

.next {
    margin-left: 20px;
}

.prev:hover, .next:hover {
    background-color: #0b5170;
    color: #ffffff;
    transition: all 0.5s;
}

.page-number {
    background-color: #ffffff;
    color: #71757a;
    border: none;
    border-radius: 31px;
    width: 46px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
    cursor: pointer;
    font-family: "Urbanist", Sans-Serif;
    font-weight: 600;
    font-size: 18px; 
    line-height: 1;
    transition: all 0.5s;
}

.page-number.active, .page-number:hover {
    background-color: #0b5170;
    color: #ffffff;
    transition: all 0.5s;
}

@media(max-width: 1024px) {
    
    .blog_hero_jhdev {
        padding: 120px 0 60px 0;
    }
    
    .blog_hero_title_jhdev {
        font-size: 48px;
    }
    
    .blog-left-box-mdjhd {
        width: 40%;
    }
    
    .blog-right-box-mdjhd {
        width: 55%;
    }
    
    .blog_fbox_inner_jhdev {
        padding: 24px;
        gap: 24px;
    }
    
    .blog_cards_jhdev {
        row-gap: 32px;
    }
    
    .post_card_ibox_jhdev img {
        height: 320px;
    }
    
    .post_card_content_box_jhdev {
        padding: 32px;
    }
    
    .post_card_top_box_jhdev {
        padding-top: 28px;
    }
    
    .post_card_cont_box_dev {
        padding-bottom: 28px;
    }
    .post_mete_box_jhdev {
        padding-top: 28px;
    }
    
    .blog_pagination_jhdev {
        padding-top: 48px;
    }
    
    .blog_main_jhdev {
        padding-bottom: 120px;
    }


}


@media (max-width: 992px) {
    .post_card_inner_jhdev {
        border-radius: 16px;
    }
    
     .post_card_ibox_jhdev img {
        height: 280px;
    }
    .post_card_jhdev {
        width: 100%;
    }
    .post_card_title_jhdev {
        font-size: 28px;
    }
    
    .post_card_top_box_jhdev {
        padding-top: 24px;
        min-height: unset;
    }
    
    .post_card_content_box_jhdev {
        padding: 24px;
    }
    .post_mete_box_jhdev {
        padding-top: 24px;
    }
    
    .blog_hero_jhdev {
        padding: 100px 0 48px 0;
    }
    
    .blog_hb_inner_jhdev {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .blog-left-box-mdjhd {
        width: 100%;
    }
    
    .blog-right-box-mdjhd {
        width: 100%;
    }
    
    .blog_hero_title_jhdev {
        font-size: 40px;
    }
    
    .blog_hero_title_jhdev .block_jhdev {
        display: inline;
    }
    
    .blog_fbox_inner_jhdev {
        padding: 20px;
        gap: 20px;
        border-radius: 16px;
    }
    
    .blog_sorting_box_jhdev select, .blog_search_form_jhdev .blog_search_field_jhdev, .blog_sorting_box_jhdev select {
        padding: 10px 12px;
    }
    
    .blog_cards_jhdev {
        gap: 24px;
    }
    
    .blog_pagination_jhdev {
        padding-top: 40px;
    }
    
    .blog_main_jhdev {
        padding-bottom: 100px;
    }
}

@media (max-width: 767px) {
    
    .blog_hero_jhdev {
        padding: 80px 0 40px 0;
    }
    
    .blog_hero_title_jhdev {
        font-size: 36px;
        padding-top: 16px;
    }
    
    .blog_filter_jhdev {
        margin-bottom: 20px;
    }
    
    .blog_fbox_inner_jhdev {
        padding: 16px;
        gap: 12px;
        border-radius: 12px;
        flex-wrap: wrap;
    }
    
    .blog_search_form_jhdev {
        min-width: unset;
        width: 100%;
    }
    
    .blog_filter_sbox_jhdev {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .blog_sorting_box_jhdev select, .blog_search_form_jhdev .blog_search_field_jhdev, .blog_sorting_box_jhdev select {
        padding: 8px 10px;
        border-radius: 6px;
        gap: 6px;
    }
    
    .blog_sorting_box_jhdev {
        width: 100%;
        min-width: unset;
    }
    .post_card_inner_jhdev {
        border-radius: 12px;
    }
    
     .post_card_ibox_jhdev img {
        height: 240px;
    }

    .post_card_title_jhdev {
        font-size: 24px;
    }
    
    .post_card_top_box_jhdev {
        padding-top: 20px;
    }
    
    .post_card_content_box_jhdev {
        padding: 20px;
    }
    .post_mete_box_jhdev {
        padding-top: 20px;
    }
    
    .blog_pagination_jhdev {
        padding-top: 32px;
    }
    
    .blog_main_jhdev {
        padding-bottom: 80px;
    }
    
    
    .prev {
        margin-right: 12px;
    }
    
    .next {
        margin-left: 12px;
    }
    
    .prev, .next {
        padding: 8px 16px;
    }
    
    .page-number {
        width: 38px;
        height: 38px;
    }
    

    .blog_cat_box_jhdev {
        width: 100%;
    }
    
    .blog_filter_sbox_jhdev {
        width: 100%;
    }
    
    
    .sb_dropdown_icon_jhdev {
        right: 10px;
    }
        
    
}