/* ===== Blog Related CSS Begin ===== */

/* Pros and Cons symbol for listing - Blog Page */
.check_mark ul li {
    list-style-type: none;
}

.check_mark ul li:before {
    content: "✔";
    padding-right: 15px;
    color: #1fbda5;
}

.cross_mark ul li {
    list-style-type: none;
}

.cross_mark ul li:before {
    content: "✘";
    padding-right: 15px;
    color: #bd1f1f;
}

/* Hiding Comments and Share Container */
.single #single-meta {
    display: none;
}

/* Blog Page Heading */
.single .heading-title {
    border-bottom: none !important;
    padding: 0px !important;
    margin-bottom: 0px !important;
}

.heading-title .blog-title h1.entry-title,
.heading-title .blog-title #single-below-header {
    /* width: 80%; */
    /* margin: auto; */
    color: #000 !important;
    /* text-align: center; */
}

/* For Smaller Tablets and Mobile Devices */
@media screen and (max-width: 690px) {

    /* Adjusting Blog Heading Container Padding */
    .single .heading-title {
        /* padding: 30px 0px 0px 0px; */
    }

    /* Hiding Author Details */
    /* .heading-title .blog-title #single-below-header {
        display: none;
    } */

    /* Removing Width Parameter from Blog Title */
    .heading-title .blog-title h1.entry-title {
        width: auto;
    }
}

/* Custom Related Blogs Section - Old Blogs Before [Sep 2024] (Important) */
.post-content .content-inner .related_blogs {
    margin: 10px 0;
}

/* Custom Heading Blog Page */
.single-post .wpb_wrapper h2.vc_custom_heading {
    /* font-size: clamp(25px, 2.5vw, 35px) !important; */
    font-size: clamp(22px, 2.5vw, 30px) !important;
}

.single-post .wpb_wrapper h3.vc_custom_heading {
    color: #444444 !important;
    /* font-size: clamp(20px, 2.5vw, 30px) !important; */
    font-size: clamp(18px, 2.5vw, 26px) !important;
}

.single-post .wpb_wrapper h4 {
    color: #3e4144 !important;
    /* font-size: clamp(18px, 2.5vw, 22px) !important; */
    font-size: clamp(20px, 2.5vw, 22px) !important;
}

/* Adjusting Font-Size and Alignment */
.single-post .wpb_wrapper p,
.single-post .wpb_wrapper li {
    color: #1c1b1a;
    text-align: justify !important;
    /* font-size: clamp(16px, 2vw, 19px) !important; */

    line-height: 30px;
    font-size: clamp(16px, 2vw, 17px) !important;
}

/* Padding for List Tag */
.single-post .wpb_wrapper li {
    padding: 5px 0px !important;
}

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

    .single-post .wpb_wrapper p,
    .single-post .wpb_wrapper li {
        text-align: left !important;
    }

    .single-post .wpb_wrapper li {
        padding: 0px !important;
    }
}

/* Blog Comment Section */
.comments-section #commentform textarea#comment {
    padding: 10px;
}

/* Blog Add Comment Form Submit Button */
.comment-form .form-submit input[type="submit"] {
    width: 100%;
}

/* Noptin NewsLetter Button */

/* .noptin-sidebar-main-wrapper.noptin-form-id-4545.noptin-optin-main-wrapper .noptin-form-header {
    padding: 0px;
}

.noptin-popup-content form.noptin-optin-form.noptin-form-new-line {
    padding: 40px !important;
}

.noptin-form-single-line .noptin-form-fields {
    width: 65%;
    margin: auto;
}

.noptin-optin-form.noptin-form-single-line .noptin-form-fields .noptin-form-submit {
    padding: 0px 22px !important;
} */

/* Blog Page Related Blogs Section */
.blog-page-related-blogs-section {
    padding: 3%;
    background-color: #f8f8f8;
}

.blog-page-related-blogs-section h3 {
    margin: 0px 0px 5px 0px !important;
    /* color: #00998e; */
}

