/* Generated theme — light */
:root {
  --primary-100: #FCF7F7;
  --primary-200: #F7E8E8;
  --primary-300: #EFD1D2;
  --primary-400: #F49091;
  --primary-500: #EE4E50;
  --primary-600: #EA1518;
  --primary-700: #BA1214;
  --primary-800: #8B0E0F;
  --primary-900: #560607;
  --secondary-100: #FBF9F9;
  --secondary-200: #F3ECEC;
  --secondary-300: #E8D9D9;
  --secondary-400: #DAAAAA;
  --secondary-500: #C3797A;
  --secondary-600: #B04F50;
  --secondary-700: #8D3F40;
  --secondary-800: #6A2F2F;
  --secondary-900: #421A1A;
  --tertiary-100: #FCFCF8;
  --tertiary-200: #F6F6E9;
  --tertiary-300: #EDEDD4;
  --tertiary-400: #ECEB98;
  --tertiary-500: #E1DF5B;
  --tertiary-600: #D7D528;
  --tertiary-700: #ACAA20;
  --tertiary-800: #818018;
  --tertiary-900: #504F0C;
  --neutral-100: #FAFAFA;
  --neutral-200: #F0EFEF;
  --neutral-300: #E2DFDF;
  --neutral-400: #C6BEBE;
  --neutral-500: #A49898;
  --neutral-600: #887777;
  --neutral-700: #6D5F5F;
  --neutral-800: #514848;
  --neutral-900: #322A2A;
  --error-100: #FCF8F8;
  --error-200: #F6EAE9;
  --error-300: #EDD5D3;
  --error-400: #ED9B96;
  --error-500: #E36059;
  --error-600: #DA2E25;
  --error-700: #AF251D;
  --error-800: #831C16;
  --error-900: #510E0B;
  --bs-primary: #EE4E50;
  --bs-primary-rgb: 238, 78, 80;
  --bs-secondary: #C3797A;
  --bs-secondary-rgb: 195, 121, 122;
  --bs-success: #19876B;
  --bs-success-rgb: 25, 135, 107;
  --bs-info: #0DB0F0;
  --bs-info-rgb: 13, 176, 240;
  --bs-warning: #FFE807;
  --bs-warning-rgb: 255, 232, 7;
  --bs-danger: #E36059;
  --bs-danger-rgb: 227, 96, 89;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  --bs-link-color: #EE4E50;
  --bs-link-color-rgb: 238, 78, 80;
  --bs-link-hover-color: #BA1214;
  --bs-link-decoration: none;
}

/* Core overrides mapping to CSS variables */
.btn-primary { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: white !important; }
.btn-primary:hover { background-color: var(--primary-700) !important; border-color: var(--primary-700) !important; }
.btn-secondary { background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; color: white !important; }
.btn-secondary:hover { background-color: var(--secondary-700) !important; border-color: var(--secondary-700) !important; }
.btn-success { background-color: var(--bs-success) !important; border-color: var(--bs-success) !important; }
.btn-info { background-color: var(--bs-info) !important; border-color: var(--bs-info) !important; }
.btn-warning { background-color: var(--bs-warning) !important; border-color: var(--bs-warning) !important; }
.btn-danger { background-color: var(--bs-danger) !important; border-color: var(--bs-danger) !important; }

