.elementor-129 .elementor-element.elementor-element-c2a9ff7{--display:flex;}/* Start custom CSS for html, class: .elementor-element-ca114cf */<div class="spsx-services-page" dir="rtl">

    <!-- =========================
         HERO
    ========================== -->
    <div class="spsx-services-hero">

        <div class="spsx-hero-grid"></div>
        <div class="spsx-hero-orb spsx-hero-orb-one"></div>
        <div class="spsx-hero-orb spsx-hero-orb-two"></div>

        <div class="spsx-hero-content">

            <div class="spsx-hero-badge">
                <span class="spsx-live-dot"></span>
                خدمات آنلاین و حضوری
            </div>

            <h1>
                همه خدمات کافی‌نت
                <strong>یکجا و سریع</strong>
            </h1>

            <p>
                از ثبت‌نام وام و تسهیلات تا خدمات بانکی، دولتی،
                دانشگاهی، قضایی، خودرو، بیمه و خدمات تخصصی
                طراحی سایت و سئو.
            </p>

            <div class="spsx-hero-actions">

                <a href="#spsx-loan-services"
                   class="spsx-btn spsx-btn-primary">
                    خدمات وام و تسهیلات
                    <span>←</span>
                </a>

                <a href="#spsx-services-grid"
                   class="spsx-btn spsx-btn-secondary">
                    مشاهده همه خدمات
                </a>

            </div>

            <div class="spsx-hero-stats">

                <div>
                    <strong data-spsx-counter="50">0</strong>
                    <span>خدمت متنوع</span>
                </div>

                <div>
                    <strong data-spsx-counter="1000">0</strong>
                    <span>درخواست انجام‌شده</span>
                </div>

                <div>
                    <strong>سریع</strong>
                    <span>پاسخگویی</span>
                </div>

            </div>

        </div>


        <div class="spsx-hero-card-wrap">

            <div class="spsx-hero-service-card">

                <div class="spsx-card-top">

                    <div class="spsx-card-icon">
                        ✓
                    </div>

                    <div>
                        <small>شبکه پرداز صبور</small>
                        <strong>خدمات غیرحضوری</strong>
                    </div>

                </div>

                <div class="spsx-card-line"></div>

                <div class="spsx-card-items">

                    <div>
                        <span>وام و تسهیلات</span>
                        <b>فعال</b>
                    </div>

                    <div>
                        <span>اعتبارسنجی</span>
                        <b>فعال</b>
                    </div>

                    <div>
                        <span>خدمات دولتی</span>
                        <b>فعال</b>
                    </div>

                    <div>
                        <span>طراحی سایت</span>
                        <b>فعال</b>
                    </div>

                </div>

                <div class="spsx-card-bottom">
                    <span>پشتیبانی و راهنمایی</span>
                    <strong>09195663301</strong>
                </div>

            </div>

        </div>

    </div>


    <!-- =========================
         CATEGORIES
    ========================== -->

    <div class="spsx-service-categories">

        <button class="spsx-category is-active"
                type="button"
                data-category="all">
            <span>◉</span>
            همه خدمات
        </button>

        <button class="spsx-category"
                type="button"
                data-category="loan">
            <span>₽</span>
            وام و تسهیلات
        </button>

        <button class="spsx-category"
                type="button"
                data-category="government">
            <span>▣</span>
            خدمات دولتی
        </button>

        <button class="spsx-category"
                type="button"
                data-category="education">
            <span>▤</span>
            دانشگاهی
        </button>

        <button class="spsx-category"
                type="button"
                data-category="bank">
            <span>▥</span>
            بانکی
        </button>

        <button class="spsx-category"
                type="button"
                data-category="legal">
            <span>§</span>
            قضایی
        </button>

        <button class="spsx-category"
                type="button"
                data-category="digital">
            <span>⌘</span>
            کامپیوتری
        </button>

        <button class="spsx-category"
                type="button"
                data-category="web">
            <span>◈</span>
            طراحی سایت و سئو
        </button>

    </div>


    <!-- =========================
         SEARCH
    ========================== -->

    <div class="spsx-services-search">

        <div class="spsx-search-box">

            <span>⌕</span>

            <input
                type="text"
                id="spsxServiceSearch"
                placeholder="جستجوی خدمت مورد نظر..."
                autocomplete="off"
            >

            <button
                id="spsxClearSearch"
                type="button"
                aria-label="پاک کردن جستجو">
                ×
            </button>

        </div>

        <div class="spsx-search-result">
            <span id="spsxResultCount">
                همه خدمات
            </span>
        </div>

    </div>


    <!-- =========================
         LOAN
    ========================== -->

    <div class="spsx-loan-section"
         id="spsx-loan-services">

        <div class="spsx-section-heading">

            <div>

                <span class="spsx-section-label">
                    خدمات ویژه
                </span>

                <h2>
                    خدمات <strong>وام و تسهیلات</strong>
                </h2>

                <p>
                    برای ثبت درخواست، بررسی شرایط، تکمیل اطلاعات
                    و آماده‌سازی مدارک تسهیلات در کنار شما هستیم.
                </p>

            </div>

            <div class="spsx-heading-number">
                LOAN
            </div>

        </div>


        <div class="spsx-loan-grid">


            <div class="spsx-loan-card">

                <div class="spsx-loan-icon">₽</div>

                <span>01</span>

                <h3>ثبت‌نام وام و تسهیلات</h3>

                <p>
                    ثبت اطلاعات و درخواست انواع تسهیلات
                    و راهنمایی در مراحل ثبت‌نام.
                </p>

                <button
                    type="button"
                    class="spsx-service-more"
                    data-title="ثبت‌نام وام و تسهیلات"
                    data-description="ثبت اطلاعات و راهنمایی در فرآیند درخواست انواع وام و تسهیلات.">
                    جزئیات خدمت ←
                </button>

            </div>


            <div class="spsx-loan-card">

                <div class="spsx-loan-icon">✓</div>

                <span>02</span>

                <h3>استعلام رتبه اعتباری</h3>

                <p>
                    بررسی و دریافت گزارش رتبه اعتباری
                    و راهنمایی برای استفاده از تسهیلات.
                </p>

                <button
                    type="button"
                    class="spsx-service-more"
                    data-title="استعلام رتبه اعتباری"
                    data-description="دریافت و بررسی گزارش اعتبار و راهنمایی درباره اطلاعات موجود در گزارش.">
                    جزئیات خدمت ←
                </button>

            </div>


            <div class="spsx-loan-card">

                <div class="spsx-loan-icon">◌</div>

                <span>03</span>

                <h3>بررسی شرایط تسهیلات</h3>

                <p>
                    بررسی اولیه شرایط عمومی و مدارک مورد نیاز
                    برای ثبت درخواست تسهیلات.
                </p>

                <button
                    type="button"
                    class="spsx-service-more"
                    data-title="بررسی شرایط تسهیلات"
                    data-description="بررسی اطلاعات اولیه و راهنمایی درباره مدارک و مراحل مورد نیاز.">
                    جزئیات خدمت ←
                </button>

            </div>


            <div class="spsx-loan-card">

                <div class="spsx-loan-icon">▤</div>

                <span>04</span>

                <h3>تکمیل فرم‌های وام</h3>

                <p>
                    تکمیل اطلاعات و فرم‌های مربوط به
                    درخواست تسهیلات.
                </p>

                <button
                    type="button"
                    class="spsx-service-more"
                    data-title="تکمیل فرم‌های وام"
                    data-description="کمک در تکمیل فرم‌ها و وارد کردن صحیح اطلاعات مورد نیاز.">
                    جزئیات خدمت ←
                </button>

            </div>


            <div class="spsx-loan-card">

                <div class="spsx-loan-icon">▣</div>

                <span>05</span>

                <h3>آماده‌سازی مدارک</h3>

                <p>
                    اسکن، چاپ، مرتب‌سازی و آماده‌سازی
                    مدارک مورد نیاز.
                </p>

                <button
                    type="button"
                    class="spsx-service-more"
                    data-title="آماده‌سازی مدارک"
                    data-description="اسکن، چاپ و آماده‌سازی مدارک مورد نیاز برای ارائه به بانک یا سامانه مربوطه.">
                    جزئیات خدمت ←
                </button>

            </div>


            <div class="spsx-loan-card">

                <div class="spsx-loan-icon">↻</div>

                <span>06</span>

                <h3>پیگیری درخواست وام</h3>

                <p>
                    راهنمایی برای پیگیری وضعیت درخواست
                    در سامانه مربوطه.
                </p>

                <button
                    type="button"
                    class="spsx-service-more"
                    data-title="پیگیری درخواست وام"
                    data-description="راهنمایی برای مشاهده و پیگیری وضعیت درخواست تسهیلات در سامانه مربوطه.">
                    جزئیات خدمت ←
                </button>

            </div>

        </div>


        <div class="spsx-loan-note">

            <span>!</span>

            <p>
                توجه: تصمیم نهایی درباره اعطای وام و تسهیلات
                توسط بانک یا مؤسسه ارائه‌دهنده خدمت انجام می‌شود
                و شبکه پرداز صبور صرفاً خدمات ثبت‌نام، تکمیل اطلاعات
                و راهنمایی را ارائه می‌کند.
            </p>

        </div>

    </div>


    <!-- =========================
         ALL SERVICES
    ========================== -->

    <div class="spsx-all-services"
         id="spsx-services-grid">

        <div class="spsx-section-heading">

            <div>

                <span class="spsx-section-label">
                    خدمات کافی‌نت
                </span>

                <h2>
                    تمام خدمات
                    <strong>در یک مجموعه</strong>
                </h2>

                <p>
                    خدمت مورد نظر خود را پیدا کنید و برای دریافت
                    راهنمایی با ما در ارتباط باشید.
                </p>

            </div>

        </div>


        <div class="spsx-services-grid">


            <div class="spsx-service-card"
                 data-category="government"
                 data-title="خدمات دولتی"
                 data-description="ثبت‌نام و انجام خدمات سامانه‌های دولتی و عمومی.">

                <div class="spsx-service-card-icon">▣</div>
                <span>دولتی</span>
                <h3>خدمات دولتی</h3>

                <p>
                    ثبت‌نام و انجام امور سامانه‌های دولتی
                    و خدمات عمومی.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card"
                 data-category="education"
                 data-title="خدمات دانشگاهی"
                 data-description="ثبت‌نام، انتخاب واحد، پرداخت شهریه و خدمات سامانه‌های آموزشی.">

                <div class="spsx-service-card-icon">▤</div>
                <span>آموزشی</span>
                <h3>خدمات دانشگاهی</h3>

                <p>
                    ثبت‌نام، انتخاب واحد، پرداخت شهریه،
                    دریافت فرم و خدمات آموزشی.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card"
                 data-category="bank"
                 data-title="خدمات بانکی"
                 data-description="انجام امور اینترنتی و سامانه‌های بانکی و خدمات مرتبط.">

                <div class="spsx-service-card-icon">▥</div>
                <span>بانکی</span>
                <h3>خدمات بانکی</h3>

                <p>
                    ثبت درخواست‌ها، فرم‌ها و خدمات
                    اینترنتی بانکی.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card"
                 data-category="legal"
                 data-title="خدمات قضایی و ثنا"
                 data-description="ثبت‌نام و انجام خدمات سامانه ثنا و خدمات قضایی الکترونیک.">

                <div class="spsx-service-card-icon">§</div>
                <span>قضایی</span>
                <h3>خدمات قضایی و ثنا</h3>

                <p>
                    ثبت‌نام ثنا، پیگیری و انجام خدمات
                    قضایی الکترونیک.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card"
                 data-category="government"
                 data-title="خدمات خودرو و راهور"
                 data-description="انجام خدمات اینترنتی خودرو و راهنمایی سامانه‌های راهور.">

                <div class="spsx-service-card-icon">⌁</div>
                <span>خودرو</span>
                <h3>خدمات خودرو و راهور</h3>

                <p>
                    خدمات اینترنتی خودرو، راهور،
                    نوبت و استعلام‌های مرتبط.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card"
                 data-category="government"
                 data-title="خدمات بیمه"
                 data-description="انجام خدمات و امور اینترنتی مربوط به بیمه.">

                <div class="spsx-service-card-icon">◇</div>
                <span>بیمه</span>
                <h3>خدمات بیمه</h3>

                <p>
                    ثبت‌نام، استعلام و انجام امور
                    اینترنتی بیمه.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card"
                 data-category="digital"
                 data-title="چاپ اسکن تایپ"
                 data-description="چاپ، اسکن، کپی، تایپ، تبدیل فایل و آماده‌سازی مدارک.">

                <div class="spsx-service-card-icon">▤</div>
                <span>کامپیوتری</span>
                <h3>چاپ، اسکن و تایپ</h3>

                <p>
                    چاپ رنگی و سیاه‌وسفید، اسکن،
                    تایپ و تبدیل فایل.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card"
                 data-category="government"
                 data-title="ثبت نام سامانه ها"
                 data-description="ثبت‌نام و تکمیل اطلاعات در سامانه‌های مختلف.">

                <div class="spsx-service-card-icon">⌘</div>
                <span>آنلاین</span>
                <h3>ثبت‌نام سامانه‌ها</h3>

                <p>
                    ثبت‌نام و تکمیل اطلاعات در سامانه‌های
                    عمومی و تخصصی.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card"
                 data-category="digital"
                 data-title="عکس پرسنلی"
                 data-description="تهیه و آماده‌سازی عکس پرسنلی دیجیتال برای سامانه‌ها و مدارک.">

                <div class="spsx-service-card-icon">▢</div>
                <span>تصویر</span>
                <h3>عکس پرسنلی</h3>

                <p>
                    تهیه و آماده‌سازی عکس پرسنلی
                    مناسب سامانه‌ها و مدارک.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card"
                 data-category="digital"
                 data-title="خدمات کامپیوتری"
                 data-description="نصب نرم‌افزار، تبدیل فایل، تنظیمات و خدمات عمومی کامپیوتری.">

                <div class="spsx-service-card-icon">⌘</div>
                <span>کامپیوتر</span>
                <h3>خدمات کامپیوتری</h3>

                <p>
                    نصب نرم‌افزار، تبدیل فایل،
                    تنظیمات و امور کامپیوتری.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card spsx-web-card"
                 data-category="web"
                 data-title="طراحی سایت حرفه ای"
                 data-description="طراحی سایت شرکتی، فروشگاهی، خدماتی و اختصاصی با وردپرس و المنتور.">

                <div class="spsx-service-card-icon">◈</div>
                <span>خدمات تخصصی</span>
                <h3>طراحی سایت حرفه‌ای</h3>

                <p>
                    طراحی سایت مدرن، سریع و ریسپانسیو
                    متناسب با نیاز کسب‌وکار.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card spsx-web-card"
                 data-category="web"
                 data-title="سئو و بهینه سازی سایت"
                 data-description="بهینه‌سازی ساختار سایت، محتوا، سرعت و سئو برای افزایش دیده‌شدن در گوگل.">

                <div class="spsx-service-card-icon">↗</div>
                <span>خدمات تخصصی</span>
                <h3>سئو و بهینه‌سازی</h3>

                <p>
                    بهینه‌سازی سایت برای موتورهای جستجو
                    و افزایش حضور در نتایج گوگل.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


            <div class="spsx-service-card spsx-web-card"
                 data-category="web"
                 data-title="طراحی سایت و سئو"
                 data-description="طراحی سایت همراه با ساختار مناسب سئو و آماده‌سازی برای رشد در گوگل.">

                <div class="spsx-service-card-icon">✦</div>
                <span>پکیج تخصصی</span>
                <h3>طراحی سایت + سئو</h3>

                <p>
                    طراحی اصولی سایت از ابتدا با
                    ساختار مناسب برای سئو.
                </p>

                <button type="button" class="spsx-card-open">
                    مشاهده خدمت ←
                </button>

            </div>


        </div>


        <div class="spsx-no-result"
             id="spsxNoResult">

            <div>⌕</div>

            <h3>خدمتی پیدا نشد</h3>

            <p>
                عبارت دیگری را جستجو کنید.
            </p>

        </div>

    </div>


    <!-- =========================
         BUSINESS SERVICES
    ========================== -->

    <div class="spsx-business-section">

        <div class="spsx-business-header">

            <span>
                خدمات تخصصی کسب‌وکار
            </span>

            <h2>
                اگر کسب‌وکارت را
                <strong>آنلاین می‌کنی</strong>
            </h2>

            <p>
                طراحی سایت و سئو را از یک مجموعه تخصصی دریافت کن.
            </p>

        </div>


        <div class="spsx-business-grid">

            <div class="spsx-business-card">

                <span>01</span>

                <div class="spsx-business-icon">
                    ◈
                </div>

                <h3>
                    طراحی سایت
                </h3>

                <p>
                    طراحی سایت شرکتی، خدماتی، فروشگاهی
                    و اختصاصی با ظاهر حرفه‌ای.
                </p>

                <a href="tel:09195663301">
                    دریافت مشاوره ←
                </a>

            </div>


            <div class="spsx-business-card">

                <span>02</span>

                <div class="spsx-business-icon">
                    ↗
                </div>

                <h3>
                    سئو سایت
                </h3>

                <p>
                    بهینه‌سازی ساختار، محتوا و عملکرد سایت
                    برای موتورهای جستجو.
                </p>

                <a href="tel:09195663301">
                    دریافت مشاوره ←
                </a>

            </div>


            <div class="spsx-business-card spsx-business-featured">

                <span>03</span>

                <div class="spsx-business-icon">
                    ✦
                </div>

                <h3>
                    طراحی سایت + سئو
                </h3>

                <p>
                    ساخت سایت با درنظرگرفتن اصول سئو
                    از همان مرحله طراحی.
                </p>

                <a href="tel:09195663301">
                    دریافت مشاوره ←
                </a>

            </div>

        </div>

    </div>


    <!-- =========================
         PROCESS
    ========================== -->

    <div class="spsx-process-section">

        <div class="spsx-section-heading">

            <div>

                <span class="spsx-section-label">
                    فرآیند همکاری
                </span>

                <h2>
                    ساده، سریع و
                    <strong>شفاف</strong>
                </h2>

            </div>

        </div>


        <div class="spsx-process-grid">

            <div class="spsx-process-item">

                <span>01</span>

                <div>
                    <h3>انتخاب خدمت</h3>
                    <p>
                        خدمت مورد نظر خود را انتخاب کنید.
                    </p>
                </div>

            </div>


            <div class="spsx-process-item">

                <span>02</span>

                <div>
                    <h3>تماس و راهنمایی</h3>
                    <p>
                        شرایط و مدارک مورد نیاز بررسی می‌شود.
                    </p>
                </div>

            </div>


            <div class="spsx-process-item">

                <span>03</span>

                <div>
                    <h3>ثبت درخواست</h3>
                    <p>
                        اطلاعات شما در سامانه مربوطه ثبت می‌شود.
                    </p>
                </div>

            </div>


            <div class="spsx-process-item">

                <span>04</span>

                <div>
                    <h3>پیگیری</h3>
                    <p>
                        در صورت نیاز، مراحل بعدی راهنمایی می‌شود.
                    </p>
                </div>

            </div>

        </div>

    </div>


    <!-- =========================
         FINAL CTA
    ========================== -->

    <div class="spsx-final-cta">

        <div>

            <span>
                برای دریافت راهنمایی
            </span>

            <h2>
                نمی‌دانی کدام خدمت مناسب توست؟
            </h2>

            <p>
                با ما تماس بگیر تا قبل از شروع کار
                راهنمایی لازم را دریافت کنی.
            </p>

        </div>

        <a href="tel:09195663301">

            09195663301

            <span>
                تماس با ما ←
            </span>

        </a>

    </div>


    <!-- =========================
         MODAL
    ========================== -->

    <div class="spsx-modal"
         id="spsxServiceModal"
         aria-hidden="true">

        <div class="spsx-modal-overlay"></div>

        <div class="spsx-modal-box"
             role="dialog"
             aria-modal="true">

            <button
                type="button"
                class="spsx-modal-close"
                aria-label="بستن">
                ×
            </button>

            <div class="spsx-modal-icon">
                ✓
            </div>

            <span>
                شبکه پرداز صبور
            </span>

            <h3 id="spsxModalTitle">
                عنوان خدمت
            </h3>

            <p id="spsxModalDescription">
                توضیحات خدمت
            </p>

            <a href="tel:09195663301"
               class="spsx-modal-call">
                تماس برای دریافت راهنمایی
                <span>←</span>
            </a>

        </div>

    </div>