.blog-page-related-blogs-section ul.blog-page-related-blogs-link {
    margin: 0px !important;
    display: block !important;
}

.blog-page-related-blogs-section ul.blog-page-related-blogs-link li {
    list-style-position: inside;
    padding: 12px 0px !important;
}

.blog-page-related-blogs-section ul.blog-page-related-blogs-link li:not(:last-child) {
    border-bottom: 1px solid #c3c3c3;
}

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

    .blog-page-related-blogs-section {
        padding: 5%;
        background-color: #f8f8f8;
    }
}

/* Call To Action Section */
.sft-blog-page-cta-container {
    /* background: #fff8e8;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 20px !important;
    border: 2px solid #1FBDA5; */

    background: #00998e1a;
    padding: 20px !important;
    border: 1px solid #dddddd;
    border-radius: 8px;
    box-shadow: 0px 0px 5px #f1f1f1;
}

.sft-blog-page-cta-container .vc_column-inner {
    /* border: 2px dashed #d5bf8a; */
    padding: 20px 10px;
    border-radius: 5px;
}

/* CTA Heading */
.sft-blog-page-cta-container .vc_column-inner p:first-child {
    margin: 0px !important;
    padding: 0px !important;
    font-family: 'Roboto';
    font-weight: 700;
    line-height: 1.5;
    text-align: center !important;
    font-size: clamp(20px, 2.5vw, 28px) !important;
    color: #444444 !important;
}

.sft-blog-page-cta-container .vc_column-inner p:nth-child(2) {
    margin: 10px 0px !important;
    padding: 0px !important;
    text-align: center !important;
}

.sft-blog-page-cta-container .vc_column-inner a.nectar-button {
    margin-bottom: 0px !important;
}

/* Related Blogs Section Heading - Removed H3 Heading because of Table of Contents Plugin */
.sft-custom-related-blogs-heading,
.wpb_wrapper p.sft-custom-related-blogs-heading {
    font-family: 'Roboto';
    padding: 0px !important;
    color: #444444 !important;
    font-weight: 600;
    font-size: clamp(20px, 2.5vw, 30px) !important;
}

/* Image Credits CSS */
.sft-blog-image-credits .wpb_wrapper p {
    text-align: center !important;
    font-size: 12px !important;
}

/* Blog image border */
.sft-blog-img-border {
    border: 1px solid #ddd !important;
}

/* ===== Blog Related CSS Ends ===== */


/* ===== Sale Coupon Grid CSS Begins ===== */

/* Sale Deals Menu CSS */
.sft-sale-deals-coupons-menu {
    background: #f2f2f2;
    margin-top: 10px;
    border: 1px solid #979797;
    border-radius: 10px;
    box-shadow: 0px 0px 5px #c3c3c3;
}

.sft-sale-deals-coupons-menu ul {
    margin: 0px !important;
    display: flex;
    justify-content: center;
    gap: 25px;
}

.sft-sale-deals-coupons-menu ul li {
    list-style: none !important;
}

/* Sale Cards CSS */
.sft-dev-serv-fcbox.sft-sale-deals-content .vc_column-inner {
    padding: 20px !important;
    border: 2px solid #00998e !important;
}

.sft-dev-serv-fcbox.sft-sale-deals-content .wpb_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.sft-dev-serv-fcbox.sft-sale-deals-content .wpb_wrapper p {
    text-align: left !important;
    font-size: 16px !important;
    padding-bottom: 10px;
    line-height: 2;
}


/* CSS for Table of contents present in the blog's sidebar  */

/* hide the TOC from blog content(before first heading). we need to add TOC inside the content so that,
   left side TOC will navigate the heading section on click. 
/* therefore display: none property for .wpb_wrapper(blog content div) #ez-toc-container  */
.wpb_wrapper #ez-toc-container {
    display: none !important;
}

.ez-toc-heading-level-2 .active-toc {
    color: #008980 !important;
}

.ez-toc-list-level-3 .active-toc {
    /* font-weight: bold !important; */
    color: #008980 !important;
    ;
}

