.elementor-637 .elementor-element.elementor-element-b0cffec{--display:flex;--padding-top:060px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-637 .elementor-element.elementor-element-c2a6532{padding:0px 100px 0px 100px;}@media(max-width:767px){.elementor-637 .elementor-element.elementor-element-c2a6532{padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-c2a6532 *//* ==========================================================================
   کد اختصاصی برای ریسپانسیو و بهینه‌سازی نمایش در تبلت و موبایل
   ========================================================================== */

@media (max-width: 1024px) {
    /* بهینه‌سازی چیدمان کلی در تبلت */
    .ss-about-wrapper .ss-grid-5 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
        padding: 2rem 1.5rem !important;
    }
    
    .ss-about-wrapper .ss-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .ss-about-wrapper .ss-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ss-about-wrapper .ss-title {
        font-size: 2rem !important;
    }
}

@media (max-width: 768px) {
    /* تنظیمات اختصاصی موبایل */
    .ss-about-wrapper .ss-section {
        padding: 50px 0 !important; /* کاهش فاصله‌های عمقی در موبایل */
    }

    /* ۱. ریسپانسیو کردن بخش «اعداد پشت موفقیت ما» */
    .ss-about-wrapper .ss-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important; /* تبدیل به حالت ۲ ستونه در موبایل */
        gap: 2rem 1rem !important;
        padding: 2rem 1rem !important;
    }

    /* المان آخر در بخش ۵ ستونه (وسط‌چین شدن در صورت فرد بودن) */
    .ss-about-wrapper .ss-grid-5 > div:last-child {
        grid-column: span 2;
        border-top: 1px solid var(--ss-border);
        padding-top: 1.5rem;
    }

    .ss-about-wrapper .ss-big-number {
        font-size: 2.5rem !important; /* کمی کوچک‌تر شدن اعداد بزرگ در موبایل */
    }

    /* ۲. ریسپانسیو کردن بخش «فرآیند کار ما» */
    .ss-about-wrapper .ss-grid-3 {
        grid-template-columns: 1fr !important; /* تک ستونه شدن مراحل فرآیند */
        gap: 1.5rem !important;
    }

    .ss-about-wrapper .ss-process-node {
        padding: 2rem 1.5rem !important;
    }

    .ss-about-wrapper .ss-process-step {
        font-size: 2.5rem !important;
        top: 0.5rem !important;
        left: 1rem !important;
    }

    /* ۳. اصلاح بقیه گریدها برای نمایش موبایل */
    .ss-about-wrapper .ss-grid-4,
    .ss-about-wrapper .ss-grid-2 {
        grid-template-columns: 1fr !important; /* تک ستونه شدن */
        gap: 1.5rem !important;
    }

    /* اصلاح بخش تیترها در موبایل */
    .ss-about-wrapper .ss-title {
        font-size: 1.65rem !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.4 !important;
    }

    /* کارت‌های شیشه‌ای در موبایل */
    .ss-about-wrapper .ss-glass-card {
        padding: 1.75rem 1.25rem !important;
    }
}

@media (max-width: 480px) {
    /* بهینه‌سازی برای موبایل‌های بسیار کوچک */
    .ss-about-wrapper .ss-grid-5 {
        grid-template-columns: 1fr !important; /* تک ستونه شدن آمار در صفحه خیلی کوچک */
        gap: 1.5rem !important;
    }
    
    .ss-about-wrapper .ss-grid-5 > div:last-child {
        grid-column: span 1;
        border-top: none;
        padding-top: 0;
    }
    
    .ss-about-wrapper .ss-grid-5 > div:not(:last-child) {
        border-bottom: 1px solid var(--ss-border);
        padding-bottom: 1.5rem;
    }
}


/* ==========================================================================
   اصلاح چیدمان و بالا آمدن ایندکس (اعداد) بخش فرآیند کار ما
   ========================================================================== */

/* ۱. آماده‌سازی کارت برای چیدمان عمودی و منظم */
.ss-process-node {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 2.5rem !important; /* ایجاد فضای کافی از بالا */
    position: relative !important;
}

/* ۲. بالا آوردن لایه و اولویت نمایش عدد */
.ss-process-step {
    position: relative !important; /* خارج شدن از حالت مطلق پس‌زمینه */
    top: auto !important;
    left: auto !important;
    display: inline-block !important;
    font-size: 2.2rem !important; /* اندازه بهینه و استاندارد برای خوانایی */
    font-weight: 900 !important;
    color: #d9d9d9 !important; /* رنگ درخواستی شما */
    opacity: 1 !important; /* وضوح کامل (حذف حالت شیشه‌ای/محو پس‌زمینه) */
    margin-bottom: 1rem !important; /* ایجاد فاصله مناسب با عنوان زیر خود */
    z-index: 10 !important; /* تضمین بالاتر قرار گرفتن لایه عدد */
    line-height: 1 !important;
}

/* ۳. هماهنگی متن‌های زیر عدد */
.ss-process-node h3 {
    font-size: 1.35rem !important;
    margin-bottom: 0.75rem !important;
    margin-top: 0 !important;
}

.ss-process-node p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
}/* End custom CSS */