</div>


<!-- =====================================================
     SPSX JAVASCRIPT
===================================================== -->

<script>
(function () {

    "use strict";

    function spsxServicesInit() {

        var root = document.querySelector(".spsx-services-page");

        if (!root) {
            return;
        }

        if (root.getAttribute("data-spsx-js-ready") === "1") {
            return;
        }

        root.setAttribute("data-spsx-js-ready", "1");


        /* =========================================
           COUNTERS
        ========================================== */

        var counters = root.querySelectorAll(
            "[data-spsx-counter]"
        );


        function animateCounter(element) {

            var target = parseInt(
                element.getAttribute("data-spsx-counter"),
                10
            );

            if (!target) {
                return;
            }

            if (element.getAttribute("data-counted") === "1") {
                return;
            }

            element.setAttribute("data-counted", "1");

            var duration = 1300;
            var startTime = null;


            function step(timestamp) {

                if (!startTime) {
                    startTime = timestamp;
                }

                var progress =
                    Math.min(
                        (timestamp - startTime) / duration,
                        1
                    );


                var current =
                    Math.floor(progress * target);


                element.textContent =
                    current.toLocaleString("fa-IR");


                if (progress < 1) {

                    window.requestAnimationFrame(step);

                } else {

                    element.textContent =
                        target.toLocaleString("fa-IR");

                }

            }


            window.requestAnimationFrame(step);

        }


        if ("IntersectionObserver" in window) {

            var counterObserver =
                new IntersectionObserver(
                    function (entries) {

                        entries.forEach(
                            function (entry) {

                                if (entry.isIntersecting) {

                                    animateCounter(
                                        entry.target
                                    );

                                    counterObserver.unobserve(
                                        entry.target
                                    );

                                }

                            }
                        );

                    },
                    {
                        threshold: 0.25
                    }
                );


            counters.forEach(
                function (counter) {

                    counterObserver.observe(counter);

                }
            );

        } else {

            counters.forEach(
                function (counter) {

                    animateCounter(counter);

                }
            );

        }


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

        var categoryButtons =
            root.querySelectorAll(
                ".spsx-category"
            );


        var serviceCards =
            root.querySelectorAll(
                ".spsx-service-card"
            );


        var searchInput =
            root.querySelector(
                "#spsxServiceSearch"
            );


        var clearButton =
            root.querySelector(
                "#spsxClearSearch"
            );


        var resultCount =
            root.querySelector(
                "#spsxResultCount"
            );


        var noResult =
            root.querySelector(
                "#spsxNoResult"
            );


        var activeCategory = "all";


        function normalizeText(value) {

            return String(value || "")
                .toLowerCase()
                .replace(/ي/g, "ی")
                .replace(/ى/g, "ی")
                .replace(/ك/g, "ک")
                .replace(/\u200c/g, " ")
                .trim();

        }


        function filterServices() {

            var searchValue =
                normalizeText(
                    searchInput
                        ? searchInput.value
                        : ""
                );


            var visibleCount = 0;


            serviceCards.forEach(
                function (card) {

                    var category =
                        card.getAttribute(
                            "data-category"
                        ) || "";


                    var title =
                        normalizeText(
                            card.getAttribute(
                                "data-title"
                            )
                        );


                    var description =
                        normalizeText(
                            card.getAttribute(
                                "data-description"
                            )
                        );


                    var content =
                        normalizeText(
                            card.textContent
                        );


                    var categoryMatch =
                        activeCategory === "all" ||
                        category === activeCategory;


                    var searchMatch =
                        !searchValue ||
                        title.indexOf(searchValue) !== -1 ||
                        description.indexOf(searchValue) !== -1 ||
                        content.indexOf(searchValue) !== -1;


                    if (
                        categoryMatch &&
                        searchMatch
                    ) {

                        card.classList.remove(
                            "spsx-hidden"
                        );

                        visibleCount++;

                    } else {

                        card.classList.add(
                            "spsx-hidden"
                        );

                    }

                }
            );


            if (resultCount) {

                if (searchValue) {

                    resultCount.textContent =
                        visibleCount +
                        " خدمت پیدا شد";

                } else if (
                    activeCategory !== "all"
                ) {

                    resultCount.textContent =
                        visibleCount +
                        " خدمت";

                } else {

                    resultCount.textContent =
                        "همه خدمات";

                }

            }


            if (noResult) {

                noResult.style.display =
                    visibleCount === 0
                        ? "block"
                        : "none";

            }

        }


        categoryButtons.forEach(
            function (button) {

                button.addEventListener(
                    "click",
                    function () {

                        categoryButtons.forEach(
                            function (item) {

                                item.classList.remove(
                                    "is-active"
                                );

                            }
                        );


                        button.classList.add(
                            "is-active"
                        );


                        activeCategory =
                            button.getAttribute(
                                "data-category"
                            ) || "all";


                        filterServices();

                    }
                );

            }
        );


        if (searchInput) {

            searchInput.addEventListener(
                "input",
                filterServices
            );

        }


        if (clearButton) {

            clearButton.addEventListener(
                "click",
                function () {

                    if (searchInput) {

                        searchInput.value = "";

                        searchInput.focus();

                    }

                    filterServices();

                }
            );

        }


        /* =========================================
           MODAL
        ========================================== */

        var modal =
            root.querySelector(
                "#spsxServiceModal"
            );


        var modalTitle =
            root.querySelector(
                "#spsxModalTitle"
            );


        var modalDescription =
            root.querySelector(
                "#spsxModalDescription"
            );


        var modalClose =
            root.querySelector(
                ".spsx-modal-close"
            );


        var modalOverlay =
            root.querySelector(
                ".spsx-modal-overlay"
            );


        function openModal(
            title,
            description
        ) {

            if (!modal) {
                return;
            }


            if (modalTitle) {

                modalTitle.textContent =
                    title ||
                    "خدمت";

            }


            if (modalDescription) {

                modalDescription.textContent =
                    description ||
                    "برای دریافت اطلاعات بیشتر با ما تماس بگیرید.";

            }


            modal.classList.add(
                "is-open"
            );


            modal.setAttribute(
                "aria-hidden",
                "false"
            );


            document.documentElement.style.overflow =
                "hidden";

        }


        function closeModal() {

            if (!modal) {
                return;
            }


            modal.classList.remove(
                "is-open"
            );


            modal.setAttribute(
                "aria-hidden",
                "true"
            );


            document.documentElement.style.overflow =
                "";

        }


        var modalButtons =
            root.querySelectorAll(
                ".spsx-service-more, .spsx-card-open"
            );


        modalButtons.forEach(
            function (button) {

                button.addEventListener(
                    "click",
                    function () {

                        var parent =
                            button.closest(
                                ".spsx-service-card, .spsx-loan-card"
                            );


                        var title =
                            button.getAttribute(
                                "data-title"
                            );


                        var description =
                            button.getAttribute(
                                "data-description"
                            );


                        if (parent) {

                            if (!title) {

                                title =
                                    parent.getAttribute(
                                        "data-title"
                                    );

                            }


                            if (!description) {

                                description =
                                    parent.getAttribute(
                                        "data-description"
                                    );

                            }

                        }


                        openModal(
                            title,
                            description
                        );

                    }
                );

            }
        );


        if (modalClose) {

            modalClose.addEventListener(
                "click",
                closeModal
            );

        }


        if (modalOverlay) {

            modalOverlay.addEventListener(
                "click",
                closeModal
            );

        }


        document.addEventListener(
            "keydown",
            function (event) {

                if (
                    event.key === "Escape" &&
                    modal &&
                    modal.classList.contains(
                        "is-open"
                    )
                ) {

                    closeModal();

                }

            }
        );


        /* =========================================
           SMOOTH ANCHORS
        ========================================== */

        var anchors =
            root.querySelectorAll(
                'a[href^="#"]'
            );


        anchors.forEach(
            function (link) {

                link.addEventListener(
                    "click",
                    function (event) {

                        var id =
                            link.getAttribute(
                                "href"
                            );


                        if (
                            !id ||
                            id === "#"
                        ) {

                            return;

                        }


                        var target =
                            document.querySelector(
                                id
                            );


                        if (!target) {

                            return;

                        }


                        event.preventDefault();


                        target.scrollIntoView({
                            behavior: "smooth",
                            block: "start"
                        });

                    }
                );

            }
        );


        /* =========================================
           INITIAL
        ========================================== */

        filterServices();

    }


    /* =========================================
       LOAD
    ========================================== */

    if (
        document.readyState === "loading"
    ) {

        document.addEventListener(
            "DOMContentLoaded",
            spsxServicesInit
        );

    } else {

        spsxServicesInit();

    }


    window.addEventListener(
        "load",
        function () {

            window.setTimeout(
                spsxServicesInit,
                300
            );

        }
    );


})();
</script>/* End custom CSS */