.ez-toc-list-level-3 a {
    color: #676767 !important;
}

.sft-table-of-content-sidebar #ez-toc-container li {
    margin: 8px 0;

}

.sft-table-of-content-sidebar #ez-toc-container a:hover {
    text-decoration: none !important;

}

/* Add ">" only if the li has sublist */
.sft-table-of-content-sidebar #ez-toc-container li:has(> ul.ez-toc-list-level-3)>a::before {
    content: " ";
    display: block;
    width: 20px;
    height: 20px;
    background-size: auto;
    position: absolute;
    margin-top: 3px;
    left: -20px;
    z-index: 1;
    background-size: 20px;
    background-image: url(https://www.saffiretech.com/wp-content/uploads/2025/09/sidebar-toc-head-right-arrow.png);
    background-repeat: no-repeat;
}

/* Change to highlighted(theme color) "v" when active */
.sft-table-of-content-sidebar #ez-toc-container li:has(> ul.ez-toc-list-level-3)>a.active-toc::before {
    background-image: url(https://www.saffiretech.com/wp-content/uploads/2025/09/sidebar-toc-head-down-arrow.png);
}

/* Change arrow to highlighted(black color) "v" when active for clicked sub-headings*/
.sft-table-of-content-sidebar #ez-toc-container li:has(> ul.ez-toc-list-level-3)>a.active-toc-wth-sub::before {
    background-image: url(https://www.saffiretech.com/wp-content/uploads/2025/09/sidebar-toc-head-down-black-arrow.png);
}

/* Change heading color to highlighted(black color) when active for clicked sub-headings*/
.sft-table-of-content-sidebar #ez-toc-container li:has(> ul.ez-toc-list-level-3)>a.active-toc-wth-sub {
    font-weight: bold !important;
}


/* ===== Sale Coupon Grid CSS Ends ===== */

.sft-single-post-content-area .content-inner {
    padding-bottom: 0px !important;
}


/* Author Bio Fixes */
.sft-single-post-content-area #author-biox,
.sft-single-post-content-area .comment-wrap {
    border: 1px solid rgba(229, 229, 229, .7);
    box-shadow: 0px 5px 25px 0 rgba(0, 0, 0, .1);
    border-radius: 5px;
    padding: 30px 30px;
}

.sft-single-post-content-area .sft-author-inner-flex-wrap {
    display: flex;
    align-items: center;
    gap: 30px;
}

.sft-single-post-content-area .sft-author-inner-flex-wrap img {
    margin: 0px;
}

/* Comment Wrap Fixes */
.sft-single-post-content-area .comment-wrap {
    margin-top: 40px !important;
}

.sft-single-post-content-area .sft-blog-single-disclosure {
    font-size: 16px;
    color: #525252;
    line-height: 1.5;
    margin-bottom: 40px;
    padding-top: 10px;
    border-top: 1px solid #eaeaea;
}


body.wp-singular.post-template-default.single.single-post {
    overflow: unset;
}

/* #ajax-content-wrap .container-wrap:has(.container-sft-blog-single) {
    background-color: #f8f8f8;
} */

.container-sft-blog-single .sft-single-post-content-area {
    width: 100% !important;
    margin-top: 0px;
    /* background-color: #fff; */
    /* padding: 30px 30px 50px 30px !important; */

    padding: 10px 20px 50px 20px !important;
}

.sft-single-post-content-area .wpb_wrapper .wpDataTables,
.sft-single-post-content-area .wpb_wrapper .urvanov-syntax-highlighter-syntax {
    max-width: 765px;
    overflow: auto;
}

.sft-blog-header-content-wrap .sft-single-post-breadcrumb {
    font-family: 'Roboto';
    font-size: 14px;
    line-height: 1.6;
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* gap: 8px; */
    /* text-transform: uppercase; */
}

.sft-single-post-header-container .blog-title #single-below-header>span {
    padding: 0px 10px 0px 10px;
    border-left: 1px solid rgb(0 0 0 / 28%);
}

