/*####################################################################################################################*/
/*Appilix All Article Listing Page*/
/*####################################################################################################################*/
/*Hero*/
.appilix_all_articles_hero{
    padding: 12px;
    background: var(--surface_s3);
}
.appilix_all_articles_hero .hero_wrapper{
    text-align: center;
    padding: 148px 0 100px 0;
    background-color: var(--orange_100);
    background-image: url("../images/theme/backgrounds/appilix_feature_page_pattern.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.appilix_all_articles_hero .hero_wrapper .section_title{
    margin: 0 auto;
    max-width: 707px;
}
.appilix_all_articles_hero .hero_wrapper .section_title h1{
    margin: 0 auto;
    font-size: var(--web_heading_size_h2);
    line-height: var(--web_heading_line_height_h2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.appilix_all_articles_hero .hero_wrapper .section_title p{
    margin: 20px auto 0 auto;
    font-size: var(--web_body_size_b3);
    line-height: var(--web_body_line_height_b3);
    font-weight: var(--font_weight_regular);
    max-width: 528px;
}

.appilix_all_articles_hero .hero_wrapper .section_cards{
    margin: 60px auto 0 auto;
    display: flex;
    gap: 20px;
    justify-content: center;
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card {
    flex: 2;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 40px;
    background: var(--surface_s3);
    border-radius: 20px;
    border-width: 2px 2px 0 2px;
    border-style: solid;
    border-color: var(--orange_100);
    box-shadow: 0 0 0 1px #FFFFFF;
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details{
    max-width: 308px;
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details .card_meta{
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details h2{
    margin: 12px 0 0 0;
    font-size: var(--web_label_size_l2);
    line-height: var(--web_label_line_height_l2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details .quot_by{
    margin: 58px 0 0 0;
    display: flex;
    align-items: center;
    gap: 20px;
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details .quot_by .author_img{
    width: 52px;
    height: 52px;
    border-radius: 100px;
    object-fit: cover;
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details .quot_by .quoter_name{
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details .quot_by .quoter_role{
    display: inline-block;
    margin: 4px 0 0 0;
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card .card_img{
    max-height: 294px;
    border-radius: 16px;
    aspect-ratio: 11 / 16;
    object-fit: cover;
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card.card_2{
    flex: 1;
    flex-direction: column;
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card.card_2 .card_title h2{
    font-size: var(--web_heading_size_h5);
    line-height: var(--web_heading_line_height_h5);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_300);
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card.card_2 .card_title p{
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card.card_2 .take_action{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card.card_2 .take_action .mail_input{
    padding: 8px 14px 8px 36px;
    border-radius: 100px;
    outline: none;
    border: 1px solid var(--gray_300);
    background: url("../images/theme/articles/subscription_email_icon.svg") no-repeat 14px center / 16px;
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
    font-weight: var(--font_weight_regular);
    color: var(--typography_dark_300);
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details h2 a,
.appilix_articles_list .articles_grid .article_card header h2 a,
.related_blogs .articles_grid .article_card header h2 a{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: inline-block;
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card a,
.appilix_articles_list .articles_grid .article_card a,
.related_blogs .articles_grid .article_card a{
    cursor: pointer;
    display: block;
}



.appilix_all_articles_hero .hero_wrapper .section_cards .card.card_2 .take_action .button {
    cursor: pointer;
    position: relative;
    outline: none;
    padding: 8px 16px;
    white-space: nowrap;
    background: var(--btn_background_3);
    color: #ffffff;
    border-radius: 100px;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 1px var(--green_primary_600);
    border: 1px solid var(--green_primary_400);
    font-size: var(--web_label_large);
    line-height: var(--web_label_large_line_height);
    font-weight: var(--font_weight_medium);
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card.card_2 .take_action .button:hover {
    background: var(--btn_background_2);
}
.appilix_all_articles_hero .hero_wrapper .section_cards .card.card_2 .take_action .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1000px;
    border: 1px solid var(--green_primary_600);
}





/*Responsive*/
@media screen and (max-width: 992px){


    .appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details{
        padding: 20px;
        flex: 1;
        max-width: 100%;
    }

    .appilix_all_articles_hero .hero_wrapper .section_cards .card .card_img{
        flex: 1;
        border-radius: 16px;
    }
    .appilix_all_articles_hero .hero_wrapper .section_cards .card.card_2{
        display: none;
    }

}

@media screen and (max-width: 768px){
    .appilix_all_articles_hero{
        padding: 0;
    }
    .appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details{
        padding: 20px;
    }
    .appilix_all_articles_hero .hero_wrapper{
        padding: 128px 0 40px 0;
        border-radius: 0;
    }
    .appilix_all_articles_hero .hero_wrapper .section_title h1{
        font-size: var(--web_heading_size_h3);
        line-height: var(--web_heading_line_height_h3);
    }
    .appilix_all_articles_hero .hero_wrapper .section_title p{
        font-size: var(--mobile_body_size_b1);
        line-height: var(--mobile_body_line_height_b1);
    }
}

@media screen and (max-width: 576px){
    .appilix_all_articles_hero .hero_wrapper .section_title{
        margin: 0;
        text-align: left;
    }
    .appilix_all_articles_hero .hero_wrapper .section_title h1{
        margin: 0;
        font-size: var(--mobile_heading_size_h1);
        line-height: var(--mobile_heading_line_height_h1);
    }
    .appilix_all_articles_hero .hero_wrapper .section_title p{
        margin: 16px auto 0 auto;
        font-size: var(--mobile_body_size_b2);
        line-height: var(--mobile_body_line_height_b2);
    }

    .appilix_all_articles_hero .hero_wrapper .section_cards .card {
        flex-direction: column;
        gap: 24px;
        padding: 0;
        border-width: 0;
        box-shadow: none;
        overflow: hidden;
    }
    .appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details{
        order: 2;
        padding: 0 16px 28px 16px;
    }
    .appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details .card_meta{
        font-size: var(--mobile_body_size_b3);
        line-height: var(--mobile_body_line_height_b3);
    }
    .appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details h2{
        font-size: var(--mobile_heading_size_h4);
        line-height: var(--mobile_heading_line_height_h4);
    }
    .appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details .quot_by{
        margin: 40px 0 0 0;
    }
    .appilix_all_articles_hero .hero_wrapper .section_cards .card .card_details .quot_by .author_img{
        width: 48px;
        height: 48px;
    }
    .appilix_all_articles_hero .hero_wrapper .section_cards .card .card_img{
        order: 1;
        border-radius: 0;
        aspect-ratio: 16 / 9;
    }
}



/*Article List*/
.appilix_articles_list{
    padding: 120px 0 100px 0;
    background: var(--surface_s3);
}
.appilix_articles_list .section_title{
    text-align: center;
    margin: 0 auto;
    font-size: var(--web_heading_size_h2);
    line-height: var(--web_heading_line_height_h2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
    max-width: 567px;
}

.appilix_articles_list .articles_grid{
    margin: 60px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
}
.appilix_articles_list .articles_grid .article_card{
    flex: 1 0 48%;
    background: var(--surface_s2);
    border-radius: 20px;
    overflow: hidden;
    max-width: 556px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.appilix_articles_list .articles_grid .article_card .card_img{
    max-width: 100%;
    min-width: 100%;
    max-height: 230px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.appilix_articles_list .articles_grid .article_card header{
    padding: 32px 28px 0 28px;
}
.appilix_articles_list .articles_grid .article_card footer{
    padding: 0 28px 40px 28px;
}
.appilix_articles_list .articles_grid .article_card header .card_meta{
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
}
.appilix_articles_list .articles_grid .article_card header  h2{
    margin: 12px 0 0 0;
    font-size: var(--web_label_size_l2);
    line-height: var(--web_label_line_height_l2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.appilix_articles_list .articles_grid .article_card footer .quot_by{
    margin: 58px 0 0 0;
    display: flex;
    align-items: center;
    gap: 20px;
}
.appilix_articles_list .articles_grid .article_card footer .quot_by .author_img{
    width: 52px;
    height: 52px;
    border-radius: 100px;
    object-fit: cover;
}
.appilix_articles_list .articles_grid .article_card footer .quot_by .quoter_name{
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.appilix_articles_list .articles_grid .article_card footer .quot_by .quoter_role{
    display: inline-block;
    margin: 4px 0 0 0;
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
}

@media screen and (max-width: 992px){
    .appilix_articles_list{
        padding: 60px 0 100px 0;
    }
    .appilix_articles_list .section_title{
        font-size: var(--web_heading_size_h3);
        line-height: var(--web_heading_line_height_h3);
    }
}

@media screen and (max-width: 768px){

}
@media screen and (max-width: 576px){
    .appilix_articles_list{
        padding: 40px 0 40px 0;
    }
    .appilix_articles_list .section_title{
        font-size: var(--mobile_heading_size_h2);
        line-height: var(--mobile_heading_line_height_h2);
    }

    .appilix_articles_list .articles_grid .article_card header .card_meta{
        font-size: var(--mobile_body_size_b3);
        line-height: var(--mobile_body_line_height_b3);
    }
    .appilix_articles_list .articles_grid .article_card header h2{
        font-size: var(--mobile_heading_size_h4);
        line-height: var(--mobile_heading_line_height_h4);
    }
    .appilix_articles_list .articles_grid .article_card footer .quot_by{
        margin: 40px 0 0 0;
    }
    .appilix_articles_list .articles_grid .article_card footer .quot_by .author_img{
        width: 48px;
        height: 48px;
    }
    .appilix_articles_list .articles_grid .article_card .card_img{
        order: 1;
        max-height: 200px;
    }

}




/*Subscribe Card*/
.appilix_articles_list .sec_footer{
    display: flex;
    gap: 57px;
    justify-content: space-between;
    margin: 48px 0 0 0;
    padding: 40px;
    border-radius: 20px;
    background: var(--green_primary_50);
    box-shadow: 0 0 0 1px #E0EBE9;
    border: 1px solid #FFFFFF;
}
.appilix_articles_list .sec_footer .footer_card_details {
    max-width: 458px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
.appilix_articles_list .sec_footer .footer_card_details .card_text{
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
}
.appilix_articles_list .sec_footer .footer_card_details h3{
    font-size: var(--web_label_size_l2);
    line-height: var(--web_label_line_height_l2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
    max-width: 395px;
}
.appilix_articles_list .sec_footer .footer_card_details .invite{
    color: var(--typography_dark_500);
}

.appilix_articles_list .sec_footer .footer_card_details .footer_card_input{
    margin: 46px 0 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.appilix_articles_list .sec_footer .footer_card_details .footer_card_input .mail_input{
    padding: 8px 14px 8px 36px;
    border-radius: 100px;
    outline: none;
    border: 1px solid var(--green_primary_300);
    background: url("../images/theme/articles/subscription_email_icon.svg") no-repeat 14px center / 16px;
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
    font-weight: var(--font_weight_regular);
    color: var(--typography_dark_300);
}

.appilix_articles_list .sec_footer .footer_card_details .footer_card_input .button {
    cursor: pointer;
    position: relative;
    outline: none;
    padding: 8px 16px;
    white-space: nowrap;
    background: var(--btn_background_3);
    color: #ffffff;
    border-radius: 100px;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 1px var(--green_primary_600);
    border: 1px solid var(--green_primary_400);
    font-size: var(--web_label_large);
    line-height: var(--web_label_large_line_height);
    font-weight: var(--font_weight_medium);
}
.appilix_articles_list .sec_footer .footer_card_details .footer_card_input .button:hover {
    background: var(--btn_background_2);
}
.appilix_articles_list .sec_footer .footer_card_details .footer_card_input .button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1000px;
    border: 1px solid var(--green_primary_600);
}



.appilix_articles_list .sec_footer .footer_card_img{
    width: 453px;
    min-height: 386px;
    border-radius: 16px;
    background: url("../images/theme/natuaral/appilix_article_footer_subscription.webp") no-repeat center;
    background-size: cover;
}


@media screen and (max-width: 992px){
    .appilix_articles_list .sec_footer{
        gap: 32px;
        margin: 24px 0 0 0;
        padding: 24px;
        border-radius: 16px;
    }
    .appilix_articles_list .sec_footer .footer_card_details {
        flex: 0 0 50%;
        max-width: 458px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 12px;
    }
    .appilix_articles_list .sec_footer .footer_card_details .card_text{
        font-size: var(--mobile_body_size_b2);
        line-height: var(--mobile_body_line_height_b2);
    }
    .appilix_articles_list .sec_footer .footer_card_details h3{
        font-size: var(--mobile_heading_size_h3);
        line-height: var(--mobile_heading_line_height_h3);
    }
    .appilix_articles_list .sec_footer .footer_card_details .invite{
        font-size: var(--mobile_body_size_b2);
        color: var(--typography_dark_500);
    }

    .appilix_articles_list .sec_footer .footer_card_details .footer_card_input{
        margin: 32px 0 0 0;
        flex-direction: column;
        gap: 12px;
    }
    .appilix_articles_list .sec_footer .footer_card_details .footer_card_input .mail_input{
        width: 100%;
    }
    .appilix_articles_list .sec_footer .footer_card_details .footer_card_input .button{
        width: 100%;
    }

    .appilix_articles_list .sec_footer .footer_card_img{
        flex: 0 0 40%;
    }
}
@media screen and (max-width: 768px){
    .appilix_articles_list .sec_footer{
        gap: 0;
    }
    .appilix_articles_list .sec_footer .footer_card_details {
        flex: 1;
        max-width: 100%;
    }

    .appilix_articles_list .sec_footer .footer_card_details .footer_card_input{
        margin: 32px 0 0 0;
        flex-direction: column;
        gap: 12px;
    }
    .appilix_articles_list .sec_footer .footer_card_details .footer_card_input .mail_input{
        width: 100%;
    }
    .appilix_articles_list .sec_footer .footer_card_details .footer_card_input .button{
        width: 100%;
        white-space: nowrap;
    }

    .appilix_articles_list .sec_footer .footer_card_img{
        display: none;
    }
}
@media screen and (max-width: 576px){
    .appilix_articles_list .sec_footer{
        gap: 32px;
        margin: 24px 0 0 0;
        padding: 16px;
        border-radius: 16px;
    }

    .appilix_articles_list .sec_footer .footer_card_details .card_text{
        font-size: var(--mobile_body_size_b3);
        line-height: var(--mobile_body_line_height_b3);
    }
    .appilix_articles_list .sec_footer .footer_card_details h3{
        font-size: var(--mobile_heading_size_h4);
        line-height: var(--mobile_heading_line_height_h4);
    }
    .appilix_articles_list .sec_footer .footer_card_details .invite{
        font-size: var(--mobile_body_size_b3);
        color: var(--typography_dark_500);
    }
}

/*Pagination*/
.appilix_articles_list .articles_pagination {
    margin: 60px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.appilix_articles_list .articles_pagination .pagination_pages {
    display: flex;
    align-items: center;
    gap: 4px;
}
.appilix_articles_list .articles_pagination .pagination_page,
.appilix_articles_list .articles_pagination .pagination_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_300);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
}
.appilix_articles_list .articles_pagination .pagination_page:hover,
.appilix_articles_list .articles_pagination .pagination_btn:hover {
    background: var(--surface_s2);
    border-color: var(--gray_200);
    color: var(--typography_dark_500);
}
.appilix_articles_list .articles_pagination .pagination_page.active {
    background: var(--green_primary_600);
    border-color: var(--green_primary_600);
    color: #ffffff;
}
.appilix_articles_list .articles_pagination .pagination_btn {
    gap: 6px;
    padding: 0 16px;
    border: 1px solid var(--gray_300);
    background: var(--surface_s3);
}
.appilix_articles_list .articles_pagination .pagination_ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    font-size: var(--web_body_size_b4);
    color: var(--typography_dark_300);
}

@media screen and (max-width: 576px){
    .appilix_articles_list .articles_pagination {
        margin: 40px 0 0 0;
        gap: 4px;
    }
    .appilix_articles_list .articles_pagination .pagination_btn {
        padding: 0 10px;
        font-size: var(--mobile_body_size_b3);
    }
    .appilix_articles_list .articles_pagination .pagination_page {
        min-width: 32px;
        height: 32px;
        font-size: var(--mobile_body_size_b3);
    }
}









/*####################################################################################################################*/
/*Appilix Single Article Page*/
/*####################################################################################################################*/
/*Hero*/
.single_article_hero{
    padding: 12px;
    background: var(--surface_s3);
}
.single_article_hero .hero_wrapper{
    text-align: center;
    padding: 148px 0 100px 0;
    background-color: var(--orange_100);
    background-image: url("../images/theme/backgrounds/appilix_feature_page_pattern.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 20px;
}
.single_article_hero .hero_wrapper .card_meta{
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
}
.single_article_hero .hero_wrapper h1{
    margin: 20px auto 0 auto;
    max-width: 702px;
    font-size: var(--web_heading_size_h2);
    line-height: var(--web_heading_line_height_h2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.single_article_hero .hero_wrapper .quot_by{
    margin: 20px auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.single_article_hero .hero_wrapper .quot_by .author_img{
    width: 52px;
    height: 52px;
    border-radius: 100px;
    object-fit: cover;
}
.single_article_hero .hero_wrapper .quot_by .quoter_name{
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
    text-align: left;
}
.single_article_hero .hero_wrapper .quot_by .quoter_role{
    display: inline-block;
    margin: 4px 0 0 0;
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
}
.single_article_hero .hero_wrapper .card_img{
    margin: 60px auto 0 auto;
}
.single_article_hero .hero_wrapper .card_img img{
    min-width: 100%;
    max-width: 100%;
    max-height: 540px;
    aspect-ratio: 16 / 9;
    border-radius: 28px;
    object-fit: cover;
}

@media screen and (max-width: 992px){

}
@media screen and (max-width: 768px){
    .single_article_hero{
        padding: 0;
    }
    .single_article_hero .hero_wrapper{
        padding: 148px 0 100px 0;
        border-radius: 0;
    }
    .single_article_hero .hero_wrapper .card_meta{
        font-size: var(--web_body_size_b4);
        line-height: var(--web_body_line_height_b4);
    }
    .single_article_hero .hero_wrapper h1{
        margin: 20px auto 0 auto;
        max-width: 702px;
        font-size: var(--web_heading_size_h2);
        line-height: var(--web_heading_line_height_h2);
        font-weight: var(--font_weight_medium);
        color: var(--typography_dark_500);
    }
}
@media screen and (max-width: 576px){
    .single_article_hero{
        padding: 0;
    }
    .single_article_hero .hero_wrapper{
        padding: 120px 0 40px 0;
        border-radius: 0;
    }
    .single_article_hero .hero_wrapper .card_meta{
        font-size: var(--web_body_size_b5);
        line-height: var(--web_body_line_height_b5);
    }
    .single_article_hero .hero_wrapper h1{
        margin: 16px auto 0 auto;
        font-size: var(--mobile_heading_size_h1);
        line-height: var(--mobile_heading_line_height_h1);
    }
    .single_article_hero .hero_wrapper .quot_by{
        margin: 16px auto 0 auto;
    }
    .single_article_hero .hero_wrapper .card_img{
        margin: 32px auto 0 auto;
    }
    .single_article_hero .hero_wrapper .card_img img{
        max-height: 300px;
        border-radius: 16px;
    }
}




/*Appilix Article Section*/
.appilix_article_sec{
    background: var(--surface_s3);
    padding: 80px 0 100px 0;
}
.appilix_article_sec .article_wrapper{
    display: flex;
    justify-content: space-between;
}
.appilix_article_sec .article_wrapper .left_side{
    margin: 0;
}
.appilix_article_sec .article_wrapper .left_side .share_buttons{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.appilix_article_sec .article_wrapper .left_side .share_buttons .button{
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border-top: 1px solid var(--surface_s3);
    border-right: 1px solid var(--surface_s3);
    border-left: 1px solid var(--surface_s3);
    box-shadow: 0 0 0 1px #ECEAE9;
    cursor: pointer;
}
.appilix_article_sec .article_wrapper .left_side .share_buttons .button.btn_share_x{
    background: var(--gray_100) url("../images/theme/articles/share_x.svg") no-repeat center;
    background-size: 16px;
}
.appilix_article_sec .article_wrapper .left_side .share_buttons .button.btn_share_linkedin{
    background: var(--gray_100) url("../images/theme/articles/share_linkedin.svg") no-repeat center;
    background-size: 16px;
}
.appilix_article_sec .article_wrapper .left_side .share_buttons .button.btn_share_link{
    background: var(--gray_100) url("../images/theme/articles/share_link.svg") no-repeat center;
    background-size: 16px;
}
.appilix_article_sec .article_wrapper .left_side .share_buttons .button.btn_share_email{
    background: var(--gray_100) url("../images/theme/articles/share_email.svg") no-repeat center;
    background-size: 16px;
}

.appilix_article_sec .article_wrapper .middle{
    max-width: 672px;
    margin: 0 60px 0 72px;
}
.appilix_article_sec .article_wrapper .middle p{
    margin: 0 0 24px 0;
    font-size: var(--web_body_size_b3);
    line-height: var(--web_body_line_height_b3);
}


/*Article Page Right Side*/
.appilix_article_sec .article_wrapper .right_side {
    max-width: 304px;
    min-width: 304px;
}
.appilix_article_sec .article_cta_card {
    width: 100%;
    padding: 20px;
    background: var(--green_primary_50);
    border-width: 1px 1px 0 1px ;
    border-style: solid;
    border-color: var(--surface_s3);
    border-radius: 20px;
    box-shadow: 0 0 0 1px var(--green_primary_100);
}
.appilix_article_sec .article_cta_card img {
    width: 125px;
    height: auto;
}
.appilix_article_sec .article_cta_card .cta_title {
    margin: 64px 0 0 0;
    font-size: var(--web_body_size_b2);
    line-height: var(--web_body_line_height_b2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.appilix_article_sec .article_cta_card .cta_desc {
    margin: 8px 0 0 0;
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
    font-weight: var(--font_weight_regular);
    color: var(--typography_dark_300);
}
.appilix_article_sec .article_cta_card .cta_input {
    margin: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.appilix_article_sec .article_cta_card input {
    width: 100%;
    border-radius: 100px;
    outline: none;
    padding: 8px 14px 8px 36px;
    background: transparent;
    font-size: var(--web_body_size_b5);
    font-weight: var(--font_weight_regular);
    color: var(--typography_dark_300);
    background: url("../images/theme/articles/create_app_input_icon.svg") 14px center no-repeat;
    background-size: 16px;
    border: 1px solid var(--gray_300);
}



.appilix_article_sec .article_cta_card .cta_btn {
    cursor: pointer;
    position: relative;
    outline: none;
    padding: 8px 16px;
    white-space: nowrap;
    background: var(--btn_background_3);
    color: #ffffff;
    border-radius: 100px;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 1px var(--green_primary_600);
    border: 1px solid var(--green_primary_400);
    font-size: var(--web_label_large);
    line-height: var(--web_label_large_line_height);
    font-weight: var(--font_weight_medium);
}
.appilix_article_sec .article_cta_card .cta_btn:hover {
    background: var(--btn_background_2);
}
.appilix_article_sec .article_cta_card .cta_btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1000px;
    border: 1px solid var(--green_primary_600);
}

.appilix_article_sec .article_cta_card .cta_btn.loading {
    cursor: not-allowed;
    background: var(--green_primary_100);
    border: 1px solid var(--green_primary_100);
}



@media screen and (max-width: 992px){
    /*Appilix Article Section*/
    .appilix_article_sec{
        padding: 80px 0 100px 0;
    }
    .appilix_article_sec .article_wrapper{
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        gap: 28px;
    }

    .appilix_article_sec .article_wrapper .left_side{
        order: 3;
    }
    .appilix_article_sec .article_wrapper .left_side .share_buttons{
        flex-direction: row;
    }
    .appilix_article_sec .article_wrapper .middle{
        max-width: 100%;
        margin: 0;
    }
    /*Article Page Right Side*/
    .appilix_article_sec .article_wrapper .right_side {
        max-width: 100%;
        min-width: 100%;
    }
}
@media screen and (max-width: 768px){

}
@media screen and (max-width: 576px){
    .appilix_article_sec{
        padding: 40px 0;
    }

    .appilix_article_sec .article_wrapper .middle p{
        margin: 0 0 20px 0;
        font-size: var(--mobile_body_size_b3);
        line-height: var(--mobile_body_line_height_b3);
    }
}


/*Related Blogs Section*/
.related_blogs{
    background: var(--surface_s3);
    padding: 0 0 120px 0;
}

.related_blogs .sec_title{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.related_blogs .sec_title h2{
    font-size: var(--web_heading_size_h2);
    line-height: var(--web_heading_line_height_h2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.related_blogs .sec_title a{
    font-size: var(--web_label_large);
    line-height: var(--web_label_large_line_height);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--gray_400);
}


.related_blogs .articles_grid{
    margin: 60px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
}
.related_blogs .articles_grid .article_card{
    flex: 1 0 48%;
    background: var(--surface_s2);
    border-radius: 20px;
    overflow: hidden;
    max-width: 556px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.related_blogs .articles_grid .article_card .card_img{
    max-width: 100%;
    min-width: 100%;
    max-height: 230px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.related_blogs .articles_grid .article_card header{
    padding: 32px 28px 0 28px;
}
.related_blogs .articles_grid .article_card footer{
    padding: 0 28px 40px 28px;
}
.related_blogs .articles_grid .article_card header .card_meta{
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
}
.related_blogs .articles_grid .article_card header  h2{
    margin: 12px 0 0 0;
    font-size: var(--web_label_size_l2);
    line-height: var(--web_label_line_height_l2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.related_blogs .articles_grid .article_card footer .quot_by{
    margin: 58px 0 0 0;
    display: flex;
    align-items: center;
    gap: 20px;
}
.related_blogs .articles_grid .article_card footer .quot_by .author_img{
    width: 52px;
    height: 52px;
    border-radius: 100px;
    object-fit: cover;
}
.related_blogs .articles_grid .article_card footer .quot_by .quoter_name{
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
}
.related_blogs .articles_grid .article_card footer .quot_by .quoter_role{
    display: inline-block;
    margin: 4px 0 0 0;
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
}

@media screen and (max-width: 992px){

}

@media screen and (max-width: 768px){
    .related_blogs .sec_title h2{
        font-size: var(--mobile_heading_size_h2);
        line-height: var(--mobile_heading_line_height_h2);
    }
}
@media screen and (max-width: 576px){

    .related_blogs .sec_title a{
        display: none;
    }

    .related_blogs .articles_grid{
        margin: 28px auto 0 auto;
    }
    .related_blogs .articles_grid .article_card header .card_meta{
        font-size: var(--mobile_body_size_b3);
        line-height: var(--mobile_body_line_height_b3);
    }
    .related_blogs .articles_grid .article_card header h2{
        font-size: var(--mobile_heading_size_h4);
        line-height: var(--mobile_heading_line_height_h4);
    }
    .related_blogs .articles_grid .article_card footer .quot_by{
        margin: 40px 0 0 0;
    }
    .related_blogs .articles_grid .article_card footer .quot_by .author_img{
        width: 48px;
        height: 48px;
    }
    .related_blogs .articles_grid .article_card .card_img{
        order: 1;
        max-height: 200px;
    }

}








/*####################################################################################################################*/
/*WordPress Article Content Area*/
/*####################################################################################################################*/

/* Headings */
.content_area h1,
.content_area h2,
.content_area h3,
.content_area h4,
.content_area h5,
.content_area h6 {
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
    margin: 40px 0 16px 0;
}
.content_area h1 { font-size: var(--web_heading_size_h3); line-height: var(--web_heading_line_height_h3); }
.content_area h2 { font-size: var(--web_heading_size_h4); line-height: var(--web_heading_line_height_h4); }
.content_area h3 { font-size: var(--web_heading_size_h5); line-height: var(--web_heading_line_height_h5); }
.content_area h4 { font-size: var(--web_body_size_b1); line-height: var(--web_body_line_height_b1); }
.content_area h5,
.content_area h6 { font-size: var(--web_body_size_b3); line-height: var(--web_body_line_height_b3); }

/* Paragraphs */
.content_area p {
    margin: 0 0 24px 0;
    font-size: var(--web_body_size_b3);
    line-height: var(--web_body_line_height_b3);
    color: var(--typography_dark_300);
}

/* Links */
.content_area a {
    color: var(--green_primary_600);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}
.content_area a:hover {
    color: var(--green_primary_800);
}

/* Bold & Italic */
.content_area strong,
.content_area b { font-weight: var(--font_weight_semi_bold); color: var(--typography_dark_500); }
.content_area em,
.content_area i  { font-style: italic; }

/* Lists */
.content_area ul,
.content_area ol {
    margin: 0 0 24px 0 !important;
    padding-left: 24px !important;
    font-size: var(--web_body_size_b3);
    line-height: var(--web_body_line_height_b3);
    color: var(--typography_dark_300);
}
.content_area ul { list-style-type: disc !important; }
.content_area ol { list-style-type: decimal !important; }
.content_area li { margin: 0 0 8px 0 !important; list-style: inherit !important; }
.content_area li:last-child { margin: 0 !important; }
.content_area ul ul,
.content_area ol ol,
.content_area ul ol,
.content_area ol ul { margin: 8px 0 0 0 !important; }

/* Blockquote */
.content_area blockquote {
    margin: 32px 0;
    padding: 24px 28px;
    border-left: 4px solid var(--green_primary_400);
    background: var(--green_primary_50);
    border-radius: 0 12px 12px 0;
}
.content_area blockquote p {
    margin: 0;
    font-size: var(--web_body_size_b2);
    line-height: var(--web_body_line_height_b2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
    font-style: italic;
}
.content_area blockquote cite {
    display: inline-block;
    margin: 12px 0 0 0;
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
    color: var(--typography_dark_300);
    font-style: normal;
}

/* Inline Code */
.content_area code {
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--surface_s2);
    border: 1px solid var(--gray_200);
    font-size: 0.875em;
    font-family: 'Courier New', Courier, monospace;
    color: var(--typography_dark_500);
}

/* Code Block */
.content_area pre {
    margin: 0 0 28px 0;
    padding: 20px 24px;
    border-radius: 12px;
    background: var(--surface_s1);
    border: 1px solid var(--gray_200);
    overflow-x: auto;
}
.content_area pre code {
    padding: 0;
    border: none;
    background: transparent;
    font-size: var(--web_body_size_b4);
    line-height: 1.7;
    color: var(--typography_dark_400);
}

/* Images */
.content_area img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

/* Figure & Caption (WordPress) */
.content_area figure {
    margin: 32px 0;
}
.content_area figure img {
    width: 100%;
}
.content_area figcaption {
    margin: 10px 0 0 0;
    font-size: var(--web_body_size_b5);
    line-height: var(--web_body_line_height_b5);
    color: var(--typography_dark_300);
    text-align: center;
}

/* WordPress Gallery */
.content_area .wp-block-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0;
}
.content_area .wp-block-gallery figure {
    margin: 0;
    flex: 1 1 45%;
}

/* WordPress Image Block Alignment */
.content_area .wp-block-image.aligncenter,
.content_area .aligncenter { text-align: center; }
.content_area .wp-block-image.alignleft,
.content_area .alignleft  { float: left; margin: 0 24px 16px 0; }
.content_area .wp-block-image.alignright,
.content_area .alignright { float: right; margin: 0 0 16px 24px; }
.content_area .wp-block-image.alignwide { margin-left: -60px; margin-right: -60px; max-width: calc(100% + 120px); }

/* Horizontal Rule */
.content_area hr {
    margin: 40px 0;
    border: none;
    border-top: 1px solid var(--gray_200);
}

/* Table */
.content_area table {
    width: 100%;
    margin: 0 0 28px 0;
    border-collapse: collapse;
    font-size: var(--web_body_size_b4);
    line-height: var(--web_body_line_height_b4);
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--gray_200);
}
.content_area th {
    padding: 12px 16px;
    background: var(--surface_s2);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
    text-align: left;
    border-bottom: 1px solid var(--gray_200);
}
.content_area td {
    padding: 12px 16px;
    color: var(--typography_dark_300);
    border-bottom: 1px solid var(--gray_200);
}
.content_area tr:last-child td { border-bottom: none; }
.content_area tbody tr:nth-child(even) { background: var(--surface_s1); }

/* Mark / Highlight */
.content_area mark {
    background: #FFF3CD;
    color: var(--typography_dark_500);
    border-radius: 3px;
    padding: 1px 4px;
}

/* WordPress Separator Block */
.content_area .wp-block-separator {
    margin: 40px 0;
    border: none;
    border-top: 1px solid var(--gray_200);
}

/* WordPress Pullquote */
.content_area .wp-block-pullquote {
    margin: 40px 0;
    padding: 32px;
    text-align: center;
    border-top: 4px solid var(--typography_dark_500);
    border-bottom: 4px solid var(--typography_dark_500);
}
.content_area .wp-block-pullquote p {
    font-size: var(--web_heading_size_h4);
    line-height: var(--web_heading_line_height_h4);
    font-weight: var(--font_weight_medium);
    color: var(--typography_dark_500);
    font-style: italic;
}
.content_area .wp-block-pullquote cite {
    font-size: var(--web_body_size_b5);
    color: var(--typography_dark_300);
}

/* WordPress Video Embeds (YouTube etc.) */
.content_area .wp-block-embed {
    margin: 32px 0;
}
.content_area .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
}
.content_area .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* Clear floats */
.content_area::after {
    content: '';
    display: table;
    clear: both;
}

@media screen and (max-width: 768px){
    .content_area h1 { font-size: var(--web_heading_size_h3); line-height: var(--web_heading_line_height_h3); }
    .content_area h2 { font-size: var(--web_heading_size_h4); line-height: var(--web_heading_line_height_h4); }
    .content_area h3 { font-size: var(--web_heading_size_h5); line-height: var(--web_heading_line_height_h5); }
    .content_area h4,
    .content_area h5,
    .content_area h6 { font-size: var(--web_body_size_b2); line-height: var(--web_body_line_height_b2); }
    .content_area .wp-block-image.alignwide { margin-left: 0; margin-right: 0; max-width: 100%; }
    .content_area .wp-block-image.alignleft,
    .content_area .wp-block-image.alignright { float: none; margin: 0 0 16px 0; }
}

@media screen and (max-width: 576px){
    .content_area h1 { font-size: var(--mobile_heading_size_h1); line-height: var(--mobile_heading_line_height_h1); }
    .content_area h2 { font-size: var(--mobile_heading_size_h2); line-height: var(--mobile_heading_line_height_h2); }
    .content_area h3 { font-size: var(--mobile_heading_size_h3); line-height: var(--mobile_heading_line_height_h3); }
    .content_area h4,
    .content_area h5,
    .content_area h6 { font-size: var(--mobile_heading_size_h4); line-height: var(--mobile_heading_line_height_h4); }
    .content_area p,
    .content_area ul,
    .content_area ol { font-size: var(--mobile_body_size_b2); line-height: var(--mobile_body_line_height_b2); }
    .content_area table { font-size: var(--mobile_body_size_b3); line-height: var(--mobile_body_line_height_b3); display: block; overflow-x: auto; }
    .content_area blockquote { padding: 16px 20px; }
    .content_area blockquote p { font-size: var(--mobile_body_size_b1); line-height: var(--mobile_body_line_height_b1); }
    .content_area pre { padding: 16px; }
    .content_area .wp-block-pullquote { padding: 20px 16px; }
    .content_area .wp-block-pullquote p { font-size: var(--mobile_heading_size_h3); line-height: var(--mobile_heading_line_height_h3); }
}