.btn-outline-primary { color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; background-color: transparent !important; }
.btn-outline-primary:hover { color: white !important; background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.btn-outline-secondary { color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; background-color: transparent !important; }
.btn-outline-secondary:hover { color: white !important; background-color: var(--bs-secondary) !important; border-color: var(--bs-secondary) !important; }

.bg-primary { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-success { background-color: var(--bs-success) !important; }
.bg-info { background-color: var(--bs-info) !important; }
.bg-warning { background-color: var(--bs-warning) !important; }
.bg-danger { background-color: var(--bs-danger) !important; }

.bg-primary-subtle { background-color: var(--primary-100) !important; color: var(--primary-700) !important; }
.bg-secondary-subtle { background-color: var(--secondary-100) !important; color: var(--secondary-700) !important; }

.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success { color: var(--bs-success) !important; }
.text-info { color: var(--bs-info) !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-danger { color: var(--bs-danger) !important; }

.border-primary { border-color: var(--bs-primary) !important; }
.border-primary-subtle { border-color: var(--primary-200) !important; }
.border-secondary { border-color: var(--bs-secondary) !important; }
.border-success { border-color: var(--bs-success) !important; }
.border-info { border-color: var(--bs-info) !important; }
.border-warning { border-color: var(--bs-warning) !important; }
.border-danger { border-color: var(--bs-danger) !important; }

.shadow-primary { box-shadow: 0 0.5rem 1rem rgba(var(--bs-primary-rgb), 0.15) !important; }
.shadow-primary-sm { box-shadow: 0 0.125rem 0.25rem rgba(var(--bs-primary-rgb), 0.075) !important; }

a { color: var(--bs-primary); text-decoration: none !important; }
a:hover { color: var(--primary-700); text-decoration: none !important; }
a:focus { color: var(--primary-700); text-decoration: none !important; }
.btn-link { color: var(--bs-primary); text-decoration: none !important; }
.btn-link:hover { color: var(--primary-700); text-decoration: none !important; }
.btn-link:focus { color: var(--primary-700); text-decoration: none !important; }

.link-primary { color: var(--bs-primary) !important; }
.link-primary:hover { color: var(--primary-700) !important; }
.link-secondary { color: var(--bs-secondary) !important; }
.link-secondary:hover { color: var(--secondary-700) !important; }

.pagination .page-link { color: var(--primary-700); background-color: transparent; border-color: var(--primary-200); }
.pagination .page-link:hover { color: var(--primary-800); background-color: var(--primary-100); border-color: var(--primary-300); }
.pagination .page-item.active .page-link { color: white; background-color: var(--bs-primary); border-color: var(--bs-primary); }
.pagination .page-item.disabled .page-link { color: var(--primary-400); background-color: transparent; border-color: var(--primary-200); }

/* Generated theme — dark */
[data-bs-theme="dark"] {
  --primary-100: #3A0304;
  --primary-200: #570506;
  --primary-300: #7A0B0C;
  --primary-400: #A90E10;
  --primary-500: #E21315;
  --primary-600: #EF4345;
  --primary-700: #F37274;
  --primary-800: #F7A1A2;
  --primary-900: #F2D9D9;
  --secondary-100: #2C1111;
  --secondary-200: #421A1A;
  --secondary-300: #5D2828;
  --secondary-400: #803839;
  --secondary-500: #AA4B4C;
  --secondary-600: #C17172;
  --secondary-700: #D19495;
  --secondary-800: #E1B7B8;
  --secondary-900: #ECDFDF;
  --tertiary-100: #363507;
  --tertiary-200: #51500B;
  --tertiary-300: #716F14;
  --tertiary-400: #9C9A1B;
  --tertiary-500: #D0CE25;
  --tertiary-600: #E1DE51;
  --tertiary-700: #E8E77D;
  --tertiary-800: #F0EFA8;
  --tertiary-900: #F0F0DB;
  --neutral-100: #211C1C;
  --neutral-200: #322A2A;
  --neutral-300: #463E3E;
  --neutral-400: #615656;
  --neutral-500: #827373;
  --neutral-600: #9F9393;
  --neutral-700: #B7AEAE;
  --neutral-800: #CFC9C9;
  --neutral-900: #E6E5E5;
  --error-100: #360A07;
  --error-200: #510E0B;
  --error-300: #721813;
  --error-400: #9D211A;
  --error-500: #D22D23;
  --error-600: #E25850;
  --error-700: #E9827C;
  --error-800: #F0ACA8;
  --error-900: #F0DCDB;
  --bs-primary: #E21315;
  --bs-primary-rgb: 226, 19, 21;
  --bs-secondary: #AA4B4C;
  --bs-secondary-rgb: 170, 75, 76;
  --bs-success: #19876B;
  --bs-success-rgb: 25, 135, 107;
  --bs-info: #0DB0F0;
  --bs-info-rgb: 13, 176, 240;
  --bs-warning: #FFE807;
  --bs-warning-rgb: 255, 232, 7;
  --bs-danger: #D22D23;
  --bs-danger-rgb: 210, 45, 35;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  --bs-link-color: #E21315;
  --bs-link-color-rgb: 226, 19, 21;
  --bs-link-hover-color: #A90E10;
}


/* Dynamic Font Face - Only Selected Font */
@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/vazir/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/vazir/Vazirmatn-Bold.woff2') format('woff2');
}

/* Dynamic Font Family */
body { font-family: 'Vazir', sans-serif !important; }


/* Custom Global CSS */

 /* --- 1. تنظیمات اصلی و متغیرها (یکپارچه شده) --- */
        :root {
            --primary: #ea3a3c;
            --secondary: #636363;
            --dark: #1a1a1a;
            --light: #FCFCFC; /* رنگ پس‌زمینه اصلی */
            --border: #e0e0e0;
            --shadow: 0 10px 30px rgba(0,0,0,0.08);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--light);
            color: var(--secondary);
            line-height: 1.8;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 10px;
        }

        /* --- 2. تایپوگرافی و المان‌های عمومی --- */
        h1, h2, h3, h4 {
            color: var(--dark);
            font-weight: 800;
            margin-bottom: 12px;
        }

        p {
            color: var(--secondary);
            margin-bottom: 14px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 50px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .section-header h2 {
            font-size: 2.2rem;
            position: relative;
            display: inline-block;
            padding-bottom: 12px;
        }

        .section-header h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 50%;
            transform: translateX(50%);
            width: 60px;
            height: 4px;
            background-color: var(--primary);
            border-radius: 2px;
        }

        .btn {
            display: inline-block;
            padding: 12px 35px;
            border-radius: 4px;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .btn-primary {
            background-color: var(--primary);
            color: var(--light);
        }

        .btn-primary:hover {
            background-color: #d12e30;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(234, 58, 60, 0.3);
        }

        section {
            padding: 55px 0;
        }

        /* --- 3. Hero Section (طراحی جدید با تصویر عمودی) --- */
        .hero-modern {
            position: relative;
            height: 100vh;
            width: 100%;
            display: flex;
            background-color: var(--light);
            overflow: hidden;
        }

        /* ستون تصویر */
        .hero-image-side {
            position: absolute;
            top: 0;
            left: 0;
            width: 50%; /* نیمی از صفحه */
            height: 100%;
            z-index: 1;
        }

        .hero-image-side img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            filter: grayscale(100%) contrast(110%); /* سیاه و سفید صنعتی */
        }

        /* لایه گرادینت روی عکس */
        .hero-image-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(90deg, rgba(252,252,252,0) 0%, rgba(252,252,252,0.1) 50%, rgba(252, 252, 252, 1) 100%);
            z-index: 2;
        }

        /* ستون متن */
        .hero-content-side {
            position: relative;
            z-index: 10;
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 8%;
            background: var(--light);
        }

        .tech-lines {
            position: absolute;
            top: 50px;
            left: 8%;
            width: 200px;
            height: 1px;
            background: #ddd;
            z-index: 1;
        }
        .tech-lines::after {
            content: 'SYS.ID: 884-X';
            position: absolute;
            left: 0;
            top: -25px;
            font-size: 0.7rem;
            color: var(--secondary);
            font-family: monospace;
            letter-spacing: 2px;
        }

        .hero-tag {
            display: inline-block;
            background: rgba(234, 58, 60, 0.1);
            color: var(--primary);
            padding: 8px 16px;
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 20px;
            border-radius: 4px;
            width: fit-content;
            animation: fadeInDown 0.8s ease-out;
        }

        .hero-title {
            font-size: 3rem;
            line-height: 1.1;
            font-weight: 900;
            color: var(--dark);
            margin-bottom: 25px;
            animation: fadeInUp 1s ease-out;
        }

        .hero-title span {
            color: var(--primary);
        }

        .hero-desc {
            font-size: 1.2rem;
            color: var(--secondary);
            max-width: 500px;
            margin-bottom: 40px;
            border-right: 3px solid var(--primary);
            padding-right: 20px;
            animation: fadeInUp 1.2s ease-out;
        }

       .hero-actions {
            display: flex;
            gap: 15px; /* فاصله استاندارد بین دکمه‌ها */
            animation: fadeInUp 1.4s ease-out;
        }