.sft-single-post-header-container .blog-title #single-below-header>span:first-child {
    padding-left: 0;
    border: none;
}

.container-sft-blog-single .sft-single-post-sidebar>div.widget {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 30px !important;
}

.sft-single-post-content-area .section-title.blog-title h1 {
    margin: 0px !important;
    text-align: left !important;
    width: 100% !important;
    line-height: 1.3 !important;
    font-size: clamp(25px, 2.5vw, 36px) !important;

}

.sft-single-post-content-area #single-below-header {
    padding-top: 0px 0px 15px 0px !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0px 0px 20px 0px !important;
}

/* Single Blog Page - New CSS (3 column layout) */
.container-sft-blog-single {
    padding: 0px 20px !important;
}

.container-sft-blog-single .sft-single-blog-inner-row {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: 20px;
}

.container-sft-blog-single .sft-single-blog-inner-row::before {
    display: none !important;
}

.container-sft-blog-single .sft-single-post-content-area img.img-with-animation {
    width: 100%;
    padding: 10px !important;
    border-radius: 5px;
    background-color: #f0f0f0;
}

.sft-single-blog-inner-row .sft-table-of-content-sidebar {
    padding: 0px 20px 0px 15px;
    align-self: self-start;
    position: sticky;
    top: 135px;
    max-height: 80svh;
    overflow-y: auto;
}

.sft-single-blog-inner-row .sft-table-of-content-sidebar #ez-toc-container {
    padding: 0px !important;
    border: none !important;
    box-shadow: none;
}

.sft-single-blog-inner-row #sidebar {
    position: sticky;
    top: 135px;
    align-self: self-start;
    max-height: 80svh;
    width: 100% !important;
    overflow-y: auto;
}

.sft-single-blog-inner-row #sidebar * {
    font-size: 14px !important;
}

.sft-single-blog-inner-row #sidebar .widget {
    padding: 0px 15px 0px 0px;
}

.sft-single-blog-inner-row #sidebar .widget h4 {
    opacity: 1 !important;
}


/*====================================== new newsletter sidebar design 22-09-25 ========================================*/

#sidebar .widget .noptin-optin-form-wrapper {
    /* background-color: #00998e0f; */
    background: #24A79E;
    /* padding: 10px; */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

#sidebar .widget .noptin-optin-form-wrapper input {
    background-color: #fff;
    /* border: 1px solid #ddd; */
}

#sidebar .widget .noptin-optin-form-wrapper input[type="submit"] {
    padding: 12px !important;
}

#sidebar .noptin-optin-form-wrapper .noptin-form-main-image {
    text-align: center;
}

#sidebar .noptin-optin-form-wrapper .noptin-form-main-image img {
    width: 80px;
    height: 80px;
    margin: 0;
}

#sidebar .noptin-optin-form-wrapper {
    gap: 0;
}


#sidebar .noptin-optin-form-wrapper .noptin-form-heading h4 {
    font-size: 32px !important;
    text-align: center;
    font-weight: bolder;
    margin-bottom: 5px;
    color: #fff;
    font-family: 'lato';
    opacity: 1;
}

#sidebar .noptin-optin-form-wrapper .noptin-form-heading p {
    font-size: 20px !important;
    text-align: center;
    font-weight: bolder !important;
    padding-bottom: 0;
}

#sidebar .noptin-optin-form-wrapper .noptin-form-header-text .noptin-form-description p {
    font-weight: 400 !important;
    padding-bottom: 5px;
    text-align: center;
}

#sidebar .noptin-optin-form-wrapper .noptin-form-footer .noptin-form-note {
    margin-top: 0;
    font-weight: 500;
    line-height: 1;
}

#sidebar .noptin-optin-form-wrapper .noptin-form-footer .noptin-form-note p {
    padding-bottom: 8px;
}

#sidebar .noptin-optin-form-wrapper .noptin-form-footer .noptin-form-note  a {
    color: #fff;
    text-decoration: underline;
}


/*====================================== new newsletter sidebar design ends 22-09-25 ========================================*/

/* .sft-single-blog-inner-row #sidebar .widget .noptin-optin-form-wrapper {
    background-color: #00998e0f;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.sft-single-blog-inner-row #sidebar .widget .noptin-optin-form-wrapper input {
    background-color: #fff;
    border: 1px solid #ddd;
}

.sft-single-blog-inner-row #sidebar .widget .noptin-optin-form-wrapper input[type="submit"] {
    padding: 12px !important;
} */

/* ============================== Sidebar ========================================CSS */

.sft-single-blog-inner-row .sft-table-of-content-sidebar::-webkit-scrollbar,
.sft-single-blog-inner-row #sidebar::-webkit-scrollbar {
    width: 1px;
}

.sft-single-blog-inner-row .sft-table-of-content-sidebar::-webkit-scrollbar-track,
.sft-single-blog-inner-row #sidebar::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ddd;
}

.sft-single-blog-inner-row .sft-table-of-content-sidebar::-webkit-scrollbar-thumb,
.sft-single-blog-inner-row #sidebar::-webkit-scrollbar-thumb {
    background: #acacac;
    border-radius: 10px;
}

.sft-blog-header-section-alt {
    background: #00998e0f;
    border-bottom: 1px solid #e6e6e6;
}

.sft-blog-header-section-alt .sft-blog-header-flex-wrap {
    max-width: 1380px;
    margin: 0 auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.sft-blog-header-section-alt .sft-blog-header-flex-wrap>div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.sft-blog-header-section-alt .sft-blog-header-flex-wrap .sft-blog-header-image-wrap img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 10px #e0e0e0;
    border-radius: 8px;
}

/* Single Post - Pros and Cons Fixes */
.single.single-post .check_mark,
.single.single-post .cross_mark {
    line-height: 1;
    border-radius: 8px;
    padding: 0px 0px 15px 0px;
    border: 2px solid #00998e;
}

.single.single-post .cross_mark {
    border-color: #ff5858;
}

.single.single-post .check_mark .wpb_wrapper p:first-child,
.single.single-post .cross_mark .wpb_wrapper p:first-child {
    background: #00998e;
    color: #ffffff;
    display: inline-block;
    margin: 0px 0px 10px 30px;
    padding: 0px 15px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.single.single-post .cross_mark .wpb_wrapper p:first-child {
    background: #ff5858;
}

.single.single-post .check_mark .wpb_wrapper ul,
.single.single-post .cross_mark .wpb_wrapper ul {
    padding-right: 30px;
}

/* Hiding Hero Image - Blog Content Section */
.single.single-post .post-content .content-inner .wpb_wrapper .img-with-aniamtion-wrap:first-child,
.single.single-post .post-content .content-inner .wpb_wrapper .divider-wrap:first-child {
    display: none !important;
}


/* Style the second column */

/* .sft-single-post-content-area .wpb_wrapper .wpDataTables table tbody tr td:nth-child(2),
.sft-single-post-content-area .wpb_wrapper .wpDataTables table tbody tr td:nth-child(2) a{
     color: #6b7b99 !important;
} */


/* Media Query for Blog Page */
@media screen and (max-width: 1000px) {
    .sft-blog-header-section-alt .sft-blog-header-flex-wrap {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .sft-blog-header-section-alt .sft-blog-header-flex-wrap>div:first-child {
        order: 1;
    }

    .container-sft-blog-single .sft-single-blog-inner-row {
        grid-template-columns: 1fr;
    }

    .sft-single-blog-inner-row .sft-table-of-content-sidebar {
        display: none;
    }

    .sft-single-blog-inner-row #sidebar {
        display: none;
    }

    .container-sft-blog-single .sft-single-post-content-area {
        padding: 0px !important;
    }

    .container-sft-blog-single {
        padding: 0px !important;
    }

    .sft-blog-header-content-wrap .sft-single-post-breadcrumb {
        display: none;
    }
}