.btn-industrial {
            padding: 12px 30px; /* اندازه استاندارد و متناسب */
            font-size: 0.95rem; /* اندازه فونت خوانا */
            font-weight: 600; /* وزن فونت متوسط */
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            border-radius: 4px; /* گوشه‌های بسیار ملایم برای ظرافت */
            letter-spacing: 0.5px; /* فاصله حروف استاندارد */
        }

        .btn-primary-fill {
            background-color: var(--primary);
            color: white;
            /* حذف clip-path برای ظرافت بیشتر */
        }

        .btn-primary-fill:hover {
            background-color: #d12e30;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(234, 58, 60, 0.2); /* سایه نرم‌تر */
        }

        .btn-outline-dark {
            background: transparent;
            color: var(--dark);
            border: 1px solid var(--dark); /* خط نازک‌تر و ظریف‌تر */
        }

        .btn-outline-dark:hover {
            background: var(--dark);
            color: white;
            transform: translateY(-2px);
        }

        /* انیمیشن‌ها */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- 4. Features (Cards) --- */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .feature-card {
            background: var(--light);
            padding: 40px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            transition: 0.3s;
            border-top: 4px solid transparent;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            border-top-color: var(--primary);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: rgba(234, 58, 60, 0.1);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 1.5rem;
            margin-bottom: 25px;
        }

        /* --- 5. About (Split) --- */
        .about-section {
            background-color: var(--light);
        }

        .about-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .about-img {
            position: relative;
        }

        .about-img img {
            width: 100%;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .about-img::before {
            content: '';
            position: absolute;
            bottom: -20px;
            left: -20px;
            width: 100px;
            height: 100px;
            border-bottom: 5px solid var(--primary);
            border-left: 5px solid var(--primary);
            z-index: -1;
        }

        .check-list li {
            list-style: none;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .check-list li::before {
            content: '✔';
            color: var(--primary);
            margin-left: 10px;
            font-weight: bold;
        }

        /* --- 6. Process (Steps) --- */
        .process-section {
            background-color: var(--light);
        }

        .process-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

        .process-steps::before {
            content: '';
            position: absolute;
            top: 30px;
            right: 50px;
            left: 50px;
            height: 2px;
            background: #ddd;
            z-index: 0;
        }

        .step-item {
            text-align: center;
            position: relative;
            z-index: 1;
            flex: 1;
            padding: 0 12px;
        }

        .step-number {
            width: 60px;
            height: 60px;
            background: var(--light);
            border: 2px solid var(--primary);
            color: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0 auto 20px;
            transition: 0.3s;
        }

        .step-item:hover .step-number {
            background: var(--primary);
            color: var(--light);
        }

        /* --- 7. CTA --- */
       .cta-section {
            background-color: var(--light); /* رنگ پس‌زمینه اصلی سایت */
            color: var(--secondary);
            text-align: center;
            border-top: 1px solid var(--border); /* خط جداکننده ظریف */
        }

        .cta-box {
            background: var(--white);
            padding: 60px 40px;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* سایه بسیار نرم و مدرن */
            border: 1px solid var(--border);
            max-width: 800px;
            margin: 0 auto;
        }

.cta-content h2 {
            color: var(--dark); /* رنگ تیتر تیره */
            font-size: 2.2rem;
        }

        .cta-content p {
            color: var(--secondary);
            font-size: 1.1rem;
            margin-bottom: 30px;
        }
/* استایل دکمه در این سکشن */
        .cta-section .btn {
            padding: 15px 40px;
            font-size: 1rem;
            border-radius: 4px;
        }

      @media (max-width: 992px) {
            /* تغییر ساختار به ستونی برای موبایل */
            .hero-modern {
                flex-direction: column-reverse; /* عکس برود پایین، متن بماند بالا */
                height: auto; /* ارتفاع خودکار شود */
                min-height: 100vh; /* حداقل ارتفاع صفحه */
            }

            /* تنظیم تصویر برای موبایل */
            .hero-image-side {
                width: 100%; /* تمام عرض */
                height: 45vh; /* ارتفاع مناسب (نصف صفحه) */
                position: relative; /* دیگر absolute نباشد تا در جریان صفحه باشد */
                top: auto;
                bottom: auto;
                left: auto;
            }

            /* تنظیم لایه گرادینت روی عکس در موبایل */
            .hero-image-overlay {
                background: linear-gradient(180deg, rgba(252,252,252,1) 0%, rgba(252,252,252,0.8) 50%, rgba(0,0,0,0.6) 100%);
            }

            /* تنظیم محتوای متنی برای موبایل */
            .hero-content-side {
                width: 100%;
                height: auto;
                padding: 40px 20px;
                text-align: center; /* متن‌ها وسط‌چین شوند */
            }

            /* تنظیم دکمه‌ها برای موبایل */
            .hero-actions {
                flex-direction: column; /* دکمه‌ها زیر هم قرار بگیرند */
                align-items: center;
                width: 100%;
            }
            
            .btn-industrial {
                width: 100%; /* دکمه‌ها تمام عرض شوند */
                justify-content: center;
            }

            /* تنظیم اندازه فونت‌ها */
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-desc {
                border-right: none; /* خط کنار متن برداشته شود */
                border-bottom: 3px solid var(--primary);
                padding-bottom: 10px;
                padding-right: 0;
                margin: 0 auto 30px auto; /* وسط چین کردن پاراگراف */
            }

            /* سایر سکشن‌ها */
            .about-wrapper { grid-template-columns: 1fr; }
            .process-steps { flex-direction: column; gap: 30px; }
            .process-steps::before { display: none; }
        }